@purple/phoenix-components - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

dist/bundle.cjs.js

@@ -11,2 +11,3 @@ 'use strict';
 var styled = _interopDefault(require('styled-components'));
+var io = require('react-icons/io');
 var Select = require('react-select');
@@ -55,60 +56,50 @@ var Select__default = _interopDefault(Select);
 
-var getBorder = function (error, border) {
+var getBorder = function (error, success) {
     if (error) {
-        return "1px solid red";
+        return '1px solid rgba(228, 23, 23, 0.75)';
     }
-    if (border) {
-        return "1px solid #dedede";
+    if (success) {
+        return '1px solid rgba(23, 150, 23, 0.7)';
     }
-    return "none";
+    return '1px solid #dedede';
 };
-var getBottomBorder = function (error, background, bordered) {
-    if (background) {
-        return "none";
+var getColor = function (error, success) {
+    if (error) {
+        return 'rgba(228, 23, 23, 0.75)';
     }
-    if (bordered) {
-        return "none";
+    if (success) {
+        return 'rgba(23, 150, 23, 0.7)';
     }
-    if (error) {
-        return "red";
-    }
-    return "black";
+    return 'rgba(0, 0, 0, 0.6)';
 };
-var ContentRight = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 15px;\n    top: 23px;\n"], ["\n    position: absolute;\n    right: 15px;\n    top: 23px;\n"])));
-var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: 'Roboto', sans-serif;\n"], ["\n    font-family: 'Roboto', sans-serif;\n"])));
-var StyledFloatingLabel = styled(FloatingLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ", ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"], ["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ", ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"])), function (_a) {
+var ContentRight = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"], ["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"])));
+var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: 'Roboto', sans-serif;\n"], ["\n  font-family: 'Roboto', sans-serif;\n"])));
+var CheckmarkWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  right: 10px;\n  top: 15px;\n"], ["\n  position: absolute;\n  right: 10px;\n  top: 15px;\n"])));
+var StyledFloatingLabel = styled(FloatingLabel)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ", ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"], ["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ",
+    ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ",
+    ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"])), function (_a) {
     var background = _a.background;
-    return background ? background : "transparent";
+    return background ? background : 'transparent';
 }, function (_a) {
     var error = _a.error;
-    return error ? "red" : "#562878";
+    return error ? 'rgba(228, 23, 23, 0.75)' : '#562878';
 }, function (_a) {
-    var error = _a.error;
-    return error ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.6)";
+    var error = _a.error, success = _a.success;
+    return getColor(error, success);
 });
-var Error = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
-var InputWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  ", "{\n    input {\n      border-bottom: 1px solid ", ";\n    }\n  }\n"], ["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  ", "{\n    input {\n      border-bottom: 1px solid ", ";\n    }\n  }\n"])), function (_a) {
-    var bordered = _a.bordered;
-    return bordered ? "#fff" : "transparent";
-}, function (_a) {
-    var bordered = _a.bordered;
-    return bordered ? "8px 10px 4px" : "";
-}, function (_a) {
-    var bordered = _a.bordered, error = _a.error;
-    return getBorder(error, bordered);
-}, function (_a) {
-    var bordered = _a.bordered;
-    return bordered ? "3px" : "0px";
-}, StyledFloatingLabel, function (_a) {
-    var error = _a.error, background = _a.background, bordered = _a.bordered;
-    return getBottomBorder(error, background, bordered);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var Error = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
+var InputWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  background: '#fff';\n  padding: 8px 10px 4px;\n  border: ", ";\n  border-radius: 3px;\n\n  ", " {\n  }\n"], ["\n  position: relative;\n  background: '#fff';\n  padding: 8px 10px 4px;\n  border: ", ";\n  border-radius: 3px;\n\n  ", " {\n  }\n"])), function (_a) {
+    var error = _a.error, success = _a.success;
+    return getBorder(error, success);
+}, StyledFloatingLabel);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 
 var Input = function (_a) {
-    var onFocus = _a.onFocus, onChange = _a.onChange, onBlur = _a.onBlur, onClick = _a.onClick, value = _a.value, error = _a.error, label = _a.label, type = _a.type, name = _a.name, background = _a.background, withBorder = _a.withBorder, contentRight = _a.contentRight, disableErrorText = _a.disableErrorText, pattern = _a.pattern, min = _a.min;
+    var onFocus = _a.onFocus, onChange = _a.onChange, onBlur = _a.onBlur, onClick = _a.onClick, value = _a.value, error = _a.error, label = _a.label, type = _a.type, name = _a.name, background = _a.background, contentRight = _a.contentRight, disableErrorText = _a.disableErrorText, pattern = _a.pattern, min = _a.min, success = _a.success;
     return (React.createElement(Wrapper, null,
-        React.createElement(InputWrap, { background: background, bordered: withBorder, error: error },
-            React.createElement(StyledFloatingLabel, { id: name, name: name, placeholder: label, error: 11, type: type || 'text', onFocus: onFocus, onBlur: onBlur, onChange: onChange, onClick: onClick, value: value, min: min, pattern: pattern }),
-            contentRight && React.createElement(ContentRight, null, contentRight)),
+        React.createElement(InputWrap, { background: background, error: error, success: success },
+            React.createElement(StyledFloatingLabel, { id: name, name: name, placeholder: label, error: error, type: type || 'text', success: success, onFocus: onFocus, onBlur: onBlur, onChange: onChange, onClick: onClick, value: value, min: min, pattern: pattern }),
+            contentRight && React.createElement(ContentRight, null, contentRight),
+            !contentRight && success && (React.createElement(CheckmarkWrap, null,
+                React.createElement(io.IoIosCheckmark, { color: "rgba(23, 150, 23, 0.7)", size: 30 })))),
         error && !disableErrorText && React.createElement(Error, null, error)));
@@ -142,4 +133,4 @@ };
 var StyledIndicatorContainer = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
-var Error$1 = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
-var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6;
+var Error$1 = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
+var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
 
@@ -198,6 +189,6 @@ var SelectBox = function (props) {
 var CardImage = styled.img(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  max-width: 40px;\n  margin-bottom: 10px;\n  @media (max-width: 768px) {\n    margin: 0 10px 0 0;\n    max-width: 30px;\n  }\n"], ["\n  max-width: 40px;\n  margin-bottom: 10px;\n  @media (max-width: 768px) {\n    margin: 0 10px 0 0;\n    max-width: 30px;\n  }\n"])));
-var PickerLabel = styled.label(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"], ["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"])));
+var PickerLabel = styled.label(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"], ["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"])));
 var CheckMark = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  background: #562878;\n  border-radius: 2px;\n  top: -15px;\n  right: -15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  background: #562878;\n  border-radius: 2px;\n  top: -15px;\n  right: -15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 var Error$2 = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 5px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 5px;\n"])));
-var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$1, templateObject_7, templateObject_8;
+var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7, templateObject_8;
 
@@ -268,3 +259,3 @@ var SelectPicker = function (_a) {
 };
-var getBottomBorder$1 = function (error, background, withBorder) {
+var getBottomBorder = function (error, background, withBorder) {
     if (background) {
@@ -301,3 +292,3 @@ return "none";
     var error = _a.error, background = _a.background, withBorder = _a.withBorder;
-    return getBottomBorder$1(error, background, withBorder);
+    return getBottomBorder(error, background, withBorder);
 }, function (_a) {
@@ -333,3 +324,3 @@ var background = _a.background;
 var RelativeWrap = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var Wrapper$2 = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"], ["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"])));
+var Wrapper$2 = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"], ["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"])));
 var StyledUpload = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  padding: 20px;\n  text-align: center;\n  width: 100%;\n  outline: none;\n  box-sizing: border-box;\n  transition: background-image 0.3s;\n\n  background-image: repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    );\n\n  background-position: left top, left bottom, left top, right top;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  background-size: 20px 2px, 20px 2px, 2px 20px, 2px 20px;\n"], ["\n  padding: 20px;\n  text-align: center;\n  width: 100%;\n  outline: none;\n  box-sizing: border-box;\n  transition: background-image 0.3s;\n\n  background-image: repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    );\n\n  background-position: left top, left bottom, left top, right top;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  background-size: 20px 2px, 20px 2px, 2px 20px, 2px 20px;\n"])), function (_a) {
@@ -362,3 +353,3 @@ var error = _a.error;
 var Error$4 = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n  text-align: center;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n  text-align: center;\n"])));
-var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
+var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8$1, templateObject_9;
 
@@ -475,5 +466,5 @@ var Upload = function (_a) {
         React__default.createElement(GridInput, null,
-            React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", label: labels.day, value: value.day, onChange: function (e) { return setValue(__assign(__assign({}, value), { day: e.target.value })); }, withBorder: true }),
+            React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", label: labels.day, value: value.day, onChange: function (e) { return setValue(__assign(__assign({}, value), { day: e.target.value })); } }),
             React__default.createElement(SelectBox, { name: "month", label: labels.month, value: value.month, onChange: function (option) { return setValue(__assign(__assign({}, value), { month: option })); }, options: months || DEFAULT_MONTHS }),
-            React__default.createElement(Input, { name: "year", min: "1", type: "number", pattern: "[0-9]*", label: labels.year, withBorder: true, value: value.year, onChange: function (e) { return setValue(__assign(__assign({}, value), { year: e.target.value })); } })),
+            React__default.createElement(Input, { name: "year", min: "1", type: "number", pattern: "[0-9]*", label: labels.year, value: value.year, onChange: function (e) { return setValue(__assign(__assign({}, value), { year: e.target.value })); } })),
         internalError && !error && React__default.createElement(Error$5, null, internalError),
@@ -480,0 +471,0 @@ error && React__default.createElement(Error$5, null, error)));

dist/bundle.esm.js

 import React__default, { createElement, useState, useEffect, useCallback } from 'react';
 import FloatingLabel from 'floating-label-react';
 import styled from 'styled-components';
+import { IoIosCheckmark } from 'react-icons/io';
 import Select, { components } from 'react-select';
@@ -46,60 +47,50 @@ import { FaCheck, FaTrashAlt } from 'react-icons/fa';
 
-var getBorder = function (error, border) {
+var getBorder = function (error, success) {
     if (error) {
-        return "1px solid red";
+        return '1px solid rgba(228, 23, 23, 0.75)';
     }
-    if (border) {
-        return "1px solid #dedede";
+    if (success) {
+        return '1px solid rgba(23, 150, 23, 0.7)';
     }
-    return "none";
+    return '1px solid #dedede';
 };
-var getBottomBorder = function (error, background, bordered) {
-    if (background) {
-        return "none";
+var getColor = function (error, success) {
+    if (error) {
+        return 'rgba(228, 23, 23, 0.75)';
     }
-    if (bordered) {
-        return "none";
+    if (success) {
+        return 'rgba(23, 150, 23, 0.7)';
     }
-    if (error) {
-        return "red";
-    }
-    return "black";
+    return 'rgba(0, 0, 0, 0.6)';
 };
-var ContentRight = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 15px;\n    top: 23px;\n"], ["\n    position: absolute;\n    right: 15px;\n    top: 23px;\n"])));
-var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: 'Roboto', sans-serif;\n"], ["\n    font-family: 'Roboto', sans-serif;\n"])));
-var StyledFloatingLabel = styled(FloatingLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ", ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"], ["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ", ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"])), function (_a) {
+var ContentRight = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"], ["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"])));
+var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: 'Roboto', sans-serif;\n"], ["\n  font-family: 'Roboto', sans-serif;\n"])));
+var CheckmarkWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  right: 10px;\n  top: 15px;\n"], ["\n  position: absolute;\n  right: 10px;\n  top: 15px;\n"])));
+var StyledFloatingLabel = styled(FloatingLabel)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ", ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"], ["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ",
+    ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ",
+    ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"])), function (_a) {
     var background = _a.background;
-    return background ? background : "transparent";
+    return background ? background : 'transparent';
 }, function (_a) {
     var error = _a.error;
-    return error ? "red" : "#562878";
+    return error ? 'rgba(228, 23, 23, 0.75)' : '#562878';
 }, function (_a) {
-    var error = _a.error;
-    return error ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.6)";
+    var error = _a.error, success = _a.success;
+    return getColor(error, success);
 });
-var Error = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
-var InputWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  ", "{\n    input {\n      border-bottom: 1px solid ", ";\n    }\n  }\n"], ["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  ", "{\n    input {\n      border-bottom: 1px solid ", ";\n    }\n  }\n"])), function (_a) {
-    var bordered = _a.bordered;
-    return bordered ? "#fff" : "transparent";
-}, function (_a) {
-    var bordered = _a.bordered;
-    return bordered ? "8px 10px 4px" : "";
-}, function (_a) {
-    var bordered = _a.bordered, error = _a.error;
-    return getBorder(error, bordered);
-}, function (_a) {
-    var bordered = _a.bordered;
-    return bordered ? "3px" : "0px";
-}, StyledFloatingLabel, function (_a) {
-    var error = _a.error, background = _a.background, bordered = _a.bordered;
-    return getBottomBorder(error, background, bordered);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var Error = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
+var InputWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  background: '#fff';\n  padding: 8px 10px 4px;\n  border: ", ";\n  border-radius: 3px;\n\n  ", " {\n  }\n"], ["\n  position: relative;\n  background: '#fff';\n  padding: 8px 10px 4px;\n  border: ", ";\n  border-radius: 3px;\n\n  ", " {\n  }\n"])), function (_a) {
+    var error = _a.error, success = _a.success;
+    return getBorder(error, success);
+}, StyledFloatingLabel);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 
 var Input = function (_a) {
-    var onFocus = _a.onFocus, onChange = _a.onChange, onBlur = _a.onBlur, onClick = _a.onClick, value = _a.value, error = _a.error, label = _a.label, type = _a.type, name = _a.name, background = _a.background, withBorder = _a.withBorder, contentRight = _a.contentRight, disableErrorText = _a.disableErrorText, pattern = _a.pattern, min = _a.min;
+    var onFocus = _a.onFocus, onChange = _a.onChange, onBlur = _a.onBlur, onClick = _a.onClick, value = _a.value, error = _a.error, label = _a.label, type = _a.type, name = _a.name, background = _a.background, contentRight = _a.contentRight, disableErrorText = _a.disableErrorText, pattern = _a.pattern, min = _a.min, success = _a.success;
     return (createElement(Wrapper, null,
-        createElement(InputWrap, { background: background, bordered: withBorder, error: error },
-            createElement(StyledFloatingLabel, { id: name, name: name, placeholder: label, error: 11, type: type || 'text', onFocus: onFocus, onBlur: onBlur, onChange: onChange, onClick: onClick, value: value, min: min, pattern: pattern }),
-            contentRight && createElement(ContentRight, null, contentRight)),
+        createElement(InputWrap, { background: background, error: error, success: success },
+            createElement(StyledFloatingLabel, { id: name, name: name, placeholder: label, error: error, type: type || 'text', success: success, onFocus: onFocus, onBlur: onBlur, onChange: onChange, onClick: onClick, value: value, min: min, pattern: pattern }),
+            contentRight && createElement(ContentRight, null, contentRight),
+            !contentRight && success && (createElement(CheckmarkWrap, null,
+                createElement(IoIosCheckmark, { color: "rgba(23, 150, 23, 0.7)", size: 30 })))),
         error && !disableErrorText && createElement(Error, null, error)));
@@ -133,4 +124,4 @@ };
 var StyledIndicatorContainer = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
-var Error$1 = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
-var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6;
+var Error$1 = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
+var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
 
@@ -189,6 +180,6 @@ var SelectBox = function (props) {
 var CardImage = styled.img(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  max-width: 40px;\n  margin-bottom: 10px;\n  @media (max-width: 768px) {\n    margin: 0 10px 0 0;\n    max-width: 30px;\n  }\n"], ["\n  max-width: 40px;\n  margin-bottom: 10px;\n  @media (max-width: 768px) {\n    margin: 0 10px 0 0;\n    max-width: 30px;\n  }\n"])));
-var PickerLabel = styled.label(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"], ["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"])));
+var PickerLabel = styled.label(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"], ["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"])));
 var CheckMark = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  background: #562878;\n  border-radius: 2px;\n  top: -15px;\n  right: -15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  background: #562878;\n  border-radius: 2px;\n  top: -15px;\n  right: -15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 var Error$2 = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 5px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 5px;\n"])));
-var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$1, templateObject_7, templateObject_8;
+var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7, templateObject_8;
 
@@ -259,3 +250,3 @@ var SelectPicker = function (_a) {
 };
-var getBottomBorder$1 = function (error, background, withBorder) {
+var getBottomBorder = function (error, background, withBorder) {
     if (background) {
@@ -292,3 +283,3 @@ return "none";
     var error = _a.error, background = _a.background, withBorder = _a.withBorder;
-    return getBottomBorder$1(error, background, withBorder);
+    return getBottomBorder(error, background, withBorder);
 }, function (_a) {
@@ -324,3 +315,3 @@ var background = _a.background;
 var RelativeWrap = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var Wrapper$2 = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"], ["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"])));
+var Wrapper$2 = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"], ["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"])));
 var StyledUpload = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  padding: 20px;\n  text-align: center;\n  width: 100%;\n  outline: none;\n  box-sizing: border-box;\n  transition: background-image 0.3s;\n\n  background-image: repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    );\n\n  background-position: left top, left bottom, left top, right top;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  background-size: 20px 2px, 20px 2px, 2px 20px, 2px 20px;\n"], ["\n  padding: 20px;\n  text-align: center;\n  width: 100%;\n  outline: none;\n  box-sizing: border-box;\n  transition: background-image 0.3s;\n\n  background-image: repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    );\n\n  background-position: left top, left bottom, left top, right top;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  background-size: 20px 2px, 20px 2px, 2px 20px, 2px 20px;\n"])), function (_a) {
@@ -353,3 +344,3 @@ var error = _a.error;
 var Error$4 = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n  text-align: center;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n  text-align: center;\n"])));
-var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
+var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8$1, templateObject_9;
 
@@ -466,5 +457,5 @@ var Upload = function (_a) {
         React__default.createElement(GridInput, null,
-            React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", label: labels.day, value: value.day, onChange: function (e) { return setValue(__assign(__assign({}, value), { day: e.target.value })); }, withBorder: true }),
+            React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", label: labels.day, value: value.day, onChange: function (e) { return setValue(__assign(__assign({}, value), { day: e.target.value })); } }),
             React__default.createElement(SelectBox, { name: "month", label: labels.month, value: value.month, onChange: function (option) { return setValue(__assign(__assign({}, value), { month: option })); }, options: months || DEFAULT_MONTHS }),
-            React__default.createElement(Input, { name: "year", min: "1", type: "number", pattern: "[0-9]*", label: labels.year, withBorder: true, value: value.year, onChange: function (e) { return setValue(__assign(__assign({}, value), { year: e.target.value })); } })),
+            React__default.createElement(Input, { name: "year", min: "1", type: "number", pattern: "[0-9]*", label: labels.year, value: value.year, onChange: function (e) { return setValue(__assign(__assign({}, value), { year: e.target.value })); } })),
         internalError && !error && React__default.createElement(Error$5, null, internalError),
@@ -471,0 +462,0 @@ error && React__default.createElement(Error$5, null, error)));

dist/bundle.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('floating-label-react'), require('styled-components'), require('react-select'), require('react-icons/fa'), require('react-dropzone')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', 'floating-label-react', 'styled-components', 'react-select', 'react-icons/fa', 'react-dropzone'], factory) :
-    (global = global || self, factory(global.PurpleComponents = {}, global.React, global.FloatingLabel, global.styled, global.Select, global.fa, global.reactDropzone));
-}(this, function (exports, React, FloatingLabel, styled, Select, fa, reactDropzone) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('floating-label-react'), require('styled-components'), require('react-icons/io'), require('react-select'), require('react-icons/fa'), require('react-dropzone')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', 'floating-label-react', 'styled-components', 'react-icons/io', 'react-select', 'react-icons/fa', 'react-dropzone'], factory) :
+    (global = global || self, factory(global.PurpleComponents = {}, global.React, global.FloatingLabel, global.styled, global.io, global.Select, global.fa, global.reactDropzone));
+}(this, function (exports, React, FloatingLabel, styled, io, Select, fa, reactDropzone) { 'use strict';
 
@@ -50,60 +50,50 @@ var React__default = 'default' in React ? React['default'] : React;
 
-    var getBorder = function (error, border) {
+    var getBorder = function (error, success) {
         if (error) {
-            return "1px solid red";
+            return '1px solid rgba(228, 23, 23, 0.75)';
         }
-        if (border) {
-            return "1px solid #dedede";
+        if (success) {
+            return '1px solid rgba(23, 150, 23, 0.7)';
         }
-        return "none";
+        return '1px solid #dedede';
     };
-    var getBottomBorder = function (error, background, bordered) {
-        if (background) {
-            return "none";
+    var getColor = function (error, success) {
+        if (error) {
+            return 'rgba(228, 23, 23, 0.75)';
         }
-        if (bordered) {
-            return "none";
+        if (success) {
+            return 'rgba(23, 150, 23, 0.7)';
         }
-        if (error) {
-            return "red";
-        }
-        return "black";
+        return 'rgba(0, 0, 0, 0.6)';
     };
-    var ContentRight = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    right: 15px;\n    top: 23px;\n"], ["\n    position: absolute;\n    right: 15px;\n    top: 23px;\n"])));
-    var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: 'Roboto', sans-serif;\n"], ["\n    font-family: 'Roboto', sans-serif;\n"])));
-    var StyledFloatingLabel = styled(FloatingLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ", ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"], ["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ", ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"])), function (_a) {
+    var ContentRight = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"], ["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"])));
+    var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: 'Roboto', sans-serif;\n"], ["\n  font-family: 'Roboto', sans-serif;\n"])));
+    var CheckmarkWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  right: 10px;\n  top: 15px;\n"], ["\n  position: absolute;\n  right: 10px;\n  top: 15px;\n"])));
+    var StyledFloatingLabel = styled(FloatingLabel)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ", ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"], ["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 5px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  input {\n    width: 100%;\n    border: none;\n    background: ",
+        ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  input:focus {\n    border-color: ",
+        ";\n  }\n\n  input:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  input:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"])), function (_a) {
         var background = _a.background;
-        return background ? background : "transparent";
+        return background ? background : 'transparent';
     }, function (_a) {
         var error = _a.error;
-        return error ? "red" : "#562878";
+        return error ? 'rgba(228, 23, 23, 0.75)' : '#562878';
     }, function (_a) {
-        var error = _a.error;
-        return error ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.6)";
+        var error = _a.error, success = _a.success;
+        return getColor(error, success);
     });
-    var Error = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
-    var InputWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  ", "{\n    input {\n      border-bottom: 1px solid ", ";\n    }\n  }\n"], ["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  ", "{\n    input {\n      border-bottom: 1px solid ", ";\n    }\n  }\n"])), function (_a) {
-        var bordered = _a.bordered;
-        return bordered ? "#fff" : "transparent";
-    }, function (_a) {
-        var bordered = _a.bordered;
-        return bordered ? "8px 10px 4px" : "";
-    }, function (_a) {
-        var bordered = _a.bordered, error = _a.error;
-        return getBorder(error, bordered);
-    }, function (_a) {
-        var bordered = _a.bordered;
-        return bordered ? "3px" : "0px";
-    }, StyledFloatingLabel, function (_a) {
-        var error = _a.error, background = _a.background, bordered = _a.bordered;
-        return getBottomBorder(error, background, bordered);
-    });
-    var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+    var Error = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
+    var InputWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  background: '#fff';\n  padding: 8px 10px 4px;\n  border: ", ";\n  border-radius: 3px;\n\n  ", " {\n  }\n"], ["\n  position: relative;\n  background: '#fff';\n  padding: 8px 10px 4px;\n  border: ", ";\n  border-radius: 3px;\n\n  ", " {\n  }\n"])), function (_a) {
+        var error = _a.error, success = _a.success;
+        return getBorder(error, success);
+    }, StyledFloatingLabel);
+    var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 
     var Input = function (_a) {
-        var onFocus = _a.onFocus, onChange = _a.onChange, onBlur = _a.onBlur, onClick = _a.onClick, value = _a.value, error = _a.error, label = _a.label, type = _a.type, name = _a.name, background = _a.background, withBorder = _a.withBorder, contentRight = _a.contentRight, disableErrorText = _a.disableErrorText, pattern = _a.pattern, min = _a.min;
+        var onFocus = _a.onFocus, onChange = _a.onChange, onBlur = _a.onBlur, onClick = _a.onClick, value = _a.value, error = _a.error, label = _a.label, type = _a.type, name = _a.name, background = _a.background, contentRight = _a.contentRight, disableErrorText = _a.disableErrorText, pattern = _a.pattern, min = _a.min, success = _a.success;
         return (React.createElement(Wrapper, null,
-            React.createElement(InputWrap, { background: background, bordered: withBorder, error: error },
-                React.createElement(StyledFloatingLabel, { id: name, name: name, placeholder: label, error: 11, type: type || 'text', onFocus: onFocus, onBlur: onBlur, onChange: onChange, onClick: onClick, value: value, min: min, pattern: pattern }),
-                contentRight && React.createElement(ContentRight, null, contentRight)),
+            React.createElement(InputWrap, { background: background, error: error, success: success },
+                React.createElement(StyledFloatingLabel, { id: name, name: name, placeholder: label, error: error, type: type || 'text', success: success, onFocus: onFocus, onBlur: onBlur, onChange: onChange, onClick: onClick, value: value, min: min, pattern: pattern }),
+                contentRight && React.createElement(ContentRight, null, contentRight),
+                !contentRight && success && (React.createElement(CheckmarkWrap, null,
+                    React.createElement(io.IoIosCheckmark, { color: "rgba(23, 150, 23, 0.7)", size: 30 })))),
             error && !disableErrorText && React.createElement(Error, null, error)));
@@ -137,4 +127,4 @@ };
     var StyledIndicatorContainer = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
-    var Error$1 = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
-    var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6;
+    var Error$1 = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
+    var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
 
@@ -193,6 +183,6 @@ var SelectBox = function (props) {
     var CardImage = styled.img(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  max-width: 40px;\n  margin-bottom: 10px;\n  @media (max-width: 768px) {\n    margin: 0 10px 0 0;\n    max-width: 30px;\n  }\n"], ["\n  max-width: 40px;\n  margin-bottom: 10px;\n  @media (max-width: 768px) {\n    margin: 0 10px 0 0;\n    max-width: 30px;\n  }\n"])));
-    var PickerLabel = styled.label(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"], ["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"])));
+    var PickerLabel = styled.label(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"], ["\n  display: block;\n  margin: 0 auto 30px;\n  text-align: center;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.7);\n"])));
     var CheckMark = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  background: #562878;\n  border-radius: 2px;\n  top: -15px;\n  right: -15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  width: 32px;\n  height: 32px;\n  background: #562878;\n  border-radius: 2px;\n  top: -15px;\n  right: -15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
     var Error$2 = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 5px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 5px;\n"])));
-    var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$1, templateObject_7, templateObject_8;
+    var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7, templateObject_8;
 
@@ -263,3 +253,3 @@ var SelectPicker = function (_a) {
     };
-    var getBottomBorder$1 = function (error, background, withBorder) {
+    var getBottomBorder = function (error, background, withBorder) {
         if (background) {
@@ -296,3 +286,3 @@ return "none";
         var error = _a.error, background = _a.background, withBorder = _a.withBorder;
-        return getBottomBorder$1(error, background, withBorder);
+        return getBottomBorder(error, background, withBorder);
     }, function (_a) {
@@ -328,3 +318,3 @@ var background = _a.background;
     var RelativeWrap = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-    var Wrapper$2 = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"], ["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"])));
+    var Wrapper$2 = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"], ["\n  max-width: 600px;\n  width: 100%;\n  font-family: 'Roboto', sans-serif;\n"])));
     var StyledUpload = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  padding: 20px;\n  text-align: center;\n  width: 100%;\n  outline: none;\n  box-sizing: border-box;\n  transition: background-image 0.3s;\n\n  background-image: repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    );\n\n  background-position: left top, left bottom, left top, right top;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  background-size: 20px 2px, 20px 2px, 2px 20px, 2px 20px;\n"], ["\n  padding: 20px;\n  text-align: center;\n  width: 100%;\n  outline: none;\n  box-sizing: border-box;\n  transition: background-image 0.3s;\n\n  background-image: repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    ),\n    repeating-linear-gradient(\n      to bottom,\n      ", " 0%,\n      ", " 50%,\n      transparent 50%,\n      transparent 100%\n    );\n\n  background-position: left top, left bottom, left top, right top;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  background-size: 20px 2px, 20px 2px, 2px 20px, 2px 20px;\n"])), function (_a) {
@@ -357,3 +347,3 @@ var error = _a.error;
     var Error$4 = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n  text-align: center;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n  text-align: center;\n"])));
-    var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
+    var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8$1, templateObject_9;
 
@@ -470,5 +460,5 @@ var Upload = function (_a) {
             React__default.createElement(GridInput, null,
-                React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", label: labels.day, value: value.day, onChange: function (e) { return setValue(__assign(__assign({}, value), { day: e.target.value })); }, withBorder: true }),
+                React__default.createElement(Input, { name: "day", type: "number", min: "1", pattern: "[0-9]*", label: labels.day, value: value.day, onChange: function (e) { return setValue(__assign(__assign({}, value), { day: e.target.value })); } }),
                 React__default.createElement(SelectBox, { name: "month", label: labels.month, value: value.month, onChange: function (option) { return setValue(__assign(__assign({}, value), { month: option })); }, options: months || DEFAULT_MONTHS }),
-                React__default.createElement(Input, { name: "year", min: "1", type: "number", pattern: "[0-9]*", label: labels.year, withBorder: true, value: value.year, onChange: function (e) { return setValue(__assign(__assign({}, value), { year: e.target.value })); } })),
+                React__default.createElement(Input, { name: "year", min: "1", type: "number", pattern: "[0-9]*", label: labels.year, value: value.year, onChange: function (e) { return setValue(__assign(__assign({}, value), { year: e.target.value })); } })),
             internalError && !error && React__default.createElement(Error$5, null, internalError),
@@ -475,0 +465,0 @@ error && React__default.createElement(Error$5, null, error)));

dist/Input/index.d.ts

@@ -14,3 +14,2 @@ /// <reference types="react" />
     background?: string;
-    withBorder?: boolean;
     contentRight?: any;
@@ -20,4 +19,5 @@ disableErrorText?: boolean;
     min?: string;
+    success?: boolean;
 }
-declare const Input: ({ onFocus, onChange, onBlur, onClick, value, error, label, type, name, background, withBorder, contentRight, disableErrorText, pattern, min }: InputProps) => JSX.Element;
+declare const Input: ({ onFocus, onChange, onBlur, onClick, value, error, label, type, name, background, contentRight, disableErrorText, pattern, min, success }: InputProps) => JSX.Element;
 export default Input;

dist/Input/InputStyles.d.ts

 interface InputWrapProps {
     background?: string;
-    bordered?: boolean;
     error?: string | boolean;
+    success?: boolean;
 }
 export declare const ContentRight: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CheckmarkWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledFloatingLabel: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
@@ -9,0 +10,0 @@ export declare const Error: import("styled-components").StyledComponent<"div", any, {}, never>;

package.json

 {
   "name": "@purple/phoenix-components",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

141308

decreased by-0.09%

Lines of code

1649

decreased by-1.61%

No dependency changes