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

package/esm/Button/index.js

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

package/esm/Button/styles.d.ts

@@ -1,6 +1,6 @@
-import { BolioUIThemesPalette } from "../Themes/Presets";
-import { ButtonTypes } from "../utils/prop-types";
-import { ButtonProps } from "./Button";
+import { BolioUIThemesPalette } from '../Themes/Presets';
+import { ButtonTypes } from '../utils/prop-types';
+import { ButtonProps } from './Button';
 export interface ButtonColorGroup {
     bg: string;
     border: string;
@@ -14,5 +14,5 @@ export interface ButtonCursorGroup {
     cursor: string;
     events: string;
 }
-export declare const getButtonCursor: (disabled?: boolean | undefined, loading?: boolean | undefined) => ButtonCursorGroup;
+export declare const getButtonCursor: (disabled?: boolean, loading?: boolean) => ButtonCursorGroup;
 export declare const getButtonDripColor: (palette: BolioUIThemesPalette, props: ButtonProps) => string;

package/esm/Button/styles.js

@@ -37,8 +37,8 @@ export var getButtonGhostColors = function getButtonGhostColors(palette, type) {
 };
 export var getButtonColors = function getButtonColors(palette, props) {
   var type = props.type,
-      disabled = props.disabled,
-      ghost = props.ghost;
+    disabled = props.disabled,
+    ghost = props.ghost;
   var colors = {
     "default": {
       bg: palette.accents_2,
@@ -86,6 +86,7 @@ export var getButtonColors = function getButtonColors(palette, props) {
     border: palette.accents_2,
     color: palette.accents_4
   };
+
   /**
    * The '-light' type is the same color as the common type,
    * only hover's color is different.
@@ -93,7 +94,6 @@ export var getButtonColors = function getButtonColors(palette, props) {
    *   Color['success'] === Color['success-light']
    *   Color['warning'] === Color['warning-light']
    */
-
   var withoutLightType = type === null || type === void 0 ? void 0 : type.replace('-light', '');
   var defaultColor = colors["default"];
   if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor;
@@ -137,10 +137,10 @@ export var getButtonGhostHoverColors = function getButtonGhostHoverColors(palett
 };
 export var getButtonHoverColors = function getButtonHoverColors(palette, props) {
   var type = props.type,
-      disabled = props.disabled,
-      loading = props.loading,
-      shadow = props.shadow,
-      ghost = props.ghost;
+    disabled = props.disabled,
+    loading = props.loading,
+    shadow = props.shadow,
+    ghost = props.ghost;
   var defaultColor = getButtonColors(palette, props);
   var alphaBackground = addColorAlpha(defaultColor.bg, 0.85);
   var colors = {

package/esm/Button/utils.d.ts

@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react';
-import { ButtonProps } from "./Button";
-import { ButtonGroupConfig } from "../ButtonGroup/ButtonGroupContext";
+import { ButtonProps } from './Button';
+import { ButtonGroupConfig } from '../ButtonGroup/ButtonGroupContext';
 export declare const getButtonChildrenWithIcon: (auto: boolean | undefined, children: ReactNode, icons: {
     icon?: React.ReactNode;
     iconRight?: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare const filterPropsWithGroup: <T extends React.PropsWithChildren<ButtonProps>>(props: T, config: ButtonGroupConfig) => T;

package/esm/Button/utils.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import ButtonIcon from './ButtonIcon';
 import useClasses from '../use-classes';
@@ -8,23 +8,22 @@ export var getButtonChildrenWithIcon = function getButtonChildrenWithIcon() {
   var children = arguments.length > 1 ? arguments[1] : undefined;
   var icons = arguments.length > 2 ? arguments[2] : undefined;
   var icon = icons.icon,
-      iconRight = icons.iconRight;
+    iconRight = icons.iconRight;
   var hasIcon = icon || iconRight;
   var isRight = Boolean(iconRight);
-  var paddingForAutoMode = auto ? "calc(var(--bolio-ui-button-height) / 2 + var(--bolio-ui-button-icon-padding) * .5)" : 0; // eslint-disable-next-line react-hooks/rules-of-hooks
+  var paddingForAutoMode = auto ? "calc(var(--bolio-ui-button-height) / 2 + var(--bolio-ui-button-icon-padding) * .5)" : 0;
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   var classes = useClasses('text', isRight ? 'right' : 'left');
   if (!hasIcon) return /*#__PURE__*/React.createElement("div", {
     className: "text"
   }, children);
-
   if (React.Children.count(children) === 0) {
     return /*#__PURE__*/React.createElement(ButtonIcon, {
       isRight: isRight,
       isSingle: true
     }, hasIcon);
   }
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonIcon, {
     isRight: isRight
   }, hasIcon), /*#__PURE__*/React.createElement("div", {

package/esm/ButtonDropdown/ButtonDropdown.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type ButtonDropdownTypes = NormalTypes;
+import { NormalTypes } from '../utils/prop-types';
+export type ButtonDropdownTypes = NormalTypes;
 interface Props {
     type?: ButtonDropdownTypes;
     auto?: boolean;
@@ -9,7 +9,9 @@ interface Props {
     className?: string;
     icon?: React.ReactNode;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type ButtonDropdownProps = Props & NativeAttrs;
-declare const ButtonDropdown: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type ButtonDropdownProps = Props & NativeAttrs;
+declare const ButtonDropdown: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default ButtonDropdown;

package/esm/ButtonDropdown/ButtonDropdown.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "type", "auto", "className", "disabled", "loading", "icon"];
-import _JSXStyle from "../styled-jsx.es.js";
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import _JSXStyle from "styled-jsx/style";
+import React, { useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import useTheme from '../use-theme';
 import useClickAway from '../utils/use-click-away';
 import { getColor } from './styles';
@@ -13,45 +13,41 @@ import { ButtonDropdownContext } from './ButtonDropdownContext';
 import { pickChild, pickChildByProps } from '../utils/collections';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 var stopPropagation = function stopPropagation(event) {
   event.stopPropagation();
   event.nativeEvent.stopImmediatePropagation();
 };
-
-function ButtonDropdownComponent(_ref) {
+var ButtonDropdownComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$auto = _ref.auto,
-      auto = _ref$auto === void 0 ? false : _ref$auto,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      icon = _ref.icon,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$auto = _ref.auto,
+    auto = _ref$auto === void 0 ? false : _ref$auto,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    icon = _ref.icon,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
-  var ref = useRef(null);
+    SCALES = _useScale.SCALES;
+  var innerRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return innerRef.current;
+  });
   var theme = useTheme();
   var colors = getColor(theme.palette, type);
   var itemChildren = pickChild(children, ButtonDropdownItem)[1];
-
   var _pickChildByProps = pickChildByProps(itemChildren, 'main', true),
-      _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
-      itemChildrenWithoutMain = _pickChildByProps2[0],
-      mainItemChildren = _pickChildByProps2[1];
-
+    _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
+    itemChildrenWithoutMain = _pickChildByProps2[0],
+    mainItemChildren = _pickChildByProps2[1];
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
   var clickHandler = useCallback(function (event) {
     event.preventDefault();
     stopPropagation(event);
@@ -69,43 +65,43 @@ function ButtonDropdownComponent(_ref) {
     return visible ? colors.hoverBgColor : colors.bgColor;
   }, [disabled, loading, theme.palette.accents_2, visible, colors.hoverBgColor, colors.bgColor]);
   var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
-      paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
-  useClickAway(ref, function () {
+    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
+  useClickAway(innerRef, function () {
     return setVisible(false);
   });
   return /*#__PURE__*/React.createElement(ButtonDropdownContext.Provider, {
     value: initialValue
   }, /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
+    ref: innerRef,
     onClick: stopPropagation
   }, props, {
-    className: _JSXStyle.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || useClasses('btn-dropdown', className) || "")
+    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || useClasses('btn-dropdown', className) || "")
   }), mainItemChildren, /*#__PURE__*/React.createElement("details", {
     open: visible,
-    className: _JSXStyle.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("summary", {
+    "aria-label": "More options",
     onClick: clickHandler,
-    className: _JSXStyle.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-box"
+    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-box"
   }, icon ? /*#__PURE__*/React.createElement("span", {
     style: {
       color: disabled || loading ? theme.palette.error : colors.color,
       height: SCALES.height(2.5),
       width: SCALES.height(2.5)
     },
-    className: _JSXStyle.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-icon"
+    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "dropdown-icon"
   }, icon) : /*#__PURE__*/React.createElement(ButtonDropdownIcon, {
     color: disabled || loading ? theme.palette.accents_4 : colors.color,
     height: SCALES.height(2.5)
   }))), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2141984301", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "content"
+    className: _JSXStyle.dynamic([["3951357131", [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]]]) + " " + "content"
   }, itemChildrenWithoutMain)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2141984301",
+    id: "3951357131",
     dynamic: [colors.borderColor, theme.layout.radius, SCALES.height(2.5), auto ? 'min-content' : SCALES.width(10.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.font(0.875), colors.hoverBorder, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, SCALES.height(2.5), colors.color, bgColor, SCALES.height(2.5), colors.borderLeftColor, disabled || loading ? 'not-allowed' : 'pointer', colors.hoverBorder, colors.hoverBgColor, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, theme.palette.background, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius]
   }, ".btn-dropdown.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;box-sizing:border-box;border-radius:".concat(theme.layout.radius, ";--bolio-ui-dropdown-height:").concat(SCALES.height(2.5), ";--bolio-ui-dropdown-min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";--bolio-ui-dropdown-padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";--bolio-ui-dropdown-font-size:").concat(SCALES.font(0.875), ";}.btn-dropdown.__jsx-style-dynamic-selector>button{border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}details.__jsx-style-dynamic-selector{border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";overflow:hidden;}.dropdown-box.__jsx-style-dynamic-selector{height:").concat(SCALES.height(2.5), ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;}summary.__jsx-style-dynamic-selector{box-sizing:border-box;-webkit-tap-highlight-color:transparent;list-style:none;outline:none;color:").concat(colors.color, ";background-color:").concat(bgColor, ";height:").concat(SCALES.height(2.5), ";cursor:").concat(disabled || loading ? 'not-allowed' : 'pointer', ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:auto;padding:0 1px;-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;}.content.__jsx-style-dynamic-selector{position:absolute;right:0;left:0;z-index:90;width:100%;border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowSmall, ";-webkit-transform:translateY(").concat(theme.layout.gapHalf, ");-ms-transform:translateY(").concat(theme.layout.gapHalf, ");transform:translateY(").concat(theme.layout.gapHalf, ");background-color:").concat(theme.palette.background, ";}.content.__jsx-style-dynamic-selector>button:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";border-top-right-radius:").concat(theme.layout.radius, ";}.content.__jsx-style-dynamic-selector>button:last-of-type{border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.dropdown-icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"))));
-}
-
+});
 ButtonDropdownComponent.displayName = 'BolioUIButtonDropdown';
 var ButtonDropdown = withScale(ButtonDropdownComponent);
 export default ButtonDropdown;

package/esm/ButtonDropdown/ButtonDropdownContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
+import { NormalTypes } from '../utils/prop-types';
 export interface ButtonDropdownConfig {
     type?: NormalTypes;
     auto?: boolean;

package/esm/ButtonDropdown/ButtonDropdownItem.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type ButtonDropdownItemTypes = NormalTypes;
+import { NormalTypes } from '../utils/prop-types';
+export type ButtonDropdownItemTypes = NormalTypes;
 interface Props {
     main?: boolean;
     type?: ButtonDropdownItemTypes;
     onClick?: React.MouseEventHandler<HTMLElement>;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>;
-export declare type ButtonDropdownItemProps = Props & NativeAttrs;
-declare function ButtonDropdownItem({ children, onClick, className, main, type: selfType, ...props }: ButtonDropdownItemProps): JSX.Element;
+type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>;
+export type ButtonDropdownItemProps = Props & NativeAttrs;
+declare function ButtonDropdownItem({ children, onClick, className, main, type: selfType, ...props }: ButtonDropdownItemProps): React.JSX.Element;
 declare namespace ButtonDropdownItem {
     var displayName: string;
 }

package/esm/ButtonDropdown/ButtonDropdownItem.js

@@ -1,39 +1,33 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "onClick", "className", "main", "type"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import { getColor } from './styles';
 import { useButtonDropdown } from './ButtonDropdownContext';
 import Loading from '../Loading';
-
 function ButtonDropdownItem(_ref) {
   var children = _ref.children,
-      onClick = _ref.onClick,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$main = _ref.main,
-      main = _ref$main === void 0 ? false : _ref$main,
-      _ref$type = _ref.type,
-      selfType = _ref$type === void 0 ? 'default' : _ref$type,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    onClick = _ref.onClick,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$main = _ref.main,
+    main = _ref$main === void 0 ? false : _ref$main,
+    _ref$type = _ref.type,
+    selfType = _ref$type === void 0 ? 'default' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useButtonDropdown = useButtonDropdown(),
-      parentType = _useButtonDropdown.type,
-      disabled = _useButtonDropdown.disabled,
-      loading = _useButtonDropdown.loading;
-
+    parentType = _useButtonDropdown.type,
+    disabled = _useButtonDropdown.disabled,
+    loading = _useButtonDropdown.loading;
   var type = main ? parentType : selfType;
   var colors = getColor(theme.palette, type, disabled);
-
   var clickHandler = function clickHandler(event) {
     if (disabled || loading) return;
     onClick && onClick(event);
   };
-
   var cursor = useMemo(function () {
     if (loading) return 'default';
     return disabled ? 'not-allowed' : 'pointer';
@@ -47,6 +41,5 @@ function ButtonDropdownItem(_ref) {
     dynamic: [cursor, colors.bgColor, colors.color, colors.hoverBorder, colors.hoverBgColor]
   }, "button.__jsx-style-dynamic-selector{position:relative;-webkit-appearance:button;text-rendering:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;text-align:center;cursor:".concat(cursor, ";box-sizing:border-box;margin:0;border:none;background-color:").concat(colors.bgColor, ";color:").concat(colors.color, ";width:100%;height:var(--bolio-ui-dropdown-height);min-width:var(--bolio-ui-dropdown-min-width);padding:var(--bolio-ui-dropdown-padding);font-size:var(--bolio-ui-dropdown-font-size);font-weight:bold;}button.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}")));
 }
-
 ButtonDropdownItem.displayName = 'BolioUIButtonDropdownItem';
 export default ButtonDropdownItem;

package/esm/ButtonDropdown/Icon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface Props {
     color?: string;
     height?: string;
 }
-declare function ButtonDropdownIcon({ color, height }: Props): JSX.Element;
+declare function ButtonDropdownIcon({ color, height }: Props): React.JSX.Element;
 declare namespace ButtonDropdownIcon {
     var displayName: string;
 }

package/esm/ButtonDropdown/Icon.js

@@ -1,9 +1,8 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-
 function ButtonDropdownIcon(_ref) {
   var color = _ref.color,
-      height = _ref.height;
+    height = _ref.height;
   return /*#__PURE__*/React.createElement("svg", {
     stroke: color,
     style: {
@@ -25,6 +24,5 @@ function ButtonDropdownIcon(_ref) {
     id: "3359574434"
   }, "svg.jsx-3359574434{-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);}"));
 }
-
 ButtonDropdownIcon.displayName = 'BolioUIButtonDropdownIcon';
 export default ButtonDropdownIcon;

package/esm/ButtonDropdown/index.d.ts

@@ -1,9 +1,9 @@
-import ButtonDropdown from "./ButtonDropdown";
-import ButtonDropdownItem from "./ButtonDropdownItem";
-declare type ButtonDropdownType = typeof ButtonDropdown & {
+import ButtonDropdown from './ButtonDropdown';
+import ButtonDropdownItem from './ButtonDropdownItem';
+type ButtonDropdownType = typeof ButtonDropdown & {
     Item: typeof ButtonDropdownItem;
 };
-export type { ButtonDropdownProps, ButtonDropdownTypes } from "./ButtonDropdown";
-export type { ButtonDropdownItemProps, ButtonDropdownItemTypes } from "./ButtonDropdownItem";
+export type { ButtonDropdownProps, ButtonDropdownTypes } from './ButtonDropdown';
+export type { ButtonDropdownItemProps, ButtonDropdownItemTypes } from './ButtonDropdownItem';
 declare const _default: ButtonDropdownType;
 export default _default;

package/esm/ButtonDropdown/index.js

@@ -1,3 +1,4 @@
+'use client';
 import ButtonDropdown from './ButtonDropdown';
 import ButtonDropdownItem from './ButtonDropdownItem';
 ButtonDropdown.Item = ButtonDropdownItem;

package/esm/ButtonDropdown/styles.d.ts

@@ -1,6 +1,6 @@
-import { BolioUIThemesPalette } from "../Themes/Presets";
-import { NormalTypes } from "../utils/prop-types";
-declare type ButtonDropdownColors = {
+import { BolioUIThemesPalette } from '../Themes/Presets';
+import { NormalTypes } from '../utils/prop-types';
+type ButtonDropdownColors = {
     color: string;
     bgColor: string;
     borderColor: string;

package/esm/ButtonGroup/ButtonGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonTypes } from "../utils/prop-types";
+import { ButtonTypes } from '../utils/prop-types';
 interface Props {
     disabled?: boolean;
     vertical?: boolean;
@@ -7,7 +7,9 @@ interface Props {
     type?: ButtonTypes;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
-export declare type ButtonGroupProps = Props & NativeAttrs;
-declare const ButtonGroup: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export type ButtonGroupProps = Props & NativeAttrs;
+declare const ButtonGroup: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/esm/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["disabled", "type", "ghost", "vertical", "children", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import { ButtonGroupContext } from './ButtonGroupContext';
@@ -14,10 +14,9 @@ var defaultProps = {
   type: 'default',
   className: ''
 };
-
 var getGroupBorderColors = function getGroupBorderColors(palette, props) {
   var ghost = props.ghost,
-      type = props.type;
+    type = props.type;
   if (!ghost && type !== 'default') return palette.background;
   var colors = {
     // default: palette.accents_3,
@@ -31,21 +30,22 @@ var getGroupBorderColors = function getGroupBorderColors(palette, props) {
   var withoutLightType = type === null || type === void 0 ? void 0 : type.replace('-light', '');
   return colors[withoutLightType] || colors["default"];
 };
-
-function ButtonGroupComponent(groupProps) {
+var ButtonGroupComponent = /*#__PURE__*/React.forwardRef(function (groupProps, ref) {
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
-  var disabled = groupProps.disabled,
-      type = groupProps.type,
-      ghost = groupProps.ghost,
-      vertical = groupProps.vertical,
-      children = groupProps.children,
-      className = groupProps.className,
-      props = _objectWithoutProperties(groupProps, _excluded);
-
+    SCALES = _useScale.SCALES;
+  var _groupProps$disabled = groupProps.disabled,
+    disabled = _groupProps$disabled === void 0 ? defaultProps.disabled : _groupProps$disabled,
+    _groupProps$type = groupProps.type,
+    type = _groupProps$type === void 0 ? defaultProps.type : _groupProps$type,
+    _groupProps$ghost = groupProps.ghost,
+    ghost = _groupProps$ghost === void 0 ? defaultProps.ghost : _groupProps$ghost,
+    _groupProps$vertical = groupProps.vertical,
+    vertical = _groupProps$vertical === void 0 ? defaultProps.vertical : _groupProps$vertical,
+    children = groupProps.children,
+    _groupProps$className = groupProps.className,
+    className = _groupProps$className === void 0 ? defaultProps.className : _groupProps$className,
+    props = _objectWithoutProperties(groupProps, _excluded);
   var initialValue = useMemo(function () {
     return {
       disabled: disabled,
@@ -55,23 +55,26 @@ function ButtonGroupComponent(groupProps) {
     };
   }, [disabled, ghost, type]);
   var border = useMemo(function () {
-    return getGroupBorderColors(theme.palette, groupProps);
-  }, [theme.palette, groupProps]);
+    return getGroupBorderColors(theme.palette, {
+      ghost: ghost,
+      type: type
+    });
+  }, [theme.palette, ghost, type]);
   var classes = useClasses('btn-group', {
     vertical: vertical,
     horizontal: !vertical
   }, className);
   return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
     value: initialValue
-  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
     className: _JSXStyle.dynamic([["3583665674", [theme.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3583665674",
     dynamic: [theme.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border]
   }, ".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;
+});
 ButtonGroupComponent.displayName = 'BolioUIButtonGroup';
 var ButtonGroup = withScale(ButtonGroupComponent);
 export default ButtonGroup;

package/esm/ButtonGroup/ButtonGroupContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonTypes } from "../utils/prop-types";
+import { ButtonTypes } from '../utils/prop-types';
 export interface ButtonGroupConfig {
     type?: ButtonTypes;
     ghost?: boolean;

package/esm/ButtonGroup/index.d.ts

@@ -1,4 +1,4 @@
-import ButtonGroup from "./ButtonGroup";
-export type { ButtonGroupProps } from "./ButtonGroup";
-export type { ButtonTypes } from "../utils/prop-types";
+import ButtonGroup from './ButtonGroup';
+export type { ButtonGroupProps } from './ButtonGroup';
+export type { ButtonTypes } from '../utils/prop-types';
 export default ButtonGroup;

package/esm/ButtonGroup/index.js

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

package/esm/Calendar/Calendar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface Props {
+    value?: Date | null;
+    onChange?: (date: Date) => void;
+    min?: Date;
+    max?: Date;
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    autoFocus?: boolean;
+    previousLabel?: string;
+    nextLabel?: string;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props | 'onChange'>;
+export type CalendarProps = Props & NativeAttrs;
+declare const Calendar: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & React.RefAttributes<HTMLDivElement>>;
+export default Calendar;