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

package/esm/Radio/Radio.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 = ["className", "checked", "onChange", "disabled", "type", "value", "children"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useMemo, useState } from 'react';
 import useTheme from '../use-theme';
 import { useRadioContext } from './RadioContext';
@@ -12,66 +12,54 @@ import useWarning from '../utils/use-warning';
 import { getColors } from './styles';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
-function RadioComponent(_ref) {
+var RadioComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      checked = _ref.checked,
-      onChange = _ref.onChange,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      radioValue = _ref.value,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    className = _ref$className === void 0 ? '' : _ref$className,
+    checked = _ref.checked,
+    onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    radioValue = _ref.value,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useState = useState(!!checked),
-      _useState2 = _slicedToArray(_useState, 2),
-      selfChecked = _useState2[0],
-      setSelfChecked = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selfChecked = _useState2[0],
+    setSelfChecked = _useState2[1];
   var _useRadioContext = useRadioContext(),
-      groupValue = _useRadioContext.value,
-      disabledAll = _useRadioContext.disabledAll,
-      inGroup = _useRadioContext.inGroup,
-      updateState = _useRadioContext.updateState;
-
+    groupValue = _useRadioContext.value,
+    disabledAll = _useRadioContext.disabledAll,
+    inGroup = _useRadioContext.inGroup,
+    updateState = _useRadioContext.updateState;
   var _pickChild = pickChild(children, RadioDescription),
-      _pickChild2 = _slicedToArray(_pickChild, 2),
-      withoutDescChildren = _pickChild2[0],
-      DescChildren = _pickChild2[1];
-
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    withoutDescChildren = _pickChild2[0],
+    DescChildren = _pickChild2[1];
   if (inGroup) {
     if (checked !== undefined) {
       useWarning('Remove props "checked" if in the Radio.Group.', 'Radio');
     }
-
     if (radioValue === undefined) {
       useWarning('Props "value" must be deinfed if in the Radio.Group.', 'Radio');
     }
-
     useEffect(function () {
       setSelfChecked(groupValue === radioValue);
     }, [groupValue, radioValue]);
   }
-
   var _useMemo = useMemo(function () {
-    return getColors(theme.palette, type);
-  }, [theme.palette, type]),
-      label = _useMemo.label,
-      border = _useMemo.border,
-      bg = _useMemo.bg;
-
+      return getColors(theme.palette, type);
+    }, [theme.palette, type]),
+    label = _useMemo.label,
+    border = _useMemo.border,
+    bg = _useMemo.bg;
   var isDisabled = useMemo(function () {
     return disabled || disabledAll;
   }, [disabled, disabledAll]);
-
   var changeHandler = function changeHandler(event) {
     if (isDisabled) return;
     var selfEvent = {
@@ -83,41 +71,38 @@ function RadioComponent(_ref) {
       nativeEvent: event
     };
     setSelfChecked(!selfChecked);
-
     if (inGroup) {
       updateState && updateState(radioValue);
     }
-
     onChange && onChange(selfEvent);
   };
-
   useEffect(function () {
     if (checked === undefined) return;
     setSelfChecked(Boolean(checked));
   }, [checked]);
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('radio', className) || "")
+    className: _JSXStyle.dynamic([["691427886", [theme.palette.primary, SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('radio', className) || "")
   }, /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]])
+    className: _JSXStyle.dynamic([["691427886", [theme.palette.primary, SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]])
   }, /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref,
     type: "radio",
     value: radioValue,
     checked: selfChecked,
     onChange: changeHandler
   }, props, {
-    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (props && props.className != null && props.className || "")
+    className: _JSXStyle.dynamic([["691427886", [theme.palette.primary, SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (props && props.className != null && props.className || "")
   })), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + "name"
+    className: _JSXStyle.dynamic([["691427886", [theme.palette.primary, SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + "name"
   }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3162430237", [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('point', {
+    className: _JSXStyle.dynamic([["691427886", [theme.palette.primary, SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (useClasses('point', {
       active: selfChecked
     }) || "")
   }), withoutDescChildren), DescChildren && DescChildren), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3162430237",
-    dynamic: [SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]
-  }, "input.__jsx-style-dynamic-selector{opacity:0;visibility:hidden;overflow:hidden;width:1px;height:1px;top:-1000px;right:-1000px;position:fixed;font-size:0;}.radio.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;--radio-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'initial'), ";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), ";}label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:").concat(isDisabled ? theme.palette.accents_4 : label, ";cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}.name.__jsx-style-dynamic-selector{font-size:var(--radio-size);font-weight:bold;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;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;}.point.__jsx-style-dynamic-selector{height:var(--radio-size);width:var(--radio-size);border-radius:50%;border:1px solid ").concat(border, ";-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;position:relative;display:inline-block;-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);margin-right:calc(var(--radio-size) * 0.375);}.point.__jsx-style-dynamic-selector:before{content:'';position:absolute;left:-1px;top:-1px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);height:var(--radio-size);width:var(--radio-size);border-radius:50%;background-color:").concat(isDisabled ? theme.palette.accents_4 : bg, ";}.active.__jsx-style-dynamic-selector:before{-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;}")));
-}
-
+    id: "691427886",
+    dynamic: [theme.palette.primary, SCALES.font(1), SCALES.width(1, 'initial'), 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? 'not-allowed' : 'pointer', border, isDisabled ? theme.palette.accents_4 : bg]
+  }, "input.__jsx-style-dynamic-selector{opacity:0;overflow:hidden;width:1px;height:1px;margin:0;top:0;left:0;position:absolute;font-size:0;}input.__jsx-style-dynamic-selector:focus-visible+.name.__jsx-style-dynamic-selector{border-radius:4px;outline:2px solid ".concat(theme.palette.primary, ";outline-offset:2px;}.radio.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;--radio-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'initial'), ";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), ";}label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:").concat(isDisabled ? theme.palette.accents_4 : label, ";cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}.name.__jsx-style-dynamic-selector{font-size:var(--radio-size);font-weight:bold;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;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;}.point.__jsx-style-dynamic-selector{height:var(--radio-size);width:var(--radio-size);border-radius:50%;border:1px solid ").concat(border, ";-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;position:relative;display:inline-block;-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);margin-right:calc(var(--radio-size) * 0.375);}.point.__jsx-style-dynamic-selector:before{content:'';position:absolute;left:-1px;top:-1px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);height:var(--radio-size);width:var(--radio-size);border-radius:50%;background-color:").concat(isDisabled ? theme.palette.accents_4 : bg, ";}.active.__jsx-style-dynamic-selector:before{-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;}")));
+});
 RadioComponent.displayName = 'BolioUIRadio';
 var Radio = withScale(RadioComponent);
 export default Radio;

package/esm/Radio/RadioDescription.d.ts

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

package/esm/Radio/RadioDescription.js

@@ -1,22 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "children"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
 import useScale, { withScale } from '../use-scale';
-
 function RadioDescriptionComponent(_ref) {
   var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: _JSXStyle.dynamic([["2910110723", [theme.palette.accents_3, SCALES.font(0.85, 'calc(var(--radio-size) * 0.85)'), 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, 'calc(var(--radio-size) + var(--radio-size) * 0.375)')]]]) + " " + (props && props.className != null && props.className || className || "")
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -24,7 +20,6 @@ function RadioDescriptionComponent(_ref) {
     dynamic: [theme.palette.accents_3, SCALES.font(0.85, 'calc(var(--radio-size) * 0.85)'), 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, 'calc(var(--radio-size) + var(--radio-size) * 0.375)')]
   }, "span.__jsx-style-dynamic-selector{color:".concat(theme.palette.accents_3, ";font-size:").concat(SCALES.font(0.85, 'calc(var(--radio-size) * 0.85)'), ";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, 'calc(var(--radio-size) + var(--radio-size) * 0.375)'), ";}")));
 }
-
 RadioDescriptionComponent.displayName = 'BolioUIRadioDescription';
 var RadioDescription = withScale(RadioDescriptionComponent);
 export default RadioDescription;

package/esm/Radio/RadioGroup.d.ts

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

package/esm/Radio/RadioGroup.js

@@ -2,38 +2,33 @@ 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 = ["disabled", "onChange", "value", "children", "className", "initialValue", "useRow"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useMemo, useState } from 'react';
 import { RadioContext } from './RadioContext';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 function RadioGroupComponent(_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,
-      initialValue = _ref.initialValue,
-      _ref$useRow = _ref.useRow,
-      useRow = _ref$useRow === void 0 ? false : _ref$useRow,
-      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,
+    initialValue = _ref.initialValue,
+    _ref$useRow = _ref.useRow,
+    useRow = _ref$useRow === void 0 ? false : _ref$useRow,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useState = useState(initialValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      selfVal = _useState2[0],
-      setSelfVal = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selfVal = _useState2[0],
+    setSelfVal = _useState2[1];
   var updateState = function updateState(nextValue) {
     setSelfVal(nextValue);
     onChange && onChange(nextValue);
   };
-
   var providerValue = useMemo(function () {
     return {
       updateState: updateState,
@@ -55,7 +50,6 @@ function RadioGroupComponent(_ref) {
     dynamic: [useRow ? 'col' : 'column', SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), useRow ? 0 : 'var(--radio-group-gap)', useRow ? 'var(--radio-group-gap)' : 0, SCALES.font(1)]
   }, ".radio-group.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:".concat(useRow ? 'col' : 'column', ";-ms-flex-direction:").concat(useRow ? 'col' : 'column', ";flex-direction:").concat(useRow ? 'col' : 'column', ";--radio-group-gap:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.radio-group.__jsx-style-dynamic-selector .radio{margin-top:").concat(useRow ? 0 : 'var(--radio-group-gap)', ";margin-left:").concat(useRow ? 'var(--radio-group-gap)' : 0, ";--radio-size:").concat(SCALES.font(1), ";}.radio-group.__jsx-style-dynamic-selector .radio:first-of-type{margin:0;}")));
 }
-
 RadioGroupComponent.displayName = 'BolioUIRadioGroup';
 var RadioGroup = withScale(RadioGroupComponent);
 export default RadioGroup;

package/esm/Radio/index.d.ts

@@ -1,13 +1,13 @@
-import Radio from "./Radio";
-import RadioGroup from "./RadioGroup";
-import RadioDescription from "./RadioDescription";
-export declare type RadioComponentType = typeof Radio & {
+import Radio from './Radio';
+import RadioGroup from './RadioGroup';
+import RadioDescription from './RadioDescription';
+export type RadioComponentType = typeof Radio & {
     Group: typeof RadioGroup;
     Description: typeof RadioDescription;
     Desc: typeof RadioDescription;
 };
-export type { RadioProps, RadioEvent, RadioEventTarget, RadioTypes } from "./Radio";
-export type { RadioGroupProps } from "./RadioGroup";
-export type { RadioDescriptionProps } from "./RadioDescription";
+export type { RadioProps, RadioEvent, RadioEventTarget, RadioTypes } from './Radio';
+export type { RadioGroupProps } from './RadioGroup';
+export type { RadioDescriptionProps } from './RadioDescription';
 declare const _default: RadioComponentType;
 export default _default;

package/esm/Radio/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Radio from './Radio';
 import RadioGroup from './RadioGroup';
 import RadioDescription from './RadioDescription';

package/esm/Radio/styles.d.ts

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

package/esm/Rating/Rating.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type RatingTypes = NormalTypes;
+import { NormalTypes } from '../utils/prop-types';
+export type RatingTypes = NormalTypes;
 declare const ratingCountTuple: [2, 3, 4, 5, 6, 7, 8, 9, 10];
 declare const ratingValueTuple: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-export declare type RatingValue = typeof ratingValueTuple[number];
-export declare type RatingCount = typeof ratingCountTuple[number];
+export type RatingValue = typeof ratingValueTuple[number];
+export type RatingCount = typeof ratingCountTuple[number];
 interface Props {
     type?: RatingTypes;
     className?: string;
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     count?: RatingCount | number;
     value?: RatingValue | number;
     initialValue?: RatingValue;
@@ -16,7 +16,9 @@ interface Props {
     locked?: boolean;
     onLockedChange?: (locked: boolean) => void;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type RatingProps = Props & NativeAttrs;
-declare const Rating: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type RatingProps = Props & NativeAttrs;
+declare const Rating: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Rating;

package/esm/Rating/Rating.js

@@ -3,7 +3,7 @@ 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 = ["type", "className", "icon", "count", "value", "initialValue", "onValueChange", "locked", "onLockedChange"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useMemo, useState } from 'react';
 import { tupleNumber } from '../utils/prop-types';
 import RatingIcon from './RatingIcon';
@@ -12,7 +12,6 @@ import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
 var ratingCountTuple = tupleNumber(2, 3, 4, 5, 6, 7, 8, 9, 10);
 var ratingValueTuple = tupleNumber(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
-
 var getColor = function getColor(type, palette) {
   var colors = {
     "default": palette.accents_6,
@@ -25,72 +24,63 @@ var getColor = function getColor(type, palette) {
   };
   return colors[type] || colors["default"];
 };
-
-function RatingComponent(_ref) {
+var RatingComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(RatingIcon, null) : _ref$icon,
-      _ref$count = _ref.count,
-      count = _ref$count === void 0 ? 5 : _ref$count,
-      customValue = _ref.value,
-      _ref$initialValue = _ref.initialValue,
-      initialValue = _ref$initialValue === void 0 ? 1 : _ref$initialValue,
-      onValueChange = _ref.onValueChange,
-      _ref$locked = _ref.locked,
-      locked = _ref$locked === void 0 ? false : _ref$locked,
-      onLockedChange = _ref.onLockedChange,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(RatingIcon, null) : _ref$icon,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 5 : _ref$count,
+    customValue = _ref.value,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? 1 : _ref$initialValue,
+    onValueChange = _ref.onValueChange,
+    _ref$locked = _ref.locked,
+    locked = _ref$locked === void 0 ? false : _ref$locked,
+    onLockedChange = _ref.onLockedChange,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var color = useMemo(function () {
     return getColor(type, theme.palette);
   }, [type, theme.palette]);
-
   var _useState = useState(initialValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var _useState3 = useState(locked),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isLocked = _useState4[0],
-      setIsLocked = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLocked = _useState4[0],
+    setIsLocked = _useState4[1];
   var lockedChangeHandler = function lockedChangeHandler(next) {
     setIsLocked(next);
     onLockedChange && onLockedChange(next);
   };
-
   var valueChangeHandler = function valueChangeHandler(next) {
     setValue(next);
     var emitValue = next > count ? count : next;
     onValueChange && onValueChange(emitValue);
   };
-
   var clickHandler = function clickHandler(index) {
     if (isLocked) return lockedChangeHandler(false);
     valueChangeHandler(index);
     lockedChangeHandler(true);
   };
-
   var mouseEnterHandler = function mouseEnterHandler(index) {
     if (isLocked) return;
     valueChangeHandler(index);
   };
-
   useEffect(function () {
     if (typeof customValue === 'undefined') return;
     setValue(customValue < 0 ? 0 : customValue);
   }, [customValue]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2801573450", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color, isLocked ? 'default' : 'pointer', color]]]) + " " + (props && props.className != null && props.className || useClasses('rating', className) || "")
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["1712443240", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color, isLocked ? 'default' : 'pointer', color]]]) + " " + (props && props.className != null && props.className || useClasses('rating', className) || "")
   }), _toConsumableArray(Array(count)).map(function (_, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: index,
@@ -100,16 +90,15 @@ function RatingComponent(_ref) {
       onClick: function onClick() {
         return clickHandler(index + 1);
       },
-      className: _JSXStyle.dynamic([["2801573450", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color, isLocked ? 'default' : 'pointer', color]]]) + " " + (useClasses('icon-box', {
+      className: _JSXStyle.dynamic([["1712443240", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color, isLocked ? 'default' : 'pointer', color]]]) + " " + (useClasses('icon-box', {
         hovered: index + 1 <= value
       }) || "")
     }, icon);
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2801573450",
+    id: "1712443240",
     dynamic: [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), color, isLocked ? 'default' : 'pointer', color]
   }, ".rating.__jsx-style-dynamic-selector{box-sizing:border-box;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;--rating-font-size:".concat(SCALES.font(1), ";font-size:var(--rating-font-size);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), ";}.icon-box.__jsx-style-dynamic-selector{box-sizing:border-box;color:").concat(color, ";width:calc(var(--rating-font-size) * 1.5);height:calc(var(--rating-font-size) * 1.5);margin-right:calc(var(--rating-font-size) * 1 / 5);cursor:").concat(isLocked ? 'default' : 'pointer', ";}.icon-box.__jsx-style-dynamic-selector svg{width:100%;height:100%;fill:transparent;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform,color,fill 30ms linear;-webkit-transition:transform,color,fill 30ms linear;transition:transform,color,fill 30ms linear;}.hovered.__jsx-style-dynamic-selector svg{fill:").concat(color, ";-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);}")));
-}
-
+});
 RatingComponent.displayName = 'BolioUIRating';
 var Rating = withScale(RatingComponent);
 export default Rating;

package/esm/Rating/RatingIcon.d.ts

@@ -1,4 +1,5 @@
-declare function RatingIcon(): JSX.Element;
+import React from 'react';
+declare function RatingIcon(): React.JSX.Element;
 declare namespace RatingIcon {
     var displayName: string;
 }

package/esm/Rating/RatingIcon.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 function RatingIcon() {
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 24 24",
@@ -15,6 +14,5 @@ function RatingIcon() {
     d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
   }));
 }
-
 RatingIcon.displayName = 'BolioUIRatingIcon';
 export default RatingIcon;

package/esm/Rating/index.d.ts

@@ -1,3 +1,3 @@
-import Rating from "./Rating";
-export type { RatingProps, RatingTypes, RatingCount, RatingValue } from "./Rating";
+import Rating from './Rating';
+export type { RatingProps, RatingTypes, RatingCount, RatingValue } from './Rating';
 export default Rating;

package/esm/Rating/index.js

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

package/esm/Row/Row.d.ts

@@ -1,31 +1,16 @@
 import React from 'react';
-declare type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
-declare type Align = 'top' | 'middle' | 'bottom';
+type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+type Align = 'top' | 'middle' | 'bottom';
 interface Props {
     gap?: number;
     justify?: Justify;
     align?: Align;
-    component?: keyof JSX.IntrinsicElements;
+    component?: keyof React.JSX.IntrinsicElements;
     className?: string;
 }
-declare const defaultProps: {
-    gap: number;
-    justify: Justify;
-    align: Align;
-    component: keyof JSX.IntrinsicElements;
-    className: string;
-};
-declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
-export declare type RowProps = Props & NativeAttrs;
-declare function Row({ children, component, gap, justify, align, className, ...props }: React.PropsWithChildren<RowProps> & typeof defaultProps): JSX.Element;
-declare namespace Row {
-    var defaultProps: {
-        gap: number;
-        justify: Justify;
-        align: Align;
-        component: keyof JSX.IntrinsicElements;
-        className: string;
-    };
-    var displayName: string;
-}
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export type RowProps = Props & NativeAttrs;
+declare const Row: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
 export default Row;