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

package/esm/BolioUIProvider/BolioUIProvider.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import { BolioUIThemes } from "../Themes/Presets";
-export declare type BolioUIProviderProps = {
+import { BolioUIThemes } from '../Themes/Presets';
+export type BolioUIProviderProps = {
     themes?: Array<BolioUIThemes>;
     themeType?: string | 'dark' | 'light';
 };

package/esm/BolioUIProvider/BolioUIProvider.js

@@ -4,43 +4,35 @@ import { BolioUIContent, defaultToastLayout } from '../utils/use-bolio-ui-contex
 import ThemeProvider from './ThemeProvider';
 import useCurrentState from '../utils/use-current-state';
 import ToastContainer from '../use-toasts/toast-container';
-
 var BolioUIProvider = function BolioUIProvider(_ref) {
   var themes = _ref.themes,
-      themeType = _ref.themeType,
-      children = _ref.children;
-
+    themeType = _ref.themeType,
+    children = _ref.children;
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      lastUpdateToastId = _useState2[0],
-      setLastUpdateToastId = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    lastUpdateToastId = _useState2[0],
+    setLastUpdateToastId = _useState2[1];
   var _useCurrentState = useCurrentState([]),
-      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-      toasts = _useCurrentState2[0],
-      setToasts = _useCurrentState2[1],
-      toastsRef = _useCurrentState2[2];
-
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    toasts = _useCurrentState2[0],
+    setToasts = _useCurrentState2[1],
+    toastsRef = _useCurrentState2[2];
   var _useCurrentState3 = useCurrentState(defaultToastLayout),
-      _useCurrentState4 = _slicedToArray(_useCurrentState3, 3),
-      toastLayout = _useCurrentState4[0],
-      setToastLayout = _useCurrentState4[1],
-      toastLayoutRef = _useCurrentState4[2];
-
+    _useCurrentState4 = _slicedToArray(_useCurrentState3, 3),
+    toastLayout = _useCurrentState4[0],
+    setToastLayout = _useCurrentState4[1],
+    toastLayoutRef = _useCurrentState4[2];
   var updateToasts = function updateToasts(fn) {
     var nextToasts = fn(toastsRef.current);
     setToasts(nextToasts);
   };
-
   var updateToastLayout = function updateToastLayout(fn) {
     var nextLayout = fn(toastLayoutRef.current);
     setToastLayout(nextLayout);
   };
-
   var updateLastToastId = function updateLastToastId(fn) {
     setLastUpdateToastId(fn());
   };
-
   var initialValue = useMemo(function () {
     return {
       toasts: toasts,
@@ -58,5 +50,4 @@ var BolioUIProvider = function BolioUIProvider(_ref) {
     themeType: themeType
   }, children, /*#__PURE__*/React.createElement(ToastContainer, null)));
 };
-
 export default BolioUIProvider;

package/esm/BolioUIProvider/ThemeProvider.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { BolioUIThemes } from "../Themes/Presets";
+import { BolioUIThemes } from '../Themes/Presets';
 export interface Props {
     themeType?: string;
     themes?: Array<BolioUIThemes>;

package/esm/BolioUIProvider/ThemeProvider.js

@@ -4,20 +4,17 @@ import React, { useEffect, useMemo, useState } from 'react';
 import Themes from '../Themes';
 import { ThemeContext } from '../use-theme/theme-context';
 import { AllThemesContext } from '../use-all-themes/all-themes-context';
-
 var ThemeProvider = function ThemeProvider(_ref) {
   var children = _ref.children,
-      themeType = _ref.themeType,
-      _ref$themes = _ref.themes,
-      themes = _ref$themes === void 0 ? [] : _ref$themes;
-
+    themeType = _ref.themeType,
+    _ref$themes = _ref.themes,
+    themes = _ref$themes === void 0 ? [] : _ref$themes;
   var _useState = useState({
-    themes: Themes.getPresets()
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      allThemes = _useState2[0],
-      setAllThemes = _useState2[1];
-
+      themes: Themes.getPresets()
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    allThemes = _useState2[0],
+    setAllThemes = _useState2[1];
   var currentTheme = useMemo(function () {
     var theme = allThemes.themes.find(function (item) {
       return item.type === themeType;
@@ -43,5 +40,4 @@ var ThemeProvider = function ThemeProvider(_ref) {
     value: currentTheme
   }, children));
 };
-
 export default ThemeProvider;

package/esm/BolioUIProvider/index.d.ts

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

package/esm/BolioUIProvider/index.js

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

package/esm/Breadcrumbs/Breadcrumbs.d.ts

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

package/esm/Breadcrumbs/Breadcrumbs.js

@@ -1,21 +1,18 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import BreadcrumbsSeparator from './BreadcrumbsSeparator';
 import { addColorAlpha } from '../utils/color';
 import useScale, { withScale } from '../use-scale';
-
-function BreadcrumbsComponent(_ref) {
+var BreadcrumbsComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$separator = _ref.separator,
-      separator = _ref$separator === void 0 ? '/' : _ref$separator,
-      children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className;
+    separator = _ref$separator === void 0 ? '/' : _ref$separator,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var hoverColor = useMemo(function () {
     return addColorAlpha(theme.palette.link, 0.85);
   }, [theme.palette.link]);
@@ -25,23 +22,21 @@ function BreadcrumbsComponent(_ref) {
     var last = childrenArray[index - 1];
     var lastIsSeparator = /*#__PURE__*/React.isValidElement(last) && last.type === BreadcrumbsSeparator;
     var currentIsSeparator = item.type === BreadcrumbsSeparator;
-
     if (!lastIsSeparator && !currentIsSeparator && index > 0) {
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: index
       }, /*#__PURE__*/React.createElement(BreadcrumbsSeparator, null, separator), item);
     }
-
     return item;
   });
   return /*#__PURE__*/React.createElement("nav", {
+    ref: ref,
     className: _JSXStyle.dynamic([["3435904432", [theme.palette.accents_5, 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), hoverColor, theme.palette.accents_7]]]) + " " + (className || "")
   }, withSeparatorChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3435904432",
     dynamic: [theme.palette.accents_5, 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), hoverColor, theme.palette.accents_7]
   }, "nav.__jsx-style-dynamic-selector{line-height:inherit;color:".concat(theme.palette.accents_5, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").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), ";}nav.__jsx-style-dynamic-selector .link:hover{color:").concat(hoverColor, ";}nav.__jsx-style-dynamic-selector>span:last-of-type{color:").concat(theme.palette.accents_7, ";}nav.__jsx-style-dynamic-selector>.separator:last-child{display:none;}nav.__jsx-style-dynamic-selector svg{width:1em;height:1em;margin:0 4px;}nav.__jsx-style-dynamic-selector .breadcrumbs-item{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;}")));
-}
-
+});
 BreadcrumbsComponent.displayName = 'BolioUIBreadcrumbs';
 var Breadcrumbs = withScale(BreadcrumbsComponent);
 export default Breadcrumbs;

package/esm/Breadcrumbs/BreadcrumbsItem.d.ts

@@ -1,4 +1,4 @@
-import { Props as LinkBasicProps } from "../Link/Link";
+import { Props as LinkBasicProps } from '../Link/Link';
 import React from 'react';
 interface Props {
     href?: string;
@@ -6,9 +6,9 @@ interface Props {
     onClick?: (event: React.MouseEvent) => void;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>;
-declare type NativeLinkAttrs = Omit<NativeAttrs, keyof LinkBasicProps>;
-export declare type BreadcrumbsItemProps = Props & NativeLinkAttrs;
+type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>;
+type NativeLinkAttrs = Omit<NativeAttrs, keyof LinkBasicProps>;
+export type BreadcrumbsItemProps = Props & NativeLinkAttrs;
 declare const BreadcrumbsItem: React.ForwardRefExoticComponent<Props & NativeLinkAttrs & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLAnchorElement>>;

package/esm/Breadcrumbs/BreadcrumbsItem.js

@@ -9,35 +9,29 @@ import BreadcrumbsSeparator from './BreadcrumbsSeparator';
 import useClasses from '../use-classes';
 var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var href = _ref.href,
-      _ref$nextLink = _ref.nextLink,
-      nextLink = _ref$nextLink === void 0 ? false : _ref$nextLink,
-      onClick = _ref.onClick,
-      children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$nextLink = _ref.nextLink,
+    nextLink = _ref$nextLink === void 0 ? false : _ref$nextLink,
+    onClick = _ref.onClick,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var isLink = useMemo(function () {
     return href !== undefined || nextLink;
   }, [href, nextLink]);
-
   var _pickChild = pickChild(children, BreadcrumbsSeparator),
-      _pickChild2 = _slicedToArray(_pickChild, 1),
-      withoutSepChildren = _pickChild2[0];
-
+    _pickChild2 = _slicedToArray(_pickChild, 1),
+    withoutSepChildren = _pickChild2[0];
   var classes = useClasses('breadcrumbs-item', className);
-
   var clickHandler = function clickHandler(event) {
     onClick && onClick(event);
   };
-
   if (!isLink) {
     return /*#__PURE__*/React.createElement("span", {
       className: classes,
       onClick: clickHandler
     }, withoutSepChildren);
   }
-
   return /*#__PURE__*/React.createElement(Link, _extends({
     className: classes,
     href: href,

package/esm/Breadcrumbs/BreadcrumbsSeparator.d.ts

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

package/esm/Breadcrumbs/BreadcrumbsSeparator.js

@@ -1,16 +1,13 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 function Separator(_ref) {
   var children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className;
-
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var classes = useClasses('separator', className);
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2295921440", [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.5), SCALES.mb(0), SCALES.ml(0.5)]]]) + " " + (classes || "")
@@ -19,7 +16,6 @@ function Separator(_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.5), SCALES.mb(0), SCALES.ml(0.5)]
   }, ".separator.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;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.5), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.5), ";}")));
 }
-
 Separator.displayName = 'BolioUIBreadcrumbsSeparator';
 var BreadcrumbsSeparator = withScale(Separator);
 export default BreadcrumbsSeparator;

package/esm/Breadcrumbs/index.d.ts

@@ -1,12 +1,12 @@
-import Breadcrumbs from "./Breadcrumbs";
-import BreadcrumbsItem from "./BreadcrumbsItem";
-import BreadcrumbsSeparator from "./BreadcrumbsSeparator";
-export declare type BreadcrumbsComponentType = typeof Breadcrumbs & {
+import Breadcrumbs from './Breadcrumbs';
+import BreadcrumbsItem from './BreadcrumbsItem';
+import BreadcrumbsSeparator from './BreadcrumbsSeparator';
+export type BreadcrumbsComponentType = typeof Breadcrumbs & {
     Item: typeof BreadcrumbsItem;
     Separator: typeof BreadcrumbsSeparator;
 };
-export type { BreadcrumbsProps } from "./Breadcrumbs";
-export type { BreadcrumbsItemProps } from "./BreadcrumbsItem";
-export type { BreadcrumbsSeparatorProps } from "./BreadcrumbsSeparator";
+export type { BreadcrumbsProps } from './Breadcrumbs';
+export type { BreadcrumbsItemProps } from './BreadcrumbsItem';
+export type { BreadcrumbsSeparatorProps } from './BreadcrumbsSeparator';
 declare const _default: BreadcrumbsComponentType;
 export default _default;

package/esm/Breadcrumbs/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Breadcrumbs from './Breadcrumbs';
 import BreadcrumbsItem from './BreadcrumbsItem';
 import BreadcrumbsSeparator from './BreadcrumbsSeparator';

package/esm/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonTypes } from "../utils/prop-types";
+import { ButtonTypes } from '../utils/prop-types';
 interface Props {
     type?: ButtonTypes;
     ghost?: boolean;
@@ -15,7 +15,9 @@ interface Props {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.ButtonHTMLAttributes<unknown>, keyof Props>;
-export declare type ButtonProps = Props & NativeAttrs;
-declare const Button: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<HTMLButtonElement> & import("../use-scale").ScaleProps, "form" | "slot" | "style" | "title" | "children" | keyof import("../use-scale").ScaleProps | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | keyof Props | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "key"> & React.RefAttributes<HTMLButtonElement>>;
+type NativeAttrs = Omit<React.ButtonHTMLAttributes<unknown>, keyof Props>;
+export type ButtonProps = Props & NativeAttrs;
+declare const Button: import("../use-scale/with-scale").ScaleComponent<HTMLButtonElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/esm/Button/Button.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "rounded", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useRef, useState, useMemo, useImperativeHandle } from 'react';
 import useScale, { withScale } from '../use-scale';
 import useTheme from '../use-theme';
@@ -26,93 +26,78 @@ var defaultProps = {
 };
 var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var buttonRef = useRef(null);
   useImperativeHandle(ref, function () {
     return buttonRef.current;
   });
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      dripShow = _useState2[0],
-      setDripShow = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    dripShow = _useState2[0],
+    setDripShow = _useState2[1];
   var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      dripX = _useState4[0],
-      setDripX = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    dripX = _useState4[0],
+    setDripX = _useState4[1];
   var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      dripY = _useState6[0],
-      setDripY = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    dripY = _useState6[0],
+    setDripY = _useState6[1];
   var groupConfig = useButtonGroupContext();
   var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
-  /* eslint-disable @typescript-eslint/no-unused-vars */
 
+  /* eslint-disable @typescript-eslint/no-unused-vars */
   var children = filteredProps.children,
-      disabled = filteredProps.disabled,
-      type = filteredProps.type,
-      loading = filteredProps.loading,
-      shadow = filteredProps.shadow,
-      ghost = filteredProps.ghost,
-      rounded = filteredProps.rounded,
-      effect = filteredProps.effect,
-      onClick = filteredProps.onClick,
-      auto = filteredProps.auto,
-      icon = filteredProps.icon,
-      htmlType = filteredProps.htmlType,
-      iconRight = filteredProps.iconRight,
-      className = filteredProps.className,
-      props = _objectWithoutProperties(filteredProps, _excluded);
+    disabled = filteredProps.disabled,
+    type = filteredProps.type,
+    loading = filteredProps.loading,
+    shadow = filteredProps.shadow,
+    ghost = filteredProps.ghost,
+    rounded = filteredProps.rounded,
+    effect = filteredProps.effect,
+    onClick = filteredProps.onClick,
+    auto = filteredProps.auto,
+    icon = filteredProps.icon,
+    htmlType = filteredProps.htmlType,
+    iconRight = filteredProps.iconRight,
+    className = filteredProps.className,
+    props = _objectWithoutProperties(filteredProps, _excluded);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
-
   var _useMemo = useMemo(function () {
-    return getButtonColors(theme.palette, filteredProps);
-  }, [theme.palette, filteredProps]),
-      bg = _useMemo.bg,
-      border = _useMemo.border,
-      color = _useMemo.color;
-
+      return getButtonColors(theme.palette, filteredProps);
+    }, [theme.palette, filteredProps]),
+    bg = _useMemo.bg,
+    border = _useMemo.border,
+    color = _useMemo.color;
   var hover = useMemo(function () {
     return getButtonHoverColors(theme.palette, filteredProps);
   }, [theme.palette, filteredProps]);
-
   var _useMemo2 = useMemo(function () {
-    return getButtonCursor(disabled, loading);
-  }, [disabled, loading]),
-      cursor = _useMemo2.cursor,
-      events = _useMemo2.events;
-
+      return getButtonCursor(disabled, loading);
+    }, [disabled, loading]),
+    cursor = _useMemo2.cursor,
+    events = _useMemo2.events;
   var dripColor = useMemo(function () {
     return getButtonDripColor(theme.palette, filteredProps);
   }, [theme.palette, filteredProps]);
-
   var dripCompletedHandle = function dripCompletedHandle() {
     setDripShow(false);
     setDripX(0);
     setDripY(0);
   };
-
   var clickHandler = function clickHandler(event) {
     if (disabled || loading) return;
     var showDrip = effect;
-
     if (showDrip && buttonRef.current) {
       var rect = buttonRef.current.getBoundingClientRect();
       setDripShow(true);
       setDripX(event.clientX - rect.left);
       setDripY(event.clientY - rect.top);
     }
-
     onClick && onClick(event);
   };
-
   var childrenWithIcon = useMemo(function () {
     return getButtonChildrenWithIcon(auto, children, {
       icon: icon,
@@ -120,7 +105,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
     });
   }, [auto, children, icon, iconRight]);
   var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.15),
-      paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.15);
+    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.15);
   return /*#__PURE__*/React.createElement("button", _extends({
     ref: buttonRef,
     type: htmlType,

package/esm/Button/ButtonDrip.d.ts

@@ -5,6 +5,6 @@ interface Props {
     onCompleted: () => void;
     color: string;
 }
-export declare type ButtonDrip = Props;
+export type ButtonDrip = Props;
 declare const ButtonDrip: React.FC<ButtonDrip>;
 export default ButtonDrip;

package/esm/Button/ButtonDrip.js

@@ -1,15 +1,14 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useRef } from 'react';
 var defaultProps = {
   x: 0,
   y: 0
 };
-
 var ButtonDrip = function ButtonDrip(_ref) {
   var x = _ref.x,
-      y = _ref.y,
-      color = _ref.color,
-      onCompleted = _ref.onCompleted;
+    y = _ref.y,
+    color = _ref.color,
+    onCompleted = _ref.onCompleted;
   var dripRef = useRef(null);
   var top = Number.isNaN(+y) ? 0 : y - 10;
   var left = Number.isNaN(+x) ? 0 : x - 10;
@@ -51,7 +50,6 @@ var ButtonDrip = function ButtonDrip(_ref) {
     id: "3424889537"
   }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
 };
-
 ButtonDrip.defaultProps = defaultProps;
 ButtonDrip.displayName = 'BolioUItButtonDrip';
 export default ButtonDrip;

package/esm/Button/ButtonIcon.d.ts

@@ -4,9 +4,9 @@ interface Props {
     isSingle?: boolean;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type ButtonIconProps = Props & NativeAttrs;
-declare function ButtonIcon({ isRight, isSingle, children, className, ...props }: ButtonIconProps): JSX.Element;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type ButtonIconProps = Props & NativeAttrs;
+declare function ButtonIcon({ isRight, isSingle, children, className, ...props }: ButtonIconProps): React.JSX.Element;
 declare namespace ButtonIcon {
     var displayName: string;
 }

package/esm/Button/ButtonIcon.js

@@ -1,19 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["isRight", "isSingle", "children", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useClasses from '../use-classes';
-
 function ButtonIcon(_ref) {
   var _ref$isRight = _ref.isRight,
-      isRight = _ref$isRight === void 0 ? false : _ref$isRight,
-      isSingle = _ref.isSingle,
-      children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    isRight = _ref$isRight === void 0 ? false : _ref$isRight,
+    isSingle = _ref.isSingle,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var classes = useClasses('icon', {
     right: isRight,
     single: isSingle
@@ -24,6 +22,5 @@ function ButtonIcon(_ref) {
     id: "2499243154"
   }, ".icon.jsx-2499243154{position:absolute;left:var(--bolio-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);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;color:var(--bolio-ui-button-color);z-index:1;}.right.jsx-2499243154{right:var(--bolio-ui-button-icon-padding);left:auto;}.icon.jsx-2499243154 svg{background:transparent;height:calc(var(--bolio-ui-button-height) / 2.35);width:calc(var(--bolio-ui-button-height) / 2.35);}.single.jsx-2499243154{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"));
 }
-
 ButtonIcon.displayName = 'BolioUIButtonIcon';
 export default ButtonIcon;

package/esm/Button/ButtonLoading.d.ts

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

package/esm/Button/ButtonLoading.js

@@ -1,7 +1,6 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import Loading from '../Loading';
-
 function ButtonLoading(_ref) {
   var color = _ref.color;
   return /*#__PURE__*/React.createElement("div", {
@@ -12,6 +11,5 @@ function ButtonLoading(_ref) {
     id: "412966635"
   }, ".btn-loading.jsx-412966635{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--bolio-ui-button-bg);}"));
 }
-
 ButtonLoading.displayName = 'BolioUIButtonLoading';
 export default ButtonLoading;

package/esm/Button/index.d.ts

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