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

package/esm/Slider/Slider.js

@@ -1,9 +1,9 @@
 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 = ["hideValue", "disabled", "type", "step", "max", "min", "initialValue", "value", "onChange", "className", "showMarkers"];
-import _JSXStyle from "../styled-jsx.es.js";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+var _excluded = ["hideValue", "disabled", "type", "step", "max", "min", "initialValue", "value", "onChange", "className", "showMarkers", "aria-label", "aria-labelledby"];
+import _JSXStyle from "styled-jsx/style";
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import useTheme from '../use-theme';
 import useDrag from '../utils/use-drag';
 import useCurrentState from '../utils/use-current-state';
@@ -12,13 +12,11 @@ import SliderMark from './SliderMark';
 import { getColors } from './styles';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 var getRefWidth = function getRefWidth(elementRef) {
   if (!elementRef || !elementRef.current) return 0;
   var rect = elementRef.current.getBoundingClientRect();
   return rect.width || rect.right - rect.left;
 };
-
 var getValue = function getValue(max, min, step, offsetX, railWidth) {
   if (offsetX < 0) return min;
   if (offsetX > railWidth) return max;
@@ -27,90 +25,81 @@ var getValue = function getValue(max, min, step, offsetX, railWidth) {
   var slideDistance = Math.round(offsetX / widthForEachStep) * step + min;
   return Number.isInteger(slideDistance) ? slideDistance : Number.parseFloat(slideDistance.toFixed(1));
 };
-
-function SliderComponent(_ref) {
+var SliderComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$hideValue = _ref.hideValue,
-      hideValue = _ref$hideValue === void 0 ? false : _ref$hideValue,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$step = _ref.step,
-      step = _ref$step === void 0 ? 1 : _ref$step,
-      _ref$max = _ref.max,
-      max = _ref$max === void 0 ? 100 : _ref$max,
-      _ref$min = _ref.min,
-      min = _ref$min === void 0 ? 0 : _ref$min,
-      _ref$initialValue = _ref.initialValue,
-      initialValue = _ref$initialValue === void 0 ? 0 : _ref$initialValue,
-      customValue = _ref.value,
-      onChange = _ref.onChange,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$showMarkers = _ref.showMarkers,
-      showMarkers = _ref$showMarkers === void 0 ? false : _ref$showMarkers,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    hideValue = _ref$hideValue === void 0 ? false : _ref$hideValue,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? 0 : _ref$initialValue,
+    customValue = _ref.value,
+    onChange = _ref.onChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$showMarkers = _ref.showMarkers,
+    showMarkers = _ref$showMarkers === void 0 ? false : _ref$showMarkers,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useState = useState(initialValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var _useCurrentState = useCurrentState(0),
-      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-      setSliderWidth = _useCurrentState2[1],
-      sideWidthRef = _useCurrentState2[2];
-
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    setSliderWidth = _useCurrentState2[1],
+    sideWidthRef = _useCurrentState2[2];
   var _useCurrentState3 = useCurrentState(0),
-      _useCurrentState4 = _slicedToArray(_useCurrentState3, 3),
-      setLastDargOffset = _useCurrentState4[1],
-      lastDargOffsetRef = _useCurrentState4[2];
-
+    _useCurrentState4 = _slicedToArray(_useCurrentState3, 3),
+    setLastDargOffset = _useCurrentState4[1],
+    lastDargOffsetRef = _useCurrentState4[2];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isClick = _useState4[0],
-      setIsClick = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isClick = _useState4[0],
+    setIsClick = _useState4[1];
   var sliderRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return sliderRef.current;
+  });
   var dotRef = useRef(null);
   var currentRatio = useMemo(function () {
     return (value - min) / (max - min) * 100;
   }, [value, max, min]);
-
   var setLastOffsetManually = function setLastOffsetManually(val) {
     var width = getRefWidth(sliderRef);
     var shouldOffset = (val - min) / (max - min) * width;
     setLastDargOffset(shouldOffset);
   };
-
   var updateValue = useCallback(function (offset) {
     var currentValue = getValue(max, min, step, offset, sideWidthRef.current);
     setValue(currentValue);
     onChange && onChange(currentValue);
   }, [max, min, step, sideWidthRef]);
-
   var _useMemo = useMemo(function () {
-    return getColors(theme.palette, type);
-  }, [theme.palette, type]),
-      bg = _useMemo.bg;
-
+      return getColors(theme.palette, type);
+    }, [theme.palette, type]),
+    bg = _useMemo.bg;
   var dragHandler = function dragHandler(event) {
     if (disabled) return;
     var currentOffset = event.currentX - event.startX;
     var offset = currentOffset + lastDargOffsetRef.current;
     updateValue(offset);
   };
-
   var dragStartHandler = function dragStartHandler() {
     setIsClick(false);
     setSliderWidth(getRefWidth(sliderRef));
   };
-
   var dragEndHandler = function dragEndHandler(event) {
     if (disabled) return;
     var offset = event.currentX - event.startX;
@@ -118,7 +107,26 @@ function SliderComponent(_ref) {
     var boundOffset = currentOffset < 0 ? 0 : Math.min(currentOffset, sideWidthRef.current);
     setLastDargOffset(boundOffset);
   };
-
+  var keyDownHandler = function keyDownHandler(event) {
+    if (disabled) return;
+    var nextByKey = {
+      ArrowRight: value + step,
+      ArrowUp: value + step,
+      ArrowLeft: value - step,
+      ArrowDown: value - step,
+      PageUp: value + step * 10,
+      PageDown: value - step * 10,
+      Home: min,
+      End: max
+    };
+    if (!(event.key in nextByKey)) return;
+    event.preventDefault();
+    var next = Math.min(max, Math.max(min, nextByKey[event.key]));
+    if (next === value) return;
+    setValue(next);
+    setLastOffsetManually(next);
+    onChange && onChange(next);
+  };
   var clickHandler = function clickHandler(event) {
     if (disabled) return;
     if (!sliderRef || !sliderRef.current) return;
@@ -128,7 +136,6 @@ function SliderComponent(_ref) {
     setLastDargOffset(clickOffset);
     updateValue(clickOffset);
   };
-
   useDrag(dotRef, dragHandler, dragStartHandler, dragEndHandler);
   useEffect(function () {
     if (customValue === undefined) return;
@@ -142,22 +149,30 @@ function SliderComponent(_ref) {
     onClick: clickHandler,
     ref: sliderRef
   }, props, {
-    className: _JSXStyle.dynamic([["1938095908", [disabled ? theme.palette.accents_2 : bg, disabled ? 'not-allow' : 'pointer', SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(0.5), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || useClasses('slider', className) || "")
+    className: _JSXStyle.dynamic([["1412427536", [disabled ? theme.palette.accents_2 : bg, disabled ? 'not-allow' : 'pointer', SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(0.5), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || useClasses('slider', className) || "")
   }), /*#__PURE__*/React.createElement(SliderDot, {
     disabled: disabled,
     ref: dotRef,
     isClick: isClick,
-    left: currentRatio
+    left: currentRatio,
+    role: "slider",
+    tabIndex: disabled ? -1 : 0,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": value,
+    "aria-disabled": disabled || undefined,
+    onKeyDown: keyDownHandler
   }, hideValue || value), showMarkers && /*#__PURE__*/React.createElement(SliderMark, {
     max: max,
     min: min,
     step: step
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1938095908",
+    id: "1412427536",
     dynamic: [disabled ? theme.palette.accents_2 : bg, disabled ? 'not-allow' : 'pointer', SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(0.5), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
   }, ".slider.__jsx-style-dynamic-selector{border-radius:50px;background-color:".concat(disabled ? theme.palette.accents_2 : bg, ";position:relative;cursor:").concat(disabled ? 'not-allow' : 'pointer', ";--slider-font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(0.5), ";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), ";}")));
-}
-
+});
 SliderComponent.displayName = 'BolioUISlider';
 var Slider = withScale(SliderComponent);
 export default Slider;

package/esm/Slider/SliderDot.d.ts

@@ -4,8 +4,8 @@ interface Props {
     disabled?: boolean;
     isClick?: boolean;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type SliderDotProps = Props & NativeAttrs;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SliderDotProps = Props & NativeAttrs;
 declare const SliderDot: React.ForwardRefExoticComponent<Props & NativeAttrs & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;

package/esm/Slider/SliderDot.js

@@ -1,27 +1,32 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "disabled", "left", "isClick"];
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
 import useClasses from '../use-classes';
 var SliderDot = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$left = _ref.left,
-      left = _ref$left === void 0 ? 0 : _ref$left,
-      _ref$isClick = _ref.isClick,
-      isClick = _ref$isClick === void 0 ? false : _ref$isClick;
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$left = _ref.left,
+    left = _ref$left === void 0 ? 0 : _ref$left,
+    _ref$isClick = _ref.isClick,
+    isClick = _ref$isClick === void 0 ? false : _ref$isClick,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var classes = useClasses('dot', {
     disabled: disabled,
     click: isClick
   });
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: _JSXStyle.dynamic([["1726643890", [left, theme.palette.primary, theme.palette.background, theme.palette.accents_2, theme.palette.accents_4]]]) + " " + (classes || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1726643890",
-    dynamic: [left, theme.palette.primary, theme.palette.background, theme.palette.accents_2, theme.palette.accents_4]
-  }, ".dot.__jsx-style-dynamic-selector{position:absolute;left:".concat(left, "%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);height:calc(var(--slider-font-size) * 1.25);min-width:calc(var(--slider-font-size) * 1.25);line-height:calc(var(--slider-font-size) * 1.25);border-radius:calc(var(--slider-font-size) * 0.625);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700;font-size:calc(var(--slider-font-size) * 0.75);z-index:100;background-color:").concat(theme.palette.primary, ";color:").concat(theme.palette.background, ";text-align:center;padding:0 calc(0.57 * var(--slider-font-size));}.dot.disabled.__jsx-style-dynamic-selector{cursor:not-allowed !important;background-color:").concat(theme.palette.accents_2, ";color:").concat(theme.palette.accents_4, ";}.dot.click.__jsx-style-dynamic-selector{-webkit-transition:all 200ms ease;transition:all 200ms ease;}.dot.__jsx-style-dynamic-selector:hover{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;}.dot.__jsx-style-dynamic-selector:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;}")));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["391068299", [left, theme.palette.primary, theme.palette.background, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "391068299",
+    dynamic: [left, theme.palette.primary, theme.palette.background, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4]
+  }, ".dot.__jsx-style-dynamic-selector{position:absolute;left:".concat(left, "%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);height:calc(var(--slider-font-size) * 1.25);min-width:calc(var(--slider-font-size) * 1.25);line-height:calc(var(--slider-font-size) * 1.25);border-radius:calc(var(--slider-font-size) * 0.625);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700;font-size:calc(var(--slider-font-size) * 0.75);z-index:100;background-color:").concat(theme.palette.primary, ";color:").concat(theme.palette.background, ";text-align:center;padding:0 calc(0.57 * var(--slider-font-size));}.dot.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ").concat(theme.palette.foreground, ";outline-offset:2px;}.dot.disabled.__jsx-style-dynamic-selector{cursor:not-allowed !important;background-color:").concat(theme.palette.accents_2, ";color:").concat(theme.palette.accents_4, ";}.dot.click.__jsx-style-dynamic-selector{-webkit-transition:all 200ms ease;transition:all 200ms ease;}.dot.__jsx-style-dynamic-selector:hover{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;}.dot.__jsx-style-dynamic-selector:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;}")));
 });
 SliderDot.displayName = 'BolioUISliderDot';
 export default SliderDot;

package/esm/Slider/SliderMark.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 interface Props {
     max: number;
     min: number;
     step: number;
 }
-export declare type MarkLeftValue = number;
-export declare type Marks = Array<MarkLeftValue>;
-declare function SliderMark({ step, max, min }: Props): JSX.Element;
+export type MarkLeftValue = number;
+export type Marks = Array<MarkLeftValue>;
+declare function SliderMark({ step, max, min }: Props): React.JSX.Element;
 export default SliderMark;

package/esm/Slider/SliderMark.js

@@ -1,8 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
-
 var getMarks = function getMarks(min, max, step) {
   var value = max - min;
   var roundFunc = !(value % step) ? Math.floor : Math.ceil;
@@ -12,11 +11,10 @@ var getMarks = function getMarks(min, max, step) {
     return step * (index + 1) * 100 / value;
   });
 };
-
 function SliderMark(_ref) {
   var step = _ref.step,
-      max = _ref.max,
-      min = _ref.min;
+    max = _ref.max,
+    min = _ref.min;
   var theme = useTheme();
   var marks = useMemo(function () {
     return getMarks(min, max, step);
@@ -34,5 +32,4 @@ function SliderMark(_ref) {
     dynamic: [theme.palette.background]
   }, "span.__jsx-style-dynamic-selector{position:absolute;width:2px;height:100%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:".concat(theme.palette.background, ";}")));
 }
-
 export default SliderMark;

package/esm/Slider/index.d.ts

@@ -1,3 +1,3 @@
-import Slider from "./Slider";
-export type { SliderProps, SliderTypes } from "./Slider";
+import Slider from './Slider';
+export type { SliderProps, SliderTypes } from './Slider';
 export default Slider;

package/esm/Slider/index.js

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

package/esm/Slider/styles.d.ts

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

package/esm/Snippet/Snippet.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SnippetTypes, CopyTypes, NormalTypes } from "../utils/prop-types";
-export declare type ToastTypes = NormalTypes;
+import { SnippetTypes, CopyTypes, NormalTypes } from '../utils/prop-types';
+export type ToastTypes = NormalTypes;
 interface Props {
     text?: string | string[];
     symbol?: string;
@@ -12,7 +12,9 @@ interface Props {
     type?: SnippetTypes;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type SnippetProps = Props & NativeAttrs;
-declare const Snippet: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SnippetProps = Props & NativeAttrs;
+declare const Snippet: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Snippet;

package/esm/Snippet/Snippet.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["type", "filled", "rounded", "children", "symbol", "toastText", "toastType", "text", "copy", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo, useRef } from 'react';
 import useTheme from '../use-theme';
 import { getStyles } from './styles';
@@ -10,46 +10,39 @@ import useClipboard from '../utils/use-clipboard';
 import useToasts from '../use-toasts';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 var textArrayToString = function textArrayToString(text) {
   return text.reduce(function (pre, current) {
     if (!current) return pre;
     return pre ? "".concat(pre, "\n").concat(current) : current;
   }, '');
 };
-
-function SnippetComponent(_ref) {
+var SnippetComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$filled = _ref.filled,
-      filled = _ref$filled === void 0 ? false : _ref$filled,
-      _ref$rounded = _ref.rounded,
-      rounded = _ref$rounded === void 0 ? false : _ref$rounded,
-      children = _ref.children,
-      _ref$symbol = _ref.symbol,
-      symbol = _ref$symbol === void 0 ? '$' : _ref$symbol,
-      _ref$toastText = _ref.toastText,
-      toastText = _ref$toastText === void 0 ? 'Copied!' : _ref$toastText,
-      _ref$toastType = _ref.toastType,
-      toastType = _ref$toastType === void 0 ? 'primary' : _ref$toastType,
-      text = _ref.text,
-      copyType = _ref.copy,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? false : _ref$rounded,
+    children = _ref.children,
+    _ref$symbol = _ref.symbol,
+    symbol = _ref$symbol === void 0 ? '$' : _ref$symbol,
+    _ref$toastText = _ref.toastText,
+    toastText = _ref$toastText === void 0 ? 'Copied!' : _ref$toastText,
+    _ref$toastType = _ref.toastType,
+    toastType = _ref$toastType === void 0 ? 'primary' : _ref$toastType,
+    text = _ref.text,
+    copyType = _ref.copy,
+    _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 _useClipboard = useClipboard(),
-      copy = _useClipboard.copy;
-
+    copy = _useClipboard.copy;
   var _useToasts = useToasts(),
-      setToast = _useToasts.setToast;
-
-  var ref = useRef(null);
+    setToast = _useToasts.setToast;
+  var preRef = useRef(null);
   var isMultiLine = text && Array.isArray(text);
   var style = useMemo(function () {
     return getStyles(type, theme.palette, filled);
@@ -60,14 +53,13 @@ function SnippetComponent(_ref) {
   var childText = useMemo(function () {
     if (isMultiLine) return textArrayToString(text);
     if (!children) return text;
-    if (!ref.current) return '';
-    return ref.current.textContent;
+    if (!preRef.current) return '';
+    return preRef.current.textContent;
   }, [isMultiLine, text, children]);
   var symbolBefore = useMemo(function () {
     var str = symbol.trim();
     return str ? "".concat(str, " ") : '';
   }, [symbol]);
-
   var clickHandler = function clickHandler() {
     if (!childText || !showCopyIcon) return;
     copy(childText);
@@ -77,26 +69,26 @@ function SnippetComponent(_ref) {
       type: toastType
     });
   };
-
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + (props && props.className != null && props.className || useClasses('snippet', className) || "")
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + (props && props.className != null && props.className || useClasses('snippet', className) || "")
   }), isMultiLine ? text.map(function (t, index) {
     return /*#__PURE__*/React.createElement("pre", {
       key: "snippet-".concat(index, "-").concat(t),
-      className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
+      className: _JSXStyle.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
     }, t);
   }) : /*#__PURE__*/React.createElement("pre", {
-    ref: ref,
-    className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
+    ref: preRef,
+    className: _JSXStyle.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
   }, children || text), showCopyIcon && /*#__PURE__*/React.createElement("div", {
     onClick: clickHandler,
-    className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + "copy"
+    className: _JSXStyle.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + "copy"
   }, /*#__PURE__*/React.createElement(SnippetIcon, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1826028201",
+    id: "3243552610",
     dynamic: [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]
   }, ".snippet.__jsx-style-dynamic-selector{position:relative;max-width:100%;color:".concat(style.color, ";background-color:").concat(style.bgColor, ";border:1px solid ").concat(style.border, ";border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";--snippet-font-size:").concat(SCALES.font(0.8125), ";--snippet-padding-top:").concat(SCALES.pt(0.667), ";font-size:var(--snippet-font-size);width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.667), " ").concat(SCALES.pr(2.667), " ").concat(SCALES.pb(0.667), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:").concat(style.color, ";font-size:inherit;}pre.__jsx-style-dynamic-selector::before{content:'").concat(symbolBefore, "';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:0;bottom:0;background-color:").concat(style.bgColor, ";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:").concat(isMultiLine ? 'flex-start' : 'center', ";-webkit-box-align:").concat(isMultiLine ? 'flex-start' : 'center', ";-ms-flex-align:").concat(isMultiLine ? 'flex-start' : 'center', ";align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";width:calc(3.281 * var(--snippet-font-size));color:inherit;-webkit-transition:opacity 150ms ease 0s;transition:opacity 150ms ease 0s;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:").concat(isMultiLine ? 'var(--snippet-padding-top)' : 0, ";opacity:0.65;}.copy.__jsx-style-dynamic-selector:hover{opacity:1;}")));
-}
-
+});
 SnippetComponent.displayName = 'BolioUISnippet';
 var Snippet = withScale(SnippetComponent);
 export default Snippet;

package/esm/Snippet/SnippetIcon.d.ts

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

package/esm/Snippet/SnippetIcon.js

@@ -1,6 +1,5 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-
 function SnippetIconComponent() {
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 24 24",
@@ -21,7 +20,6 @@ function SnippetIconComponent() {
     id: "418323402"
   }, "svg.jsx-418323402{width:calc(var(--snippet-font-size) * 1.69);height:calc(var(--snippet-font-size) * 1.69);}"));
 }
-
 SnippetIconComponent.displayName = 'BolioUISnippetIcon';
 var SnippetIcon = /*#__PURE__*/React.memo(SnippetIconComponent);
 export default SnippetIcon;

package/esm/Snippet/index.d.ts

@@ -1,4 +1,4 @@
-import Snippet from "./Snippet";
-export type { SnippetProps, ToastTypes } from "./Snippet";
-export type { CopyTypes, SnippetTypes } from "../utils/prop-types";
+import Snippet from './Snippet';
+export type { SnippetProps, ToastTypes } from './Snippet';
+export type { CopyTypes, SnippetTypes } from '../utils/prop-types';
 export default Snippet;

package/esm/Snippet/index.js

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

package/esm/Snippet/styles.d.ts

@@ -1,8 +1,8 @@
-import { SnippetTypes } from "../utils/prop-types";
-import { BolioUIThemesPalette } from "../Themes/Presets";
-export declare type SnippetStyles = {
+import { SnippetTypes } from '../utils/prop-types';
+import { BolioUIThemesPalette } from '../Themes/Presets';
+export type SnippetStyles = {
     color: string;
     border: string;
     bgColor: string;
 };
-export declare const getStyles: (type: SnippetTypes, palette: BolioUIThemesPalette, fill?: boolean | undefined) => SnippetStyles;
+export declare const getStyles: (type: SnippetTypes, palette: BolioUIThemesPalette, fill?: boolean) => SnippetStyles;

package/esm/Spacer/Spacer.d.ts

@@ -3,7 +3,7 @@ interface Props {
     inline?: boolean;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
-export declare type SpacerProps = Props & NativeAttrs;
-declare const Spacer: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export type SpacerProps = Props & NativeAttrs;
+declare const Spacer: import("../use-scale/with-scale").ScaleComponent<HTMLSpanElement, Props & NativeAttrs & React.RefAttributes<HTMLSpanElement>>;
 export default Spacer;