@bolio-ui/core 1.0.6 → 1.0.8

package/dist/Section/index.js

@@ -263,7 +263,7 @@ var defaultLayout = {
   pageWidthWithMargin: '930pt',
   breakpointMobile: defaultBreakpoints.xs.max,
   breakpointTablet: defaultBreakpoints.sm.max,
-  radius: '6px',
+  radius: '10px',
   unit: '16px'
 };
 
@@ -278,32 +278,32 @@ var palette$1 = {
   accents_6: '#444',
   accents_7: '#333',
   accents_8: '#111',
-  selection: '#cee4fe',
+  selection: 'rgba(206,228,254, 0.5)',
   code: '#C25FFF',
-  border: '#999',
+  border: '#eaeaea',
   primary: '#0072F6',
-  primaryLight: '#96C1F3',
-  primaryLighter: '#CEE4FF',
+  primaryLight: '#CEE4FF',
+  primaryLighter: '#96C1F3',
   primaryDark: '#00254E',
   secondary: '#7828C9',
-  secondaryLighter: '#D1B1F1',
   secondaryLight: '#EADCF9',
+  secondaryLighter: '#D1B1F1',
   secondaryDark: '#290E45',
   error: '#F31261',
-  errorLight: '#FAA8C6',
-  errorLighter: '#FDD8E6',
+  errorLight: '#FDD8E6',
+  errorLighter: '#FAA8C6',
   errorDark: '#4E041F',
   success: '#17C965',
-  successLight: '#ADF5CD',
-  successLighter: '#DAFBE9',
+  successLight: '#DAFBE9',
+  successLighter: '#ADF5CD',
   successDark: '#06371C',
   warning: '#F5A525',
-  warningLight: '#FBDBA8',
-  warningLighter: '#FDEFD9',
+  warningLight: '#FDEFD9',
+  warningLighter: '#FBDBA8',
   warningDark: '#4E3105',
   info: '#06B7DC',
-  infoLighter: '#A5EEFE',
   infoLight: '#D7F8FF',
+  infoLighter: '#A5EEFE',
   infoDark: '#053B49',
   purple: '#f81ce5',
   alert: '#ff0080',
@@ -345,37 +345,37 @@ var palette = {
   accents_6: '#999',
   accents_7: '#eaeaea',
   accents_8: '#fafafa',
-  selection: '#f81ce5',
+  selection: 'rgba(248,28,229, 0.5)',
   code: '#C25FFF',
-  border: '#444',
+  border: '#333',
   primary: '#0072F6',
-  primaryLight: '#96C1F3',
-  primaryLighter: '#CEE4FF',
+  primaryLight: '#CEE4FF',
+  primaryLighter: '#96C1F3',
   primaryDark: '#00254E',
   secondary: '#7828C9',
-  secondaryLighter: '#D1B1F1',
   secondaryLight: '#EADCF9',
+  secondaryLighter: '#D1B1F1',
   secondaryDark: '#290E45',
   error: '#F31261',
-  errorLight: '#FAA8C6',
-  errorLighter: '#FDD8E6',
+  errorLight: '#FDD8E6',
+  errorLighter: '#FAA8C6',
   errorDark: '#4E041F',
   success: '#17C965',
-  successLight: '#ADF5CD',
-  successLighter: '#DAFBE9',
+  successLight: '#DAFBE9',
+  successLighter: '#ADF5CD',
   successDark: '#06371C',
   warning: '#F5A525',
-  warningLight: '#FBDBA8',
-  warningLighter: '#FDEFD9',
+  warningLight: '#FDEFD9',
+  warningLighter: '#FBDBA8',
   warningDark: '#4E3105',
   info: '#06B7DC',
-  infoLighter: '#A5EEFE',
   infoLight: '#D7F8FF',
+  infoLighter: '#A5EEFE',
   infoDark: '#053B49',
   purple: '#f81ce5',
   alert: '#ff0080',
   link: '#3291ff',
-  pre: '#363450'
+  pre: '#111'
 };
 var expressiveness = {
   linkStyle: 'none',
@@ -383,9 +383,9 @@ var expressiveness = {
   dropdownBoxShadow: '0 0 0 1px #333',
   scrollerStart: 'rgba(255, 255, 255, 1)',
   scrollerEnd: 'rgba(255, 255, 255, 0)',
-  shadowSmall: '0 0 0 1px #333',
-  shadowMedium: '0 0 0 1px #333',
-  shadowLarge: '0 0 0 1px #333',
+  shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
+  shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
+  shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
   portalOpacity: 0.75
 };
 var font = defaultFont;
@@ -538,9 +538,10 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
       for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
         var key = _step2.value;
         var value = props[key];
-        console.log('🚀 ~ file: utils.ts:32 ~ value:', value); // if (typeof value !== 'undefined') {
-        //   scaleProps[key as keyof ScaleProps] = value as any
-        // }
+
+        if (typeof value !== 'undefined') {
+          scaleProps[key] = value;
+        }
       }
     } catch (err) {
       _iterator2.e(err);

package/dist/Select/index.js

@@ -285,7 +285,7 @@ var defaultLayout = {
   pageWidthWithMargin: '930pt',
   breakpointMobile: defaultBreakpoints.xs.max,
   breakpointTablet: defaultBreakpoints.sm.max,
-  radius: '6px',
+  radius: '10px',
   unit: '16px'
 };
 
@@ -300,32 +300,32 @@ var palette$1 = {
   accents_6: '#444',
   accents_7: '#333',
   accents_8: '#111',
-  selection: '#cee4fe',
+  selection: 'rgba(206,228,254, 0.5)',
   code: '#C25FFF',
-  border: '#999',
+  border: '#eaeaea',
   primary: '#0072F6',
-  primaryLight: '#96C1F3',
-  primaryLighter: '#CEE4FF',
+  primaryLight: '#CEE4FF',
+  primaryLighter: '#96C1F3',
   primaryDark: '#00254E',
   secondary: '#7828C9',
-  secondaryLighter: '#D1B1F1',
   secondaryLight: '#EADCF9',
+  secondaryLighter: '#D1B1F1',
   secondaryDark: '#290E45',
   error: '#F31261',
-  errorLight: '#FAA8C6',
-  errorLighter: '#FDD8E6',
+  errorLight: '#FDD8E6',
+  errorLighter: '#FAA8C6',
   errorDark: '#4E041F',
   success: '#17C965',
-  successLight: '#ADF5CD',
-  successLighter: '#DAFBE9',
+  successLight: '#DAFBE9',
+  successLighter: '#ADF5CD',
   successDark: '#06371C',
   warning: '#F5A525',
-  warningLight: '#FBDBA8',
-  warningLighter: '#FDEFD9',
+  warningLight: '#FDEFD9',
+  warningLighter: '#FBDBA8',
   warningDark: '#4E3105',
   info: '#06B7DC',
-  infoLighter: '#A5EEFE',
   infoLight: '#D7F8FF',
+  infoLighter: '#A5EEFE',
   infoDark: '#053B49',
   purple: '#f81ce5',
   alert: '#ff0080',
@@ -367,37 +367,37 @@ var palette = {
   accents_6: '#999',
   accents_7: '#eaeaea',
   accents_8: '#fafafa',
-  selection: '#f81ce5',
+  selection: 'rgba(248,28,229, 0.5)',
   code: '#C25FFF',
-  border: '#444',
+  border: '#333',
   primary: '#0072F6',
-  primaryLight: '#96C1F3',
-  primaryLighter: '#CEE4FF',
+  primaryLight: '#CEE4FF',
+  primaryLighter: '#96C1F3',
   primaryDark: '#00254E',
   secondary: '#7828C9',
-  secondaryLighter: '#D1B1F1',
   secondaryLight: '#EADCF9',
+  secondaryLighter: '#D1B1F1',
   secondaryDark: '#290E45',
   error: '#F31261',
-  errorLight: '#FAA8C6',
-  errorLighter: '#FDD8E6',
+  errorLight: '#FDD8E6',
+  errorLighter: '#FAA8C6',
   errorDark: '#4E041F',
   success: '#17C965',
-  successLight: '#ADF5CD',
-  successLighter: '#DAFBE9',
+  successLight: '#DAFBE9',
+  successLighter: '#ADF5CD',
   successDark: '#06371C',
   warning: '#F5A525',
-  warningLight: '#FBDBA8',
-  warningLighter: '#FDEFD9',
+  warningLight: '#FDEFD9',
+  warningLighter: '#FBDBA8',
   warningDark: '#4E3105',
   info: '#06B7DC',
-  infoLighter: '#A5EEFE',
   infoLight: '#D7F8FF',
+  infoLighter: '#A5EEFE',
   infoDark: '#053B49',
   purple: '#f81ce5',
   alert: '#ff0080',
   link: '#3291ff',
-  pre: '#363450'
+  pre: '#111'
 };
 var expressiveness = {
   linkStyle: 'none',
@@ -405,9 +405,9 @@ var expressiveness = {
   dropdownBoxShadow: '0 0 0 1px #333',
   scrollerStart: 'rgba(255, 255, 255, 1)',
   scrollerEnd: 'rgba(255, 255, 255, 0)',
-  shadowSmall: '0 0 0 1px #333',
-  shadowMedium: '0 0 0 1px #333',
-  shadowLarge: '0 0 0 1px #333',
+  shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
+  shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
+  shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
   portalOpacity: 0.75
 };
 var font = defaultFont;
@@ -1019,11 +1019,11 @@ var SelectDropdown = /*#__PURE__*/React__default["default"].forwardRef(function
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: internalDropdownRef,
     style: dropdownStyle,
-    className: styledJsx_cjs.style.dynamic([["2782510679", [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.background]]]) + " " + (classes || "")
+    className: styledJsx_cjs.style.dynamic([["2113247935", [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.accents_2]]]) + " " + (classes || "")
   }, children, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "2782510679",
-    dynamic: [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.background]
-  }, ".select-dropdown.__jsx-style-dynamic-selector{border-radius:".concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowLarge, ";background-color:").concat(theme.palette.background, ";max-height:17em;overflow-y:auto;overflow-anchor:none;padding:0.38em 0;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}"))));
+    id: "2113247935",
+    dynamic: [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.accents_2]
+  }, ".select-dropdown.__jsx-style-dynamic-selector{border-radius:".concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowLarge, ";background-color:").concat(theme.palette.accents_2, ";max-height:17em;overflow-y:auto;overflow-anchor:none;padding:0.38em 0;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}"))));
 });
 SelectDropdown.displayName = 'BolioUISelectDropdown';
 var SelectDropdown$1 = SelectDropdown;
@@ -1104,9 +1104,10 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
       for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
         var key = _step2.value;
         var value = props[key];
-        console.log('🚀 ~ file: utils.ts:32 ~ value:', value); // if (typeof value !== 'undefined') {
-        //   scaleProps[key as keyof ScaleProps] = value as any
-        // }
+
+        if (typeof value !== 'undefined') {
+          scaleProps[key] = value;
+        }
       }
     } catch (err) {
       _iterator2.e(err);
@@ -1405,7 +1406,7 @@ function SelectIconClear(_ref) {
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: clickHandler,
-    className: styledJsx_cjs.style.dynamic([["1984024521", [theme.palette.accents_3, theme.palette.foreground]]]) + " " + "clear-icon"
+    className: styledJsx_cjs.style.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]]) + " " + "clear-icon"
   }, /*#__PURE__*/React__default["default"].createElement("svg", {
     viewBox: "0 0 24 24",
     stroke: "currentColor",
@@ -1414,17 +1415,17 @@ function SelectIconClear(_ref) {
     strokeLinejoin: "round",
     fill: "none",
     shapeRendering: "geometricPrecision",
-    className: styledJsx_cjs.style.dynamic([["1984024521", [theme.palette.accents_3, theme.palette.foreground]]])
+    className: styledJsx_cjs.style.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]])
   }, /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M18 6L6 18",
-    className: styledJsx_cjs.style.dynamic([["1984024521", [theme.palette.accents_3, theme.palette.foreground]]])
+    className: styledJsx_cjs.style.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]])
   }), /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M6 6l12 12",
-    className: styledJsx_cjs.style.dynamic([["1984024521", [theme.palette.accents_3, theme.palette.foreground]]])
+    className: styledJsx_cjs.style.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]])
   })), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "1984024521",
-    dynamic: [theme.palette.accents_3, theme.palette.foreground]
-  }, ".clear-icon.__jsx-style-dynamic-selector{padding:0 0 0 0.5em;margin:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;cursor:pointer;box-sizing:border-box;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;color:".concat(theme.palette.accents_3, ";visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:1em;height:1em;}")));
+    id: "3218630561",
+    dynamic: [theme.palette.accents_5, theme.palette.foreground]
+  }, ".clear-icon.__jsx-style-dynamic-selector{padding:0 0 0 0.5em;margin:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;cursor:pointer;box-sizing:border-box;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;color:".concat(theme.palette.accents_5, ";visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:1em;height:1em;}")));
 }
 
 var MemoSelectIconClear = /*#__PURE__*/React__default["default"].memo(SelectIconClear);
@@ -1436,13 +1437,13 @@ function SelectMultipleValue(_ref) {
       children = _ref.children;
   var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(Grid$1, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["1576722377", [theme.layout.radius, theme.palette.accents_2, disabled ? theme.palette.accents_4 : theme.palette.accents_6]]]) + " " + "item"
+    className: styledJsx_cjs.style.dynamic([["81854150", [theme.layout.radius, theme.palette.accents_3, disabled ? theme.palette.accents_5 : theme.palette.accents_7]]]) + " " + "item"
   }, children, !!onClear && /*#__PURE__*/React__default["default"].createElement(SelectClearIcon, {
     onClick: onClear
   })), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "1576722377",
-    dynamic: [theme.layout.radius, theme.palette.accents_2, disabled ? theme.palette.accents_4 : theme.palette.accents_6]
-  }, ".item.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;justify-items:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0 0.5em;font-size:var(--select-font-size);height:calc(var(--select-font-size) * 2);border-radius:".concat(theme.layout.radius, ";background-color:").concat(theme.palette.accents_2, ";color:").concat(disabled ? theme.palette.accents_4 : theme.palette.accents_6, ";}.item.__jsx-style-dynamic-selector>div:not(.clear-icon),.item.__jsx-style-dynamic-selector>div:not(.clear-icon):hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}")));
+    id: "81854150",
+    dynamic: [theme.layout.radius, theme.palette.accents_3, disabled ? theme.palette.accents_5 : theme.palette.accents_7]
+  }, ".item.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;justify-items:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0 0.5em;font-size:var(--select-font-size);height:calc(var(--select-font-size) * 2);border-radius:".concat(theme.layout.radius, ";background-color:").concat(theme.palette.accents_3, ";color:").concat(disabled ? theme.palette.accents_5 : theme.palette.accents_7, ";}.item.__jsx-style-dynamic-selector>div:not(.clear-icon),.item.__jsx-style-dynamic-selector>div:not(.clear-icon):hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}")));
 }
 
 SelectMultipleValue.displayName = 'BolioUISelectMultipleValue';
@@ -1450,46 +1451,53 @@ SelectMultipleValue.displayName = 'BolioUISelectMultipleValue';
 var getColors = function getColors(palette, status) {
   var colors = {
     "default": {
-      border: palette.border,
-      borderActive: palette.foreground,
-      iconBorder: palette.accents_5,
-      placeholderColor: palette.accents_3
+      color: palette.foreground,
+      bgColor: palette.accents_2,
+      borderColor: palette.accents_3,
+      hoverBgColor: palette.accents_2,
+      hoverBorder: palette.accents_6
     },
     primary: {
-      border: palette.primary,
-      borderActive: palette.primary,
-      iconBorder: palette.primary,
-      placeholderColor: palette.accents_3
+      color: palette.primaryDark,
+      bgColor: palette.primaryLighter,
+      borderColor: palette.primaryDark,
+      hoverBgColor: palette.primaryLight,
+      hoverBorder: palette.primary
     },
     secondary: {
-      border: palette.secondary,
-      borderActive: palette.secondary,
-      iconBorder: palette.secondary,
-      placeholderColor: palette.accents_3
+      color: palette.secondaryDark,
+      bgColor: palette.secondaryLighter,
+      borderColor: palette.secondaryDark,
+      hoverBgColor: palette.secondaryLight,
+      hoverBorder: palette.secondary
     },
     success: {
-      border: palette.success,
-      borderActive: palette.success,
-      iconBorder: palette.success,
-      placeholderColor: palette.accents_3
+      color: palette.successDark,
+      bgColor: palette.successLighter,
+      borderColor: palette.successDark,
+      hoverBgColor: palette.successLight,
+      hoverBorder: palette.success
     },
     warning: {
-      border: palette.warning,
-      borderActive: palette.warning,
-      iconBorder: palette.warning,
-      placeholderColor: palette.accents_3
+      color: palette.warningDark,
+      bgColor: palette.warningLighter,
+      borderColor: palette.warningDark,
+      hoverBgColor: palette.warningLight,
+      hoverBorder: palette.warning
     },
     error: {
-      border: palette.error,
-      borderActive: palette.error,
-      iconBorder: palette.error,
-      placeholderColor: palette.error
+      color: palette.errorDark,
+      bgColor: palette.errorLighter,
+      borderColor: palette.errorDark,
+      hoverBgColor: palette.errorLight,
+      hoverBorder: palette.error
     },
     info: {
-      border: palette.info,
-      borderActive: palette.info,
-      iconBorder: palette.info,
-      placeholderColor: palette.accents_3
+      color: palette.infoDark,
+      bgColor: palette.infoLighter,
+      borderColor: palette.infoDark,
+      hoverBgColor: palette.infoLight,
+      hoverBorder: palette.info
     }
   };
   if (!status) return colors["default"];
@@ -1616,14 +1624,9 @@ var SelectComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     if (!Array.isArray(value)) return !value;
     return value.length === 0;
   }, [value]);
-
-  var _useMemo = React.useMemo(function () {
+  var colors = React.useMemo(function () {
     return getColors(theme.palette, type);
-  }, [theme.palette, type]),
-      border = _useMemo.border,
-      borderActive = _useMemo.borderActive,
-      iconBorder = _useMemo.iconBorder,
-      placeholderColor = _useMemo.placeholderColor;
+  }, [theme.palette, type]);
 
   var updateVisible = function updateVisible(next) {
     onDropdownVisibleChange(next);
@@ -1731,7 +1734,7 @@ var SelectComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     onClick: clickHandler,
     onMouseDown: mouseDownHandler
   }, props, {
-    className: styledJsx_cjs.style.dynamic([["3089088549", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + (props && props.className != null && props.className || classes || "")
+    className: styledJsx_cjs.style.dynamic([["601947340", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, disabled ? theme.palette.accents_3 : colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : colors.hoverBorder, disabled ? theme.palette.border : colors.hoverBgColor, disabled ? theme.palette.accents_5 : colors.color, disabled ? theme.palette.accents_4 : colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), /*#__PURE__*/React__default["default"].createElement(SelectInput$1, {
     ref: inputRef,
     visible: visible,
@@ -1740,11 +1743,11 @@ var SelectComponent = /*#__PURE__*/React__default["default"].forwardRef(function
       return setSelectFocus(true);
     }
   }), isEmpty && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styledJsx_cjs.style.dynamic([["3089088549", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "value placeholder"
+    className: styledJsx_cjs.style.dynamic([["601947340", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, disabled ? theme.palette.accents_3 : colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : colors.hoverBorder, disabled ? theme.palette.border : colors.hoverBgColor, disabled ? theme.palette.accents_5 : colors.color, disabled ? theme.palette.accents_4 : colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]]]) + " " + "value placeholder"
   }, /*#__PURE__*/React__default["default"].createElement(Ellipsis$1, {
     height: "var(--select-height)"
   }, placeholder)), value && !multiple && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styledJsx_cjs.style.dynamic([["3089088549", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "value"
+    className: styledJsx_cjs.style.dynamic([["601947340", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, disabled ? theme.palette.accents_3 : colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : colors.hoverBorder, disabled ? theme.palette.border : colors.hoverBgColor, disabled ? theme.palette.accents_5 : colors.color, disabled ? theme.palette.accents_4 : colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]]]) + " " + "value"
   }, selectedChild), value && multiple && /*#__PURE__*/React__default["default"].createElement(Grid$1.Container, {
     gap: 0.5
   }, selectedChild), /*#__PURE__*/React__default["default"].createElement(SelectDropdown$1, {
@@ -1755,13 +1758,13 @@ var SelectComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     disableMatchWidth: disableMatchWidth,
     getPopupContainer: getPopupContainer
   }, children), !pure && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["3089088549", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "icon"
+    className: styledJsx_cjs.style.dynamic([["601947340", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, disabled ? theme.palette.accents_3 : colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : colors.hoverBorder, disabled ? theme.palette.border : colors.hoverBgColor, disabled ? theme.palette.accents_5 : colors.color, disabled ? theme.palette.accents_4 : colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]]]) + " " + "icon"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    className: styledJsx_cjs.style.dynamic([["3089088549", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]])
+    className: styledJsx_cjs.style.dynamic([["601947340", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, disabled ? theme.palette.accents_3 : colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : colors.hoverBorder, disabled ? theme.palette.border : colors.hoverBgColor, disabled ? theme.palette.accents_5 : colors.color, disabled ? theme.palette.accents_4 : colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]]])
   })), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "3089088549",
-    dynamic: [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]
-  }, ".select.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";max-width:90vw;overflow:hidden;-webkit-transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;border:1px solid ").concat(border, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(disabled ? theme.palette.accents_1 : theme.palette.background, ";--select-font-size:").concat(SCALES.font(0.875), ";--select-height:").concat(SCALES.height(2.25), ";min-width:11.5em;width:").concat(SCALES.width(1, 'initial'), ";height:var(--select-height);padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.multiple.__jsx-style-dynamic-selector{height:auto;min-height:var(--select-height);padding:").concat(SCALES.pt(0.334), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0.334), " ").concat(SCALES.pl(0.667), ";}.select.active.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover{border-color:").concat(disabled ? theme.palette.border : borderActive, ";}.select.active.icon.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover .icon.__jsx-style-dynamic-selector{color:").concat(disabled ? theme.palette.accents_5 : borderActive, ";}.value.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0;margin-right:1.25em;font-size:var(--select-font-size);color:").concat(disabled ? theme.palette.accents_4 : theme.palette.foreground, ";width:calc(100% - 1.25em);}.value.__jsx-style-dynamic-selector>div,.value.__jsx-style-dynamic-selector>div:hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}.placeholder.__jsx-style-dynamic-selector{color:").concat(placeholderColor, ";}.icon.__jsx-style-dynamic-selector{position:absolute;right:").concat(theme.layout.gapQuarter, ";font-size:var(--select-font-size);top:50%;bottom:0;-webkit-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);-ms-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);pointer-events:none;-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(iconBorder, ";}"))));
+    id: "601947340",
+    dynamic: [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, disabled ? theme.palette.accents_3 : colors.bgColor, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : colors.hoverBorder, disabled ? theme.palette.border : colors.hoverBgColor, disabled ? theme.palette.accents_5 : colors.color, disabled ? theme.palette.accents_4 : colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? '180' : '0', colors.color]
+  }, ".select.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";max-width:90vw;overflow:hidden;-webkit-transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;border:1px solid ").concat(colors.borderColor, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(disabled ? theme.palette.accents_3 : colors.bgColor, ";--select-font-size:").concat(SCALES.font(0.875), ";--select-height:").concat(SCALES.height(2.25), ";min-width:11.5em;width:").concat(SCALES.width(1, 'initial'), ";height:var(--select-height);padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.multiple.__jsx-style-dynamic-selector{height:auto;min-height:var(--select-height);padding:").concat(SCALES.pt(0.334), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0.334), " ").concat(SCALES.pl(0.667), ";}.select.active.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover{border-color:").concat(disabled ? theme.palette.border : colors.hoverBorder, ";background-color:").concat(disabled ? theme.palette.border : colors.hoverBgColor, ";}.select.active.icon.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover .icon.__jsx-style-dynamic-selector{color:").concat(disabled ? theme.palette.accents_5 : colors.color, ";}.value.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0;margin-right:1.25em;font-size:var(--select-font-size);color:").concat(disabled ? theme.palette.accents_4 : colors.color, ";width:calc(100% - 1.25em);}.value.__jsx-style-dynamic-selector>div,.value.__jsx-style-dynamic-selector>div:hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}.placeholder.__jsx-style-dynamic-selector{color:").concat(colors.color, ";font-size:").concat(SCALES.font(0.775), ";}.icon.__jsx-style-dynamic-selector{position:absolute;right:").concat(theme.layout.gapQuarter, ";font-size:var(--select-font-size);top:50%;bottom:0;-webkit-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);-ms-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);pointer-events:none;-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(colors.color, ";}"))));
 });
 SelectComponent.defaultProps = defaultProps;
 SelectComponent.displayName = 'BolioUISelect';
@@ -1822,8 +1825,8 @@ function SelectOptionComponent(_ref) {
     return value.includes("".concat(identValue));
   }, [identValue, value]);
   var bgColor = React.useMemo(function () {
-    if (isDisabled) return theme.palette.accents_1;
-    return selected ? theme.palette.accents_2 : theme.palette.background;
+    if (isDisabled) return theme.palette.accents_3;
+    return selected ? theme.palette.accents_3 : theme.palette.accents_2;
   }, [selected, isDisabled, theme.palette]);
   var hoverBgColor = React.useMemo(function () {
     if (isDisabled || isLabel || selected) return bgColor;
@@ -1846,13 +1849,13 @@ function SelectOptionComponent(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", _extends({
     onClick: clickHandler
   }, props, {
-    className: styledJsx_cjs.style.dynamic([["1707413548", [bgColor, color, isDisabled ? 'not-allowed' : 'pointer', SCALES.font(0.75), SCALES.width(1, '100%'), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.border, SCALES.width(1, '100%'), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.border, SCALES.font(0.875), SCALES.width(1, '100%')]]]) + " " + (props && props.className != null && props.className || classes || "")
+    className: styledJsx_cjs.style.dynamic([["345093284", [bgColor, color, isDisabled ? 'not-allowed' : 'pointer', SCALES.font(0.75), SCALES.width(1, '100%'), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.accents_3, SCALES.width(1, '100%'), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.accents_3, SCALES.font(0.875), SCALES.width(1, '100%')]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), /*#__PURE__*/React__default["default"].createElement(Ellipsis$1, {
     height: SCALES.height(2.25)
   }, children), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "1707413548",
-    dynamic: [bgColor, color, isDisabled ? 'not-allowed' : 'pointer', SCALES.font(0.75), SCALES.width(1, '100%'), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.border, SCALES.width(1, '100%'), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.border, SCALES.font(0.875), SCALES.width(1, '100%')]
-  }, ".option.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:normal;background-color:".concat(bgColor, ";color:").concat(color, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;--select-font-size:").concat(SCALES.font(0.75), ";font-size:var(--select-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(2.25), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.667), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.option.__jsx-style-dynamic-selector:hover{background-color:").concat(hoverBgColor, ";color:").concat(theme.palette.accents_7, ";}.divider.__jsx-style-dynamic-selector{line-height:0;overflow:hidden;border-top:1px solid ").concat(theme.palette.border, ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0.5), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.5), " ").concat(SCALES.ml(0), ";}.label.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_7, ";border-bottom:1px solid ").concat(theme.palette.border, ";text-transform:capitalize;cursor:default;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, '100%'), ";font-weight:500;}")));
+    id: "345093284",
+    dynamic: [bgColor, color, isDisabled ? 'not-allowed' : 'pointer', SCALES.font(0.75), SCALES.width(1, '100%'), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.accents_3, SCALES.width(1, '100%'), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.accents_3, SCALES.font(0.875), SCALES.width(1, '100%')]
+  }, ".option.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:normal;background-color:".concat(bgColor, ";color:").concat(color, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;--select-font-size:").concat(SCALES.font(0.75), ";font-size:var(--select-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(2.25), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.667), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.option.__jsx-style-dynamic-selector:hover{background-color:").concat(hoverBgColor, ";color:").concat(theme.palette.accents_7, ";}.divider.__jsx-style-dynamic-selector{line-height:0;overflow:hidden;border-top:1px solid ").concat(theme.palette.accents_3, ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0.5), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.5), " ").concat(SCALES.ml(0), ";}.label.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_7, ";border-bottom:1px solid ").concat(theme.palette.accents_3, ";text-transform:capitalize;cursor:default;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, '100%'), ";font-weight:500;}")));
 }
 
 SelectOptionComponent.displayName = 'BolioUISelectOption';

package/dist/Select/styles.d.ts

@@ -1,8 +1,9 @@
 import { BolioUIThemesPalette } from "../Themes/Presets";
 export declare type SelectColor = {
-    border: string;
-    borderActive: string;
-    iconBorder: string;
-    placeholderColor: string;
+    color: string;
+    bgColor: string;
+    borderColor: string;
+    hoverBgColor: string;
+    hoverBorder: string;
 };
 export declare const getColors: (palette: BolioUIThemesPalette, status?: "success" | "primary" | "secondary" | "error" | "warning" | "info" | "default" | undefined) => SelectColor;