@bolio-ui/core 1.1.7 → 2.0.0-alpha.0

package/esm/Card/index.d.ts

@@ -1,15 +1,15 @@
-import Card from "./Card";
-import CardFooter from "./CardFooter";
-import CardContent from "./CardContent";
-export declare type CardComponentType = typeof Card & {
+import Card from './Card';
+import CardFooter from './CardFooter';
+import CardContent from './CardContent';
+export type CardComponentType = typeof Card & {
     Footer: typeof CardFooter;
     Actions: typeof CardFooter;
     Content: typeof CardContent;
     Body: typeof CardContent;
 };
-export type { CardProps } from "./Card";
-export type { CardContentProps } from "./CardContent";
-export type { CardFooterProps } from "./CardFooter";
-export type { CardTypes } from "../utils/prop-types";
+export type { CardProps } from './Card';
+export type { CardContentProps } from './CardContent';
+export type { CardFooterProps } from './CardFooter';
+export type { CardTypes } from '../utils/prop-types';
 declare const _default: CardComponentType;
 export default _default;

package/esm/Card/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Card from './Card';
 import CardFooter from './CardFooter';
 import CardContent from './CardContent';

package/esm/Card/styles.d.ts

@@ -1,8 +1,8 @@
-import { CardTypes } from "../utils/prop-types";
-import { BolioUIThemesPalette } from "../Themes/Presets";
-export declare type CardStyles = {
+import { CardTypes } from '../utils/prop-types';
+import { BolioUIThemesPalette } from '../Themes/Presets';
+export type CardStyles = {
     color: string;
     bgColor: string;
     borderColor: string;
 };
-export declare const getStyles: (type: CardTypes, palette: BolioUIThemesPalette, isShadow?: boolean | undefined) => CardStyles;
+export declare const getStyles: (type: CardTypes, palette: BolioUIThemesPalette, isShadow?: boolean) => CardStyles;

package/esm/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type CheckboxTypes = NormalTypes;
+import { NormalTypes } from '../utils/prop-types';
+export type CheckboxTypes = NormalTypes;
 export interface CheckboxEventTarget {
     checked: boolean;
 }
@@ -19,7 +19,9 @@ interface Props {
     className?: string;
     value?: string;
 }
-declare type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
-export declare type CheckboxProps = Props & NativeAttrs;
-declare const Checkbox: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export type CheckboxProps = Props & NativeAttrs;
+declare const Checkbox: import("../use-scale/with-scale").ScaleComponent<HTMLInputElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/esm/Checkbox/Checkbox.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCheckbox } from './CheckboxContext';
 import CheckboxIcon from './CheckboxIcon';
@@ -11,46 +11,38 @@ import { getColors } from './styles';
 import useTheme from '../use-theme';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
-function CheckboxComponent(_ref) {
+var CheckboxComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
-      _ref$initialChecked = _ref.initialChecked,
-      initialChecked = _ref$initialChecked === void 0 ? false : _ref$initialChecked,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      onChange = _ref.onChange,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      children = _ref.children,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$initialChecked = _ref.initialChecked,
+    initialChecked = _ref$initialChecked === void 0 ? false : _ref$initialChecked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onChange = _ref.onChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useState = useState(initialChecked),
-      _useState2 = _slicedToArray(_useState, 2),
-      selfChecked = _useState2[0],
-      setSelfChecked = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selfChecked = _useState2[0],
+    setSelfChecked = _useState2[1];
   var _useCheckbox = useCheckbox(),
-      updateState = _useCheckbox.updateState,
-      inGroup = _useCheckbox.inGroup,
-      disabledAll = _useCheckbox.disabledAll,
-      values = _useCheckbox.values;
-
+    updateState = _useCheckbox.updateState,
+    inGroup = _useCheckbox.inGroup,
+    disabledAll = _useCheckbox.disabledAll,
+    values = _useCheckbox.values;
   var isDisabled = inGroup ? disabledAll || disabled : disabled;
   var classes = useClasses('checkbox', className);
-
   if (inGroup && checked) {
     useWarning('Remove props "checked" when [Checkbox] component is in the group.', 'Checkbox');
   }
-
   if (inGroup) {
     useEffect(function () {
       var next = values.includes(value);
@@ -58,13 +50,11 @@ function CheckboxComponent(_ref) {
       setSelfChecked(next);
     }, [selfChecked, value, values]);
   }
-
   var _useMemo = useMemo(function () {
-    return getColors(theme.palette, type);
-  }, [theme.palette, type]),
-      fill = _useMemo.fill,
-      bg = _useMemo.bg;
-
+      return getColors(theme.palette, type);
+    }, [theme.palette, type]),
+    fill = _useMemo.fill,
+    bg = _useMemo.bg;
   var changeHandle = useCallback(function (ev) {
     if (isDisabled) return;
     var selfEvent = {
@@ -75,11 +65,9 @@ function CheckboxComponent(_ref) {
       preventDefault: ev.preventDefault,
       nativeEvent: ev
     };
-
     if (inGroup && updateState) {
       updateState && updateState(value, !selfChecked);
     }
-
     setSelfChecked(!selfChecked);
     onChange && onChange(selfEvent);
   }, [isDisabled, selfChecked, inGroup, updateState, onChange, value]);
@@ -88,27 +76,27 @@ function CheckboxComponent(_ref) {
     setSelfChecked(checked);
   }, [checked]);
   return /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["842595250", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
+    className: _JSXStyle.dynamic([["1454958681", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer', theme.palette.primary]]]) + " " + (classes || "")
   }, /*#__PURE__*/React.createElement(CheckboxIcon, {
     fill: fill,
     bg: bg,
     disabled: isDisabled,
     checked: selfChecked
   }), /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref,
     type: "checkbox",
     disabled: isDisabled,
     checked: selfChecked,
     onChange: changeHandle
   }, props, {
-    className: _JSXStyle.dynamic([["842595250", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
+    className: _JSXStyle.dynamic([["1454958681", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer', theme.palette.primary]]]) + " " + (props && props.className != null && props.className || "")
   })), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["842595250", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
+    className: _JSXStyle.dynamic([["1454958681", [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer', theme.palette.primary]]]) + " " + "text"
   }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "842595250",
-    dynamic: [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
-  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(1), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
-}
-
+    id: "1454958681",
+    dynamic: [SCALES.font(1), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer', theme.palette.primary]
+  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(1), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}.checkbox.__jsx-style-dynamic-selector:focus-within{border-radius:4px;outline:2px solid ").concat(theme.palette.primary, ";outline-offset:2px;}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
+});
 CheckboxComponent.displayName = 'BolioUICheckbox';
 var Checkbox = withScale(CheckboxComponent);
 export default Checkbox;

package/esm/Checkbox/CheckboxGroup.d.ts

@@ -5,7 +5,7 @@ interface Props {
     onChange?: (values: string[]) => void;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type CheckboxGroupProps = Props & NativeAttrs;
-declare const CheckboxGroup: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CheckboxGroupProps = Props & NativeAttrs;
+declare const CheckboxGroup: import("../use-scale/with-scale").ScaleComponent<unknown, Props & NativeAttrs>;
 export default CheckboxGroup;

package/esm/Checkbox/CheckboxGroup.js

@@ -3,38 +3,32 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["disabled", "onChange", "value", "children", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useMemo, useState } from 'react';
 import { CheckboxContext } from './CheckboxContext';
 import useWarning from '../utils/use-warning';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 function CheckboxGroupComponent(_ref) {
   var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      onChange = _ref.onChange,
-      value = _ref.value,
-      children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      selfVal = _useState2[0],
-      setSelfVal = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selfVal = _useState2[0],
+    setSelfVal = _useState2[1];
   var classes = useClasses('group', className);
-
   if (!value) {
     value = [];
     useWarning('Props "value" is required.', 'Checkbox Group');
   }
-
   var updateState = function updateState(val, checked) {
     var removed = selfVal.filter(function (v) {
       return v !== val;
@@ -43,7 +37,6 @@ function CheckboxGroupComponent(_ref) {
     setSelfVal(next);
     onChange && onChange(next);
   };
-
   var providerValue = useMemo(function () {
     return {
       updateState: updateState,
@@ -64,7 +57,6 @@ function CheckboxGroupComponent(_ref) {
     dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.font(1), SCALES.font(1)]
   }, ".group.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.group.__jsx-style-dynamic-selector label{margin-right:calc(").concat(SCALES.font(1), " * 2);--checkbox-size:").concat(SCALES.font(1), ";}.group.__jsx-style-dynamic-selector label:last-of-type{margin-right:0;}"))));
 }
-
 CheckboxGroupComponent.displayName = 'BolioUICheckboxGroup';
 var CheckboxGroup = withScale(CheckboxGroupComponent);
 export default CheckboxGroup;

package/esm/Checkbox/CheckboxIcon.d.ts

@@ -5,7 +5,7 @@ interface Props {
     fill?: string;
     bg?: string;
 }
-declare function CheckboxIconComponent({ fill, bg, disabled, checked }: Props): JSX.Element;
+declare function CheckboxIconComponent({ fill, bg, disabled, checked }: Props): React.JSX.Element;
 declare namespace CheckboxIconComponent {
     var displayName: string;
 }

package/esm/Checkbox/CheckboxIcon.js

@@ -1,24 +1,20 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useScale from '../use-scale';
-
 function CheckboxIconComponent(_ref) {
   var fill = _ref.fill,
-      bg = _ref.bg,
-      disabled = _ref.disabled,
-      checked = _ref.checked;
-
+    bg = _ref.bg,
+    disabled = _ref.disabled,
+    checked = _ref.checked;
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useMemo = useMemo(function () {
-    return {
-      propsFill: fill,
-      propsBg: bg
-    };
-  }, [bg, fill]),
-      propsFill = _useMemo.propsFill;
-
+      return {
+        propsFill: fill,
+        propsBg: bg
+      };
+    }, [bg, fill]),
+    propsFill = _useMemo.propsFill;
   return /*#__PURE__*/React.createElement(React.Fragment, null, checked ? /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 24 24",
     style: {
@@ -62,7 +58,6 @@ function CheckboxIconComponent(_ref) {
     dynamic: [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']
   }, "svg.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(0.86 * var(--checkbox-size));height:calc(0.86 * var(--checkbox-size));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:".concat(disabled ? 0.4 : 1, ";cursor:").concat(disabled ? 'not-allowed' : 'pointer', ";}")));
 }
-
 CheckboxIconComponent.displayName = 'BolioUICheckboxIcon';
 var CheckboxIcon = /*#__PURE__*/React.memo(CheckboxIconComponent);
 export default CheckboxIcon;

package/esm/Checkbox/index.d.ts

@@ -1,9 +1,9 @@
-import Checkbox from "./Checkbox";
-import CheckboxGroup from "./CheckboxGroup";
-export declare type CheckboxComponentType = typeof Checkbox & {
+import Checkbox from './Checkbox';
+import CheckboxGroup from './CheckboxGroup';
+export type CheckboxComponentType = typeof Checkbox & {
     Group: typeof CheckboxGroup;
 };
-export type { CheckboxProps, CheckboxEvent, CheckboxEventTarget, CheckboxTypes } from "./Checkbox";
-export type { CheckboxGroupProps } from "./CheckboxGroup";
+export type { CheckboxProps, CheckboxEvent, CheckboxEventTarget, CheckboxTypes } from './Checkbox';
+export type { CheckboxGroupProps } from './CheckboxGroup';
 declare const _default: CheckboxComponentType;
 export default _default;

package/esm/Checkbox/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Checkbox from './Checkbox';
 import CheckboxGroup from './CheckboxGroup';
 Checkbox.Group = CheckboxGroup;

package/esm/Checkbox/styles.d.ts

@@ -1,6 +1,7 @@
-import { BolioUIThemesPalette } from "../Themes/Presets";
-export declare type CheckboxColor = {
+import { BolioUIThemesPalette } from '../Themes/Presets';
+import { NormalTypes } from '../utils/prop-types';
+export type CheckboxColor = {
     fill: string;
     bg: string;
 };
-export declare const getColors: (palette: BolioUIThemesPalette, status?: "success" | "primary" | "secondary" | "error" | "warning" | "info" | "default" | undefined) => CheckboxColor;
+export declare const getColors: (palette: BolioUIThemesPalette, status?: NormalTypes) => CheckboxColor;

package/esm/Code/Code.d.ts

@@ -5,7 +5,9 @@ interface Props {
     name?: string;
     classic?: boolean;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type CodeProps = Props & NativeAttrs;
-declare const Code: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CodeProps = Props & NativeAttrs;
+declare const Code: import("../use-scale/with-scale").ScaleComponent<HTMLElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
 export default Code;

package/esm/Code/Code.js

@@ -1,57 +1,54 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "block", "className", "name", "classic"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useScale, { withScale } from '../use-scale';
 import useTheme from '../use-theme';
 import { addColorAlpha } from '../utils/color';
-
-function CodeComponent(_ref) {
+var CodeComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$block = _ref.block,
-      block = _ref$block === void 0 ? false : _ref$block,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? '' : _ref$name,
-      _ref$classic = _ref.classic,
-      classic = _ref$classic === void 0 ? false : _ref$classic,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$block = _ref.block,
+    block = _ref$block === void 0 ? false : _ref$block,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? '' : _ref$name,
+    _ref$classic = _ref.classic,
+    classic = _ref$classic === void 0 ? false : _ref$classic,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var theme = useTheme();
-
   var _useMemo = useMemo(function () {
-    if (!classic) return {
-      border: theme.palette.accents_1,
-      background: addColorAlpha(theme.palette.accents_1, 0.75)
-    };
-    return {
-      border: theme.palette.accents_2,
-      background: theme.palette.background
-    };
-  }, [classic, theme.palette]),
-      background = _useMemo.background,
-      border = _useMemo.border;
-
-  if (!block) return /*#__PURE__*/React.createElement("code", props, children);
+      if (!classic) return {
+        border: theme.palette.accents_1,
+        background: addColorAlpha(theme.palette.accents_1, 0.75)
+      };
+      return {
+        border: theme.palette.accents_2,
+        background: theme.palette.background
+      };
+    }, [classic, theme.palette]),
+    background = _useMemo.background,
+    border = _useMemo.border;
+  if (!block) return /*#__PURE__*/React.createElement("code", _extends({
+    ref: ref
+  }, props), children);
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["4255158627", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + "pre"
+    ref: ref,
+    className: _JSXStyle.dynamic([["313158234", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + "pre"
   }, name && /*#__PURE__*/React.createElement("header", {
-    className: _JSXStyle.dynamic([["4255158627", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["313158234", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["4255158627", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + "name"
+    className: _JSXStyle.dynamic([["313158234", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + "name"
   }, name)), /*#__PURE__*/React.createElement("pre", _extends({}, props, {
-    className: _JSXStyle.dynamic([["4255158627", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || className || "")
+    className: _JSXStyle.dynamic([["313158234", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || className || "")
   }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4255158627",
+    id: "313158234",
     dynamic: [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]
   }, ".pre.__jsx-style-dynamic-selector{max-width:100%;border:1px solid ".concat(border, ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(1.3), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(1.3), " ").concat(SCALES.ml(0), ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(background, ";}pre.__jsx-style-dynamic-selector{max-width:100%;font-size:inherit;border:none;margin:0;line-height:1.5em;padding:").concat(SCALES.pt(1.1), " ").concat(SCALES.pr(1), " ").concat(SCALES.pb(1.1), " ").concat(SCALES.pl(1), ";}.dark.__jsx-style-dynamic-selector{color:white;background:black;}.dark.__jsx-style-dynamic-selector code.__jsx-style-dynamic-selector{color:white;}header.__jsx-style-dynamic-selector{height:auto;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;border-radius:").concat(theme.layout.radius, ";background-color:transparent;}.name.__jsx-style-dynamic-selector{border:1px solid ").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_2, ";color:").concat(theme.palette.accents_5, ";height:auto;line-height:1.35em;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;font-size:").concat(SCALES.font(0.8125), ";padding:").concat(SCALES.font(0.32), " ").concat(SCALES.font(0.5), " ").concat(SCALES.font(0.32), " ").concat(SCALES.font(0.5), ";width:auto;border-top-left-radius:calc(").concat(theme.layout.radius, " - 1px);border-bottom-right-radius:").concat(theme.layout.radius, ";}")));
-}
-
+});
 CodeComponent.displayName = 'BolioUICode';
 var Code = withScale(CodeComponent);
 export default Code;

package/esm/Code/index.d.ts

@@ -1,3 +1,3 @@
-import Code from "./Code";
-export type { CodeProps } from "./Code";
+import Code from './Code';
+export type { CodeProps } from './Code';
 export default Code;

package/esm/Code/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Code from './Code';
 export default Code;

package/esm/Col/Col.d.ts

@@ -2,13 +2,12 @@ import React from 'react';
 interface Props {
     span?: number;
     offset?: number;
-    component?: keyof JSX.IntrinsicElements;
+    component?: keyof React.JSX.IntrinsicElements;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type ColProps = Props & NativeAttrs;
-declare function Col({ component, children, span, offset, className, ...props }: React.PropsWithChildren<ColProps>): JSX.Element;
-declare namespace Col {
-    var displayName: string;
-}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type ColProps = Props & NativeAttrs;
+declare const Col: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
 export default Col;

package/esm/Col/Col.js

@@ -1,29 +1,28 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["component", "children", "span", "offset", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-
-function Col(_ref) {
+var Col = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$component = _ref.component,
-      component = _ref$component === void 0 ? 'div' : _ref$component,
-      children = _ref.children,
-      _ref$span = _ref.span,
-      span = _ref$span === void 0 ? 12 : _ref$span,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? 0 : _ref$offset,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    component = _ref$component === void 0 ? 'div' : _ref$component,
+    children = _ref.children,
+    _ref$span = _ref.span,
+    span = _ref$span === void 0 ? 12 : _ref$span,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 0 : _ref$offset,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var Component = component;
-  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-    className: _JSXStyle.dynamic([["2614916236", [100 / 12 * span, 100 / 12 * offset]]]) + " " + (props && props.className != null && props.className || "col ".concat(className))
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["1202835035", [100 / 12 * span, 100 / 12 * offset]]]) + " " + (props && props.className != null && props.className || "col ".concat(className))
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2614916236",
+    id: "1202835035",
     dynamic: [100 / 12 * span, 100 / 12 * offset]
   }, ".col.__jsx-style-dynamic-selector{float:left;box-sizing:border-box;padding-left:calc(var(--row-gap) / 2);padding-right:calc(var(--row-gap) / 2);width:".concat(100 / 12 * span, "%;margin-left:").concat(100 / 12 * offset, "%;}")));
-}
-
+});
 Col.displayName = 'BolioUICol';
 export default Col;

package/esm/Col/index.d.ts

@@ -1,3 +1,3 @@
-import Col from "./Col";
-export type { ColProps } from "./Col";
+import Col from './Col';
+export type { ColProps } from './Col';
 export default Col;

package/esm/Col/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Col from './Col';
 export default Col;

package/esm/Collapse/Collapse.d.ts

@@ -7,7 +7,9 @@ interface Props {
     className?: string;
     index?: number;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type CollapseProps = Props & NativeAttrs;
-declare const Collapse: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type CollapseProps = Props & NativeAttrs;
+declare const Collapse: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Collapse;