@bolio-ui/core 1.0.7 → 1.0.9

package/dist/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: '#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,32 +367,32 @@ var palette = {
   accents_6: '#999',
   accents_7: '#eaeaea',
   accents_8: '#fafafa',
-  selection: '#f81ce5',
+  selection: 'rgba(248,28,229, 0.5)',
   code: '#C25FFF',
   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',
@@ -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;
@@ -960,7 +960,7 @@ function AvatarComponent(_ref) {
     };
   }, [loading, showAnimation]);
   return /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styledJsx_cjs.style.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
+    className: styledJsx_cjs.style.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
   }, !showText && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showSkeleton && showAnimation && /*#__PURE__*/React__default["default"].createElement(AvatarSkeleton$1, {
     opacity: loading ? 1 : 0
   }), /*#__PURE__*/React__default["default"].createElement("img", _extends({
@@ -970,13 +970,13 @@ function AvatarComponent(_ref) {
     onLoad: imageLoaded,
     draggable: false
   }, props, {
-    className: styledJsx_cjs.style.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
+    className: styledJsx_cjs.style.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
   }))), showText && /*#__PURE__*/React__default["default"].createElement("span", _extends({}, props, {
-    className: styledJsx_cjs.style.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
+    className: styledJsx_cjs.style.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
   }), safeText(text)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "2739790524",
+    id: "2828293809",
     dynamic: [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]
-  }, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.accents_2, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
+  }, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.accents_2, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";font-weight:bold;text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-transform:none;}")));
 }
 
 AvatarComponent.displayName = 'BolioUIAvatar';
@@ -1013,7 +1013,7 @@ var _excluded$1h = ["type", "className", "children", "dot"];
 
 var getBgColor = function getBgColor(type, palette) {
   var colors = {
-    "default": palette.foreground,
+    "default": palette.accents_2,
     secondary: palette.secondary,
     primary: palette.primary,
     success: palette.success,
@@ -1043,18 +1043,18 @@ function BadgeComponent(_ref) {
     return getBgColor(type, theme.palette);
   }, [type, theme.palette]);
   var color = React.useMemo(function () {
-    if (!type || type === 'default') return theme.palette.background;
-    return 'white';
-  }, [type, theme.palette.background]);
+    if (!type || type === 'default') return theme.palette.foreground;
+    return '#FFFFFF';
+  }, [type, theme.palette.foreground]);
   var classes = useClasses$1('badge', {
     dot: dot
   }, className);
   return /*#__PURE__*/React__default["default"].createElement("span", _extends({}, props, {
-    className: styledJsx_cjs.style.dynamic([["3372370275", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
+    className: styledJsx_cjs.style.dynamic([["2850533964", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), !dot && children, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "3372370275",
+    id: "2850533964",
     dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
-  }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";font-weight:500;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.5), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
+  }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";font-weight:bold;text-transform:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.5), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
 }
 
 BadgeComponent.displayName = 'BolioUIBadge';
@@ -1654,9 +1654,9 @@ var getButtonColors = function getButtonColors(palette, props) {
       ghost = props.ghost;
   var colors = {
     "default": {
-      bg: palette.background,
-      border: palette.border,
-      color: palette.accents_5
+      bg: palette.accents_2,
+      border: palette.accents_2,
+      color: palette.foreground
     },
     primary: {
       bg: palette.primary,
@@ -1695,9 +1695,9 @@ var getButtonColors = function getButtonColors(palette, props) {
     }
   };
   if (disabled) return {
-    bg: palette.accents_1,
-    border: palette.accents_2,
-    color: '#ccc'
+    bg: palette.accents_3,
+    border: palette.accents_3,
+    color: palette.accents_5
   };
   /**
    * The '-light' type is the same color as the common type,
@@ -1810,7 +1810,7 @@ var getButtonHoverColors = function getButtonHoverColors(palette, props) {
     })
   };
   if (disabled) return {
-    bg: palette.accents_1,
+    bg: palette.accents_2,
     border: palette.accents_2,
     color: '#ccc'
   };
@@ -1841,7 +1841,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   var type = props.type;
   var isLightHover = type === null || type === void 0 ? void 0 : type.endsWith('light');
   var hoverColors = getButtonHoverColors(palette, props);
-  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
+  return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_3, 0.65);
 };
 
 var _excluded$1d = ["children", "disabled", "type", "loading", "shadow", "ghost", "rounded", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className"];
@@ -1960,7 +1960,7 @@ var ButtonComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     disabled: disabled,
     onClick: clickHandler
   }, props, {
-    className: styledJsx_cjs.style.dynamic([["3337261033", [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]]]) + " " + (props && props.className != null && props.className || useClasses$1('btn', className) || "")
+    className: styledJsx_cjs.style.dynamic([["1204671885", [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]]]) + " " + (props && props.className != null && props.className || useClasses$1('btn', className) || "")
   }), loading && /*#__PURE__*/React__default["default"].createElement(ButtonLoading, {
     color: color
   }), childrenWithIcon, dripShow && /*#__PURE__*/React__default["default"].createElement(ButtonDrip$1, {
@@ -1969,9 +1969,9 @@ var ButtonComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     color: dripColor,
     onCompleted: dripCompletedHandle
   }), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "3337261033",
+    id: "1204671885",
     dynamic: [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]
-  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";font-weight:500;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? '0 4px 10px 0' + bg : 'none', ";--bolio-ui-button-icon-padding:").concat(SCALES.pl(0.75), ";--bolio-ui-button-height:").concat(SCALES.height(2.5), ";--bolio-ui-button-color:").concat(color, ";--bolio-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--bolio-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";}.btn.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.98,0.98);-ms-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
+  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";font-weight:bold;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? '0 4px 10px 0' + bg : 'none', ";--bolio-ui-button-icon-padding:").concat(SCALES.pl(0.75), ";--bolio-ui-button-height:").concat(SCALES.height(2.5), ";--bolio-ui-button-color:").concat(color, ";--bolio-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{cursor:").concat(cursor, ";pointer-events:").concat(events, ";}.btn.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.98,0.98);-ms-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
 });
 ButtonComponent.defaultProps = defaultProps$d;
 ButtonComponent.displayName = 'BolioUIButton';
@@ -2314,11 +2314,11 @@ function BreadcrumbsComponent(_ref) {
     return item;
   });
   return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: styledJsx_cjs.style.dynamic([["2655258916", [theme.palette.accents_4, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme.palette.accents_6]]]) + " " + (className || "")
+    className: styledJsx_cjs.style.dynamic([["3435904432", [theme.palette.accents_5, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme.palette.accents_7]]]) + " " + (className || "")
   }, withSeparatorChildren, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "2655258916",
-    dynamic: [theme.palette.accents_4, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme.palette.accents_6]
-  }, "nav.__jsx-style-dynamic-selector{line-height:inherit;color:".concat(theme.palette.accents_4, ";box-sizing:border-box;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;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}nav.__jsx-style-dynamic-selector .link:hover{color:").concat(hoverColor, ";}nav.__jsx-style-dynamic-selector>span:last-of-type{color:").concat(theme.palette.accents_6, ";}nav.__jsx-style-dynamic-selector>.separator:last-child{display:none;}nav.__jsx-style-dynamic-selector svg{width:1em;height:1em;margin:0 4px;}nav.__jsx-style-dynamic-selector .breadcrumbs-item{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;}")));
+    id: "3435904432",
+    dynamic: [theme.palette.accents_5, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme.palette.accents_7]
+  }, "nav.__jsx-style-dynamic-selector{line-height:inherit;color:".concat(theme.palette.accents_5, ";box-sizing:border-box;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;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}nav.__jsx-style-dynamic-selector .link:hover{color:").concat(hoverColor, ";}nav.__jsx-style-dynamic-selector>span:last-of-type{color:").concat(theme.palette.accents_7, ";}nav.__jsx-style-dynamic-selector>.separator:last-child{display:none;}nav.__jsx-style-dynamic-selector svg{width:1em;height:1em;margin:0 4px;}nav.__jsx-style-dynamic-selector .breadcrumbs-item{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;}")));
 }
 
 BreadcrumbsComponent.displayName = 'BolioUIBreadcrumbs';
@@ -2466,58 +2466,69 @@ var getColor$4 = function getColor(palette, type) {
   var disabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var colors = {
     "default": {
-      color: palette.accents_5,
-      bgColor: palette.background,
-      borderLeftColor: palette.accents_2,
-      hoverBgColor: palette.accents_1,
-      hoverBorder: palette.accents_2
+      color: palette.foreground,
+      bgColor: palette.accents_2,
+      borderColor: palette.accents_3,
+      borderLeftColor: palette.accents_3,
+      hoverBgColor: palette.accents_3,
+      hoverBorder: palette.accents_7
     },
     primary: {
-      color: palette.background,
-      bgColor: palette.primary,
-      borderLeftColor: palette.primaryDark,
-      hoverBgColor: palette.primaryDark,
-      hoverBorder: palette.primaryDark
+      color: palette.primaryDark,
+      bgColor: palette.primaryLight,
+      borderColor: palette.primary,
+      borderLeftColor: palette.primary,
+      hoverBgColor: palette.primaryLight,
+      hoverBorder: palette.primary
     },
     secondary: {
-      color: palette.background,
-      bgColor: palette.secondary,
-      borderLeftColor: palette.secondaryDark,
-      hoverBgColor: palette.secondaryDark,
-      hoverBorder: palette.secondaryDark
+      color: palette.secondaryDark,
+      bgColor: palette.secondaryLight,
+      borderColor: palette.secondary,
+      borderLeftColor: palette.secondary,
+      hoverBgColor: palette.secondaryLight,
+      hoverBorder: palette.secondary
     },
     success: {
-      color: palette.background,
-      bgColor: palette.success,
-      borderLeftColor: palette.successDark,
-      hoverBgColor: palette.successDark,
-      hoverBorder: palette.successDark
+      color: palette.successDark,
+      bgColor: palette.successLight,
+      borderColor: palette.success,
+      borderLeftColor: palette.success,
+      hoverBgColor: palette.successLight,
+      hoverBorder: palette.success
     },
     warning: {
-      color: palette.background,
-      bgColor: palette.warning,
-      borderLeftColor: palette.warningDark,
-      hoverBgColor: palette.warningDark,
-      hoverBorder: palette.warningDark
+      color: palette.warningDark,
+      bgColor: palette.warningLight,
+      borderColor: palette.warning,
+      borderLeftColor: palette.warning,
+      hoverBgColor: palette.warningLight,
+      hoverBorder: palette.warning
     },
     error: {
-      color: palette.background,
-      bgColor: palette.error,
-      borderLeftColor: palette.errorDark,
-      hoverBgColor: palette.errorDark,
-      hoverBorder: palette.errorDark
+      color: palette.errorDark,
+      bgColor: palette.errorLight,
+      borderColor: palette.error,
+      borderLeftColor: palette.error,
+      hoverBgColor: palette.errorLight,
+      hoverBorder: palette.error
     },
     info: {
-      color: palette.background,
-      bgColor: palette.info,
-      borderLeftColor: palette.infoDark,
-      hoverBgColor: palette.infoDark,
-      hoverBorder: palette.infoDark
+      color: palette.infoDark,
+      bgColor: palette.infoLight,
+      borderColor: palette.info,
+      borderLeftColor: palette.info,
+      hoverBgColor: palette.infoLight,
+      hoverBorder: palette.info
     }
   };
   if (disabled) return _objectSpread2(_objectSpread2({}, colors["default"]), {}, {
-    bgColor: palette.accents_1,
-    color: palette.accents_4
+    color: palette.accents_5,
+    bgColor: palette.accents_3,
+    borderColor: palette.accents_4,
+    borderLeftColor: palette.accents_4,
+    hoverBgColor: palette.accents_3,
+    hoverBorder: palette.accents_4
   });
   return type ? colors[type] : colors["default"];
 };
@@ -2533,7 +2544,7 @@ function ButtonDropdownIcon(_ref) {
     viewBox: "0 0 24 24",
     width: height,
     height: height,
-    strokeWidth: "1",
+    strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     fill: "none",
@@ -2595,11 +2606,11 @@ function ButtonDropdownItem(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("button", _extends({
     onClick: clickHandler
   }, props, {
-    className: styledJsx_cjs.style.dynamic([["3452455908", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]]) + " " + (props && props.className != null && props.className || className || "")
+    className: styledJsx_cjs.style.dynamic([["313713234", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]]) + " " + (props && props.className != null && props.className || className || "")
   }), loading ? /*#__PURE__*/React__default["default"].createElement(Loading$1, null) : children, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "3452455908",
+    id: "313713234",
     dynamic: [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]
-  }, "button.__jsx-style-dynamic-selector{position:relative;-webkit-appearance:button;text-rendering:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;text-align:center;cursor:".concat(cursor, ";box-sizing:border-box;margin:0;border:none;background-color:").concat(colors.bgColor, ";color:").concat(colors.color, ";width:100%;height:var(--bolio-ui-dropdown-height);min-width:var(--bolio-ui-dropdown-min-width);padding:var(--bolio-ui-dropdown-padding);font-size:var(--bolio-ui-dropdown-font-size);}button.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}")));
+  }, "button.__jsx-style-dynamic-selector{position:relative;-webkit-appearance:button;text-rendering:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;text-align:center;cursor:".concat(cursor, ";box-sizing:border-box;margin:0;border:none;background-color:").concat(colors.bgColor, ";color:").concat(colors.color, ";width:100%;height:var(--bolio-ui-dropdown-height);min-width:var(--bolio-ui-dropdown-min-width);padding:var(--bolio-ui-dropdown-padding);font-size:var(--bolio-ui-dropdown-font-size);font-weight:bold;}button.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}")));
 }
 
 ButtonDropdownItem.displayName = 'BolioUIButtonDropdownItem';
@@ -2657,9 +2668,9 @@ function ButtonDropdownComponent(_ref) {
     loading: loading
   };
   var bgColor = React.useMemo(function () {
-    if (disabled || loading) return theme.palette.accents_1;
+    if (disabled || loading) return theme.palette.accents_3;
     return visible ? colors.hoverBgColor : colors.bgColor;
-  }, [disabled, loading, theme.palette.accents_1, visible, colors.hoverBgColor, colors.bgColor]);
+  }, [disabled, loading, theme.palette.accents_3, visible, colors.hoverBgColor, colors.bgColor]);
   var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
       paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
   useClickAway$1(ref, function () {
@@ -2671,31 +2682,31 @@ function ButtonDropdownComponent(_ref) {
     ref: ref,
     onClick: stopPropagation
   }, props, {
-    className: styledJsx_cjs.style.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || useClasses$1('btn-dropdown', className) || "")
+    className: styledJsx_cjs.style.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || useClasses$1('btn-dropdown', className) || "")
   }), mainItemChildren, /*#__PURE__*/React__default["default"].createElement("details", {
     open: visible,
-    className: styledJsx_cjs.style.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
+    className: styledJsx_cjs.style.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React__default["default"].createElement("summary", {
     onClick: clickHandler,
-    className: styledJsx_cjs.style.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
+    className: styledJsx_cjs.style.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-box"
+    className: styledJsx_cjs.style.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-box"
   }, icon ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      color: colors.color,
+      color: disabled || loading ? theme.palette.error : colors.color,
       height: SCALES.height(2.5),
       width: SCALES.height(2.5)
     },
-    className: styledJsx_cjs.style.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-icon"
+    className: styledJsx_cjs.style.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-icon"
   }, icon) : /*#__PURE__*/React__default["default"].createElement(ButtonDropdownIcon, {
-    color: colors.color,
+    color: disabled || loading ? theme.palette.accents_4 : colors.color,
     height: SCALES.height(2.5)
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["2624345116", [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "content"
+    className: styledJsx_cjs.style.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "content"
   }, itemChildrenWithoutMain)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "2624345116",
-    dynamic: [theme.palette.border, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]
-  }, ".btn-dropdown.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;box-sizing:border-box;border:1px solid ".concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";--bolio-ui-dropdown-height:").concat(SCALES.height(2.5), ";--bolio-ui-dropdown-min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";--bolio-ui-dropdown-padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";--bolio-ui-dropdown-font-size:").concat(SCALES.font(0.875), ";}.btn-dropdown.__jsx-style-dynamic-selector>button{border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}details.__jsx-style-dynamic-selector{border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";overflow:hidden;}.dropdown-box.__jsx-style-dynamic-selector{height:").concat(SCALES.height(2.5), ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;}summary.__jsx-style-dynamic-selector{box-sizing:border-box;-webkit-tap-highlight-color:transparent;list-style:none;outline:none;color:").concat(colors.color, ";background-color:").concat(bgColor, ";height:").concat(SCALES.height(2.5), ";border-left:1px solid ").concat(colors.borderLeftColor, ";cursor:").concat(disabled || loading ? 'not-allowed' : 'pointer', ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;padding:0 1px;-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;}summary.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.content.__jsx-style-dynamic-selector{position:absolute;right:0;left:0;z-index:90;width:100%;border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowLarge, ";-webkit-transform:translateY(").concat(theme.layout.gapHalf, ");-ms-transform:translateY(").concat(theme.layout.gapHalf, ");transform:translateY(").concat(theme.layout.gapHalf, ");background-color:").concat(theme.palette.background, ";}.content.__jsx-style-dynamic-selector>button:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";border-top-right-radius:").concat(theme.layout.radius, ";}.content.__jsx-style-dynamic-selector>button:last-of-type{border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.dropdown-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"))));
+    id: "2141984301",
+    dynamic: [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]
+  }, ".btn-dropdown.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;box-sizing:border-box;border-radius:".concat(theme.layout.radius, ";--bolio-ui-dropdown-height:").concat(SCALES.height(2.5), ";--bolio-ui-dropdown-min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";--bolio-ui-dropdown-padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";--bolio-ui-dropdown-font-size:").concat(SCALES.font(0.875), ";}.btn-dropdown.__jsx-style-dynamic-selector>button{border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}details.__jsx-style-dynamic-selector{border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";overflow:hidden;}.dropdown-box.__jsx-style-dynamic-selector{height:").concat(SCALES.height(2.5), ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;}summary.__jsx-style-dynamic-selector{box-sizing:border-box;-webkit-tap-highlight-color:transparent;list-style:none;outline:none;color:").concat(colors.color, ";background-color:").concat(bgColor, ";height:").concat(SCALES.height(2.5), ";cursor:").concat(disabled || loading ? 'not-allowed' : 'pointer', ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;padding:0 1px;-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;}.content.__jsx-style-dynamic-selector{position:absolute;right:0;left:0;z-index:90;width:100%;border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowSmall, ";-webkit-transform:translateY(").concat(theme.layout.gapHalf, ");-ms-transform:translateY(").concat(theme.layout.gapHalf, ");transform:translateY(").concat(theme.layout.gapHalf, ");background-color:").concat(theme.palette.background, ";}.content.__jsx-style-dynamic-selector>button:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";border-top-right-radius:").concat(theme.layout.radius, ";}.content.__jsx-style-dynamic-selector>button:last-of-type{border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.dropdown-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"))));
 }
 
 ButtonDropdownComponent.displayName = 'BolioUIButtonDropdown';
@@ -2718,11 +2729,13 @@ var getGroupBorderColors = function getGroupBorderColors(palette, props) {
       type = props.type;
   if (!ghost && type !== 'default') return palette.background;
   var colors = {
-    "default": palette.border,
-    success: palette.success,
+    // default: palette.accents_3,
+    primary: palette.primary,
     secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
     error: palette.error,
-    warning: palette.warning
+    info: palette.info
   };
   var withoutLightType = type === null || type === void 0 ? void 0 : type.replace('-light', '');
   return colors[withoutLightType] || colors["default"];
@@ -2848,39 +2861,48 @@ var getStyles$1 = function getStyles(type, palette, isShadow) {
   var colors = {
     "default": {
       color: palette.foreground,
-      bgColor: palette.accents_2
-    },
-    dark: {
-      color: palette.background,
-      bgColor: palette.foreground
+      bgColor: palette.accents_1,
+      borderColor: palette.accents_2
     },
     primary: {
-      color: palette.background,
-      bgColor: palette.primary
+      color: palette.primaryDark,
+      bgColor: palette.primaryLighter,
+      borderColor: palette.primaryDark
     },
     secondary: {
-      color: palette.background,
-      bgColor: palette.secondary
+      color: palette.secondaryDark,
+      bgColor: palette.secondaryLighter,
+      borderColor: palette.secondaryDark
     },
     success: {
-      color: palette.background,
-      bgColor: palette.success
+      color: palette.successDark,
+      bgColor: palette.successLighter,
+      borderColor: palette.successDark
     },
     warning: {
-      color: palette.background,
-      bgColor: palette.warning
+      color: palette.warningDark,
+      bgColor: palette.warningLighter,
+      borderColor: palette.warningDark
     },
     error: {
+      color: palette.errorDark,
+      bgColor: palette.errorLighter,
+      borderColor: palette.errorDark
+    },
+    info: {
+      color: palette.infoDark,
+      bgColor: palette.infoLighter,
+      borderColor: palette.infoDark
+    },
+    dark: {
       color: palette.background,
-      bgColor: palette.error
+      bgColor: palette.foreground,
+      borderColor: palette.foreground
     },
     lite: {
       color: palette.foreground,
-      bgColor: palette.background
-    },
-    info: {
-      color: palette.background,
-      bgColor: palette.info
+      bgColor: palette.background,
+      borderColor: palette.foreground
     }
   };
   var showBorder = type === 'default' && !isShadow;
@@ -3173,10 +3195,11 @@ var ImageBrowser$1 = ImageBrowser;
 
 Image$1.Browser = ImageBrowser$1;
 
-var _excluded$11 = ["children", "hoverable", "rounded", "className", "shadow", "type"];
+var _excluded$11 = ["children", "hoverable", "rounded", "bordered", "className", "shadow", "type"];
 var defaultProps$b = {
   type: 'default',
   hoverable: false,
+  bordered: false,
   shadow: false,
   className: ''
 };
@@ -3185,8 +3208,8 @@ function CardComponent(_ref) {
   var children = _ref.children,
       hoverable = _ref.hoverable,
       rounded = _ref.rounded,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
+      bordered = _ref.bordered,
+      className = _ref.className,
       shadow = _ref.shadow,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
@@ -3221,11 +3244,11 @@ function CardComponent(_ref) {
 
   var hasContent = hasChild(withoutImageChildren, CardContent$1);
   return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
-    className: styledJsx_cjs.style.dynamic([["1209748169", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
+    className: styledJsx_cjs.style.dynamic([["3321159247", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, bordered ? '1px solid' + borderColor : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
   }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React__default["default"].createElement(CardContent$1, null, withoutImageChildren), footerChildren, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "1209748169",
-    dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
-  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
+    id: "3321159247",
+    dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, bordered ? '1px solid' + borderColor : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
+  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:").concat(bordered ? '1px solid' + borderColor : 'none', ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
 }
 
 CardComponent.defaultProps = defaultProps$b;
@@ -3253,7 +3276,9 @@ function CheckboxIconComponent(_ref) {
       bg = _ref.bg,
       disabled = _ref.disabled,
       checked = _ref.checked;
-  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
 
   var _useMemo = React.useMemo(function () {
     return {
@@ -3261,31 +3286,47 @@ function CheckboxIconComponent(_ref) {
       propsBg: bg
     };
   }, [bg, fill]),
-      propsFill = _useMemo.propsFill,
-      propsBg = _useMemo.propsBg;
+      propsFill = _useMemo.propsFill;
 
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, checked ? /*#__PURE__*/React__default["default"].createElement("svg", {
-    viewBox: "0 0 17 16",
+    viewBox: "0 0 24 24",
+    style: {
+      height: SCALES.font(1),
+      width: SCALES.font(1)
+    },
+    className: styledJsx_cjs.style.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  }, /*#__PURE__*/React__default["default"].createElement("g", {
+    stroke: propsFill,
+    strokeWidth: "0.5",
     fill: "none",
+    fillRule: "evenodd",
     className: styledJsx_cjs.style.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M12.1429 0H3.85714C1.7269 0 0 1.79086 0 4V12C0 14.2091 1.7269 16 3.85714 16H12.1429C14.2731 16 16 14.2091 16 12V4C16 1.79086 14.2731 0 12.1429 0Z",
+  }, /*#__PURE__*/React__default["default"].createElement("g", {
     fill: propsFill,
     className: styledJsx_cjs.style.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  }), /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M16 3L7.72491 11L5 8",
-    stroke: propsBg,
-    strokeWidth: "1.5",
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 L18.25,3 Z M18.25,4.5 L5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 Z M10,14.4393398 L16.4696699,7.96966991 C16.7625631,7.6767767 17.2374369,7.6767767 17.5303301,7.96966991 C17.7965966,8.23593648 17.8208027,8.65260016 17.6029482,8.94621165 L17.5303301,9.03033009 L10.5303301,16.0303301 C10.2640635,16.2965966 9.84739984,16.3208027 9.55378835,16.1029482 L9.46966991,16.0303301 L6.46966991,13.0303301 C6.1767767,12.7374369 6.1767767,12.2625631 6.46966991,11.9696699 C6.73593648,11.7034034 7.15260016,11.6791973 7.44621165,11.8970518 L7.53033009,11.9696699 L10,14.4393398 L16.4696699,7.96966991 L10,14.4393398 Z",
     className: styledJsx_cjs.style.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  })) : /*#__PURE__*/React__default["default"].createElement("svg", {
-    viewBox: "0 0 12 12",
+  })))) : /*#__PURE__*/React__default["default"].createElement("svg", {
+    viewBox: "0 0 24 24",
+    style: {
+      height: SCALES.font(1),
+      width: SCALES.font(1)
+    },
+    className: styledJsx_cjs.style.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  }, /*#__PURE__*/React__default["default"].createElement("g", {
+    stroke: propsFill,
+    strokeWidth: "0.5",
     fill: "none",
+    fillRule: "evenodd",
+    className: styledJsx_cjs.style.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  }, /*#__PURE__*/React__default["default"].createElement("g", {
+    fill: propsFill,
     className: styledJsx_cjs.style.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
   }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
-    stroke: theme.palette.accents_5,
+    d: "M5.75,3 L18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 Z M5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 L5.75,4.5 Z",
     className: styledJsx_cjs.style.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
-  })), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
+  })))), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
     id: "996181129",
     dynamic: [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']
   }, "svg.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(0.86 * var(--checkbox-size));height:calc(0.86 * var(--checkbox-size));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:".concat(disabled ? 0.4 : 1, ";cursor:").concat(disabled ? 'not-allowed' : 'pointer', ";}")));
@@ -3426,7 +3467,7 @@ function CheckboxComponent(_ref) {
     setSelfChecked(checked);
   }, [checked]);
   return /*#__PURE__*/React__default["default"].createElement("label", {
-    className: styledJsx_cjs.style.dynamic([["4063610472", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
+    className: styledJsx_cjs.style.dynamic([["842595250", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
   }, /*#__PURE__*/React__default["default"].createElement(CheckboxIcon$1, {
     fill: fill,
     bg: bg,
@@ -3438,13 +3479,13 @@ function CheckboxComponent(_ref) {
     checked: selfChecked,
     onChange: changeHandle
   }, props, {
-    className: styledJsx_cjs.style.dynamic([["4063610472", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
+    className: styledJsx_cjs.style.dynamic([["842595250", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
   })), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styledJsx_cjs.style.dynamic([["4063610472", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
+    className: styledJsx_cjs.style.dynamic([["842595250", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
   }, children), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "4063610472",
-    dynamic: [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
-  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(0.875), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
+    id: "842595250",
+    dynamic: [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
+  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(1), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
 }
 
 CheckboxComponent.displayName = 'BolioUICheckbox';
@@ -5166,14 +5207,15 @@ var MemoInputLabel = /*#__PURE__*/React__default["default"].memo(InputLabel);
 var InputLabel$1 = MemoInputLabel;
 
 function InputBlockLabelComponent(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      error = _ref.error;
   var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement("label", {
-    className: styledJsx_cjs.style.dynamic([["1278828862", [theme.palette.accents_6]]])
+    className: styledJsx_cjs.style.dynamic([["3490168518", [error ? theme.palette.error : theme.palette.accents_6, error && '0.5em', error ? '0.875rem' : '1em']]])
   }, children, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "1278828862",
-    dynamic: [theme.palette.accents_6]
-  }, "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(theme.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
+    id: "3490168518",
+    dynamic: [error ? theme.palette.error : theme.palette.accents_6, error && '0.5em', error ? '0.875rem' : '1em']
+  }, "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(error ? theme.palette.error : theme.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;margin-bottom:").concat(error && '0.5em', ";font-size:").concat(error ? '0.875rem' : '1em', ";line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
 }
 
 InputBlockLabelComponent.displayName = 'BolioUIInputBlockLabel';
@@ -5240,44 +5282,72 @@ function InputIconClear(_ref) {
 var MemoInputIconClear = /*#__PURE__*/React__default["default"].memo(InputIconClear);
 var InputClearIcon = MemoInputIconClear;
 
-var getColors$6 = function getColors(palette, status) {
+var getColors$6 = function getColors(palette, status, disabled, readOnly) {
   var colors = {
     "default": {
       color: palette.foreground,
+      bgColor: palette.accents_2,
       borderColor: palette.accents_3,
-      hoverBorder: palette.accents_5
+      hoverBgColor: palette.accents_2,
+      hoverBorder: palette.accents_6
     },
     primary: {
-      color: palette.primary,
+      color: palette.primaryDark,
+      bgColor: palette.primaryLight,
       borderColor: palette.primary,
+      hoverBgColor: palette.primaryLight,
       hoverBorder: palette.primary
     },
     secondary: {
-      color: palette.secondary,
+      color: palette.secondaryDark,
+      bgColor: palette.secondaryLight,
       borderColor: palette.secondary,
+      hoverBgColor: palette.secondaryLight,
       hoverBorder: palette.secondary
     },
     success: {
-      color: palette.success,
+      color: palette.successDark,
+      bgColor: palette.successLight,
       borderColor: palette.success,
+      hoverBgColor: palette.successLight,
       hoverBorder: palette.success
     },
     warning: {
-      color: palette.warning,
+      color: palette.warningDark,
+      bgColor: palette.warningLight,
       borderColor: palette.warning,
+      hoverBgColor: palette.warningLight,
       hoverBorder: palette.warning
     },
     error: {
-      color: palette.error,
+      color: palette.errorDark,
+      bgColor: palette.errorLight,
       borderColor: palette.error,
+      hoverBgColor: palette.errorLight,
       hoverBorder: palette.error
     },
     info: {
-      color: palette.info,
+      color: palette.infoDark,
+      bgColor: palette.infoLight,
       borderColor: palette.info,
+      hoverBgColor: palette.infoLight,
       hoverBorder: palette.info
     }
   };
+  if (disabled) return {
+    color: palette.accents_5,
+    bgColor: palette.accents_3,
+    borderColor: palette.accents_4,
+    hoverBgColor: palette.accents_3,
+    hoverBorder: palette.accents_4
+  };
+  if (readOnly) return {
+    color: palette.foreground,
+    bgColor: palette.accents_2,
+    borderColor: palette.accents_3,
+    hoverBgColor: palette.accents_2,
+    hoverBorder: palette.accents_6
+  };
   if (!status) return colors["default"];
   return colors[status];
 };
@@ -5295,7 +5365,7 @@ var defaultProps$6 = {
   initialValue: ''
 };
 
-var _excluded$C = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor", "borderColor"];
+var _excluded$C = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor", "borderColor", "hoverBorder", "error", "errorMessage"];
 
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
@@ -5329,6 +5399,9 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
       rounded = _ref.rounded,
       backgroundColor = _ref.backgroundColor,
       borderColor = _ref.borderColor,
+      hoverBorder = _ref.hoverBorder,
+      error = _ref.error,
+      errorMessage = _ref.errorMessage,
       props = _objectWithoutProperties(_ref, _excluded$C);
 
   var theme = useTheme();
@@ -5360,13 +5433,9 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
   var iconClasses = React.useMemo(function () {
     return iconRight ? 'right-icon' : icon ? 'left-icon' : '';
   }, [icon, iconRight]);
-
-  var _useMemo = React.useMemo(function () {
-    return getColors$6(theme.palette, type);
-  }, [theme.palette, type]),
-      color = _useMemo.color,
-      borderColorThemed = _useMemo.borderColor,
-      hoverBorder = _useMemo.hoverBorder;
+  var colors = React.useMemo(function () {
+    return getColors$6(theme.palette, type, disabled);
+  }, [theme.palette, type, disabled]);
 
   var changeHandler = function changeHandler(event) {
     if (disabled || readOnly) return;
@@ -5421,11 +5490,11 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
   var inputProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
+    className: styledJsx_cjs.style.dynamic([["2075686027", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]]]) + " " + "with-label"
   }, children && /*#__PURE__*/React__default["default"].createElement(InputBlockLabel$1, null, children), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-container', className) || "")
+    className: styledJsx_cjs.style.dynamic([["2075686027", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]]]) + " " + (useClasses$1('input-container', className) || "")
   }, label && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, null, label), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-wrapper', {
+    className: styledJsx_cjs.style.dynamic([["2075686027", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]]]) + " " + (useClasses$1('input-wrapper', {
       hover: hover,
       disabled: disabled
     }, labelClasses) || "")
@@ -5442,7 +5511,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     onChange: changeHandler,
     autoComplete: autoComplete
   }, inputProps, {
-    className: styledJsx_cjs.style.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses$1({
+    className: styledJsx_cjs.style.dynamic([["2075686027", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses$1({
       disabled: disabled
     }, iconClasses) || "")
   })), clearable && /*#__PURE__*/React__default["default"].createElement(InputClearIcon, {
@@ -5453,10 +5522,12 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     icon: iconRight
   }, iconProps))), labelRight && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, {
     isRight: true
-  }, labelRight)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "2780775675",
-    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
-  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__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;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";border:1px solid ").concat(borderColor ? borderColor : borderColorThemed, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.accents_2, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
+  }, labelRight)), error && /*#__PURE__*/React__default["default"].createElement(InputBlockLabel$1, {
+    error: error
+  }, errorMessage), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
+    id: "2075686027",
+    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]
+  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__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;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";border:1px solid ").concat(borderColor ? borderColor : colors.borderColor, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : colors.bgColor, ";}.input-wrapper.active.__jsx-style-dynamic-selector,.input-wrapper.__jsx-style-dynamic-selector:hover{border:1px solid ").concat(hoverBorder ? hoverBorder : colors.hoverBorder, ";background:").concat(backgroundColor ? backgroundColor : colors.hoverBgColor, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(colors.hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(colors.color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(colors.color, " !important;}")));
 });
 InputComponent.defaultProps = defaultProps$6;
 InputComponent.displayName = 'BolioUIInput';
@@ -5508,13 +5579,9 @@ var TextareaComponent = /*#__PURE__*/React__default["default"].forwardRef(functi
       hover = _useState4[0],
       setHover = _useState4[1];
 
-  var _useMemo = React.useMemo(function () {
+  var colors = React.useMemo(function () {
     return getColors$6(theme.palette, type);
-  }, [theme.palette, type]),
-      color = _useMemo.color,
-      borderColor = _useMemo.borderColor,
-      hoverBorder = _useMemo.hoverBorder;
-
+  }, [theme.palette, type]);
   var classes = useClasses$1('wrapper', {
     hover: hover,
     disabled: disabled
@@ -5550,7 +5617,7 @@ var TextareaComponent = /*#__PURE__*/React__default["default"].forwardRef(functi
   var textareaProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["1283886166", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (classes || "")
+    className: styledJsx_cjs.style.dynamic([["2097224582", [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (classes || "")
   }, /*#__PURE__*/React__default["default"].createElement("textarea", _extends({
     ref: textareaRef,
     disabled: disabled,
@@ -5560,11 +5627,11 @@ var TextareaComponent = /*#__PURE__*/React__default["default"].forwardRef(functi
     onBlur: blurHandler,
     onChange: changeHandler
   }, textareaProps, {
-    className: styledJsx_cjs.style.dynamic([["1283886166", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
+    className: styledJsx_cjs.style.dynamic([["2097224582", [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
   })), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "1283886166",
-    dynamic: [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]
-  }, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";color:").concat(color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;height:var(--textarea-height);border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}")));
+    id: "2097224582",
+    dynamic: [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]
+  }, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(colors.borderColor, ";color:").concat(colors.color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";border-color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:").concat(colors.bgColor, ";box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";border-radius:").concat(theme.layout.radius, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.active.__jsx-style-dynamic-selector,textarea.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background:").concat(colors.hoverBgColor, ";}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}")));
 });
 TextareaComponent.displayName = 'BolioUITextarea';
 var Textarea = withScale$1(TextareaComponent);
@@ -7914,11 +7981,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;
@@ -7936,7 +8003,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",
@@ -7945,17 +8012,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);
@@ -7967,62 +8034,76 @@ 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';
 
-var getColors$3 = function getColors(palette, status) {
+var getColors$3 = function getColors(palette, status, disabled) {
   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.primaryLight,
+      borderColor: palette.primary,
+      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.secondaryLight,
+      borderColor: palette.secondary,
+      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.successLight,
+      borderColor: palette.success,
+      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.warningLight,
+      borderColor: palette.warning,
+      hoverBgColor: palette.warningLight,
+      hoverBorder: palette.warning
     },
     error: {
-      border: palette.error,
-      borderActive: palette.error,
-      iconBorder: palette.error,
-      placeholderColor: palette.error
+      color: palette.errorDark,
+      bgColor: palette.errorLight,
+      borderColor: palette.error,
+      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.infoLight,
+      borderColor: palette.info,
+      hoverBgColor: palette.infoLight,
+      hoverBorder: palette.info
     }
   };
+  if (disabled) return {
+    color: palette.accents_5,
+    bgColor: palette.accents_3,
+    borderColor: palette.accents_4,
+    hoverBgColor: palette.accents_3,
+    hoverBorder: palette.accents_4
+  };
   if (!status) return colors["default"];
   return colors[status];
 };
@@ -8147,14 +8228,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 () {
-    return getColors$3(theme.palette, type);
-  }, [theme.palette, type]),
-      border = _useMemo.border,
-      borderActive = _useMemo.borderActive,
-      iconBorder = _useMemo.iconBorder,
-      placeholderColor = _useMemo.placeholderColor;
+  var colors = React.useMemo(function () {
+    return getColors$3(theme.palette, type, disabled);
+  }, [theme.palette, type, disabled]);
 
   var updateVisible = function updateVisible(next) {
     onDropdownVisibleChange(next);
@@ -8262,7 +8338,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([["12953029", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, 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,
@@ -8271,11 +8347,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([["12953029", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, 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([["12953029", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, 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, {
@@ -8286,13 +8362,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([["12953029", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, 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([["12953029", [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, 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: "12953029",
+    dynamic: [disabled ? 'not-allowed' : 'pointer', colors.borderColor, theme.layout.radius, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, 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(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(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.select.active.icon.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover .icon.__jsx-style-dynamic-selector{color:").concat(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(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$4;
 SelectComponent.displayName = 'BolioUISelect';
@@ -8353,8 +8429,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;
@@ -8377,13 +8453,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';
@@ -9632,11 +9708,11 @@ function TabsItemComponent(_ref) {
       onClick: clickHandler,
       style: active ? activeStyle : {},
       "data-bolioui": "tab-item",
-      className: styledJsx_cjs.style.dynamic([["605786882", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]]]) + " " + (classes || "")
+      className: styledJsx_cjs.style.dynamic([["243163264", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]]]) + " " + (classes || "")
     }, label, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-      id: "605786882",
+      id: "243163264",
       dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]
-    }, ".tab.__jsx-style-dynamic-selector{position:relative;box-sizing:border-box;cursor:pointer;outline:0;text-transform:capitalize;white-space:nowrap;background-color:transparent;color:".concat(theme.palette.accents_5, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;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;font-size:").concat(SCALES.font(0.875), ";line-height:normal;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.875), " ").concat(SCALES.pr(0.55), " ").concat(SCALES.pb(0.875), " ").concat(SCALES.pl(0.55), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.2), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.2), ";z-index:1;--tabs-item-hover-left:calc(-1 * ").concat(SCALES.pl(0.28), ");--tabs-item-hover-right:calc(-1 * ").concat(SCALES.pr(0.28), ");}.tab.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.tab.__jsx-style-dynamic-selector:after{position:absolute;content:'';bottom:-1px;left:0;right:0;width:100%;height:2px;border-radius:4px;-webkit-transform:scaleX(0.75);-ms-transform:scaleX(0.75);transform:scaleX(0.75);background-color:").concat(theme.palette.foreground, ";-webkit-transition:opacity,-webkit-transform 200ms ease-in;-webkit-transition:opacity,transform 200ms ease-in;transition:opacity,transform 200ms ease-in;opacity:0;}.active.__jsx-style-dynamic-selector:after{opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}.tab.__jsx-style-dynamic-selector svg{max-height:1em;margin-right:5px;}.tab.__jsx-style-dynamic-selector:first-of-type{margin-left:0;}.active.__jsx-style-dynamic-selector{color:").concat(theme.palette.foreground, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}.hide-border.__jsx-style-dynamic-selector:before{display:block;content:").concat(label, ";font-weight:500;height:0;overflow:hidden;visibility:hidden;}.hide-border.__jsx-style-dynamic-selector:after{display:none;}.hide-border.active.__jsx-style-dynamic-selector{font-weight:500;}")));
+    }, ".tab.__jsx-style-dynamic-selector{position:relative;box-sizing:border-box;cursor:pointer;outline:0;white-space:nowrap;background-color:transparent;color:".concat(theme.palette.accents_5, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;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;font-size:").concat(SCALES.font(0.875), ";line-height:normal;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.875), " ").concat(SCALES.pr(0.55), " ").concat(SCALES.pb(0.875), " ").concat(SCALES.pl(0.55), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.2), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.2), ";z-index:1;--tabs-item-hover-left:calc(-1 * ").concat(SCALES.pl(0.28), ");--tabs-item-hover-right:calc(-1 * ").concat(SCALES.pr(0.28), ");}.tab.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.tab.__jsx-style-dynamic-selector:after{position:absolute;content:'';bottom:-1px;left:0;right:0;width:100%;height:2px;border-radius:4px;-webkit-transform:scaleX(0.75);-ms-transform:scaleX(0.75);transform:scaleX(0.75);background-color:").concat(theme.palette.foreground, ";-webkit-transition:opacity,-webkit-transform 200ms ease-in;-webkit-transition:opacity,transform 200ms ease-in;transition:opacity,transform 200ms ease-in;opacity:0;}.active.__jsx-style-dynamic-selector:after{opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}.tab.__jsx-style-dynamic-selector svg{max-height:1em;margin-right:5px;}.tab.__jsx-style-dynamic-selector:first-of-type{margin-left:0;}.active.__jsx-style-dynamic-selector{color:").concat(theme.palette.foreground, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}.hide-border.__jsx-style-dynamic-selector:before{display:block;content:").concat(label, ";font-weight:500;height:0;overflow:hidden;visibility:hidden;}.hide-border.__jsx-style-dynamic-selector:after{display:none;}.hide-border.active.__jsx-style-dynamic-selector{font-weight:500;}")));
   };
 
   TabsInternalCell.displayName = 'BolioUITabsInternalCell';
@@ -9981,21 +10057,21 @@ function ToggleComponent(_ref) {
     setSelfChecked(checked);
   }, [checked]);
   return /*#__PURE__*/React__default["default"].createElement("label", _extends({}, props, {
-    className: styledJsx_cjs.style.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || "")
+    className: styledJsx_cjs.style.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React__default["default"].createElement("input", {
     type: "checkbox",
     disabled: disabled,
     checked: selfChecked,
     onChange: changeHandle,
-    className: styledJsx_cjs.style.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]])
+    className: styledJsx_cjs.style.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]])
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || "")
+    className: styledJsx_cjs.style.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || "")
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styledJsx_cjs.style.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + "inner"
+    className: styledJsx_cjs.style.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + "inner"
   })), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "3938822023",
-    dynamic: [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]
-  }, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";--toggle-font-size:").concat(SCALES.font(1), ";--toggle-height:").concat(SCALES.height(0.875), ";width:").concat(SCALES.width(1.75), ";height:var(--toggle-height);padding:").concat(SCALES.pt(0.1875), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.1875), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}input.__jsx-style-dynamic-selector{overflow:hidden;visibility:hidden;height:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}.toggle.__jsx-style-dynamic-selector{height:var(--toggle-height);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:").concat(theme.palette.accents_2, ";padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0, rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:").concat(theme.palette.background, ";}.disabled.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}.disabled.checked.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_4, ";}.checked.__jsx-style-dynamic-selector{background-color:").concat(bg, ";}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 2px));box-shadow:none;}")));
+    id: "2317841100",
+    dynamic: [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]
+  }, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";--toggle-font-size:").concat(SCALES.font(1), ";--toggle-height:").concat(SCALES.height(1), ";width:").concat(SCALES.width(1.75), ";height:var(--toggle-height);padding:").concat(SCALES.pt(0.1875), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.1875), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}input.__jsx-style-dynamic-selector{overflow:hidden;visibility:hidden;height:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}.toggle.__jsx-style-dynamic-selector{height:calc(var(--toggle-height) + 2px);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:").concat(theme.palette.accents_2, ";padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0, rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}.disabled.checked.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_4, ";}.checked.__jsx-style-dynamic-selector{background-color:").concat(bg, ";}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 1px));box-shadow:none;}")));
 }
 
 ToggleComponent.displayName = 'BolioUIToggle';