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

package/esm/Container/index.d.ts

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

package/esm/Container/index.js

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

package/esm/CssBaseline/CssBaseline.d.ts

@@ -1,15 +1,5 @@
-import React, { ReactElement } from 'react';
-export declare type FlushToReact = <T>(opts?: {
-    nonce?: string;
-}) => Array<ReactElement<T>>;
-export declare type FlushToHTML = (opts?: {
-    nonce?: string;
-}) => string;
-declare type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
-    flush: FlushToReact;
-    flushToHTML: FlushToHTML;
-};
-declare const MemoCssBaseline: MemoCssBaselineComponent<{
+import React from 'react';
+declare const _default: React.NamedExoticComponent<{
     children?: React.ReactNode;
 }>;
-export default MemoCssBaseline;
+export default _default;

package/esm/CssBaseline/CssBaseline.js

@@ -1,8 +1,6 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
-import flush, { flushToHTML } from "../styled-jsx-server.es.js";
-
 var CssBaseline = function CssBaseline(_ref) {
   var children = _ref.children;
   var theme = useTheme();
@@ -11,8 +9,4 @@ var CssBaseline = function CssBaseline(_ref) {
     dynamic: [theme.palette.background, theme.palette.foreground, theme.palette.background, theme.font.sans, theme.font.sans, theme.palette.link, theme.expressiveness.linkStyle, theme.expressiveness.linkHoverStyle, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gap, theme.palette.foreground, theme.palette.accents_4, theme.palette.code, theme.font.mono, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.accents_2, theme.layout.radius, theme.font.mono, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_1, theme.layout.gap, theme.layout.gap, theme.palette.accents_5, theme.palette.accents_1, theme.layout.radius, theme.palette.border, theme.palette.selection, theme.palette.foreground]
   }, "html,body{background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";}html{font-size:16px;--bolioui-icons-background:").concat(theme.palette.background, ";}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:hidden;font-family:").concat(theme.font.sans, ";}#__next{overflow-x:hidden;}*,*:before,*:after{box-sizing:inherit;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;font-family:").concat(theme.font.sans, ";}p{margin:1em 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875em;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.link, ";-webkit-text-decoration:").concat(theme.expressiveness.linkStyle, ";text-decoration:").concat(theme.expressiveness.linkStyle, ";}a:hover{-webkit-text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";text-decoration:").concat(theme.expressiveness.linkHoverStyle, ";}ul,ol{padding:0;list-style-type:none;margin:").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gapHalf, " ").concat(theme.layout.gap, ";color:").concat(theme.palette.foreground, ";}ol{list-style-type:decimal;}li{margin-bottom:0.625em;font-size:1em;line-height:1.625em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.7rem 0;line-height:1;}h1{font-size:3rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005em;-moz-letter-spacing:-0.005em;-ms-letter-spacing:-0.005em;letter-spacing:-0.005em;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:").concat(theme.palette.code, ";font-family:").concat(theme.font.mono, ";font-size:0.9em;white-space:pre-wrap;}code:before,code:after{content:'\\`';}pre{padding:calc(").concat(theme.layout.gap, " * 0.9) ").concat(theme.layout.gap, ";margin:").concat(theme.layout.gap, " 0;border:1px solid ").concat(theme.palette.accents_2, ";border-radius:").concat(theme.layout.radius, ";font-family:").concat(theme.font.mono, ";white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:14px;-webkit-overflow-scrolling:touch;}pre code{font-size:1em;line-height:1.25em;white-space:pre;}pre code:before,pre code:after{display:none;}pre p{margin:0;}pre::-webkit-scrollbar{display:none;width:0;height:0;background:transparent;}hr{border-color:").concat(theme.palette.accents_2, ";}details{background-color:").concat(theme.palette.accents_1, ";border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::marker,summary::before,summary::-webkit-details-marker{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * ").concat(theme.layout.gap, ") ").concat(theme.layout.gap, ";color:").concat(theme.palette.accents_5, ";background-color:").concat(theme.palette.accents_1, ";border-radius:").concat(theme.layout.radius, ";margin:1.5em 0;border:1px solid ").concat(theme.palette.border, ";}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:").concat(theme.palette.selection, ";color:").concat(theme.palette.foreground, ";}")));
 };
-
-var MemoCssBaseline = /*#__PURE__*/React.memo(CssBaseline);
-MemoCssBaseline.flush = flush;
-MemoCssBaseline.flushToHTML = flushToHTML;
-export default MemoCssBaseline;
+export default /*#__PURE__*/React.memo(CssBaseline);

package/esm/CssBaseline/index.d.ts

@@ -1 +1 @@
-export { default } from "./CssBaseline";
+export { default } from './CssBaseline';

package/esm/CssBaseline/index.js

@@ -1 +1,2 @@
+'use client';
 export { default } from './CssBaseline';

package/esm/DatePicker/DatePicker.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface Props {
+    value?: Date | null;
+    initialValue?: Date | null;
+    onChange?: (date: Date | null) => void;
+    min?: Date;
+    max?: Date;
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    placeholder?: string;
+    disabled?: boolean;
+    calendarLabel?: string;
+    className?: string;
+}
+type NativeAttrs = Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof Props | 'value' | 'defaultValue' | 'onChange' | 'type' | 'min' | 'max'>;
+export type DatePickerProps = Props & NativeAttrs;
+declare const DatePicker: import("../use-scale/with-scale").ScaleComponent<HTMLInputElement, Props & NativeAttrs & React.RefAttributes<HTMLInputElement>>;
+export default DatePicker;

package/esm/DatePicker/DatePicker.js

@@ -0,0 +1,163 @@
+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 = ["value", "initialValue", "onChange", "min", "max", "locale", "weekStartsOn", "placeholder", "disabled", "calendarLabel", "className", "onBlur"];
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+import useClickAway from '../utils/use-click-away';
+import Calendar from '../Calendar';
+import { fromISO, startOfDay, toISO } from '../Calendar/date-utils';
+var DatePickerComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var customValue = _ref.value,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? null : _ref$initialValue,
+    onChange = _ref.onChange,
+    min = _ref.min,
+    max = _ref.max,
+    locale = _ref.locale,
+    weekStartsOn = _ref.weekStartsOn,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'YYYY-MM-DD' : _ref$placeholder,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$calendarLabel = _ref.calendarLabel,
+    calendarLabel = _ref$calendarLabel === void 0 ? 'Choose date' : _ref$calendarLabel,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    onBlur = _ref.onBlur,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var isControlled = customValue !== undefined;
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfValue = _useState2[0],
+    setSelfValue = _useState2[1];
+  var selected = isControlled ? customValue : selfValue;
+  var selectedText = selected ? toISO(selected) : '';
+  var _useState3 = useState(selectedText),
+    _useState4 = _slicedToArray(_useState3, 2),
+    text = _useState4[0],
+    setText = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  useEffect(function () {
+    setText(selectedText);
+  }, [selectedText]);
+  var rootRef = useRef(null);
+  var inputRef = useRef(null);
+  var buttonRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return inputRef.current;
+  });
+  useClickAway(rootRef, function () {
+    return setOpen(false);
+  });
+  var isInRange = function isInRange(date) {
+    return !(min && date < startOfDay(min) || max && date > startOfDay(max));
+  };
+  var commit = function commit(date) {
+    if (!isControlled) setSelfValue(date);
+    onChange && onChange(date);
+  };
+  var inputHandler = function inputHandler(event) {
+    var next = event.target.value;
+    setText(next);
+    if (next === '') return commit(null);
+    var date = fromISO(next);
+    if (date && isInRange(date)) commit(date);
+  };
+  var blurHandler = function blurHandler(event) {
+    onBlur && onBlur(event);
+    setText(selectedText);
+  };
+  var pick = function pick(date) {
+    var _inputRef$current;
+    commit(date);
+    setText(toISO(date));
+    setOpen(false);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  };
+  var keyDownHandler = function keyDownHandler(event) {
+    var _buttonRef$current;
+    if (event.key !== 'Escape') return;
+    event.stopPropagation();
+    setOpen(false);
+    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
+    className: _JSXStyle.dynamic([["836127094", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]]) + " " + (useClasses('datepicker', className) || "")
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    ref: inputRef,
+    type: "text",
+    autoComplete: "off",
+    inputMode: "numeric",
+    value: text,
+    placeholder: placeholder,
+    disabled: disabled,
+    onChange: inputHandler,
+    onBlur: blurHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["836127094", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]]) + " " + (props && props.className != null && props.className || "")
+  })), /*#__PURE__*/React.createElement("button", {
+    ref: buttonRef,
+    type: "button",
+    "aria-label": calendarLabel,
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    disabled: disabled,
+    onClick: function onClick() {
+      return setOpen(function (last) {
+        return !last;
+      });
+    },
+    className: _JSXStyle.dynamic([["836127094", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]]) + " " + "toggle"
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: "1.25em",
+    height: "1.25em",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    className: _JSXStyle.dynamic([["836127094", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]])
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "3",
+    y: "4",
+    width: "18",
+    height: "18",
+    rx: "2",
+    className: _JSXStyle.dynamic([["836127094", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 2v4M8 2v4M3 10h18",
+    className: _JSXStyle.dynamic([["836127094", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]])
+  }))), open && /*#__PURE__*/React.createElement("div", {
+    role: "dialog",
+    "aria-label": calendarLabel,
+    onKeyDown: keyDownHandler,
+    className: _JSXStyle.dynamic([["836127094", [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]]]) + " " + "popup"
+  }, /*#__PURE__*/React.createElement(Calendar, {
+    autoFocus: true,
+    value: selected,
+    min: min,
+    max: max,
+    locale: locale,
+    weekStartsOn: weekStartsOn,
+    onChange: pick
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "836127094",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.accents_5, theme.layout.radius, theme.palette.foreground, theme.palette.primary, theme.palette.accents_3, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium]
+  }, ".datepicker.__jsx-style-dynamic-selector{position:relative;display:inline-block;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}input.__jsx-style-dynamic-selector{box-sizing:border-box;width:100%;min-width:12.5em;height:2.5em;padding:0 2.75em 0 0.875em;font:inherit;color:").concat(theme.palette.foreground, ";background-color:").concat(theme.palette.background, ";border:1px solid ").concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";outline:none;-webkit-transition:border-color 0.15s ease;transition:border-color 0.15s ease;}input.__jsx-style-dynamic-selector:focus{border-color:").concat(theme.palette.primary, ";}input.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_1, ";}.toggle.__jsx-style-dynamic-selector{position:absolute;top:0;right:0;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:2.5em;height:2.5em;color:").concat(theme.palette.accents_5, ";cursor:pointer;background:transparent;border:0;border-radius:").concat(theme.layout.radius, ";}.toggle.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:not(:disabled){color:").concat(theme.palette.foreground, ";}.toggle.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ").concat(theme.palette.primary, ";outline-offset:-2px;}.toggle.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;color:").concat(theme.palette.accents_3, ";}.popup.__jsx-style-dynamic-selector{position:absolute;top:calc(100% + 4px);left:0;z-index:1100;padding:0.75em;background-color:").concat(theme.palette.background, ";border:1px solid ").concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowMedium, ";}")));
+});
+DatePickerComponent.displayName = 'BolioUIDatePicker';
+var DatePicker = withScale(DatePickerComponent);
+export default DatePicker;

package/esm/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+import DatePicker from './DatePicker';
+export type { DatePickerProps } from './DatePicker';
+export default DatePicker;

package/esm/DatePicker/index.js

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

package/esm/Description/Description.d.ts

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

package/esm/Description/Description.js

@@ -1,39 +1,36 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["title", "content", "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';
 import useClasses from '../use-classes';
-
-function DescriptionComponent(_ref) {
+var DescriptionComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$title = _ref.title,
-      title = _ref$title === void 0 ? 'Title' : _ref$title,
-      _ref$content = _ref.content,
-      content = _ref$content === void 0 ? '' : _ref$content,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    title = _ref$title === void 0 ? 'Title' : _ref$title,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? '' : _ref$content,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var classes = useClasses('description', className);
-  return /*#__PURE__*/React.createElement("dl", _extends({}, props, {
-    className: _JSXStyle.dynamic([["879107763", [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), theme.palette.accents_5, theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
+  return /*#__PURE__*/React.createElement("dl", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["2223883812", [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), theme.palette.accents_5, theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), /*#__PURE__*/React.createElement("dt", {
-    className: _JSXStyle.dynamic([["879107763", [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), theme.palette.accents_5, theme.palette.foreground]]])
+    className: _JSXStyle.dynamic([["2223883812", [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), theme.palette.accents_5, theme.palette.foreground]]])
   }, title), /*#__PURE__*/React.createElement("dd", {
-    className: _JSXStyle.dynamic([["879107763", [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), theme.palette.accents_5, theme.palette.foreground]]])
+    className: _JSXStyle.dynamic([["2223883812", [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), theme.palette.accents_5, theme.palette.foreground]]])
   }, content), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "879107763",
+    id: "2223883812",
     dynamic: [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, theme.palette.foreground]
   }, ".description.__jsx-style-dynamic-selector{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), ";}dt.__jsx-style-dynamic-selector{font-size:0.75em;line-height:1em;margin-bottom:0.5em;text-transform:uppercase;white-space:nowrap;color:").concat(theme.palette.accents_5, ";font-weight:500;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}dd.__jsx-style-dynamic-selector{font-size:0.875em;margin:0;line-height:1.1em;color:").concat(theme.palette.foreground, ";font-weight:500;}dd.__jsx-style-dynamic-selector p,dt.__jsx-style-dynamic-selector p{margin:0;}")));
-}
-
+});
 DescriptionComponent.displayName = 'BolioUIDescription';
 var Description = withScale(DescriptionComponent);
 export default Description;

package/esm/Description/index.d.ts

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

package/esm/Description/index.js

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

package/esm/Display/Display.d.ts

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

package/esm/Display/Display.js

@@ -1,43 +1,40 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "caption", "shadow", "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 useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
-function DisplayComponent(_ref) {
+var DisplayComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$caption = _ref.caption,
-      caption = _ref$caption === void 0 ? '' : _ref$caption,
-      _ref$shadow = _ref.shadow,
-      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$caption = _ref.caption,
+    caption = _ref$caption === void 0 ? '' : _ref$caption,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var classes = useClasses('display', className);
   var showShadow = useMemo(function () {
     return shadow && theme.type !== 'dark';
   }, [theme.type, shadow]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2598028711", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + (props && props.className != null && props.className || classes || "")
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["1848347159", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + (props && props.className != null && props.className || classes || "")
   }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2598028711", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + "content"
+    className: _JSXStyle.dynamic([["1848347159", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + "content"
   }, children), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2598028711", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + "caption"
+    className: _JSXStyle.dynamic([["1848347159", [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']]]) + " " + "caption"
   }, caption), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2598028711",
+    id: "1848347159",
     dynamic: [SCALES.font(0.875), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, 'auto'), SCALES.mb(2.5), SCALES.ml(0, 'auto'), SCALES.width(1, 'max-content'), showShadow ? theme.expressiveness.shadowLarge : 'none', theme.palette.accents_5, shadow ? '2.5em' : '1.3em']
   }, ".display.__jsx-style-dynamic-selector{display:block;max-width:100%;font-size:".concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, '100%'), ";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(2.5), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(2.5), " ").concat(SCALES.ml(0, 'auto'), ";}.content.__jsx-style-dynamic-selector{display:block;margin:0 auto;border-radius:4px;overflow:hidden;width:").concat(SCALES.width(1, 'max-content'), ";box-shadow:").concat(showShadow ? theme.expressiveness.shadowLarge : 'none', ";max-width:100%;}.content.__jsx-style-dynamic-selector pre{margin:0;-webkit-transition:min-width ease 0.2s;transition:min-width ease 0.2s;}.content.__jsx-style-dynamic-selector img{display:block;}.caption.__jsx-style-dynamic-selector{font-size:inherit;line-height:1.5em;color:").concat(theme.palette.accents_5, ";margin:").concat(shadow ? '2.5em' : '1.3em', " auto 0;text-align:center;max-width:85%;}")));
-}
-
+});
 DisplayComponent.displayName = 'BolioUIDisplay';
 var Display = withScale(DisplayComponent);
 export default Display;

package/esm/Display/index.d.ts

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

package/esm/Display/index.js

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

package/esm/Divider/Divider.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
-import { DividerAlign, SnippetTypes } from "../utils/prop-types";
-export declare type DividerTypes = SnippetTypes;
+import { DividerAlign, SnippetTypes } from '../utils/prop-types';
+export type DividerTypes = SnippetTypes;
 interface Props {
     type?: DividerTypes;
     align?: DividerAlign;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type DividerProps = Props & NativeAttrs;
-declare const Divider: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type DividerProps = Props & NativeAttrs;
+declare const Divider: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Divider;

package/esm/Divider/Divider.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["type", "align", "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 useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 var getColor = function getColor(type, palette) {
   var colors = {
     "default": palette.border,
@@ -21,22 +20,18 @@ var getColor = function getColor(type, palette) {
   };
   return colors[type];
 };
-
-function DividerComponent(_ref) {
+var DividerComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'center' : _ref$align,
-      children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    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;
-
+    SCALES = _useScale.SCALES;
   var classes = useClasses('divider', className);
   var color = useMemo(function () {
     return getColor(type, theme.palette);
@@ -49,17 +44,17 @@ function DividerComponent(_ref) {
   var alignClasses = useClasses('text', alignClassName);
   var textColor = type === 'default' ? theme.palette.foreground : color;
   return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
     role: "separator"
   }, props, {
-    className: _JSXStyle.dynamic([["2946068544", [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || classes || "")
+    className: _JSXStyle.dynamic([["1488853092", [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), children && /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2946068544", [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (alignClasses || "")
+    className: _JSXStyle.dynamic([["1488853092", [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]]]) + " " + (alignClasses || "")
   }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2946068544",
+    id: "1488853092",
     dynamic: [color, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(0.0625), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.background, textColor]
   }, ".divider.__jsx-style-dynamic-selector{max-width:100%;background-color:".concat(color, ";position:relative;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(0.0625), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0.5), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.5), " ").concat(SCALES.ml(0), ";}.text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;min-height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:0 0.75em;font-size:inherit;font-weight:bold;text-transform:capitalize;background-color:").concat(theme.palette.background, ";color:").concat(textColor, ";z-index:10;}.text.start.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:7%;}.text.end.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:auto;right:7%;}")));
-}
-
+});
 DividerComponent.displayName = 'BolioUIDivider';
 var Divider = withScale(DividerComponent);
 export default Divider;

package/esm/Divider/index.d.ts

@@ -1,4 +1,4 @@
-import Divider from "./Divider";
-export type { DividerProps, DividerTypes } from "./Divider";
-export type { DividerAlign } from "../utils/prop-types";
+import Divider from './Divider';
+export type { DividerProps, DividerTypes } from './Divider';
+export type { DividerAlign } from '../utils/prop-types';
 export default Divider;

package/esm/Divider/index.js

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

package/esm/Dot/Dot.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type DotTypes = NormalTypes;
+import { NormalTypes } from '../utils/prop-types';
+export type DotTypes = NormalTypes;
 interface Props {
     type?: DotTypes;
     className?: string;
     color?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type DotProps = Props & NativeAttrs;
-declare const Dot: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type DotProps = Props & NativeAttrs;
+declare const Dot: import("../use-scale/with-scale").ScaleComponent<HTMLSpanElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
 export default Dot;