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

package/esm/Keyboard/Keyboard.js

@@ -1,48 +1,45 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["command", "shift", "option", "ctrl", "children", "className"];
-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 KeyboardComponent(_ref) {
+var KeyboardComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$command = _ref.command,
-      command = _ref$command === void 0 ? false : _ref$command,
-      _ref$shift = _ref.shift,
-      shift = _ref$shift === void 0 ? false : _ref$shift,
-      _ref$option = _ref.option,
-      option = _ref$option === void 0 ? false : _ref$option,
-      _ref$ctrl = _ref.ctrl,
-      ctrl = _ref$ctrl === void 0 ? false : _ref$ctrl,
-      children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    command = _ref$command === void 0 ? false : _ref$command,
+    _ref$shift = _ref.shift,
+    shift = _ref$shift === void 0 ? false : _ref$shift,
+    _ref$option = _ref.option,
+    option = _ref$option === void 0 ? false : _ref$option,
+    _ref$ctrl = _ref.ctrl,
+    ctrl = _ref$ctrl === void 0 ? false : _ref$ctrl,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
-  return /*#__PURE__*/React.createElement("kbd", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/React.createElement("kbd", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
   }), command && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+    className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
   }, "\u2318"), shift && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+    className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
   }, "\u21E7"), option && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+    className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
   }, "\u2325"), ctrl && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+    className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
   }, "\u2303"), children && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2957990244", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+    className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
   }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2957990244",
+    id: "4198515491",
     dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, 'fit-content'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
   }, "kbd.__jsx-style-dynamic-selector{line-height:2em;text-align:center;display:inline-block;color:".concat(theme.palette.accents_5, ";background-color:").concat(theme.palette.accents_1, ";font-family:").concat(theme.font.sans, ";border-radius:").concat(theme.layout.radius, ";border:1px solid ").concat(theme.palette.accents_2, ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'fit-content'), ";height:").concat(SCALES.height(1, 'auto'), ";min-width:2em;min-height:2em;padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.34), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.34), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}span.__jsx-style-dynamic-selector{line-height:2em;font-size:1em;text-align:center;}span.__jsx-style-dynamic-selector+span.__jsx-style-dynamic-selector{margin-left:0.3em;}")));
-}
-
+});
 KeyboardComponent.displayName = 'BolioUIKeyboard';
 var Keyboard = withScale(KeyboardComponent);
 export default Keyboard;

package/esm/Keyboard/index.d.ts

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

package/esm/Keyboard/index.js

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

package/esm/Link/Icon.d.ts

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

package/esm/Link/Icon.js

@@ -1,4 +1,4 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 export function LinkIconComponent() {
   return /*#__PURE__*/React.createElement("svg", {

package/esm/Link/Link.d.ts

@@ -7,7 +7,9 @@ export interface Props {
     block?: boolean;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>;
-export declare type LinkProps = Props & NativeAttrs;
-declare const Link: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<HTMLAnchorElement> & import("../use-scale").ScaleProps, "type" | "slot" | "style" | "title" | "children" | keyof import("../use-scale").ScaleProps | "referrerPolicy" | "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" | "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" | "onClick" | "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" | "key" | keyof Props | "download" | "hrefLang" | "media" | "ping" | "rel" | "target"> & React.RefAttributes<HTMLAnchorElement>>;
+type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>;
+export type LinkProps = Props & NativeAttrs;
+declare const Link: import("../use-scale/with-scale").ScaleComponent<HTMLAnchorElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/esm/Link/Link.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["href", "color", "underline", "children", "className", "block", "icon"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
 import LinkIcon from './Icon';
@@ -10,25 +10,22 @@ import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
 var LinkComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
-      href = _ref$href === void 0 ? '' : _ref$href,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? false : _ref$color,
-      _ref$underline = _ref.underline,
-      underline = _ref$underline === void 0 ? false : _ref$underline,
-      children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$block = _ref.block,
-      block = _ref$block === void 0 ? false : _ref$block,
-      _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? false : _ref$icon,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    href = _ref$href === void 0 ? '' : _ref$href,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? false : _ref$color,
+    _ref$underline = _ref.underline,
+    underline = _ref$underline === void 0 ? false : _ref$underline,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$block = _ref.block,
+    block = _ref$block === void 0 ? false : _ref$block,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? false : _ref$icon,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var linkColor = color || block ? theme.palette.link : 'inherit';
   var hoverColor = color || block ? theme.palette.primary : 'inherit';
   var decoration = underline ? 'underline' : 'none';

package/esm/Link/index.d.ts

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

package/esm/Link/index.js

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

package/esm/Loading/Loading.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type LoadingTypes = NormalTypes;
+import { NormalTypes } from '../utils/prop-types';
+export type LoadingTypes = NormalTypes;
 interface Props {
     type?: LoadingTypes;
     color?: string;
     className?: string;
     spaceRatio?: number;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type LoadingProps = Props & NativeAttrs;
-declare const Loading: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type LoadingProps = Props & NativeAttrs;
+declare const Loading: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Loading;

package/esm/Loading/Loading.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "type", "color", "className", "spaceRatio"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 var getIconBgColor = function getIconBgColor(type, palette, color) {
   var colors = {
     "default": palette.accents_6,
@@ -19,45 +18,43 @@ var getIconBgColor = function getIconBgColor(type, palette, color) {
   };
   return color ? color : colors[type];
 };
-
-function LoadingComponent(_ref) {
+var LoadingComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      color = _ref.color,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$spaceRatio = _ref.spaceRatio,
-      spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    color = _ref.color,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$spaceRatio = _ref.spaceRatio,
+    spaceRatio = _ref$spaceRatio === void 0 ? 1 : _ref$spaceRatio,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var classes = useClasses('loading-container', className);
   var bgColor = useMemo(function () {
     return getIconBgColor(type, theme.palette, color);
   }, [type, theme.palette, color]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    role: "status"
+  }, props, {
+    className: _JSXStyle.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading"
+    className: _JSXStyle.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + "loading"
   }, children && /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+    className: _JSXStyle.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
   }, children), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+    className: _JSXStyle.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
   }), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+    className: _JSXStyle.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
   }), /*#__PURE__*/React.createElement("i", {
-    className: _JSXStyle.dynamic([["3790031813", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
+    className: _JSXStyle.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]])
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3790031813",
+    id: "1090444014",
     dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]
   }, ".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";min-height:1em;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{margin-right:0.5em;color:").concat(theme.palette.accents_5, ";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-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;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:").concat(bgColor, ";margin:0 calc(0.25em / 2 * ").concat(spaceRatio, ");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}")));
-}
-
+});
 LoadingComponent.displayName = 'BolioUILoading';
 var Loading = withScale(LoadingComponent);
 export default Loading;

package/esm/Loading/index.d.ts

@@ -1,3 +1,3 @@
-import Loading from "./Loading";
-export type { LoadingProps, LoadingTypes } from "./Loading";
+import Loading from './Loading';
+export type { LoadingProps, LoadingTypes } from './Loading';
 export default Loading;

package/esm/Loading/index.js

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

package/esm/MdxWidgets/MockPage.js

@@ -1,30 +1,25 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useState } from 'react';
 import { useTheme } from '../use-theme/theme-context';
-
 var MockPage = function MockPage(_ref) {
   var customVisible = _ref.visible,
-      onClose = _ref.onClose,
-      children = _ref.children;
+    onClose = _ref.onClose,
+    children = _ref.children;
   var theme = useTheme();
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
   useEffect(function () {
     if (customVisible !== undefined) {
       setVisible(customVisible);
     }
   }, [customVisible]);
-
   var clickHandler = function clickHandler() {
     setVisible(false);
     onClose && onClose();
   };
-
   return /*#__PURE__*/React.createElement("section", {
     onClick: clickHandler,
     className: _JSXStyle.dynamic([["2097575945", [theme.palette.background]]]) + " " + ((visible ? 'active' : '') || "")
@@ -33,5 +28,4 @@ var MockPage = function MockPage(_ref) {
     dynamic: [theme.palette.background]
   }, "section.__jsx-style-dynamic-selector{position:fixed;width:100vw;height:100vh;background-color:".concat(theme.palette.background, ";z-index:5000;top:-5000px;left:-5000px;display:none;}.active.__jsx-style-dynamic-selector{top:0;left:0;bottom:0;display:block;}")));
 };
-
 export default MockPage;

package/esm/MdxWidgets/ParsedCodes/WaitTime.js

@@ -1,6 +1,5 @@
 import React from 'react';
 export var __html = "<span class=\"token keyword module\">import</span> <span class=\"token imports\"><span class=\"token maybe-class-name\">React</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> useState <span class=\"token punctuation\">}</span></span> <span class=\"token keyword module\">from</span> <span class=\"token string\">\"react\"</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\"><span class=\"token maybe-class-name\">App</span></span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token arrow operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>wait<span class=\"token punctuation\">,</span> showWaitTime<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">useState</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token arrow operator\">=&gt;</span> <span class=\"token function\">showWaitTime</span><span class=\"token punctuation\">(</span>wait <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword control-flow\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">You've been waiting since </span><span class=\"token punctuation\">{</span>wait<span class=\"token punctuation\">}</span><span class=\"token plain-text\"> seconds!</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword module\">export</span> <span class=\"token keyword module\">default</span> <span class=\"token maybe-class-name\">App</span><span class=\"token punctuation\">;</span>\n".trim();
-
 var WaitTime = function WaitTime() {
   return /*#__PURE__*/React.createElement("code", {
     className: "language-jsx",
@@ -9,5 +8,4 @@ var WaitTime = function WaitTime() {
     }
   });
 };
-
 export default WaitTime;

package/esm/MdxWidgets/index.js

@@ -1,2 +1,3 @@
+'use client';
 export { default as MockPage } from './MockPage';
 export { default as WaitTime } from './ParsedCodes/WaitTime';

package/esm/Modal/Modal.d.ts

@@ -5,12 +5,15 @@ interface Props {
     onContentClick?: (event: MouseEvent<HTMLElement>) => void;
     visible?: boolean;
     keyboard?: boolean;
+    role?: 'dialog' | 'alertdialog';
     wrapClassName?: string;
     positionClassName?: string;
     backdropClassName?: string;
     layerClassName?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type ModalProps = Props & NativeAttrs;
-declare const Modal: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type ModalProps = Props & NativeAttrs;
+declare const Modal: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/esm/Modal/Modal.js

@@ -1,89 +1,90 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import usePortal from '../utils/use-portal';
 import ModalWrapper from './ModalWrapper';
 import ModalAction from './ModalAction';
 import ModalActions from './ModalActions';
+import ModalTitle from './ModalTitle';
+import ModalSubtitle from './ModalSubtitle';
 import Backdrop from '../Shared/backdrop';
 import { ModalContext } from './ModalContext';
-import { pickChild } from '../utils/collections';
+import { hasChild, pickChild } from '../utils/collections';
 import useBodyScroll from '../utils/use-body-scroll';
 import useScale, { withScale } from '../use-scale';
 import useKeyboard, { KeyCode } from '../use-keyboard';
-
-function ModalComponent(_ref) {
+var ModalComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var customVisible = _ref.visible,
-      onClose = _ref.onClose,
-      children = _ref.children,
-      _ref$keyboard = _ref.keyboard,
-      keyboard = _ref$keyboard === void 0 ? true : _ref$keyboard,
-      _ref$wrapClassName = _ref.wrapClassName,
-      wrapClassName = _ref$wrapClassName === void 0 ? '' : _ref$wrapClassName,
-      onContentClick = _ref.onContentClick,
-      _ref$disableBackdropC = _ref.disableBackdropClick,
-      disableBackdropClick = _ref$disableBackdropC === void 0 ? false : _ref$disableBackdropC,
-      _ref$positionClassNam = _ref.positionClassName,
-      positionClassName = _ref$positionClassNam === void 0 ? '' : _ref$positionClassNam,
-      _ref$backdropClassNam = _ref.backdropClassName,
-      backdropClassName = _ref$backdropClassNam === void 0 ? '' : _ref$backdropClassNam,
-      _ref$layerClassName = _ref.layerClassName,
-      layerClassName = _ref$layerClassName === void 0 ? '' : _ref$layerClassName;
+    onClose = _ref.onClose,
+    children = _ref.children,
+    _ref$keyboard = _ref.keyboard,
+    keyboard = _ref$keyboard === void 0 ? true : _ref$keyboard,
+    _ref$wrapClassName = _ref.wrapClassName,
+    wrapClassName = _ref$wrapClassName === void 0 ? '' : _ref$wrapClassName,
+    onContentClick = _ref.onContentClick,
+    _ref$disableBackdropC = _ref.disableBackdropClick,
+    disableBackdropClick = _ref$disableBackdropC === void 0 ? false : _ref$disableBackdropC,
+    _ref$positionClassNam = _ref.positionClassName,
+    positionClassName = _ref$positionClassNam === void 0 ? '' : _ref$positionClassNam,
+    _ref$backdropClassNam = _ref.backdropClassName,
+    backdropClassName = _ref$backdropClassNam === void 0 ? '' : _ref$backdropClassNam,
+    _ref$layerClassName = _ref.layerClassName,
+    layerClassName = _ref$layerClassName === void 0 ? '' : _ref$layerClassName,
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? 'dialog' : _ref$role,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
+    ariaDescribedby = _ref['aria-describedby'];
   var portal = usePortal('modal');
-
+  var baseId = useId();
+  var titleId = "".concat(baseId, "-title");
+  var descriptionId = "".concat(baseId, "-description");
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useBodyScroll = useBodyScroll(null, {
-    delayReset: 300
-  }),
-      _useBodyScroll2 = _slicedToArray(_useBodyScroll, 2),
-      setBodyHidden = _useBodyScroll2[1];
-
+      delayReset: 300
+    }),
+    _useBodyScroll2 = _slicedToArray(_useBodyScroll, 2),
+    setBodyHidden = _useBodyScroll2[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 _pickChild = pickChild(children, ModalAction),
-      _pickChild2 = _slicedToArray(_pickChild, 2),
-      withoutActionsChildren = _pickChild2[0],
-      ActionsChildren = _pickChild2[1];
-
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    withoutActionsChildren = _pickChild2[0],
+    ActionsChildren = _pickChild2[1];
   var hasActions = ActionsChildren && React.Children.count(ActionsChildren) > 0;
-
   var closeModal = function closeModal() {
     onClose && onClose();
     setVisible(false);
     setBodyHidden(false);
   };
-
   useEffect(function () {
     if (typeof customVisible === 'undefined') return;
     setVisible(customVisible);
     setBodyHidden(customVisible);
   }, [customVisible, setBodyHidden]);
-
   var _useKeyboard = useKeyboard(function () {
-    keyboard && closeModal();
-  }, KeyCode.Escape, {
-    disableGlobalEvent: true
-  }),
-      bindings = _useKeyboard.bindings;
-
+      keyboard && closeModal();
+    }, KeyCode.Escape, {
+      disableGlobalEvent: true
+    }),
+    bindings = _useKeyboard.bindings;
   var closeFromBackdrop = function closeFromBackdrop() {
     if (disableBackdropClick) return;
     closeModal();
   };
-
   var modalConfig = useMemo(function () {
     return {
-      close: closeModal
+      close: closeModal,
+      titleId: titleId,
+      descriptionId: descriptionId
     };
   }, []);
   if (!portal) return null;
-  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(ModalContext.Provider, {
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modalConfig
   }, /*#__PURE__*/React.createElement(Backdrop, _extends({
     onClick: closeFromBackdrop,
@@ -94,11 +95,15 @@ function ModalComponent(_ref) {
     backdropClassName: backdropClassName,
     layerClassName: layerClassName
   }, bindings), /*#__PURE__*/React.createElement(ModalWrapper, {
+    ref: ref,
     visible: visible,
-    className: wrapClassName
+    className: wrapClassName,
+    role: role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby || (hasChild(children, ModalTitle) ? titleId : undefined),
+    "aria-describedby": ariaDescribedby || (hasChild(children, ModalSubtitle) ? descriptionId : undefined)
   }, withoutActionsChildren, hasActions && /*#__PURE__*/React.createElement(ModalActions, null, ActionsChildren)))), portal);
-}
-
+});
 ModalComponent.displayName = 'BolioUIModal';
 var Modal = withScale(ModalComponent);
 export default Modal;

package/esm/Modal/ModalAction.d.ts

@@ -1,6 +1,6 @@
 import React, { MouseEvent } from 'react';
-import { ButtonProps } from "../Button";
-declare type ModalActionEvent = MouseEvent<HTMLButtonElement> & {
+import { ButtonProps } from '../Button';
+type ModalActionEvent = MouseEvent<HTMLButtonElement> & {
     close: () => void;
 };
 interface Props {
@@ -9,6 +9,8 @@ interface Props {
     disabled?: boolean;
     onClick?: (event: ModalActionEvent) => void;
 }
-export declare type ModalActionProps = Props & Omit<ButtonProps, keyof Props>;
-declare const ModalAction: React.ForwardRefExoticComponent<Pick<Props & Omit<ButtonProps, keyof Props> & React.RefAttributes<HTMLButtonElement> & import("../use-scale").ScaleProps, "type" | "form" | "slot" | "style" | "title" | "children" | keyof import("../use-scale").ScaleProps | "loading" | "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" | "auto" | "value" | "icon" | "ghost" | "rounded" | "shadow" | "effect" | "htmlType" | "iconRight" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "key" | keyof Props> & React.RefAttributes<HTMLButtonElement>>;
+export type ModalActionProps = Props & Omit<ButtonProps, keyof Props>;
+declare const ModalAction: import("../use-scale/with-scale").ScaleComponent<HTMLButtonElement, Props & Omit<ButtonProps, keyof Props> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default ModalAction;