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

package/esm/Text/Text.js

@@ -4,7 +4,6 @@ var _excluded = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "sp
 import React, { useMemo } from 'react';
 import TextChild from './Child';
 import { withScale } from '../use-scale';
-
 var getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;
   var nextTag = tags.slice(1, tags.length);
@@ -12,41 +11,39 @@ var getModifierChild = function getModifierChild(tags, children) {
     tag: tags[0]
   }, getModifierChild(nextTag, children));
 };
-
-function TextComponent(_ref) {
+var TextComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$h = _ref.h1,
-      h1 = _ref$h === void 0 ? false : _ref$h,
-      _ref$h2 = _ref.h2,
-      h2 = _ref$h2 === void 0 ? false : _ref$h2,
-      _ref$h3 = _ref.h3,
-      h3 = _ref$h3 === void 0 ? false : _ref$h3,
-      _ref$h4 = _ref.h4,
-      h4 = _ref$h4 === void 0 ? false : _ref$h4,
-      _ref$h5 = _ref.h5,
-      h5 = _ref$h5 === void 0 ? false : _ref$h5,
-      _ref$h6 = _ref.h6,
-      h6 = _ref$h6 === void 0 ? false : _ref$h6,
-      _ref$p = _ref.p,
-      p = _ref$p === void 0 ? false : _ref$p,
-      _ref$b = _ref.b,
-      b = _ref$b === void 0 ? false : _ref$b,
-      _ref$small = _ref.small,
-      small = _ref$small === void 0 ? false : _ref$small,
-      _ref$i = _ref.i,
-      i = _ref$i === void 0 ? false : _ref$i,
-      _ref$span = _ref.span,
-      span = _ref$span === void 0 ? false : _ref$span,
-      _ref$del = _ref.del,
-      del = _ref$del === void 0 ? false : _ref$del,
-      _ref$em = _ref.em,
-      em = _ref$em === void 0 ? false : _ref$em,
-      _ref$blockquote = _ref.blockquote,
-      blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
-      children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    h1 = _ref$h === void 0 ? false : _ref$h,
+    _ref$h2 = _ref.h2,
+    h2 = _ref$h2 === void 0 ? false : _ref$h2,
+    _ref$h3 = _ref.h3,
+    h3 = _ref$h3 === void 0 ? false : _ref$h3,
+    _ref$h4 = _ref.h4,
+    h4 = _ref$h4 === void 0 ? false : _ref$h4,
+    _ref$h5 = _ref.h5,
+    h5 = _ref$h5 === void 0 ? false : _ref$h5,
+    _ref$h6 = _ref.h6,
+    h6 = _ref$h6 === void 0 ? false : _ref$h6,
+    _ref$p = _ref.p,
+    p = _ref$p === void 0 ? false : _ref$p,
+    _ref$b = _ref.b,
+    b = _ref$b === void 0 ? false : _ref$b,
+    _ref$small = _ref.small,
+    small = _ref$small === void 0 ? false : _ref$small,
+    _ref$i = _ref.i,
+    i = _ref$i === void 0 ? false : _ref$i,
+    _ref$span = _ref.span,
+    span = _ref$span === void 0 ? false : _ref$span,
+    _ref$del = _ref.del,
+    del = _ref$del === void 0 ? false : _ref$del,
+    _ref$em = _ref.em,
+    em = _ref$em === void 0 ? false : _ref$em,
+    _ref$blockquote = _ref.blockquote,
+    blockquote = _ref$blockquote === void 0 ? false : _ref$blockquote,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var elements = {
     h1: h1,
     h2: h2,
@@ -84,11 +81,11 @@ function TextComponent(_ref) {
     return getModifierChild(renderableChildElements, children);
   }, [renderableChildElements, children]);
   return /*#__PURE__*/React.createElement(TextChild, _extends({
+    ref: ref,
     className: className,
     tag: tag
   }, props), modifers);
-}
-
+});
 TextComponent.displayName = 'BolioUIText';
 var Text = withScale(TextComponent);
 export default Text;

package/esm/Text/index.d.ts

@@ -1,3 +1,3 @@
-import Text from "./Text";
-export type { TextProps, TextTypes } from "./Text";
+import Text from './Text';
+export type { TextProps, TextTypes } from './Text';
 export default Text;

package/esm/Text/index.js

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

package/esm/Textarea/Textarea.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
+import { NormalTypes } from '../utils/prop-types';
 declare const resizeTypes: ["none", "both", "horizontal", "vertical", "initial", "inherit"];
-export declare type TextareaResizes = typeof resizeTypes[number];
-export declare type TextareaTypes = NormalTypes;
+export type TextareaResizes = typeof resizeTypes[number];
+export type TextareaTypes = NormalTypes;
 interface Props {
     value?: string;
     initialValue?: string;
@@ -16,7 +16,9 @@ interface Props {
     className?: string;
     resize?: TextareaResizes;
 }
-declare type NativeAttrs = Omit<React.TextareaHTMLAttributes<any>, keyof Props>;
-export declare type TextareaProps = Props & NativeAttrs;
-declare const Textarea: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<HTMLTextAreaElement> & import("../use-scale").ScaleProps, "form" | "slot" | "style" | "title" | "children" | keyof import("../use-scale").ScaleProps | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "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" | "onFocusCapture" | "onBlurCapture" | "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" | "autoFocus" | "name" | "key" | "autoComplete" | "maxLength" | "minLength" | "required" | "wrap" | keyof Props | "cols" | "dirName" | "rows"> & React.RefAttributes<HTMLTextAreaElement>>;
+type NativeAttrs = Omit<React.TextareaHTMLAttributes<any>, keyof Props>;
+export type TextareaProps = Props & NativeAttrs;
+declare const Textarea: import("../use-scale/with-scale").ScaleComponent<HTMLTextAreaElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLTextAreaElement>>;
 export default Textarea;

package/esm/Textarea/Textarea.js

@@ -2,7 +2,7 @@ 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 = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "resize"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useRef, useImperativeHandle, useEffect, useMemo, useState } from 'react';
 import useTheme from '../use-theme';
 import { tuple } from '../utils/prop-types';
@@ -12,29 +12,26 @@ import useClasses from '../use-classes';
 var resizeTypes = tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$initialValue = _ref.initialValue,
-      initialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
-      onChange = _ref.onChange,
-      value = _ref.value,
-      placeholder = _ref.placeholder,
-      _ref$resize = _ref.resize,
-      resize = _ref$resize === void 0 ? 'none' : _ref$resize,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    placeholder = _ref.placeholder,
+    _ref$resize = _ref.resize,
+    resize = _ref$resize === void 0 ? 'none' : _ref$resize,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var textareaRef = useRef(null);
   useImperativeHandle(ref, function () {
     return textareaRef.current;
@@ -42,17 +39,14 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var isControlledComponent = useMemo(function () {
     return value !== undefined;
   }, [value]);
-
   var _useState = useState(initialValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      selfValue = _useState2[0],
-      setSelfValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selfValue = _useState2[0],
+    setSelfValue = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hover = _useState4[0],
-      setHover = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    hover = _useState4[0],
+    setHover = _useState4[1];
   var colors = useMemo(function () {
     return getColors(theme.palette, type);
   }, [theme.palette, type]);
@@ -60,23 +54,19 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     hover: hover,
     disabled: disabled
   }, className);
-
   var changeHandler = function changeHandler(event) {
     if (disabled || readOnly) return;
     setSelfValue(event.target.value);
     onChange && onChange(event);
   };
-
   var focusHandler = function focusHandler(e) {
     setHover(true);
     onFocus && onFocus(e);
   };
-
   var blurHandler = function blurHandler(e) {
     setHover(false);
     onBlur && onBlur(e);
   };
-
   useEffect(function () {
     if (isControlledComponent) {
       setSelfValue(value);
@@ -87,9 +77,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   } : {
     defaultValue: initialValue
   };
-
   var textareaProps = _extends({}, props, controlledValue);
-
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2097224582", [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (classes || "")
   }, /*#__PURE__*/React.createElement("textarea", _extends({

package/esm/Textarea/index.d.ts

@@ -1,3 +1,3 @@
-import Textarea from "./Textarea";
-export type { TextareaProps, TextareaResizes, TextareaTypes } from "./Textarea";
+import Textarea from './Textarea';
+export type { TextareaProps, TextareaResizes, TextareaTypes } from './Textarea';
 export default Textarea;

package/esm/Textarea/index.js

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

package/esm/Themes/Presets/Dark.d.ts

@@ -1,4 +1,4 @@
-import { BolioUIThemes, BolioUIThemesPalette, BolioUIThemesExpressiveness } from "./index";
+import { BolioUIThemes, BolioUIThemesPalette, BolioUIThemesExpressiveness } from './index';
 export declare const palette: BolioUIThemesPalette;
 export declare const expressiveness: BolioUIThemesExpressiveness;
 export declare const font: import("./index").BolioUIThemesFont;

package/esm/Themes/Presets/Default.d.ts

@@ -1,4 +1,4 @@
-import { BolioUIThemes, BolioUIThemesPalette, BolioUIThemesExpressiveness } from "./index";
+import { BolioUIThemes, BolioUIThemesPalette, BolioUIThemesExpressiveness } from './index';
 export declare const palette: BolioUIThemesPalette;
 export declare const expressiveness: BolioUIThemesExpressiveness;
 export declare const font: import("./index").BolioUIThemesFont;

package/esm/Themes/Presets/Shared.d.ts

@@ -1,4 +1,4 @@
-import { BolioUIThemesBreakpoints, BolioUIThemesFont, BolioUIThemesLayout } from "./index";
+import { BolioUIThemesBreakpoints, BolioUIThemesFont, BolioUIThemesLayout } from './index';
 export declare const defaultFont: BolioUIThemesFont;
 export declare const defaultBreakpoints: BolioUIThemesBreakpoints;
 export declare const defaultLayout: BolioUIThemesLayout;

package/esm/Themes/Themes.d.ts

@@ -1,13 +1,13 @@
-import { BolioUIThemes } from "./Presets/index";
-import type { DeepPartial } from "../utils/types";
-export declare type BolioUIUserTheme = DeepPartial<BolioUIThemes> & {
+import { BolioUIThemes } from './Presets/index';
+import type { DeepPartial } from '../utils/types';
+export type BolioUIUserTheme = DeepPartial<BolioUIThemes> & {
     type: string;
 };
 export declare const isObject: (target: unknown) => unknown;
 export declare const deepDuplicable: <T extends Record<string, unknown>>(source: T, target: T) => T;
 declare const Themes: {
-    isPresetTheme: (themeOrType?: string | BolioUIThemes | BolioUIUserTheme | undefined) => boolean;
-    isAvailableThemeType: (type?: string | undefined) => boolean;
+    isPresetTheme: (themeOrType?: BolioUIUserTheme | BolioUIThemes | string) => boolean;
+    isAvailableThemeType: (type?: string) => boolean;
     hasUserCustomTheme: (themes?: Array<BolioUIThemes>) => boolean;
     getPresets: () => Array<BolioUIThemes>;
     getPresetStaticTheme: () => BolioUIThemes;

package/esm/Themes/Themes.js

@@ -9,12 +9,10 @@ export var deepDuplicable = function deepDuplicable(source, target) {
   if (!isObject(target) || !isObject(source)) return source;
   var sourceKeys = Object.keys(source);
   var result = {};
-
   for (var _i = 0, _sourceKeys = sourceKeys; _i < _sourceKeys.length; _i++) {
     var key = _sourceKeys[_i];
     var sourceValue = source[key];
     var targetValue = target[key];
-
     if (Array.isArray(sourceValue) && Array.isArray(targetValue)) {
       result[key] = targetValue.concat(sourceValue);
     } else if (isObject(sourceValue) && isObject(targetValue)) {
@@ -25,18 +23,14 @@ export var deepDuplicable = function deepDuplicable(source, target) {
       result[key] = sourceValue;
     }
   }
-
   return result;
 };
-
 var getPresets = function getPresets() {
   return [lightTheme, darkTheme];
 };
-
 var getPresetStaticTheme = function getPresetStaticTheme() {
   return lightTheme;
 };
-
 var isAvailableThemeType = function isAvailableThemeType(type) {
   if (!type) return false;
   var presetThemes = getPresets();
@@ -45,37 +39,30 @@ var isAvailableThemeType = function isAvailableThemeType(type) {
   });
   return !hasType;
 };
-
 var isPresetTheme = function isPresetTheme(themeOrType) {
   if (!themeOrType) return false;
   var isType = typeof themeOrType === 'string';
   var type = isType ? themeOrType : themeOrType.type;
   return !isAvailableThemeType(type);
 };
-
 var hasUserCustomTheme = function hasUserCustomTheme() {
   var themes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return !!themes.find(function (item) {
     return isAvailableThemeType(item.type);
   });
 };
-
 var create = function create(base, custom) {
   if (!isAvailableThemeType(custom.type)) {
     throw new Error('Duplicate or unavailable theme type');
   }
-
   return deepDuplicable(base, custom);
 };
-
 var createFromDark = function createFromDark(custom) {
   return create(darkTheme, custom);
 };
-
 var createFromLight = function createFromLight(custom) {
   return create(lightTheme, custom);
 };
-
 var Themes = {
   isPresetTheme: isPresetTheme,
   isAvailableThemeType: isAvailableThemeType,

package/esm/Themes/index.d.ts

@@ -1,4 +1,4 @@
-import Themes from "./Themes";
-export type { BolioUIUserTheme } from "./Themes";
-export type { BolioUIThemes, BolioUIThemesBreakpoints, BreakpointsItem, BolioUIThemesExpressiveness, BolioUIThemesFont, BolioUIThemesLayout, BolioUIThemesPalette } from "./Presets";
+import Themes from './Themes';
+export type { BolioUIUserTheme } from './Themes';
+export type { BolioUIThemes, BolioUIThemesBreakpoints, BreakpointsItem, BolioUIThemesExpressiveness, BolioUIThemesFont, BolioUIThemesLayout, BolioUIThemesPalette } from './Presets';
 export default Themes;

package/esm/Themes/index.js

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

package/esm/Toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type ToggleTypes = NormalTypes;
+import { NormalTypes } from '../utils/prop-types';
+export type ToggleTypes = NormalTypes;
 export interface ToggleEventTarget {
     checked: boolean;
 }
@@ -18,11 +18,13 @@ interface Props {
     type?: ToggleTypes;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.LabelHTMLAttributes<any>, keyof Props>;
-export declare type ToggleProps = Props & NativeAttrs;
-export declare type ToggleSize = {
+type NativeAttrs = Omit<React.LabelHTMLAttributes<any>, keyof Props>;
+export type ToggleProps = Props & NativeAttrs;
+export type ToggleSize = {
     width: string;
     height: string;
 };
-declare const Toggle: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+declare const Toggle: import("../use-scale/with-scale").ScaleComponent<HTMLInputElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
 export default Toggle;

package/esm/Toggle/Toggle.js

@@ -1,37 +1,34 @@
 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 = ["initialChecked", "checked", "disabled", "onChange", "type", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+var _excluded = ["initialChecked", "checked", "disabled", "onChange", "type", "className", "aria-label", "aria-labelledby"];
+import _JSXStyle from "styled-jsx/style";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import useTheme from '../use-theme';
 import { getColors } from './styles';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
-function ToggleComponent(_ref) {
+var ToggleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$initialChecked = _ref.initialChecked,
-      initialChecked = _ref$initialChecked === void 0 ? false : _ref$initialChecked,
-      checked = _ref.checked,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      onChange = _ref.onChange,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    initialChecked = _ref$initialChecked === void 0 ? false : _ref$initialChecked,
+    checked = _ref.checked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onChange = _ref.onChange,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    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(initialChecked),
-      _useState2 = _slicedToArray(_useState, 2),
-      selfChecked = _useState2[0],
-      setSelfChecked = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selfChecked = _useState2[0],
+    setSelfChecked = _useState2[1];
   var classes = useClasses('toggle', {
     checked: selfChecked,
     disabled: disabled
@@ -49,34 +46,35 @@ function ToggleComponent(_ref) {
     setSelfChecked(!selfChecked);
     onChange && onChange(selfEvent);
   }, [disabled, selfChecked, onChange]);
-
   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;
   useEffect(function () {
     if (checked === undefined) return;
     setSelfChecked(checked);
   }, [checked]);
   return /*#__PURE__*/React.createElement("label", _extends({}, props, {
-    className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || "")
+    className: _JSXStyle.dynamic([["3715085408", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement("input", {
+    ref: ref,
     type: "checkbox",
+    role: "switch",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
     disabled: disabled,
     checked: selfChecked,
     onChange: changeHandle,
-    className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]])
+    className: _JSXStyle.dynamic([["3715085408", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]])
   }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || "")
+    className: _JSXStyle.dynamic([["3715085408", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || "")
   }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2317841100", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + "inner"
+    className: _JSXStyle.dynamic([["3715085408", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + "inner"
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2317841100",
-    dynamic: [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]
-  }, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";--toggle-font-size:").concat(SCALES.font(1), ";--toggle-height:").concat(SCALES.height(1), ";width:").concat(SCALES.width(1.75), ";height:var(--toggle-height);padding:").concat(SCALES.pt(0.1875), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.1875), " ").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{overflow:hidden;visibility:hidden;height:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}.toggle.__jsx-style-dynamic-selector{height:calc(var(--toggle-height) + 2px);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:").concat(theme.palette.accents_2, ";padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0, rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}.disabled.checked.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_4, ";}.checked.__jsx-style-dynamic-selector{background-color:").concat(bg, ";}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 1px));box-shadow:none;}")));
-}
-
+    id: "3715085408",
+    dynamic: [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]
+  }, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";--toggle-font-size:").concat(SCALES.font(1), ";--toggle-height:").concat(SCALES.height(1), ";width:").concat(SCALES.width(1.75), ";height:var(--toggle-height);padding:").concat(SCALES.pt(0.1875), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.1875), " ").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{overflow:hidden;height:0;margin:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}input.__jsx-style-dynamic-selector:focus-visible+.toggle.__jsx-style-dynamic-selector{outline:2px solid ").concat(theme.palette.primary, ";outline-offset:2px;}.toggle.__jsx-style-dynamic-selector{height:calc(var(--toggle-height) + 2px);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:").concat(theme.palette.accents_2, ";padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0, rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}.disabled.checked.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_4, ";}.checked.__jsx-style-dynamic-selector{background-color:").concat(bg, ";}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 1px));box-shadow:none;}")));
+});
 ToggleComponent.displayName = 'BolioUIToggle';
 var Toggle = withScale(ToggleComponent);
 export default Toggle;

package/esm/Toggle/index.d.ts

@@ -1,3 +1,3 @@
-import Toggle from "./Toggle";
-export type { ToggleProps, ToggleSize, ToggleEvent, ToggleEventTarget, ToggleTypes } from "./Toggle";
+import Toggle from './Toggle';
+export type { ToggleProps, ToggleSize, ToggleEvent, ToggleEventTarget, ToggleTypes } from './Toggle';
 export default Toggle;

package/esm/Toggle/index.js

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

package/esm/Toggle/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/Tooltip/Tooltip.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { TriggerTypes, Placement, SnippetTypes } from "../utils/prop-types";
-export declare type TooltipOnVisibleChange = (visible: boolean) => void;
-export declare type TooltipTypes = SnippetTypes;
-export declare type TooltipTriggers = TriggerTypes;
-export declare type TooltipPlacement = Placement;
+import { TriggerTypes, Placement, SnippetTypes } from '../utils/prop-types';
+export type TooltipOnVisibleChange = (visible: boolean) => void;
+export type TooltipTypes = SnippetTypes;
+export type TooltipTriggers = TriggerTypes;
+export type TooltipPlacement = Placement;
 interface Props {
     text?: string | React.ReactNode;
     type?: TooltipTypes;
@@ -19,7 +19,9 @@ interface Props {
     portalClassName?: string;
     onVisibleChange?: TooltipOnVisibleChange;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type TooltipProps = Props & NativeAttrs;
-declare const Tooltip: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TooltipProps = Props & NativeAttrs;
+declare const Tooltip: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Tooltip;