@bolio-ui/core 1.0.7 → 1.0.8

package/esm/ButtonDropdown/ButtonDropdown.js

@@ -65,9 +65,9 @@ function ButtonDropdownComponent(_ref) {
     loading: loading
   };
   var bgColor = 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(ref, function () {
@@ -79,31 +79,31 @@ function ButtonDropdownComponent(_ref) {
     ref: ref,
     onClick: stopPropagation
   }, props, {
-    className: _JSXStyle.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('btn-dropdown', className) || "")
+    className: _JSXStyle.dynamic([["1128620377", [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('btn-dropdown', className) || "")
   }), mainItemChildren, /*#__PURE__*/React.createElement("details", {
     open: visible,
-    className: _JSXStyle.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: _JSXStyle.dynamic([["1128620377", [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.createElement("summary", {
     onClick: clickHandler,
-    className: _JSXStyle.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: _JSXStyle.dynamic([["1128620377", [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.createElement("div", {
-    className: _JSXStyle.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: _JSXStyle.dynamic([["1128620377", [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.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: _JSXStyle.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: _JSXStyle.dynamic([["1128620377", [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.createElement(ButtonDropdownIcon, {
-    color: colors.color,
+    color: disabled || loading ? theme.palette.accents_4 : colors.color,
     height: SCALES.height(2.5)
   }))), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.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: _JSXStyle.dynamic([["1128620377", [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.createElement(_JSXStyle, {
-    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: "1128620377",
+    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:1px solid ".concat(colors.borderColor, ";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:hover{border:1px solid ").concat(colors.hoverBorder, ";}.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;}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.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';

package/esm/ButtonDropdown/ButtonDropdownItem.js

@@ -41,11 +41,11 @@ function ButtonDropdownItem(_ref) {
   return /*#__PURE__*/React.createElement("button", _extends({
     onClick: clickHandler
   }, props, {
-    className: _JSXStyle.dynamic([["3452455908", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]]) + " " + (props && props.className != null && props.className || className || "")
+    className: _JSXStyle.dynamic([["313713234", [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]]]) + " " + (props && props.className != null && props.className || className || "")
   }), loading ? /*#__PURE__*/React.createElement(Loading, null) : children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    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';

package/esm/ButtonDropdown/Icon.js

@@ -12,7 +12,7 @@ function ButtonDropdownIcon(_ref) {
     viewBox: "0 0 24 24",
     width: height,
     height: height,
-    strokeWidth: "1",
+    strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     fill: "none",

package/esm/ButtonDropdown/styles.d.ts

@@ -3,6 +3,7 @@ import { NormalTypes } from "../utils/prop-types";
 declare type ButtonDropdownColors = {
     color: string;
     bgColor: string;
+    borderColor: string;
     hoverBgColor: string;
     hoverBorder: string;
     borderLeftColor: string;

package/esm/ButtonDropdown/styles.js

@@ -3,58 +3,69 @@ export var getColor = 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,
+      color: palette.foreground,
+      bgColor: palette.accents_2,
+      borderColor: palette.accents_2,
       borderLeftColor: palette.accents_2,
-      hoverBgColor: palette.accents_1,
+      hoverBgColor: palette.accents_2,
       hoverBorder: palette.accents_2
     },
     primary: {
-      color: palette.background,
-      bgColor: palette.primary,
+      color: palette.primaryDark,
+      bgColor: palette.primaryLighter,
+      borderColor: palette.primaryDark,
       borderLeftColor: palette.primaryDark,
-      hoverBgColor: palette.primaryDark,
-      hoverBorder: palette.primaryDark
+      hoverBgColor: palette.primaryLight,
+      hoverBorder: palette.primary
     },
     secondary: {
-      color: palette.background,
-      bgColor: palette.secondary,
+      color: palette.secondaryDark,
+      bgColor: palette.secondaryLighter,
+      borderColor: palette.secondaryDark,
       borderLeftColor: palette.secondaryDark,
-      hoverBgColor: palette.secondaryDark,
-      hoverBorder: palette.secondaryDark
+      hoverBgColor: palette.secondaryLight,
+      hoverBorder: palette.secondary
     },
     success: {
-      color: palette.background,
-      bgColor: palette.success,
+      color: palette.successDark,
+      bgColor: palette.successLighter,
+      borderColor: palette.successDark,
       borderLeftColor: palette.successDark,
-      hoverBgColor: palette.successDark,
-      hoverBorder: palette.successDark
+      hoverBgColor: palette.successLight,
+      hoverBorder: palette.success
     },
     warning: {
-      color: palette.background,
-      bgColor: palette.warning,
+      color: palette.warningDark,
+      bgColor: palette.warningLighter,
+      borderColor: palette.warningDark,
       borderLeftColor: palette.warningDark,
-      hoverBgColor: palette.warningDark,
-      hoverBorder: palette.warningDark
+      hoverBgColor: palette.warningLight,
+      hoverBorder: palette.warning
     },
     error: {
-      color: palette.background,
-      bgColor: palette.error,
+      color: palette.errorDark,
+      bgColor: palette.errorLighter,
+      borderColor: palette.errorDark,
       borderLeftColor: palette.errorDark,
-      hoverBgColor: palette.errorDark,
-      hoverBorder: palette.errorDark
+      hoverBgColor: palette.errorLight,
+      hoverBorder: palette.error
     },
     info: {
-      color: palette.background,
-      bgColor: palette.info,
+      color: palette.infoDark,
+      bgColor: palette.infoLighter,
+      borderColor: palette.infoDark,
       borderLeftColor: palette.infoDark,
-      hoverBgColor: palette.infoDark,
-      hoverBorder: palette.infoDark
+      hoverBgColor: palette.infoLight,
+      hoverBorder: palette.info
     }
   };
   if (disabled) return _extends({}, 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_3
   });
   return type ? colors[type] : colors["default"];
 };

package/esm/ButtonGroup/ButtonGroup.js

@@ -20,11 +20,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"];

package/esm/Capacity/stories.js

@@ -8,13 +8,22 @@ export default {
 export var Default = function Default() {
   return /*#__PURE__*/React.createElement(Grid.Container, {
     gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 4,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Capacity, {
     value: 15,
     width: "200px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 4,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Capacity, {
     value: 45,
     width: "200px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 4,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Capacity, {
     value: 95,
     width: "200px"
   })));
@@ -23,31 +32,52 @@ export var FixedColor = function FixedColor() {
   var theme = useTheme();
   return /*#__PURE__*/React.createElement(Grid.Container, {
     gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Capacity, {
     value: 75,
     color: theme.palette.foreground,
     width: "200px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Capacity, {
     value: 75,
     color: theme.palette.primary,
     width: "200px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Capacity, {
     value: 75,
     color: theme.palette.secondary,
     width: "200px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Capacity, {
     value: 75,
     color: theme.palette.success,
     width: "200px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Capacity, {
     value: 75,
     color: theme.palette.warning,
     width: "200px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Capacity, {
     value: 75,
     color: theme.palette.error,
     width: "200px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Capacity, {
     value: 75,
     color: theme.palette.info,
     width: "200px"

package/esm/Card/Card.d.ts

@@ -3,6 +3,7 @@ import { CardTypes } from "../utils/prop-types";
 interface Props {
     hoverable?: boolean;
     rounded?: boolean;
+    bordered?: boolean;
     shadow?: boolean;
     className?: string;
     type?: CardTypes;

package/esm/Card/Card.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "hoverable", "rounded", "className", "shadow", "type"];
+var _excluded = ["children", "hoverable", "rounded", "bordered", "className", "shadow", "type"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
@@ -15,6 +15,7 @@ import useClasses from '../use-classes';
 var defaultProps = {
   type: 'default',
   hoverable: false,
+  bordered: false,
   shadow: false,
   className: ''
 };
@@ -23,8 +24,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,
@@ -59,11 +60,11 @@ function CardComponent(_ref) {
 
   var hasContent = hasChild(withoutImageChildren, CardContent);
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.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('card', className) || "")
+    className: _JSXStyle.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('card', className) || "")
   }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React.createElement(CardContent, null, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
-    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;

package/esm/Card/stories.js

@@ -17,19 +17,68 @@ export var Default = function Default() {
 export var Hover = function Hover() {
   return /*#__PURE__*/React.createElement(Grid.Container, {
     gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Card, {
     hoverable: true
-  }, "A hover default card.")));
+  }, "A hoverable default card.")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Card, {
+    hoverable: true,
+    type: "primary"
+  }, "A hoverable primary card.")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Card, {
+    hoverable: true,
+    type: "secondary"
+  }, "A hoverable secondary card.")));
+};
+export var Border = function Border() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Card, {
+    bordered: true
+  }, "A bordered default card.")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Card, {
+    bordered: true,
+    type: "primary"
+  }, "A bordered primary card.")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Card, {
+    bordered: true,
+    type: "secondary"
+  }, "A bordered secondary card.")));
 };
 export var Shadow = function Shadow() {
   return /*#__PURE__*/React.createElement(Grid.Container, {
     gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Card, {
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Card, {
     shadow: true
-  }, /*#__PURE__*/React.createElement(Text, {
-    h4: true,
-    my: 0
-  }, "React is declarative"), /*#__PURE__*/React.createElement(Text, null, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Text, null, "Declarative views make your code more predictable and easier to debug."))));
+  }, "A shadow default card.")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    type: "primary"
+  }, "A shadow primary card.")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    type: "secondary"
+  }, "A shadow secondary card.")));
 };
 export var Variants = function Variants() {
   var tuple = function tuple() {

package/esm/Card/styles.js

@@ -3,39 +3,48 @@ export var getStyles = 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;

package/esm/Checkbox/Checkbox.js

@@ -88,7 +88,7 @@ function CheckboxComponent(_ref) {
     setSelfChecked(checked);
   }, [checked]);
   return /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.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: _JSXStyle.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.createElement(CheckboxIcon, {
     fill: fill,
     bg: bg,
@@ -100,13 +100,13 @@ function CheckboxComponent(_ref) {
     checked: selfChecked,
     onChange: changeHandle
   }, props, {
-    className: _JSXStyle.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: _JSXStyle.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.createElement("span", {
-    className: _JSXStyle.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: _JSXStyle.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.createElement(_JSXStyle, {
-    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';