@bolio-ui/core 1.0.1 → 1.0.3

package/dist/index.js

@@ -517,11 +517,11 @@ var useTheme$1 = function useTheme() {
 
 var useTheme = useTheme$1;
 
-var _excluded$1j = ["opacity"];
+var _excluded$1k = ["opacity"];
 var AvatarSkeleton = /*#__PURE__*/React__default["default"].memo(function (_ref) {
   var _ref$opacity = _ref.opacity,
       opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
-      props = _objectWithoutProperties(_ref, _excluded$1j);
+      props = _objectWithoutProperties(_ref, _excluded$1k);
 
   var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
@@ -540,7 +540,7 @@ var defaultDynamicLayoutPipe = function defaultDynamicLayoutPipe(scale1x) {
   return "".concat(scale1x);
 };
 
-var defaultContext$b = {
+var defaultContext$c = {
   getScaleProps: function getScaleProps() {
     return undefined;
   },
@@ -566,7 +566,7 @@ var defaultContext$b = {
   },
   unit: '16px'
 };
-var ScaleContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$b);
+var ScaleContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$c);
 var useScale$1 = function useScale() {
   return React__default["default"].useContext(ScaleContext);
 };
@@ -738,7 +738,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$1i = ["children"],
+var _excluded$1j = ["children"],
     _excluded2 = ["paddingLeft", "pl", "paddingRight", "pr", "paddingTop", "pt", "paddingBottom", "pb", "marginTop", "mt", "marginRight", "mr", "marginBottom", "mb", "marginLeft", "ml", "px", "py", "mx", "my", "width", "height", "font", "w", "h", "margin", "padding", "unit", "scale"];
 
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
@@ -753,7 +753,7 @@ var withScale = function withScale(Render) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
 
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$1i);
+        props = _objectWithoutProperties(_ref, _excluded$1j);
 
     var _useTheme = useTheme(),
         layout = _useTheme.layout;
@@ -898,7 +898,7 @@ var transformDataSource$1 = function transformDataSource(src) {
   return src;
 };
 
-var _excluded$1h = ["src", "stacked", "text", "isSquare", "className"];
+var _excluded$1i = ["src", "stacked", "text", "isSquare", "className"];
 
 var safeText = function safeText(text) {
   if (text.length <= 4) return text;
@@ -915,7 +915,7 @@ function AvatarComponent(_ref) {
       isSquare = _ref$isSquare === void 0 ? false : _ref$isSquare,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$1h);
+      props = _objectWithoutProperties(_ref, _excluded$1i);
 
   var theme = useTheme();
 
@@ -973,7 +973,7 @@ function AvatarComponent(_ref) {
     };
   }, [loading, showAnimation]);
   return /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styledJsx_cjs.style.dynamic([["1130296330", [radius, theme.palette.accents_1, 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([["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 || "")
   }, !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({
@@ -983,13 +983,13 @@ function AvatarComponent(_ref) {
     onLoad: imageLoaded,
     draggable: false
   }, props, {
-    className: styledJsx_cjs.style.dynamic([["1130296330", [radius, theme.palette.accents_1, 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([["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")
   }))), showText && /*#__PURE__*/React__default["default"].createElement("span", _extends({}, props, {
-    className: styledJsx_cjs.style.dynamic([["1130296330", [radius, theme.palette.accents_1, 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([["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")
   }), safeText(text)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "1130296330",
-    dynamic: [radius, theme.palette.accents_1, 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_1, ";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;}")));
+    id: "2739790524",
+    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;}")));
 }
 
 AvatarComponent.displayName = 'BolioUIAvatar';
@@ -1022,7 +1022,7 @@ var AvatarGroup$1 = AvatarGroup;
 
 Avatar$1.Group = AvatarGroup$1;
 
-var _excluded$1g = ["type", "className", "children", "dot"];
+var _excluded$1h = ["type", "className", "children", "dot"];
 
 var getBgColor = function getBgColor(type, palette) {
   var colors = {
@@ -1045,7 +1045,7 @@ function BadgeComponent(_ref) {
       children = _ref.children,
       _ref$dot = _ref.dot,
       dot = _ref$dot === void 0 ? false : _ref$dot,
-      props = _objectWithoutProperties(_ref, _excluded$1g);
+      props = _objectWithoutProperties(_ref, _excluded$1h);
 
   var theme = useTheme();
 
@@ -1316,8 +1316,8 @@ var usePortal = function usePortal() {
 
 var usePortal$1 = usePortal;
 
-var _excluded$1f = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
-var defaultProps$a = {
+var _excluded$1g = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
+var defaultProps$e = {
   visible: false,
   enterTime: 60,
   leaveTime: 60,
@@ -1334,7 +1334,7 @@ function CssTransition(_ref) {
       leaveTime = _ref.leaveTime,
       clearTime = _ref.clearTime,
       name = _ref.name,
-      props = _objectWithoutProperties(_ref, _excluded$1f);
+      props = _objectWithoutProperties(_ref, _excluded$1g);
 
   var _useState = React.useState(''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1380,10 +1380,10 @@ function CssTransition(_ref) {
   }));
 }
 
-CssTransition.defaultProps = defaultProps$a;
+CssTransition.defaultProps = defaultProps$e;
 CssTransition.displayName = 'BolioUICssTransition';
 
-var defaultProps$9 = {
+var defaultProps$d = {
   x: 0,
   y: 0
 };
@@ -1435,11 +1435,11 @@ var ButtonDrip = function ButtonDrip(_ref) {
   }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
 };
 
-ButtonDrip.defaultProps = defaultProps$9;
+ButtonDrip.defaultProps = defaultProps$d;
 ButtonDrip.displayName = 'BolioUItButtonDrip';
 var ButtonDrip$1 = ButtonDrip;
 
-var _excluded$1e = ["children", "type", "color", "className", "spaceRatio"];
+var _excluded$1f = ["children", "type", "color", "className", "spaceRatio"];
 
 var getIconBgColor = function getIconBgColor(type, palette, color) {
   var colors = {
@@ -1463,7 +1463,7 @@ function LoadingComponent(_ref) {
       className = _ref$className === void 0 ? '' : _ref$className,
       _ref$spaceRatio = _ref.spaceRatio,
       spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
-      props = _objectWithoutProperties(_ref, _excluded$1e);
+      props = _objectWithoutProperties(_ref, _excluded$1f);
 
   var theme = useTheme();
 
@@ -1509,7 +1509,7 @@ function ButtonLoading(_ref) {
 
 ButtonLoading.displayName = 'BolioUIButtonLoading';
 
-var _excluded$1d = ["isRight", "isSingle", "children", "className"];
+var _excluded$1e = ["isRight", "isSingle", "children", "className"];
 
 function ButtonIcon(_ref) {
   var _ref$isRight = _ref.isRight,
@@ -1518,7 +1518,7 @@ function ButtonIcon(_ref) {
       children = _ref.children,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$1d);
+      props = _objectWithoutProperties(_ref, _excluded$1e);
 
   var classes = useClasses$1('icon', {
     right: isRight,
@@ -1575,11 +1575,11 @@ var filterPropsWithGroup = function filterPropsWithGroup(props, config) {
   });
 };
 
-var defaultContext$a = {
+var defaultContext$b = {
   isButtonGroup: false,
   disabled: false
 };
-var ButtonGroupContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$a);
+var ButtonGroupContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$b);
 var useButtonGroupContext = function useButtonGroupContext() {
   return React__default["default"].useContext(ButtonGroupContext);
 };
@@ -1857,8 +1857,8 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
   return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
 };
 
-var _excluded$1c = ["children", "disabled", "type", "loading", "shadow", "ghost", "rounded", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className"];
-var defaultProps$8 = {
+var _excluded$1d = ["children", "disabled", "type", "loading", "shadow", "ghost", "rounded", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className"];
+var defaultProps$c = {
   type: 'default',
   htmlType: 'button',
   ghost: false,
@@ -1914,7 +1914,7 @@ var ButtonComponent = /*#__PURE__*/React__default["default"].forwardRef(function
       htmlType = filteredProps.htmlType,
       iconRight = filteredProps.iconRight,
       className = filteredProps.className,
-      props = _objectWithoutProperties(filteredProps, _excluded$1c);
+      props = _objectWithoutProperties(filteredProps, _excluded$1d);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
 
@@ -1986,7 +1986,7 @@ var ButtonComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     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;}")));
 });
-ButtonComponent.defaultProps = defaultProps$8;
+ButtonComponent.defaultProps = defaultProps$c;
 ButtonComponent.displayName = 'BolioUIButton';
 var Button = withScale$1(ButtonComponent);
 var Button$1 = Button;
@@ -2367,7 +2367,7 @@ LinkIconComponent.displayName = 'BolioUILinkIcon';
 var LinkIcon = /*#__PURE__*/React__default["default"].memo(LinkIconComponent);
 var LinkIcon$1 = LinkIcon;
 
-var _excluded$1b = ["href", "color", "underline", "children", "className", "block", "icon"];
+var _excluded$1c = ["href", "color", "underline", "children", "className", "block", "icon"];
 var LinkComponent = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
       href = _ref$href === void 0 ? '' : _ref$href,
@@ -2382,7 +2382,7 @@ var LinkComponent = /*#__PURE__*/React__default["default"].forwardRef(function (
       block = _ref$block === void 0 ? false : _ref$block,
       _ref$icon = _ref.icon,
       icon = _ref$icon === void 0 ? false : _ref$icon,
-      props = _objectWithoutProperties(_ref, _excluded$1b);
+      props = _objectWithoutProperties(_ref, _excluded$1c);
 
   var theme = useTheme();
 
@@ -2409,7 +2409,7 @@ LinkComponent.displayName = 'BolioUILink';
 var Link = withScale$1(LinkComponent);
 var Link$1 = Link;
 
-var _excluded$1a = ["href", "nextLink", "onClick", "children", "className"];
+var _excluded$1b = ["href", "nextLink", "onClick", "children", "className"];
 var BreadcrumbsItem = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var href = _ref.href,
       _ref$nextLink = _ref.nextLink,
@@ -2418,7 +2418,7 @@ var BreadcrumbsItem = /*#__PURE__*/React__default["default"].forwardRef(function
       children = _ref.children,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$1a);
+      props = _objectWithoutProperties(_ref, _excluded$1b);
 
   var isLink = React.useMemo(function () {
     return href !== undefined || nextLink;
@@ -2562,18 +2562,18 @@ function ButtonDropdownIcon(_ref) {
 
 ButtonDropdownIcon.displayName = 'BolioUIButtonDropdownIcon';
 
-var defaultContext$9 = {
+var defaultContext$a = {
   type: 'default',
   auto: false,
   disabled: false,
   loading: false
 };
-var ButtonDropdownContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$9);
+var ButtonDropdownContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$a);
 var useButtonDropdown = function useButtonDropdown() {
   return React__default["default"].useContext(ButtonDropdownContext);
 };
 
-var _excluded$19 = ["children", "onClick", "className", "main", "type"];
+var _excluded$1a = ["children", "onClick", "className", "main", "type"];
 
 function ButtonDropdownItem(_ref) {
   var children = _ref.children,
@@ -2584,7 +2584,7 @@ function ButtonDropdownItem(_ref) {
       main = _ref$main === void 0 ? false : _ref$main,
       _ref$type = _ref.type,
       selfType = _ref$type === void 0 ? 'default' : _ref$type,
-      props = _objectWithoutProperties(_ref, _excluded$19);
+      props = _objectWithoutProperties(_ref, _excluded$1a);
 
   var theme = useTheme();
 
@@ -2617,7 +2617,7 @@ function ButtonDropdownItem(_ref) {
 
 ButtonDropdownItem.displayName = 'BolioUIButtonDropdownItem';
 
-var _excluded$18 = ["children", "type", "auto", "className", "disabled", "loading", "icon"];
+var _excluded$19 = ["children", "type", "auto", "className", "disabled", "loading", "icon"];
 
 var stopPropagation = function stopPropagation(event) {
   event.stopPropagation();
@@ -2637,7 +2637,7 @@ function ButtonDropdownComponent(_ref) {
       _ref$loading = _ref.loading,
       loading = _ref$loading === void 0 ? false : _ref$loading,
       icon = _ref.icon,
-      props = _objectWithoutProperties(_ref, _excluded$18);
+      props = _objectWithoutProperties(_ref, _excluded$19);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -2717,8 +2717,8 @@ var ButtonDropdown$1 = ButtonDropdown;
 
 ButtonDropdown$1.Item = ButtonDropdownItem;
 
-var _excluded$17 = ["disabled", "type", "ghost", "vertical", "children", "className"];
-var defaultProps$7 = {
+var _excluded$18 = ["disabled", "type", "ghost", "vertical", "children", "className"];
+var defaultProps$b = {
   disabled: false,
   vertical: false,
   ghost: false,
@@ -2753,7 +2753,7 @@ function ButtonGroupComponent(groupProps) {
       vertical = groupProps.vertical,
       children = groupProps.children,
       className = groupProps.className,
-      props = _objectWithoutProperties(groupProps, _excluded$17);
+      props = _objectWithoutProperties(groupProps, _excluded$18);
 
   var initialValue = React.useMemo(function () {
     return {
@@ -2780,7 +2780,7 @@ function ButtonGroupComponent(groupProps) {
   }, ".btn-group.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(border, ";background-color:transparent;overflow:hidden;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'min-content'), ";margin:").concat(SCALES.mt(0.313), " ").concat(SCALES.mr(0.313), " ").concat(SCALES.mb(0.313), " ").concat(SCALES.ml(0.313), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.vertical.__jsx-style-dynamic-selector{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.btn-group.__jsx-style-dynamic-selector .btn{border:none;}.btn-group.__jsx-style-dynamic-selector .btn .text{top:0;}.horizontal.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid ").concat(border, ";}.horizontal.__jsx-style-dynamic-selector .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;}.vertical.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid ").concat(border, ";}.vertical.__jsx-style-dynamic-selector .btn:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;}"))));
 }
 
-ButtonGroupComponent.defaultProps = defaultProps$7;
+ButtonGroupComponent.defaultProps = defaultProps$b;
 ButtonGroupComponent.displayName = 'BolioUIButtonGroup';
 var ButtonGroup = withScale$1(ButtonGroupComponent);
 var ButtonGroup$1 = ButtonGroup;
@@ -2812,7 +2812,7 @@ var useProportions = function useProportions(value, max) {
   }, [value, max, maxFixed]);
 };
 
-var _excluded$16 = ["value", "limit", "color", "className"];
+var _excluded$17 = ["value", "limit", "color", "className"];
 
 var getColor$3 = function getColor(val, palette) {
   if (val < 33) return palette.info;
@@ -2828,7 +2828,7 @@ function CapacityComponent(_ref) {
       userColor = _ref.color,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$16);
+      props = _objectWithoutProperties(_ref, _excluded$17);
 
   var theme = useTheme();
 
@@ -2861,7 +2861,7 @@ var getStyles$1 = function getStyles(type, palette, isShadow) {
   var colors = {
     "default": {
       color: palette.foreground,
-      bgColor: palette.accents_1
+      bgColor: palette.accents_2
     },
     dark: {
       color: palette.background,
@@ -2902,7 +2902,7 @@ var getStyles$1 = function getStyles(type, palette, isShadow) {
   });
 };
 
-var _excluded$15 = ["children", "className", "disableAutoMargin"];
+var _excluded$16 = ["children", "className", "disableAutoMargin"];
 
 function CardFooterComponent(_ref) {
   var children = _ref.children,
@@ -2910,7 +2910,7 @@ function CardFooterComponent(_ref) {
       className = _ref$className === void 0 ? '' : _ref$className,
       _ref$disableAutoMargi = _ref.disableAutoMargin,
       disableAutoMargin = _ref$disableAutoMargi === void 0 ? false : _ref$disableAutoMargi,
-      props = _objectWithoutProperties(_ref, _excluded$15);
+      props = _objectWithoutProperties(_ref, _excluded$16);
 
   var theme = useTheme();
 
@@ -2932,13 +2932,13 @@ CardFooterComponent.displayName = 'BolioUICardFooter';
 var CardFooter = withScale$1(CardFooterComponent);
 var CardFooter$1 = CardFooter;
 
-var _excluded$14 = ["className", "children"];
+var _excluded$15 = ["className", "children"];
 
 function CardContentComponent(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$14);
+      props = _objectWithoutProperties(_ref, _excluded$15);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -2955,11 +2955,11 @@ CardContentComponent.displayName = 'BolioUICardContent';
 var CardContent = withScale$1(CardContentComponent);
 var CardContent$1 = CardContent;
 
-var _excluded$13 = ["opacity"];
+var _excluded$14 = ["opacity"];
 var ImageSkeleton = /*#__PURE__*/React__default["default"].memo(function (_ref) {
   var _ref$opacity = _ref.opacity,
       opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
-      props = _objectWithoutProperties(_ref, _excluded$13);
+      props = _objectWithoutProperties(_ref, _excluded$14);
 
   var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
@@ -2989,7 +2989,7 @@ var getHostFromUrl = function getHostFromUrl(url) {
   }
 };
 
-var _excluded$12 = ["src", "disableSkeleton", "className", "maxDelay"];
+var _excluded$13 = ["src", "disableSkeleton", "className", "maxDelay"];
 
 function ImageComponent(_ref) {
   var src = _ref.src,
@@ -2999,7 +2999,7 @@ function ImageComponent(_ref) {
       className = _ref$className === void 0 ? '' : _ref$className,
       _ref$maxDelay = _ref.maxDelay,
       maxDelay = _ref$maxDelay === void 0 ? 3000 : _ref$maxDelay,
-      props = _objectWithoutProperties(_ref, _excluded$12);
+      props = _objectWithoutProperties(_ref, _excluded$13);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES,
@@ -3108,7 +3108,7 @@ var getBrowserColors = function getBrowserColors(invert, palette) {
   };
 };
 
-var _excluded$11 = ["url", "title", "children", "showFullLink", "invert", "anchorProps", "className"];
+var _excluded$12 = ["url", "title", "children", "showFullLink", "invert", "anchorProps", "className"];
 
 var getTitle = function getTitle(title, colors) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3146,7 +3146,7 @@ var ImageBrowserComponent = /*#__PURE__*/React__default["default"].forwardRef(fu
       anchorProps = _ref$anchorProps === void 0 ? {} : _ref$anchorProps,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$11);
+      props = _objectWithoutProperties(_ref, _excluded$12);
 
   var theme = useTheme();
 
@@ -3186,7 +3186,7 @@ var ImageBrowser$1 = ImageBrowser;
 
 Image$1.Browser = ImageBrowser$1;
 
-var _excluded$10 = ["children", "hoverable", "rounded", "className", "shadow", "type"];
+var _excluded$11 = ["children", "hoverable", "rounded", "className", "shadow", "type"];
 
 function CardComponent(_ref) {
   var children = _ref.children,
@@ -3200,7 +3200,7 @@ function CardComponent(_ref) {
       shadow = _ref$shadow === void 0 ? false : _ref$shadow,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
-      props = _objectWithoutProperties(_ref, _excluded$10);
+      props = _objectWithoutProperties(_ref, _excluded$11);
 
   var theme = useTheme();
 
@@ -3249,12 +3249,12 @@ Card$1.Actions = CardFooter$1;
 Card$1.Content = CardContent$1;
 Card$1.Body = CardContent$1;
 
-var defaultContext$8 = {
+var defaultContext$9 = {
   disabledAll: false,
   inGroup: false,
   values: []
 };
-var CheckboxContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$8);
+var CheckboxContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$9);
 var useCheckbox = function useCheckbox() {
   return React__default["default"].useContext(CheckboxContext);
 };
@@ -3359,7 +3359,7 @@ var getColors$7 = function getColors(palette, status) {
   return colors[status];
 };
 
-var _excluded$$ = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value"];
+var _excluded$10 = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value"];
 
 function CheckboxComponent(_ref) {
   var checked = _ref.checked,
@@ -3375,7 +3375,7 @@ function CheckboxComponent(_ref) {
       type = _ref$type === void 0 ? 'default' : _ref$type,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? '' : _ref$value,
-      props = _objectWithoutProperties(_ref, _excluded$$);
+      props = _objectWithoutProperties(_ref, _excluded$10);
 
   var theme = useTheme();
 
@@ -3462,7 +3462,7 @@ CheckboxComponent.displayName = 'BolioUICheckbox';
 var Checkbox = withScale$1(CheckboxComponent);
 var Checkbox$1 = Checkbox;
 
-var _excluded$_ = ["disabled", "onChange", "value", "children", "className"];
+var _excluded$$ = ["disabled", "onChange", "value", "children", "className"];
 
 function CheckboxGroupComponent(_ref) {
   var _ref$disabled = _ref.disabled,
@@ -3472,7 +3472,7 @@ function CheckboxGroupComponent(_ref) {
       children = _ref.children,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$_);
+      props = _objectWithoutProperties(_ref, _excluded$$);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -3525,7 +3525,7 @@ var CheckboxGroup$1 = CheckboxGroup;
 
 Checkbox$1.Group = CheckboxGroup$1;
 
-var _excluded$Z = ["children", "block", "className", "name", "classic"];
+var _excluded$_ = ["children", "block", "className", "name", "classic"];
 
 function CodeComponent(_ref) {
   var children = _ref.children,
@@ -3537,7 +3537,7 @@ function CodeComponent(_ref) {
       name = _ref$name === void 0 ? '' : _ref$name,
       _ref$classic = _ref.classic,
       classic = _ref$classic === void 0 ? false : _ref$classic,
-      props = _objectWithoutProperties(_ref, _excluded$Z);
+      props = _objectWithoutProperties(_ref, _excluded$_);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -3576,7 +3576,7 @@ CodeComponent.displayName = 'BolioUICode';
 var Code = withScale$1(CodeComponent);
 var Code$1 = Code;
 
-var _excluded$Y = ["component", "children", "span", "offset", "className"];
+var _excluded$Z = ["component", "children", "span", "offset", "className"];
 
 function Col(_ref) {
   var _ref$component = _ref.component,
@@ -3588,7 +3588,7 @@ function Col(_ref) {
       offset = _ref$offset === void 0 ? 0 : _ref$offset,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$Y);
+      props = _objectWithoutProperties(_ref, _excluded$Z);
 
   var Component = component;
   return /*#__PURE__*/React__default["default"].createElement(Component, _extends({}, props, {
@@ -3679,7 +3679,7 @@ var useRealShape = function useRealShape(ref) {
 
 var useRealShape$1 = useRealShape;
 
-var defaultProps$6 = {
+var defaultProps$a = {
   isExpanded: false,
   delay: 200
 };
@@ -3766,18 +3766,18 @@ function Expand(_ref) {
   }, ".container.__jsx-style-dynamic-selector{padding:0;margin:0;height:0;overflow:hidden;visibility:".concat(visible ? 'visible' : 'hidden', ";-webkit-transition:height ").concat(delay, "ms ease;transition:height ").concat(delay, "ms ease;}.expanded.__jsx-style-dynamic-selector{height:").concat(height, ";visibility:visible;}")));
 }
 
-Expand.defaultProps = defaultProps$6;
+Expand.defaultProps = defaultProps$a;
 Expand.displayName = 'BolioUIExpand';
 
-var defaultContext$7 = {
+var defaultContext$8 = {
   values: []
 };
-var CollapseContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$7);
+var CollapseContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$8);
 var useCollapseContext = function useCollapseContext() {
   return React__default["default"].useContext(CollapseContext);
 };
 
-var _excluded$X = ["children", "title", "subtitle", "initialVisible", "shadow", "className", "index"];
+var _excluded$Y = ["children", "title", "subtitle", "initialVisible", "shadow", "className", "index"];
 
 function CollapseComponent(_ref) {
   var children = _ref.children,
@@ -3790,7 +3790,7 @@ function CollapseComponent(_ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       index = _ref.index,
-      props = _objectWithoutProperties(_ref, _excluded$X);
+      props = _objectWithoutProperties(_ref, _excluded$Y);
 
   var theme = useTheme();
 
@@ -3858,7 +3858,7 @@ CollapseComponent.displayName = 'BolioUICollapse';
 var Collapse = withScale$1(CollapseComponent);
 var Collapse$1 = Collapse;
 
-var _excluded$W = ["children", "accordion", "className"];
+var _excluded$X = ["children", "accordion", "className"];
 
 function CollapseGroupComponent(_ref) {
   var children = _ref.children,
@@ -3866,7 +3866,7 @@ function CollapseGroupComponent(_ref) {
       accordion = _ref$accordion === void 0 ? true : _ref$accordion,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$W);
+      props = _objectWithoutProperties(_ref, _excluded$X);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -3924,8 +3924,8 @@ var CollapseGroup$1 = CollapseGroup;
 
 Collapse$1.Group = CollapseGroup$1;
 
-var _excluded$V = ["children", "component", "justify", "align", "fluid", "className"];
-var defaultProps$5 = {
+var _excluded$W = ["children", "component", "justify", "align", "fluid", "className"];
+var defaultProps$9 = {
   gap: 0,
   justify: 'start',
   align: 'top',
@@ -3958,7 +3958,7 @@ function Container(_ref) {
       align = _ref.align,
       fluid = _ref.fluid,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$V);
+      props = _objectWithoutProperties(_ref, _excluded$W);
 
   var Component = component;
   var theme = useTheme();
@@ -3978,10 +3978,10 @@ function Container(_ref) {
   }, ".container.__jsx-style-dynamic-selector{".concat(fluidWidth, ";padding-left:15px;padding-right:15px;margin-right:auto;margin-left:auto;-webkit-box-pack:").concat(justifyValue, ";-webkit-justify-content:").concat(justifyValue, ";-ms-flex-pack:").concat(justifyValue, ";justify-content:").concat(justifyValue, ";-webkit-align-items:").concat(alignValue, ";-webkit-box-align:").concat(alignValue, ";-ms-flex-align:").concat(alignValue, ";align-items:").concat(alignValue, ";}")));
 }
 
-Container.defaultProps = defaultProps$5;
+Container.defaultProps = defaultProps$9;
 Container.displayName = 'BolioUIContainer';
 
-var _excluded$U = ["title", "content", "className"];
+var _excluded$V = ["title", "content", "className"];
 
 function DescriptionComponent(_ref) {
   var _ref$title = _ref.title,
@@ -3990,7 +3990,7 @@ function DescriptionComponent(_ref) {
       content = _ref$content === void 0 ? '' : _ref$content,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$U);
+      props = _objectWithoutProperties(_ref, _excluded$V);
 
   var theme = useTheme();
 
@@ -4014,7 +4014,7 @@ DescriptionComponent.displayName = 'BolioUIDescription';
 var Description = withScale$1(DescriptionComponent);
 var Description$1 = Description;
 
-var _excluded$T = ["children", "caption", "shadow", "className"];
+var _excluded$U = ["children", "caption", "shadow", "className"];
 
 function DisplayComponent(_ref) {
   var children = _ref.children,
@@ -4024,7 +4024,7 @@ function DisplayComponent(_ref) {
       shadow = _ref$shadow === void 0 ? false : _ref$shadow,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$T);
+      props = _objectWithoutProperties(_ref, _excluded$U);
 
   var theme = useTheme();
 
@@ -4051,7 +4051,7 @@ DisplayComponent.displayName = 'BolioUIDisplay';
 var Display = withScale$1(DisplayComponent);
 var Display$1 = Display;
 
-var _excluded$S = ["type", "align", "children", "className"];
+var _excluded$T = ["type", "align", "children", "className"];
 
 var getColor$2 = function getColor(type, palette) {
   var colors = {
@@ -4076,7 +4076,7 @@ function DividerComponent(_ref) {
       children = _ref.children,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$S);
+      props = _objectWithoutProperties(_ref, _excluded$T);
 
   var theme = useTheme();
 
@@ -4110,7 +4110,7 @@ DividerComponent.displayName = 'BolioUIDivider';
 var Divider = withScale$1(DividerComponent);
 var Divider$1 = Divider;
 
-var _excluded$R = ["type", "children", "className"];
+var _excluded$S = ["type", "children", "className"];
 
 var getColor$1 = function getColor(type, theme) {
   var colors = {
@@ -4131,7 +4131,7 @@ function DotComponent(_ref) {
       children = _ref.children,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$R);
+      props = _objectWithoutProperties(_ref, _excluded$S);
 
   var theme = useTheme();
 
@@ -4422,8 +4422,8 @@ var useKeyboard = function useKeyboard(handler, keyBindings) {
 
 var useKeyboard$1 = useKeyboard;
 
-var _excluded$Q = ["children", "onClick", "visible", "width", "onContentClick", "backdropClassName", "positionClassName", "layerClassName"];
-var defaultProps$4 = {
+var _excluded$R = ["children", "onClick", "visible", "width", "onContentClick", "backdropClassName", "positionClassName", "layerClassName"];
+var defaultProps$8 = {
   onClick: function onClick() {},
   visible: false,
   // onContentClick: () => {},
@@ -4441,7 +4441,7 @@ function BackdropComponent(_ref) {
       backdropClassName = _ref.backdropClassName,
       positionClassName = _ref.positionClassName,
       layerClassName = _ref.layerClassName,
-      props = _objectWithoutProperties(_ref, _excluded$Q);
+      props = _objectWithoutProperties(_ref, _excluded$R);
 
   var theme = useTheme();
 
@@ -4486,7 +4486,7 @@ function BackdropComponent(_ref) {
   }, ".backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:1000;-webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;}.position.__jsx-style-dynamic-selector{position:relative;z-index:1001;outline:none;max-width:90%;width:".concat(width, ";margin:20px auto;vertical-align:middle;display:inline-block;}.backdrop.__jsx-style-dynamic-selector:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:").concat(theme.expressiveness.portalOpacity, ";background-color:black;-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:1000;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}"))));
 }
 
-BackdropComponent.defaultProps = defaultProps$4;
+BackdropComponent.defaultProps = defaultProps$8;
 BackdropComponent.displayName = 'BolioUIBackdrop';
 var Backdrop = /*#__PURE__*/React__default["default"].memo(BackdropComponent);
 var Backdrop$1 = Backdrop;
@@ -4518,7 +4518,7 @@ var getDrawerTransform = function getDrawerTransform(placement) {
   return translates[placement];
 };
 
-var _excluded$P = ["className", "children", "visible", "placement"];
+var _excluded$Q = ["className", "children", "visible", "placement"];
 
 function DrawerWrapper(_ref) {
   var _ref$className = _ref.className,
@@ -4527,7 +4527,7 @@ function DrawerWrapper(_ref) {
       _ref$visible = _ref.visible,
       visible = _ref$visible === void 0 ? false : _ref$visible,
       placement = _ref.placement,
-      props = _objectWithoutProperties(_ref, _excluded$P);
+      props = _objectWithoutProperties(_ref, _excluded$Q);
 
   var theme = useTheme();
 
@@ -4594,7 +4594,7 @@ function DrawerWrapper(_ref) {
 
 DrawerWrapper.displayName = 'BolioUIDrawerWrapper';
 
-var _excluded$O = ["visible", "keyboard", "disableBackdropClick", "wrapClassName", "children", "placement", "onClose", "onContentClick"];
+var _excluded$P = ["visible", "keyboard", "disableBackdropClick", "wrapClassName", "children", "placement", "onClose", "onContentClick"];
 
 function DrawerComponent(_ref) {
   var customVisible = _ref.visible,
@@ -4605,7 +4605,7 @@ function DrawerComponent(_ref) {
       placement = _ref.placement,
       onClose = _ref.onClose,
       onContentClick = _ref.onContentClick,
-      props = _objectWithoutProperties(_ref, _excluded$O);
+      props = _objectWithoutProperties(_ref, _excluded$P);
 
   var portal = usePortal$1('drawer');
 
@@ -4661,13 +4661,13 @@ DrawerComponent.displayName = 'BolioUIDrawer';
 var Drawer = withScale$1(DrawerComponent);
 var Drawer$1 = Drawer;
 
-var _excluded$N = ["className", "children"];
+var _excluded$O = ["className", "children"];
 
 function ModalTitleComponent(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$N);
+      props = _objectWithoutProperties(_ref, _excluded$O);
 
   var theme = useTheme();
 
@@ -4686,13 +4686,13 @@ ModalTitleComponent.displayName = 'BolioUIModalTitle';
 var ModalTitle = withScale$1(ModalTitleComponent);
 var ModalTitle$1 = ModalTitle;
 
-var _excluded$M = ["className", "children"];
+var _excluded$N = ["className", "children"];
 
 function ModalSubtitleComponent(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$M);
+      props = _objectWithoutProperties(_ref, _excluded$N);
 
   var theme = useTheme();
 
@@ -4711,13 +4711,13 @@ ModalSubtitleComponent.displayName = 'BolioUIModalSubtitle';
 var ModalSubtitle = withScale$1(ModalSubtitleComponent);
 var ModalSubtitle$1 = ModalSubtitle;
 
-var _excluded$L = ["className", "children"];
+var _excluded$M = ["className", "children"];
 
 function ModalContentComponent(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$L);
+      props = _objectWithoutProperties(_ref, _excluded$M);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -4738,13 +4738,13 @@ Drawer$1.Title = ModalTitle$1;
 Drawer$1.Subtitle = ModalSubtitle$1;
 Drawer$1.Content = ModalContent$1;
 
-var _excluded$K = ["className", "children"];
+var _excluded$L = ["className", "children"];
 
 function FieldsetTitle(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$K);
+      props = _objectWithoutProperties(_ref, _excluded$L);
 
   var classes = useClasses$1('title', className);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
@@ -4756,13 +4756,13 @@ function FieldsetTitle(_ref) {
 
 FieldsetTitle.displayName = 'BolioUIFieldsetTitle';
 
-var _excluded$J = ["className", "children"];
+var _excluded$K = ["className", "children"];
 
 function FieldsetSubtitle(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$J);
+      props = _objectWithoutProperties(_ref, _excluded$K);
 
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
     className: "jsx-2265168013" + " " + (props && props.className != null && props.className || className || "")
@@ -4773,13 +4773,13 @@ function FieldsetSubtitle(_ref) {
 
 FieldsetSubtitle.displayName = 'BolioUIFieldsetSubtitle';
 
-var _excluded$I = ["className", "children"];
+var _excluded$J = ["className", "children"];
 
 function FieldsetFooterComponent(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$I);
+      props = _objectWithoutProperties(_ref, _excluded$J);
 
   var theme = useTheme();
 
@@ -4798,13 +4798,13 @@ FieldsetFooterComponent.displayName = 'BolioUIFieldsetFooter';
 var FieldsetFooter = withScale$1(FieldsetFooterComponent);
 var FieldsetFooter$1 = FieldsetFooter;
 
-var _excluded$H = ["className", "children"];
+var _excluded$I = ["className", "children"];
 
 function FieldsetContentComponent(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$H);
+      props = _objectWithoutProperties(_ref, _excluded$I);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -4822,16 +4822,16 @@ FieldsetContentComponent.displayName = 'BolioUIFieldsetContent';
 var FieldsetContent = withScale$1(FieldsetContentComponent);
 var FieldsetContent$1 = FieldsetContent;
 
-var defaultContext$6 = {
+var defaultContext$7 = {
   inGroup: false,
   currentValue: ''
 };
-var FieldsetContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$6);
+var FieldsetContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$7);
 var useFieldset = function useFieldset() {
   return React__default["default"].useContext(FieldsetContext);
 };
 
-var _excluded$G = ["className", "title", "subtitle", "children", "value", "label"];
+var _excluded$H = ["className", "title", "subtitle", "children", "value", "label"];
 
 function FieldsetComponent(_ref) {
   var _ref$className = _ref.className,
@@ -4845,7 +4845,7 @@ function FieldsetComponent(_ref) {
       value = _ref$value === void 0 ? '' : _ref$value,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? '' : _ref$label,
-      props = _objectWithoutProperties(_ref, _excluded$G);
+      props = _objectWithoutProperties(_ref, _excluded$H);
 
   var theme = useTheme();
 
@@ -4913,7 +4913,7 @@ FieldsetComponent.displayName = 'BolioUIFieldset';
 var Fieldset = withScale$1(FieldsetComponent);
 var Fieldset$1 = Fieldset;
 
-var _excluded$F = ["className", "children", "value", "onChange"];
+var _excluded$G = ["className", "children", "value", "onChange"];
 
 function FieldsetGroupComponent(_ref) {
   var _ref$className = _ref.className,
@@ -4921,7 +4921,7 @@ function FieldsetGroupComponent(_ref) {
       children = _ref.children,
       value = _ref.value,
       onChange = _ref.onChange,
-      props = _objectWithoutProperties(_ref, _excluded$F);
+      props = _objectWithoutProperties(_ref, _excluded$G);
 
   var theme = useTheme();
 
@@ -4997,8 +4997,8 @@ Fieldset$1.Group = FieldsetGroup$1;
 Fieldset$1.Content = FieldsetContent$1;
 Fieldset$1.Body = FieldsetContent$1;
 
-var _excluded$E = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
-var defaultProps$3 = {
+var _excluded$F = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
+var defaultProps$7 = {
   xs: false,
   sm: false,
   md: false,
@@ -5041,7 +5041,7 @@ function GridBasicItem(_ref) {
       alignContent = _ref.alignContent,
       children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$E);
+      props = _objectWithoutProperties(_ref, _excluded$F);
 
   var theme = useTheme();
 
@@ -5083,16 +5083,16 @@ function GridBasicItem(_ref) {
   }, ".item.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1, 'inherit'), ";height:").concat(SCALES.height(1, 'auto'), ";}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xs.grow, ";-webkit-flex-grow:").concat(layout.xs.grow, ";-ms-flex-positive:").concat(layout.xs.grow, ";flex-grow:").concat(layout.xs.grow, ";max-width:").concat(layout.xs.width, ";-webkit-flex-basis:").concat(layout.xs.basis, ";-ms-flex-preferred-size:").concat(layout.xs.basis, ";flex-basis:").concat(layout.xs.basis, ";").concat(layout.xs.display, ";}@media only screen and (min-width:").concat(theme.breakpoints.sm.min, "){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.sm.grow, ";-webkit-flex-grow:").concat(layout.sm.grow, ";-ms-flex-positive:").concat(layout.sm.grow, ";flex-grow:").concat(layout.sm.grow, ";max-width:").concat(layout.sm.width, ";-webkit-flex-basis:").concat(layout.sm.basis, ";-ms-flex-preferred-size:").concat(layout.sm.basis, ";flex-basis:").concat(layout.sm.basis, ";").concat(layout.sm.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.md.min, "){.md.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.md.grow, ";-webkit-flex-grow:").concat(layout.md.grow, ";-ms-flex-positive:").concat(layout.md.grow, ";flex-grow:").concat(layout.md.grow, ";max-width:").concat(layout.md.width, ";-webkit-flex-basis:").concat(layout.md.basis, ";-ms-flex-preferred-size:").concat(layout.md.basis, ";flex-basis:").concat(layout.md.basis, ";").concat(layout.md.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.lg.min, "){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.lg.grow, ";-webkit-flex-grow:").concat(layout.lg.grow, ";-ms-flex-positive:").concat(layout.lg.grow, ";flex-grow:").concat(layout.lg.grow, ";max-width:").concat(layout.lg.width, ";-webkit-flex-basis:").concat(layout.lg.basis, ";-ms-flex-preferred-size:").concat(layout.lg.basis, ";flex-basis:").concat(layout.lg.basis, ";").concat(layout.lg.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.xl.min, "){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xl.grow, ";-webkit-flex-grow:").concat(layout.xl.grow, ";-ms-flex-positive:").concat(layout.xl.grow, ";flex-grow:").concat(layout.xl.grow, ";max-width:").concat(layout.xl.width, ";-webkit-flex-basis:").concat(layout.xl.basis, ";-ms-flex-preferred-size:").concat(layout.xl.basis, ";flex-basis:").concat(layout.xl.basis, ";").concat(layout.xl.display, ";}}")));
 }
 
-GridBasicItem.defaultProps = defaultProps$3;
+GridBasicItem.defaultProps = defaultProps$7;
 GridBasicItem.displayName = 'BolioUIGridBasicItem';
 
-var _excluded$D = ["children", "className"];
+var _excluded$E = ["children", "className"];
 
 function GridComponent(_ref) {
   var children = _ref.children,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$D);
+      props = _objectWithoutProperties(_ref, _excluded$E);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -5117,7 +5117,7 @@ GridComponent.displayName = 'BolioUIGrid';
 var Grid = withScale$1(GridComponent);
 var Grid$1 = Grid;
 
-var _excluded$C = ["gap", "wrap", "children", "className"];
+var _excluded$D = ["gap", "wrap", "children", "className"];
 
 function GridContainerComponent(_ref) {
   var _ref$gap = _ref.gap,
@@ -5127,7 +5127,7 @@ function GridContainerComponent(_ref) {
       children = _ref.children,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$C);
+      props = _objectWithoutProperties(_ref, _excluded$D);
 
   var _useScale = useScale(),
       unit = _useScale.unit,
@@ -5291,7 +5291,7 @@ var getColors$6 = function getColors(palette, status) {
   return colors[status];
 };
 
-var defaultProps$2 = {
+var defaultProps$6 = {
   disabled: false,
   readOnly: false,
   clearable: false,
@@ -5304,7 +5304,7 @@ var defaultProps$2 = {
   initialValue: ''
 };
 
-var _excluded$B = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor"];
+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"];
 
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
@@ -5337,7 +5337,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
       disabled = _ref.disabled,
       rounded = _ref.rounded,
       backgroundColor = _ref.backgroundColor,
-      props = _objectWithoutProperties(_ref, _excluded$B);
+      props = _objectWithoutProperties(_ref, _excluded$C);
 
   var theme = useTheme();
 
@@ -5429,11 +5429,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([["68057575", [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, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
+    className: styledJsx_cjs.style.dynamic([["363116299", [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, 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"
   }, children && /*#__PURE__*/React__default["default"].createElement(InputBlockLabel$1, null, children), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["68057575", [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, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-container', className) || "")
+    className: styledJsx_cjs.style.dynamic([["363116299", [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, 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) || "")
   }, label && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, null, label), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["68057575", [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, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-wrapper', {
+    className: styledJsx_cjs.style.dynamic([["363116299", [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, 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', {
       hover: hover,
       disabled: disabled
     }, labelClasses) || "")
@@ -5450,7 +5450,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     onChange: changeHandler,
     autoComplete: autoComplete
   }, inputProps, {
-    className: styledJsx_cjs.style.dynamic([["68057575", [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, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, 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([["363116299", [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, 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({
       disabled: disabled
     }, iconClasses) || "")
   })), clearable && /*#__PURE__*/React__default["default"].createElement(InputClearIcon, {
@@ -5462,16 +5462,16 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
   }, iconProps))), labelRight && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, {
     isRight: true
   }, labelRight)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "68057575",
-    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, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, 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, ";-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_3, ";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;}")));
+    id: "363116299",
+    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, 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, ";-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;}")));
 });
-InputComponent.defaultProps = defaultProps$2;
+InputComponent.defaultProps = defaultProps$6;
 InputComponent.displayName = 'BolioUIInput';
 var Input = withScale$1(InputComponent);
 var Input$1 = Input;
 
-var _excluded$A = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
+var _excluded$B = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
 tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -5491,7 +5491,7 @@ var TextareaComponent = /*#__PURE__*/React__default["default"].forwardRef(functi
       placeholder = _ref.placeholder,
       _ref$resize = _ref.resize,
       resize = _ref$resize === void 0 ? 'none' : _ref$resize,
-      props = _objectWithoutProperties(_ref, _excluded$A);
+      props = _objectWithoutProperties(_ref, _excluded$B);
 
   var theme = useTheme();
 
@@ -5607,16 +5607,16 @@ function PasswordIcon(_ref) {
 var MemoPasswordIcon = /*#__PURE__*/React__default["default"].memo(PasswordIcon);
 var PasswordIcon$1 = MemoPasswordIcon;
 
-var _excluded$z = ["hideToggle", "children"];
+var _excluded$A = ["hideToggle", "children"];
 
-var passwordDefaultProps = _objectSpread2(_objectSpread2({}, defaultProps$2), {}, {
+var passwordDefaultProps = _objectSpread2(_objectSpread2({}, defaultProps$6), {}, {
   hideToggle: false
 });
 
 var InputPasswordComponent = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var hideToggle = _ref.hideToggle,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$z);
+      props = _objectWithoutProperties(_ref, _excluded$A);
 
   var _useScale = useScale$1(),
       getAllScaleProps = _useScale.getAllScaleProps;
@@ -5669,7 +5669,7 @@ var InputPassword$1 = InputPassword;
 Input$1.Textarea = Textarea$1;
 Input$1.Password = InputPassword$1;
 
-var _excluded$y = ["command", "shift", "option", "ctrl", "children", "className"];
+var _excluded$z = ["command", "shift", "option", "ctrl", "children", "className"];
 
 function KeyboardComponent(_ref) {
   var _ref$command = _ref.command,
@@ -5683,7 +5683,7 @@ function KeyboardComponent(_ref) {
       children = _ref.children,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$y);
+      props = _objectWithoutProperties(_ref, _excluded$z);
 
   var theme = useTheme();
 
@@ -5712,7 +5712,7 @@ KeyboardComponent.displayName = 'BolioUIKeyboard';
 var Keyboard = withScale$1(KeyboardComponent);
 var Keyboard$1 = Keyboard;
 
-var _excluded$x = ["className", "children", "visible"];
+var _excluded$y = ["className", "children", "visible"];
 
 function ModalWrapper(_ref) {
   var _ref$className = _ref.className,
@@ -5720,7 +5720,7 @@ function ModalWrapper(_ref) {
       children = _ref.children,
       _ref$visible = _ref.visible,
       visible = _ref$visible === void 0 ? false : _ref$visible,
-      props = _objectWithoutProperties(_ref, _excluded$x);
+      props = _objectWithoutProperties(_ref, _excluded$y);
 
   var theme = useTheme();
 
@@ -5783,13 +5783,13 @@ function ModalWrapper(_ref) {
 
 ModalWrapper.displayName = 'BolioUIModalWrapper';
 
-var defaultContext$5 = {};
-var ModalContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$5);
+var defaultContext$6 = {};
+var ModalContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$6);
 var useModalContext = function useModalContext() {
   return React__default["default"].useContext(ModalContext);
 };
 
-var _excluded$w = ["className", "children", "onClick", "passive", "disabled"];
+var _excluded$x = ["className", "children", "onClick", "passive", "disabled"];
 var ModalActionComponent = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
@@ -5799,7 +5799,7 @@ var ModalActionComponent = /*#__PURE__*/React__default["default"].forwardRef(fun
       passive = _ref$passive === void 0 ? false : _ref$passive,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      props = _objectWithoutProperties(_ref, _excluded$w);
+      props = _objectWithoutProperties(_ref, _excluded$x);
 
   var theme = useTheme();
 
@@ -5857,11 +5857,11 @@ ModalActionComponent.displayName = 'BolioUIModalAction';
 var ModalAction = withScale$1(ModalActionComponent);
 var ModalAction$1 = ModalAction;
 
-var _excluded$v = ["children"];
+var _excluded$w = ["children"];
 
 var ModalActionsComponent = function ModalActionsComponent(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$v);
+      props = _objectWithoutProperties(_ref, _excluded$w);
 
   var theme = useTheme();
   var ref = React.useRef(null);
@@ -5986,7 +5986,7 @@ Modal$1.Subtitle = ModalSubtitle$1;
 Modal$1.Content = ModalContent$1;
 Modal$1.Action = ModalAction$1;
 
-var _excluded$u = ["children", "type", "label", "filled", "className"];
+var _excluded$v = ["children", "type", "label", "filled", "className"];
 
 var getStatusColor = function getStatusColor(type, filled, theme) {
   var colors = {
@@ -6022,7 +6022,7 @@ function NoteComponent(_ref) {
       filled = _ref$filled === void 0 ? false : _ref$filled,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$u);
+      props = _objectWithoutProperties(_ref, _excluded$v);
 
   var theme = useTheme();
 
@@ -6051,12 +6051,12 @@ NoteComponent.displayName = 'BolioUINote';
 var Note = withScale$1(NoteComponent);
 var Note$1 = Note;
 
-var _excluded$t = ["className", "children"];
+var _excluded$u = ["className", "children"];
 
 function PageContentComponent(_ref) {
   var className = _ref.className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$t);
+      props = _objectWithoutProperties(_ref, _excluded$u);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -6073,7 +6073,7 @@ PageContentComponent.displayName = 'BolioUIPageContent';
 var PageContent = withScale$1(PageContentComponent);
 var PageContent$1 = PageContent;
 
-var _excluded$s = ["children", "render", "dotBackdrop", "className", "dotSize", "dotSpace"];
+var _excluded$t = ["children", "render", "dotBackdrop", "className", "dotSize", "dotSpace"];
 tuple('default', 'effect', 'effect-seo');
 
 var DotStyles = function DotStyles(_ref) {
@@ -6104,7 +6104,7 @@ function PageComponent(_ref2) {
       dotSize = _ref2$dotSize === void 0 ? '1px' : _ref2$dotSize,
       _ref2$dotSpace = _ref2.dotSpace,
       dotSpace = _ref2$dotSpace === void 0 ? 1 : _ref2$dotSpace,
-      props = _objectWithoutProperties(_ref2, _excluded$s);
+      props = _objectWithoutProperties(_ref2, _excluded$t);
 
   var theme = useTheme();
 
@@ -6152,7 +6152,7 @@ PageComponent.displayName = 'BolioUIPage';
 var Page = withScale$1(PageComponent);
 var Page$1 = Page;
 
-var _excluded$r = ["children", "center", "className"];
+var _excluded$s = ["children", "center", "className"];
 
 function PageHeaderComponent(_ref) {
   var children = _ref.children,
@@ -6160,7 +6160,7 @@ function PageHeaderComponent(_ref) {
       center = _ref$center === void 0 ? false : _ref$center,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$r);
+      props = _objectWithoutProperties(_ref, _excluded$s);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -6180,11 +6180,11 @@ PageHeaderComponent.displayName = 'BolioUIPageHeader';
 var PageHeader = withScale$1(PageHeaderComponent);
 var PageHeader$1 = PageHeader;
 
-var _excluded$q = ["children"];
+var _excluded$r = ["children"];
 
 function PageFooterComponent(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$q);
+      props = _objectWithoutProperties(_ref, _excluded$r);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -6206,14 +6206,14 @@ Page$1.Content = PageContent$1;
 Page$1.Body = PageContent$1;
 Page$1.Footer = PageFooter$1;
 
-var _excluded$p = ["active", "children", "disabled", "onClick"];
+var _excluded$q = ["active", "children", "disabled", "onClick"];
 
 function PaginationItem(_ref) {
   var active = _ref.active,
       children = _ref.children,
       disabled = _ref.disabled,
       onClick = _ref.onClick,
-      props = _objectWithoutProperties(_ref, _excluded$p);
+      props = _objectWithoutProperties(_ref, _excluded$q);
 
   var theme = useTheme();
 
@@ -6249,17 +6249,17 @@ function PaginationItem(_ref) {
 PaginationItem.displayName = 'BolioUIPaginationItem';
 
 tuple('prev', 'next', 'click');
-var defaultContext$4 = {};
-var PaginationContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$4);
+var defaultContext$5 = {};
+var PaginationContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$5);
 var usePaginationContext = function usePaginationContext() {
   return React__default["default"].useContext(PaginationContext);
 };
 
-var _excluded$o = ["children"];
+var _excluded$p = ["children"];
 
 function PaginationPrevious(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$o);
+      props = _objectWithoutProperties(_ref, _excluded$p);
 
   var _usePaginationContext = usePaginationContext(),
       update = _usePaginationContext.update,
@@ -6275,11 +6275,11 @@ function PaginationPrevious(_ref) {
 
 PaginationPrevious.displayName = 'BolioUIPaginationPrevious';
 
-var _excluded$n = ["children"];
+var _excluded$o = ["children"];
 
 function PaginationNext(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$n);
+      props = _objectWithoutProperties(_ref, _excluded$o);
 
   var _usePaginationContext = usePaginationContext(),
       update = _usePaginationContext.update,
@@ -6447,7 +6447,7 @@ function PaginationPages(_ref) {
 
 PaginationPages.displayName = 'BolioUIPaginationPages';
 
-var _excluded$m = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
+var _excluded$n = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
 
 function PaginationComponent(_ref) {
   var customPage = _ref.page,
@@ -6461,7 +6461,7 @@ function PaginationComponent(_ref) {
       onChange = _ref.onChange,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$n);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -6876,7 +6876,7 @@ var TooltipContent = function TooltipContent(_ref) {
 
 var TooltipContent$1 = TooltipContent;
 
-var _excluded$l = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
+var _excluded$m = ["children", "initialVisible", "text", "offset", "placement", "portalClassName", "enterDelay", "leaveDelay", "trigger", "type", "className", "onVisibleChange", "hideArrow", "visible"];
 
 function TooltipComponent(_ref) {
   var children = _ref.children,
@@ -6905,7 +6905,7 @@ function TooltipComponent(_ref) {
       _ref$hideArrow = _ref.hideArrow,
       hideArrow = _ref$hideArrow === void 0 ? false : _ref$hideArrow,
       customVisible = _ref.visible,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   var timer = React.useRef();
   var ref = React.useRef(null);
@@ -6999,16 +6999,16 @@ TooltipComponent.displayName = 'BolioUITooltip';
 var Tooltip = withScale$1(TooltipComponent);
 var Tooltip$1 = Tooltip;
 
-var defaultContext$3 = {
+var defaultContext$4 = {
   disableItemsAutoClose: false,
   onItemClick: function onItemClick() {}
 };
-var PopoverContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$3);
+var PopoverContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$4);
 var usePopoverContext = function usePopoverContext() {
   return React.useContext(PopoverContext);
 };
 
-var _excluded$k = ["content", "children", "disableItemsAutoClose", "trigger", "placement", "portalClassName", "type", "visible", "onVisibleChange"];
+var _excluded$l = ["content", "children", "disableItemsAutoClose", "trigger", "placement", "portalClassName", "type", "visible", "onVisibleChange"];
 
 function PopoverComponent(_ref) {
   var content = _ref.content,
@@ -7026,7 +7026,7 @@ function PopoverComponent(_ref) {
       customVisible = _ref.visible,
       _ref$onVisibleChange = _ref.onVisibleChange,
       onVisibleChange = _ref$onVisibleChange === void 0 ? function () {} : _ref$onVisibleChange,
-      props = _objectWithoutProperties(_ref, _excluded$k);
+      props = _objectWithoutProperties(_ref, _excluded$l);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -7082,7 +7082,7 @@ PopoverComponent.displayName = 'BolioUIPopover';
 var Popover = withScale$1(PopoverComponent);
 var Popover$1 = Popover;
 
-var _excluded$j = ["children", "line", "title", "className", "onClick", "disableAutoClose"];
+var _excluded$k = ["children", "line", "title", "className", "onClick", "disableAutoClose"];
 
 function PopoverItemComponent(_ref) {
   var children = _ref.children,
@@ -7095,7 +7095,7 @@ function PopoverItemComponent(_ref) {
       onClick = _ref.onClick,
       _ref$disableAutoClose = _ref.disableAutoClose,
       disableAutoClose = _ref$disableAutoClose === void 0 ? false : _ref$disableAutoClose,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
   var theme = useTheme();
 
@@ -7143,7 +7143,7 @@ var PopoverItem$1 = PopoverItem;
 Popover$1.Item = PopoverItem$1;
 Popover$1.Option = PopoverItem$1;
 
-var _excluded$i = ["value", "max", "className", "type", "colors", "fixedTop", "fixedBottom"];
+var _excluded$j = ["value", "max", "className", "type", "colors", "fixedTop", "fixedBottom"];
 
 var getCurrentColor = function getCurrentColor(ratio, palette, type) {
   var colors = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
@@ -7179,7 +7179,7 @@ function ProgressComponent(_ref) {
       fixedTop = _ref$fixedTop === void 0 ? false : _ref$fixedTop,
       _ref$fixedBottom = _ref.fixedBottom,
       fixedBottom = _ref$fixedBottom === void 0 ? false : _ref$fixedBottom,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$j);
 
   var theme = useTheme();
 
@@ -7212,22 +7212,22 @@ ProgressComponent.displayName = 'BolioUIProgress';
 var Progress = withScale$1(ProgressComponent);
 var Progress$1 = Progress;
 
-var defaultContext$2 = {
+var defaultContext$3 = {
   disabledAll: false,
   inGroup: false
 };
-var RadioContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$2);
+var RadioContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$3);
 var useRadioContext = function useRadioContext() {
   return React__default["default"].useContext(RadioContext);
 };
 
-var _excluded$h = ["className", "children"];
+var _excluded$i = ["className", "children"];
 
 function RadioDescriptionComponent(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$h);
+      props = _objectWithoutProperties(_ref, _excluded$i);
 
   var theme = useTheme();
 
@@ -7288,7 +7288,7 @@ var getColors$4 = function getColors(palette, status) {
   return colors[status];
 };
 
-var _excluded$g = ["className", "checked", "onChange", "disabled", "type", "value", "children"];
+var _excluded$h = ["className", "checked", "onChange", "disabled", "type", "value", "children"];
 
 function RadioComponent(_ref) {
   var _ref$className = _ref.className,
@@ -7301,7 +7301,7 @@ function RadioComponent(_ref) {
       type = _ref$type === void 0 ? 'default' : _ref$type,
       radioValue = _ref.value,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   var theme = useTheme();
 
@@ -7399,7 +7399,7 @@ RadioComponent.displayName = 'BolioUIRadio';
 var Radio = withScale$1(RadioComponent);
 var Radio$1 = Radio;
 
-var _excluded$f = ["disabled", "onChange", "value", "children", "className", "initialValue", "useRow"];
+var _excluded$g = ["disabled", "onChange", "value", "children", "className", "initialValue", "useRow"];
 
 function RadioGroupComponent(_ref) {
   var _ref$disabled = _ref.disabled,
@@ -7412,7 +7412,7 @@ function RadioGroupComponent(_ref) {
       initialValue = _ref.initialValue,
       _ref$useRow = _ref.useRow,
       useRow = _ref$useRow === void 0 ? false : _ref$useRow,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$g);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -7475,7 +7475,7 @@ function RatingIcon() {
 
 RatingIcon.displayName = 'BolioUIRatingIcon';
 
-var _excluded$e = ["type", "className", "icon", "count", "value", "initialValue", "onValueChange", "locked", "onLockedChange"];
+var _excluded$f = ["type", "className", "icon", "count", "value", "initialValue", "onValueChange", "locked", "onLockedChange"];
 tupleNumber(2, 3, 4, 5, 6, 7, 8, 9, 10);
 tupleNumber(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
 
@@ -7508,7 +7508,7 @@ function RatingComponent(_ref) {
       _ref$locked = _ref.locked,
       locked = _ref$locked === void 0 ? false : _ref$locked,
       onLockedChange = _ref.onLockedChange,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
   var theme = useTheme();
 
@@ -7580,8 +7580,8 @@ RatingComponent.displayName = 'BolioUIRating';
 var Rating = withScale$1(RatingComponent);
 var Rating$1 = Rating;
 
-var _excluded$d = ["children", "component", "gap", "justify", "align", "className"];
-var defaultProps$1 = {
+var _excluded$e = ["children", "component", "gap", "justify", "align", "className"];
+var defaultProps$5 = {
   gap: 0,
   justify: 'start',
   align: 'top',
@@ -7613,7 +7613,7 @@ function Row(_ref) {
       justify = _ref.justify,
       align = _ref.align,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   var Component = component;
   var theme = useTheme();
@@ -7632,10 +7632,10 @@ function Row(_ref) {
   }, ".row.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;box-sizing:border-box;margin-left:calc(".concat(gap, " * ").concat(theme.layout.gap, " / 2);margin-right:calc(").concat(gap, " * ").concat(theme.layout.gap, " / 2);--row-gap:calc(").concat(gap, " * ").concat(theme.layout.gap, ");-webkit-box-pack:").concat(justifyValue, ";-webkit-justify-content:").concat(justifyValue, ";-ms-flex-pack:").concat(justifyValue, ";justify-content:").concat(justifyValue, ";-webkit-align-items:").concat(alignValue, ";-webkit-box-align:").concat(alignValue, ";-ms-flex-align:").concat(alignValue, ";align-items:").concat(alignValue, ";}")));
 }
 
-Row.defaultProps = defaultProps$1;
+Row.defaultProps = defaultProps$5;
 Row.displayName = 'BolioUIRow';
 
-var _excluded$c = ["children", "bg", "className"];
+var _excluded$d = ["children", "bg", "className"];
 
 function SectionComponent(_ref) {
   var children = _ref.children,
@@ -7643,7 +7643,7 @@ function SectionComponent(_ref) {
       bg = _ref$bg === void 0 ? 'transparent' : _ref$bg,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -7681,11 +7681,11 @@ SelectIconComponent.displayName = 'BolioUISelectIcon';
 var SelectIcon = /*#__PURE__*/React__default["default"].memo(SelectIconComponent);
 var SelectIcon$1 = SelectIcon;
 
-var defaultContext$1 = {
+var defaultContext$2 = {
   visible: false,
   disableAll: false
 };
-var SelectContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$1);
+var SelectContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$2);
 var useSelectContext = function useSelectContext() {
   return React__default["default"].useContext(SelectContext);
 };
@@ -8081,8 +8081,8 @@ var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (_r
 SelectInput.displayName = 'BolioUISelectInput';
 var SelectInput$1 = SelectInput;
 
-var _excluded$b = ["children", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange"];
-var defaultProps = {
+var _excluded$c = ["children", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange"];
+var defaultProps$4 = {
   disabled: false,
   type: 'default',
   icon: SelectIcon$1,
@@ -8120,7 +8120,7 @@ var SelectComponent = /*#__PURE__*/React__default["default"].forwardRef(function
       getPopupContainer = _ref.getPopupContainer,
       _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
       onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
   var theme = useTheme();
 
@@ -8302,12 +8302,12 @@ var SelectComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     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, ";}"))));
 });
-SelectComponent.defaultProps = defaultProps;
+SelectComponent.defaultProps = defaultProps$4;
 SelectComponent.displayName = 'BolioUISelect';
 var Select = withScale$1(SelectComponent);
 var Select$1 = Select;
 
-var _excluded$a = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
+var _excluded$b = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
 
 function SelectOptionComponent(_ref) {
   var _ref$value = _ref.value,
@@ -8323,7 +8323,7 @@ function SelectOptionComponent(_ref) {
       label = _ref$label === void 0 ? false : _ref$label,
       _ref$preventAllEvents = _ref.preventAllEvents,
       preventAllEvents = _ref$preventAllEvents === void 0 ? false : _ref$preventAllEvents,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   var theme = useTheme();
 
@@ -8556,7 +8556,7 @@ var getColors$2 = function getColors(palette, status) {
   return colors[status];
 };
 
-var _excluded$9 = ["hideValue", "disabled", "type", "step", "max", "min", "initialValue", "value", "onChange", "className", "showMarkers"];
+var _excluded$a = ["hideValue", "disabled", "type", "step", "max", "min", "initialValue", "value", "onChange", "className", "showMarkers"];
 
 var getRefWidth = function getRefWidth(elementRef) {
   if (!elementRef || !elementRef.current) return 0;
@@ -8594,7 +8594,7 @@ function SliderComponent(_ref) {
       className = _ref$className === void 0 ? '' : _ref$className,
       _ref$showMarkers = _ref.showMarkers,
       showMarkers = _ref$showMarkers === void 0 ? false : _ref$showMarkers,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   var theme = useTheme();
 
@@ -8954,7 +8954,7 @@ var useToasts = function useToasts(layout) {
 
 var useToasts$1 = useToasts;
 
-var _excluded$8 = ["type", "filled", "rounded", "children", "symbol", "toastText", "toastType", "text", "copy", "className"];
+var _excluded$9 = ["type", "filled", "rounded", "children", "symbol", "toastText", "toastType", "text", "copy", "className"];
 
 var textArrayToString = function textArrayToString(text) {
   return text.reduce(function (pre, current) {
@@ -8981,7 +8981,7 @@ function SnippetComponent(_ref) {
       copyType = _ref.copy,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
   var theme = useTheme();
 
@@ -9046,14 +9046,14 @@ SnippetComponent.displayName = 'BolioUISnippet';
 var Snippet = withScale$1(SnippetComponent);
 var Snippet$1 = Snippet;
 
-var _excluded$7 = ["inline", "className"];
+var _excluded$8 = ["inline", "className"];
 
 var SpacerComponent = function SpacerComponent(_ref) {
   var _ref$inline = _ref.inline,
       inline = _ref$inline === void 0 ? false : _ref$inline,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   var _useScale = useScale(),
       SCALES = _useScale.SCALES;
@@ -9070,7 +9070,7 @@ SpacerComponent.displayName = 'BolioUISpacer';
 var Spacer = withScale$1(SpacerComponent);
 var Spacer$1 = Spacer;
 
-var _excluded$6 = ["className"];
+var _excluded$7 = ["className"];
 
 var getSpans = function getSpans(theme) {
   return _toConsumableArray(new Array(12)).map(function (_, index) {
@@ -9087,7 +9087,7 @@ var getSpans = function getSpans(theme) {
 function SpinnerComponent(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
   var theme = useTheme();
 
@@ -9109,6 +9109,289 @@ SpinnerComponent.displayName = 'BolioUISpinner';
 var Spinner = withScale$1(SpinnerComponent);
 var Spinner$1 = Spinner;
 
+var defaultProps$3 = {
+  className: ''
+};
+
+var makeColgroup = function makeColgroup(width, columns) {
+  var unsetWidthCount = columns.filter(function (c) {
+    return !c.width;
+  }).length;
+  var customWidthTotal = columns.reduce(function (pre, current) {
+    return current.width ? pre + current.width : pre;
+  }, 0);
+  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
+  if (averageWidth <= 0) return /*#__PURE__*/React__default["default"].createElement("colgroup", null);
+  return /*#__PURE__*/React__default["default"].createElement("colgroup", null, columns.map(function (column, index) {
+    return /*#__PURE__*/React__default["default"].createElement("col", {
+      key: "colgroup-".concat(index),
+      width: column.width || averageWidth
+    });
+  }));
+};
+
+var TableHead = function TableHead(props) {
+  var theme = useTheme();
+  var _ref = props,
+      columns = _ref.columns,
+      width = _ref.width;
+  var isScalableWidth = React.useMemo(function () {
+    return columns.find(function (item) {
+      return !!item.width;
+    });
+  }, [columns]);
+  var colgroup = React.useMemo(function () {
+    if (!isScalableWidth) return /*#__PURE__*/React__default["default"].createElement("colgroup", null);
+    return makeColgroup(width, columns);
+  }, [isScalableWidth, width]);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, colgroup, /*#__PURE__*/React__default["default"].createElement("thead", {
+    className: styledJsx_cjs.style.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+  }, /*#__PURE__*/React__default["default"].createElement("tr", {
+    className: styledJsx_cjs.style.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+  }, columns.map(function (column, index) {
+    return /*#__PURE__*/React__default["default"].createElement("th", {
+      key: "table-th-".concat(column.prop, "-").concat(index),
+      className: styledJsx_cjs.style.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: styledJsx_cjs.style.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
+    }, column.label));
+  }))), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
+    id: "134865897",
+    dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
+  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{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;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
+};
+
+TableHead.defaultProps = defaultProps$3;
+TableHead.displayName = 'BolioUITableHead';
+var TableHead$1 = TableHead;
+
+var TableCell = function TableCell(_ref) {
+  var columns = _ref.columns,
+      row = _ref.row,
+      rowIndex = _ref.rowIndex,
+      emptyText = _ref.emptyText,
+      onCellClick = _ref.onCellClick;
+
+  /* eslint-disable react/jsx-no-useless-fragment */
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, columns.map(function (column, index) {
+    var currentRowValue = row[column.prop];
+    var cellValue = currentRowValue || emptyText;
+    var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
+    return /*#__PURE__*/React__default["default"].createElement("td", {
+      key: "row-td-".concat(index, "-").concat(column.prop),
+      onClick: function onClick() {
+        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
+      },
+      className: column.className
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "cell"
+    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
+  }));
+  /* eslint-enable */
+};
+
+var TableCell$1 = TableCell;
+
+var defaultContext$1 = {
+  columns: [],
+  updateColumn: function updateColumn() {}
+};
+var TableContext = /*#__PURE__*/React__default["default"].createContext(defaultContext$1);
+var useTableContext = function useTableContext() {
+  return React__default["default"].useContext(TableContext);
+};
+
+var defaultProps$2 = {
+  className: ''
+};
+
+var TableBody = function TableBody(_ref) {
+  var data = _ref.data,
+      hover = _ref.hover,
+      emptyText = _ref.emptyText,
+      onRow = _ref.onRow,
+      onCell = _ref.onCell,
+      rowClassName = _ref.rowClassName;
+  var theme = useTheme();
+
+  var _useTableContext = useTableContext(),
+      columns = _useTableContext.columns;
+
+  var rowClickHandler = function rowClickHandler(row, index) {
+    onRow && onRow(row, index);
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement("tbody", {
+    className: styledJsx_cjs.style.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+  }, data.map(function (row, index) {
+    var className = rowClassName(row, index);
+    return /*#__PURE__*/React__default["default"].createElement("tr", {
+      key: "tbody-row-".concat(index),
+      onClick: function onClick() {
+        return rowClickHandler(row, index);
+      },
+      className: styledJsx_cjs.style.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses$1({
+        hover: hover
+      }, className) || "")
+    }, /*#__PURE__*/React__default["default"].createElement(TableCell$1, {
+      columns: columns,
+      row: row,
+      rowIndex: index,
+      emptyText: emptyText,
+      onCellClick: onCell
+    }));
+  }), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
+    id: "3433300570",
+    dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
+  }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+};
+
+TableBody.defaultProps = defaultProps$2;
+TableBody.displayName = 'BolioUITableBody';
+var TableBody$1 = TableBody;
+
+var defaultProps$1 = {
+  className: '',
+  render: function render() {}
+};
+
+var TableColumn = function TableColumn(columnProps) {
+  var _ref = columnProps,
+      children = _ref.children,
+      prop = _ref.prop,
+      label = _ref.label,
+      width = _ref.width,
+      className = _ref.className,
+      renderHandler = _ref.render;
+
+  var _useTableContext = useTableContext(),
+      updateColumn = _useTableContext.updateColumn;
+
+  var safeProp = "".concat(prop).trim();
+
+  if (!safeProp) {
+    useWarning$1('The props "prop" is required.', 'Table.Column');
+  }
+
+  React.useEffect(function () {
+    updateColumn({
+      label: children || label,
+      prop: safeProp,
+      width: width,
+      className: className,
+      renderHandler: renderHandler
+    });
+  }, [children, label, prop, width, className, renderHandler]);
+  return null;
+};
+
+TableColumn.defaultProps = defaultProps$1;
+TableColumn.displayName = 'BolioUITableColumn';
+var TableColumn$1 = TableColumn;
+
+var _excluded$6 = ["children", "data", "initialData", "hover", "emptyText", "onRow", "onCell", "onChange", "className", "rowClassName"];
+var defaultProps = {
+  hover: true,
+  initialData: [],
+  emptyText: '',
+  className: '',
+  rowClassName: function rowClassName() {
+    return '';
+  }
+};
+
+function TableComponent(tableProps) {
+  /* eslint-disable  @typescript-eslint/no-unused-vars */
+  var _ref = tableProps,
+      children = _ref.children,
+      customData = _ref.data,
+      initialData = _ref.initialData,
+      hover = _ref.hover,
+      emptyText = _ref.emptyText,
+      onRow = _ref.onRow,
+      onCell = _ref.onCell;
+      _ref.onChange;
+      var className = _ref.className,
+      rowClassName = _ref.rowClassName,
+      props = _objectWithoutProperties(_ref, _excluded$6);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var ref = React.useRef(null);
+
+  var _useRealShape = useRealShape$1(ref),
+      _useRealShape2 = _slicedToArray(_useRealShape, 2),
+      width = _useRealShape2[0].width,
+      updateShape = _useRealShape2[1];
+
+  var _useState = React.useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      columns = _useState2[0],
+      setColumns = _useState2[1];
+
+  var _useState3 = React.useState(initialData),
+      _useState4 = _slicedToArray(_useState3, 2),
+      data = _useState4[0],
+      setData = _useState4[1];
+
+  var updateColumn = function updateColumn(column) {
+    setColumns(function (last) {
+      var hasColumn = last.find(function (item) {
+        return item.prop === column.prop;
+      });
+      if (!hasColumn) return [].concat(_toConsumableArray(last), [column]);
+      return last.map(function (item) {
+        if (item.prop !== column.prop) return item;
+        return column;
+      });
+    });
+  };
+
+  var contextValue = React.useMemo(function () {
+    return {
+      columns: columns,
+      updateColumn: updateColumn
+    };
+  }, [columns]);
+  React.useEffect(function () {
+    if (typeof customData === 'undefined') return;
+    setData(customData);
+  }, [customData]);
+  useResize$1(function () {
+    return updateShape();
+  });
+  return /*#__PURE__*/React__default["default"].createElement(TableContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React__default["default"].createElement("table", _extends({
+    ref: ref
+  }, props, {
+    className: styledJsx_cjs.style.dynamic([["2991182230", [SCALES.font(1), SCALES.width(1, '100%'), 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)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), /*#__PURE__*/React__default["default"].createElement(TableHead$1, {
+    columns: columns,
+    width: width
+  }), /*#__PURE__*/React__default["default"].createElement(TableBody$1, {
+    data: data,
+    hover: hover,
+    emptyText: emptyText,
+    onRow: onRow,
+    onCell: onCell,
+    rowClassName: rowClassName
+  }), children, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
+    id: "2991182230",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), 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)]
+  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";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), ";}"))));
+}
+
+TableComponent.defaultProps = defaultProps;
+TableComponent.displayName = 'BolioUITable';
+TableComponent.Column = TableColumn$1;
+var Table = withScale$1(TableComponent);
+Table.Column = TableColumn$1;
+var Table$1 = Table;
+
 var defaultContext = {
   inGroup: false
 };
@@ -9950,6 +10233,7 @@ exports.Slider = Slider$1;
 exports.Snippet = Snippet$1;
 exports.Spacer = Spacer$1;
 exports.Spinner = Spinner$1;
+exports.Table = Table$1;
 exports.Tabs = Tabs$1;
 exports.Tag = Tag$1;
 exports.Text = Text$1;