@purple/phoenix-components - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

dist/bundle.cjs.js

@@ -62,7 +62,7 @@ 'use strict';
 };
-var getBottomBorder = function (error, background, withBorder) {
+var getBottomBorder = function (error, background, bordered) {
     if (background) {
         return "none";
     }
-    if (withBorder) {
+    if (bordered) {
         return "none";
@@ -75,21 +75,5 @@ }
 };
-var InputWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"], ["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), function (_a) {
-    var withBorder = _a.withBorder;
-    return withBorder ? "#fff" : "transparent";
-}, function (_a) {
-    var withBorder = _a.withBorder;
-    return withBorder ? "8px 10px 4px" : "";
-}, function (_a) {
-    var withBorder = _a.withBorder, error = _a.error;
-    return getBorder(error, withBorder);
-}, function (_a) {
-    var withBorder = _a.withBorder;
-    return withBorder ? "3px" : "0px";
-});
-var ContentRight = styled.div(templateObject_2 || (templateObject_2 = __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_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: 'Roboto', sans-serif;\n"], ["\n    font-family: 'Roboto', sans-serif;\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    border-bottom: 1px solid ", ";\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    border-bottom: 1px solid ", ";\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 error = _a.error, background = _a.background, withBorder = _a.withBorder;
-    return getBottomBorder(error, background, withBorder);
-}, 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 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 background = _a.background;
@@ -104,3 +88,19 @@ return background ? background : "transparent";
 });
-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 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;
@@ -111,4 +111,4 @@
     return (React.createElement(Wrapper, null,
-        React.createElement(InputWrap, { background: background, withBorder: withBorder, error: error },
-            React.createElement(StyledFloatingLabel, { id: name, withBorder: withBorder, name: name, placeholder: label, error: error, type: type || 'text', onBlur: onBlur, onChange: onChange, value: value }),
+        React.createElement(InputWrap, { background: background, bordered: withBorder, error: error },
+            React.createElement(StyledFloatingLabel, { id: name, name: name, placeholder: label, error: 11, type: type || 'text', onBlur: onBlur, onChange: onChange, value: value }),
             contentRight && React.createElement(ContentRight, null, contentRight)),
@@ -126,7 +126,16 @@ error && !disableErrorText && React.createElement(Error, null, error)));
     var placeholderUp = _a.placeholderUp;
-    return placeholderUp ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.5)";
+    return placeholderUp ? "rgba(0, 0, 0, 0.6)" : "inherit";
 });
 var SelectContainer = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  font-family: 'Roboto', sans-serif;\n  position: relative;\n"], ["\n  font-family: 'Roboto', sans-serif;\n  position: relative;\n"])));
 var StyledSelect = styled(Select__default)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var StyledControl = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid #dedede;\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n  }\n"], ["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid #dedede;\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n  }\n"])));
+var StyledControl = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid ", ";\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n    box-shadow: ", ";\n\n    &:hover {\n      border: 1px solid ", ";\n    }\n  }\n"], ["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid ", ";\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n    box-shadow: ", ";\n\n    &:hover {\n      border: 1px solid ", ";\n    }\n  }\n"])), function (_a) {
+    var error = _a.error;
+    return error ? "rgba(204, 0, 0, 0.82)" : "#dedede";
+}, function (_a) {
+    var error = _a.error;
+    return error && "none !important";
+}, function (_a) {
+    var error = _a.error;
+    return error ? "rgba(204, 0, 0, 0.82)" : "#dedede";
+});
 var StyledIndicatorContainer = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
@@ -136,10 +145,10 @@ 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 ControlComponent = function (controlProps) { return (React__default.createElement(StyledControl, null,
-    React__default.createElement(Select.components.Control, __assign({}, controlProps)))); };
-var CustomIndicator = function (indicatorProps) {
-    return (React__default.createElement(StyledIndicatorContainer, null,
-        React__default.createElement(Select.components.IndicatorsContainer, __assign({}, indicatorProps))));
-};
 var SelectBox = function (props) {
     var _a = React.useState(false), placeholderUp = _a[0], setPlaceholderUp = _a[1];
+    var CustomIndicator = function (indicatorProps) {
+        return (React__default.createElement(StyledIndicatorContainer, null,
+            React__default.createElement(Select.components.IndicatorsContainer, __assign({}, indicatorProps))));
+    };
+    var ControlComponent = function (controlProps) { return (React__default.createElement(StyledControl, { error: !controlProps.menuIsOpen && props.error },
+        React__default.createElement(Select.components.Control, __assign({}, controlProps)))); };
     var onFocus = function () {
@@ -193,6 +202,7 @@ var onFocus = props.onFocus;
 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 templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$1, templateObject_7;
+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 SelectPicker = function (_a) {
-    var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect;
+    var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect, error = _a.error;
     var _b = React.useState([]), selected = _b[0], setSelected = _b[1];
@@ -223,2 +233,3 @@ React.useEffect(function () {
             return options.map(function (option) { return (React__default.createElement(SingleCard, { multiSelect: multiSelect, key: option.value, checked: isSelected(option), onClick: function () { return onPickerClick(option); }, withImage: option.image },
+                React__default.createElement("input", { type: "radio", style: { display: "none" }, value: option.value, name: name, checked: isSelected(option) }),
                 option.image && React__default.createElement(CardImage, { src: option.image }),
@@ -233,4 +244,8 @@ option.label || option.value,
     return (React__default.createElement(SelectPickerWrapper, null,
-        React__default.createElement(PickerLabel, null, label),
-        React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options))));
+        typeof label === 'string' ?
+            React__default.createElement(PickerLabel, null, label)
+            :
+                React__default.createElement(React__default.Fragment, null, label),
+        React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options)),
+        error && React__default.createElement(Error$2, null, error)));
 };
@@ -300,3 +315,3 @@
 });
-var Error$2 = styled.div(templateObject_5$3 || (templateObject_5$3 = __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 Error$3 = styled.div(templateObject_5$3 || (templateObject_5$3 = __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$4, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$3;
@@ -310,3 +325,3 @@
             contentRight && React.createElement(ContentRight$1, null, contentRight)),
-        error && !disableErrorText && React.createElement(Error$2, null, error)));
+        error && !disableErrorText && React.createElement(Error$3, null, error)));
 };
@@ -313,0 +328,0 @@ TextArea.defaultProps = {

dist/bundle.esm.js

@@ -54,7 +54,7 @@ import React__default, { createElement, useState, useEffect } from 'react';
 };
-var getBottomBorder = function (error, background, withBorder) {
+var getBottomBorder = function (error, background, bordered) {
     if (background) {
         return "none";
     }
-    if (withBorder) {
+    if (bordered) {
         return "none";
@@ -67,21 +67,5 @@ }
 };
-var InputWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"], ["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), function (_a) {
-    var withBorder = _a.withBorder;
-    return withBorder ? "#fff" : "transparent";
-}, function (_a) {
-    var withBorder = _a.withBorder;
-    return withBorder ? "8px 10px 4px" : "";
-}, function (_a) {
-    var withBorder = _a.withBorder, error = _a.error;
-    return getBorder(error, withBorder);
-}, function (_a) {
-    var withBorder = _a.withBorder;
-    return withBorder ? "3px" : "0px";
-});
-var ContentRight = styled.div(templateObject_2 || (templateObject_2 = __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_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: 'Roboto', sans-serif;\n"], ["\n    font-family: 'Roboto', sans-serif;\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    border-bottom: 1px solid ", ";\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    border-bottom: 1px solid ", ";\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 error = _a.error, background = _a.background, withBorder = _a.withBorder;
-    return getBottomBorder(error, background, withBorder);
-}, 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 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 background = _a.background;
@@ -96,3 +80,19 @@ return background ? background : "transparent";
 });
-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 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;
@@ -103,4 +103,4 @@
     return (createElement(Wrapper, null,
-        createElement(InputWrap, { background: background, withBorder: withBorder, error: error },
-            createElement(StyledFloatingLabel, { id: name, withBorder: withBorder, name: name, placeholder: label, error: error, type: type || 'text', onBlur: onBlur, onChange: onChange, value: value }),
+        createElement(InputWrap, { background: background, bordered: withBorder, error: error },
+            createElement(StyledFloatingLabel, { id: name, name: name, placeholder: label, error: 11, type: type || 'text', onBlur: onBlur, onChange: onChange, value: value }),
             contentRight && createElement(ContentRight, null, contentRight)),
@@ -118,7 +118,16 @@ error && !disableErrorText && createElement(Error, null, error)));
     var placeholderUp = _a.placeholderUp;
-    return placeholderUp ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.5)";
+    return placeholderUp ? "rgba(0, 0, 0, 0.6)" : "inherit";
 });
 var SelectContainer = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  font-family: 'Roboto', sans-serif;\n  position: relative;\n"], ["\n  font-family: 'Roboto', sans-serif;\n  position: relative;\n"])));
 var StyledSelect = styled(Select)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var StyledControl = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid #dedede;\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n  }\n"], ["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid #dedede;\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n  }\n"])));
+var StyledControl = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid ", ";\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n    box-shadow: ", ";\n\n    &:hover {\n      border: 1px solid ", ";\n    }\n  }\n"], ["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid ", ";\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n    box-shadow: ", ";\n\n    &:hover {\n      border: 1px solid ", ";\n    }\n  }\n"])), function (_a) {
+    var error = _a.error;
+    return error ? "rgba(204, 0, 0, 0.82)" : "#dedede";
+}, function (_a) {
+    var error = _a.error;
+    return error && "none !important";
+}, function (_a) {
+    var error = _a.error;
+    return error ? "rgba(204, 0, 0, 0.82)" : "#dedede";
+});
 var StyledIndicatorContainer = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
@@ -128,10 +137,10 @@ 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 ControlComponent = function (controlProps) { return (React__default.createElement(StyledControl, null,
-    React__default.createElement(components.Control, __assign({}, controlProps)))); };
-var CustomIndicator = function (indicatorProps) {
-    return (React__default.createElement(StyledIndicatorContainer, null,
-        React__default.createElement(components.IndicatorsContainer, __assign({}, indicatorProps))));
-};
 var SelectBox = function (props) {
     var _a = useState(false), placeholderUp = _a[0], setPlaceholderUp = _a[1];
+    var CustomIndicator = function (indicatorProps) {
+        return (React__default.createElement(StyledIndicatorContainer, null,
+            React__default.createElement(components.IndicatorsContainer, __assign({}, indicatorProps))));
+    };
+    var ControlComponent = function (controlProps) { return (React__default.createElement(StyledControl, { error: !controlProps.menuIsOpen && props.error },
+        React__default.createElement(components.Control, __assign({}, controlProps)))); };
     var onFocus = function () {
@@ -185,6 +194,7 @@ var onFocus = props.onFocus;
 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 templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$1, templateObject_7;
+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 SelectPicker = function (_a) {
-    var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect;
+    var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect, error = _a.error;
     var _b = useState([]), selected = _b[0], setSelected = _b[1];
@@ -215,2 +225,3 @@ useEffect(function () {
             return options.map(function (option) { return (React__default.createElement(SingleCard, { multiSelect: multiSelect, key: option.value, checked: isSelected(option), onClick: function () { return onPickerClick(option); }, withImage: option.image },
+                React__default.createElement("input", { type: "radio", style: { display: "none" }, value: option.value, name: name, checked: isSelected(option) }),
                 option.image && React__default.createElement(CardImage, { src: option.image }),
@@ -225,4 +236,8 @@ option.label || option.value,
     return (React__default.createElement(SelectPickerWrapper, null,
-        React__default.createElement(PickerLabel, null, label),
-        React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options))));
+        typeof label === 'string' ?
+            React__default.createElement(PickerLabel, null, label)
+            :
+                React__default.createElement(React__default.Fragment, null, label),
+        React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options)),
+        error && React__default.createElement(Error$2, null, error)));
 };
@@ -292,3 +307,3 @@
 });
-var Error$2 = styled.div(templateObject_5$3 || (templateObject_5$3 = __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 Error$3 = styled.div(templateObject_5$3 || (templateObject_5$3 = __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$4, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$3;
@@ -302,3 +317,3 @@
             contentRight && createElement(ContentRight$1, null, contentRight)),
-        error && !disableErrorText && createElement(Error$2, null, error)));
+        error && !disableErrorText && createElement(Error$3, null, error)));
 };
@@ -305,0 +320,0 @@ TextArea.defaultProps = {

dist/bundle.umd.js

@@ -59,7 +59,7 @@ (function (global, factory) {
     };
-    var getBottomBorder = function (error, background, withBorder) {
+    var getBottomBorder = function (error, background, bordered) {
         if (background) {
             return "none";
         }
-        if (withBorder) {
+        if (bordered) {
             return "none";
@@ -72,21 +72,5 @@ }
     };
-    var InputWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"], ["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), function (_a) {
-        var withBorder = _a.withBorder;
-        return withBorder ? "#fff" : "transparent";
-    }, function (_a) {
-        var withBorder = _a.withBorder;
-        return withBorder ? "8px 10px 4px" : "";
-    }, function (_a) {
-        var withBorder = _a.withBorder, error = _a.error;
-        return getBorder(error, withBorder);
-    }, function (_a) {
-        var withBorder = _a.withBorder;
-        return withBorder ? "3px" : "0px";
-    });
-    var ContentRight = styled.div(templateObject_2 || (templateObject_2 = __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_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: 'Roboto', sans-serif;\n"], ["\n    font-family: 'Roboto', sans-serif;\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    border-bottom: 1px solid ", ";\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    border-bottom: 1px solid ", ";\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 error = _a.error, background = _a.background, withBorder = _a.withBorder;
-        return getBottomBorder(error, background, withBorder);
-    }, 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 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 background = _a.background;
@@ -101,3 +85,19 @@ return background ? background : "transparent";
     });
-    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 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;
@@ -108,4 +108,4 @@
         return (React.createElement(Wrapper, null,
-            React.createElement(InputWrap, { background: background, withBorder: withBorder, error: error },
-                React.createElement(StyledFloatingLabel, { id: name, withBorder: withBorder, name: name, placeholder: label, error: error, type: type || 'text', onBlur: onBlur, onChange: onChange, value: value }),
+            React.createElement(InputWrap, { background: background, bordered: withBorder, error: error },
+                React.createElement(StyledFloatingLabel, { id: name, name: name, placeholder: label, error: 11, type: type || 'text', onBlur: onBlur, onChange: onChange, value: value }),
                 contentRight && React.createElement(ContentRight, null, contentRight)),
@@ -123,7 +123,16 @@ error && !disableErrorText && React.createElement(Error, null, error)));
         var placeholderUp = _a.placeholderUp;
-        return placeholderUp ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.5)";
+        return placeholderUp ? "rgba(0, 0, 0, 0.6)" : "inherit";
     });
     var SelectContainer = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  font-family: 'Roboto', sans-serif;\n  position: relative;\n"], ["\n  font-family: 'Roboto', sans-serif;\n  position: relative;\n"])));
     var StyledSelect = styled(Select__default)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-    var StyledControl = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid #dedede;\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n  }\n"], ["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid #dedede;\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n  }\n"])));
+    var StyledControl = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid ", ";\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n    box-shadow: ", ";\n\n    &:hover {\n      border: 1px solid ", ";\n    }\n  }\n"], ["\n  & > div {\n    padding: 8px 5px 2px;\n    border: 1px solid ", ";\n    border-radius: 3px;\n    box-sizing: content-box;\n    height: 47px !important;\n    font-size: 15px;\n    box-shadow: ", ";\n\n    &:hover {\n      border: 1px solid ", ";\n    }\n  }\n"])), function (_a) {
+        var error = _a.error;
+        return error ? "rgba(204, 0, 0, 0.82)" : "#dedede";
+    }, function (_a) {
+        var error = _a.error;
+        return error && "none !important";
+    }, function (_a) {
+        var error = _a.error;
+        return error ? "rgba(204, 0, 0, 0.82)" : "#dedede";
+    });
     var StyledIndicatorContainer = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
@@ -133,10 +142,10 @@ 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 ControlComponent = function (controlProps) { return (React__default.createElement(StyledControl, null,
-        React__default.createElement(Select.components.Control, __assign({}, controlProps)))); };
-    var CustomIndicator = function (indicatorProps) {
-        return (React__default.createElement(StyledIndicatorContainer, null,
-            React__default.createElement(Select.components.IndicatorsContainer, __assign({}, indicatorProps))));
-    };
     var SelectBox = function (props) {
         var _a = React.useState(false), placeholderUp = _a[0], setPlaceholderUp = _a[1];
+        var CustomIndicator = function (indicatorProps) {
+            return (React__default.createElement(StyledIndicatorContainer, null,
+                React__default.createElement(Select.components.IndicatorsContainer, __assign({}, indicatorProps))));
+        };
+        var ControlComponent = function (controlProps) { return (React__default.createElement(StyledControl, { error: !controlProps.menuIsOpen && props.error },
+            React__default.createElement(Select.components.Control, __assign({}, controlProps)))); };
         var onFocus = function () {
@@ -190,6 +199,7 @@ var onFocus = props.onFocus;
     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 templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$1, templateObject_7;
+    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 SelectPicker = function (_a) {
-        var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect;
+        var options = _a.options, label = _a.label, name = _a.name, onChange = _a.onChange, value = _a.value, multiSelect = _a.multiSelect, error = _a.error;
         var _b = React.useState([]), selected = _b[0], setSelected = _b[1];
@@ -220,2 +230,3 @@ React.useEffect(function () {
                 return options.map(function (option) { return (React__default.createElement(SingleCard, { multiSelect: multiSelect, key: option.value, checked: isSelected(option), onClick: function () { return onPickerClick(option); }, withImage: option.image },
+                    React__default.createElement("input", { type: "radio", style: { display: "none" }, value: option.value, name: name, checked: isSelected(option) }),
                     option.image && React__default.createElement(CardImage, { src: option.image }),
@@ -230,4 +241,8 @@ option.label || option.value,
         return (React__default.createElement(SelectPickerWrapper, null,
-            React__default.createElement(PickerLabel, null, label),
-            React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options))));
+            typeof label === 'string' ?
+                React__default.createElement(PickerLabel, null, label)
+                :
+                    React__default.createElement(React__default.Fragment, null, label),
+            React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options)),
+            error && React__default.createElement(Error$2, null, error)));
     };
@@ -297,3 +312,3 @@
     });
-    var Error$2 = styled.div(templateObject_5$3 || (templateObject_5$3 = __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 Error$3 = styled.div(templateObject_5$3 || (templateObject_5$3 = __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$4, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$3;
@@ -307,3 +322,3 @@
                 contentRight && React.createElement(ContentRight$1, null, contentRight)),
-            error && !disableErrorText && React.createElement(Error$2, null, error)));
+            error && !disableErrorText && React.createElement(Error$3, null, error)));
     };
@@ -310,0 +325,0 @@ TextArea.defaultProps = {

dist/Input/InputStyles.d.ts

@@ -1,2 +0,6 @@
-export declare const InputWrap: import("styled-components").StyledComponent<"div", any, any, never>;
+interface InputWrapProps {
+    background?: string;
+    bordered?: boolean;
+    error?: string | boolean;
+}
 export declare const ContentRight: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -6,1 +10,3 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Error: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputWrap: import("styled-components").StyledComponent<"div", any, InputWrapProps, never>;
+export {};

dist/SelectBox/SelectStyles.d.ts

 import Select from 'react-select';
-export declare const PlaceholderText: import("styled-components").StyledComponent<"span", any, any, never>;
+interface StyledControlProps {
+    error?: string | boolean;
+}
+interface PlaceholderTextProps {
+    placeholderUp?: boolean;
+}
+export declare const PlaceholderText: import("styled-components").StyledComponent<"span", any, PlaceholderTextProps, never>;
 export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSelect: import("styled-components").StyledComponent<typeof Select, any, {}, never>;
-export declare const StyledControl: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledControl: import("styled-components").StyledComponent<"div", any, StyledControlProps, never>;
 export declare const StyledIndicatorContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Error: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

dist/SelectPicker/index.d.ts

@@ -1,5 +0,5 @@
-/// <reference types="react" />
+import React from 'react';
 interface SelectPickerProps {
     options?: Array<Option>;
-    label?: string;
+    label?: string | React.Component;
     name?: string;
@@ -9,2 +9,3 @@ onChange: any;
     multiSelect?: boolean;
+    error?: string | boolean;
 }
@@ -17,3 +18,3 @@ interface Option {
 }
-declare const SelectPicker: ({ options, label, name, onChange, value, multiSelect }: SelectPickerProps) => JSX.Element;
+declare const SelectPicker: ({ options, label, name, onChange, value, multiSelect, error }: SelectPickerProps) => JSX.Element;
 export default SelectPicker;

dist/SelectPicker/SelectPickerStyles.d.ts

@@ -8,1 +8,2 @@ export declare const SelectPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CheckMark: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Error: import("styled-components").StyledComponent<"div", any, {}, never>;

package.json

 {
   "name": "@purple/phoenix-components",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "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

Improved metrics

Total package byte prevSize

95986

increased by4.62%

Lines of code

1123

increased by5.35%

No dependency changes