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

package/esm/Image/helpers.js

@@ -1,10 +1,8 @@
 export var transformDataSource = function transformDataSource(src) {
   var left = "".concat(src).slice(0, 4);
-
   if (encodeURIComponent(left) === '%3Csvg') {
     return "data:image/svg+xml;utf8,".concat(src);
   }
-
   return src;
 };
 export var getHostFromUrl = function getHostFromUrl(url) {

package/esm/Image/index.d.ts

@@ -1,9 +1,9 @@
-import Image from "./Image";
-import ImageBrowser from "./ImageBrowser";
-export declare type ImageComponentType = typeof Image & {
+import Image from './Image';
+import ImageBrowser from './ImageBrowser';
+export type ImageComponentType = typeof Image & {
     Browser: typeof ImageBrowser;
 };
-export type { ImageProps } from "./Image";
-export type { ImageBrowserProps, ImageAnchorProps } from "./ImageBrowser";
+export type { ImageProps } from './Image';
+export type { ImageBrowserProps, ImageAnchorProps } from './ImageBrowser';
 declare const _default: ImageComponentType;
 export default _default;

package/esm/Image/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Image from './Image';
 import ImageBrowser from './ImageBrowser';
 Image.Browser = ImageBrowser;

package/esm/Image/styles.d.ts

@@ -1,5 +1,5 @@
-import { BolioUIThemesPalette } from "../Themes/Presets";
-export declare type BrowserColors = {
+import { BolioUIThemesPalette } from '../Themes/Presets';
+export type BrowserColors = {
     color: string;
     barBgColor: string;
     inputBgColor: string;

package/esm/Input/Input.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
-import { Props } from "./InputProps";
-declare type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
-export declare type InputProps = Props & NativeAttrs;
-declare const Input: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<HTMLInputElement> & import("../use-scale").ScaleProps, "min" | "max" | "form" | "slot" | "style" | "title" | "pattern" | "children" | keyof import("../use-scale").ScaleProps | "list" | "src" | "alt" | "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" | "step" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "key" | "checked" | "accept" | "capture" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "required" | "size" | keyof Props> & React.RefAttributes<HTMLInputElement>>;
+import { Props } from './InputProps';
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export type InputProps = Props & NativeAttrs;
+declare const Input: import("../use-scale/with-scale").ScaleComponent<HTMLInputElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/esm/Input/Input.js

@@ -1,8 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor", "borderColor", "hoverBorder", "error", "errorMessage", "crossOrigin"];
-import _JSXStyle from "../styled-jsx.es.js";
+var _excluded = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor", "borderColor", "hoverBorder", "error", "errorMessage"];
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import useTheme from '../use-theme';
 import InputLabel from './InputLabel';
@@ -13,65 +13,56 @@ import { getColors } from './styles';
 import { defaultProps } from './InputProps';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _extends({}, event, {
     target: el,
     currentTarget: el
   });
 };
-
 var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var label = _ref.label,
-      labelRight = _ref.labelRight,
-      type = _ref.type,
-      htmlType = _ref.htmlType,
-      icon = _ref.icon,
-      iconRight = _ref.iconRight,
-      iconClickable = _ref.iconClickable,
-      onIconClick = _ref.onIconClick,
-      initialValue = _ref.initialValue,
-      onChange = _ref.onChange,
-      readOnly = _ref.readOnly,
-      value = _ref.value,
-      onClearClick = _ref.onClearClick,
-      clearable = _ref.clearable,
-      className = _ref.className,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      autoComplete = _ref.autoComplete,
-      placeholder = _ref.placeholder,
-      children = _ref.children,
-      disabled = _ref.disabled,
-      rounded = _ref.rounded,
-      backgroundColor = _ref.backgroundColor,
-      borderColor = _ref.borderColor,
-      hoverBorder = _ref.hoverBorder,
-      error = _ref.error,
-      errorMessage = _ref.errorMessage,
-      crossOrigin = _ref.crossOrigin,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    labelRight = _ref.labelRight,
+    type = _ref.type,
+    htmlType = _ref.htmlType,
+    icon = _ref.icon,
+    iconRight = _ref.iconRight,
+    iconClickable = _ref.iconClickable,
+    onIconClick = _ref.onIconClick,
+    initialValue = _ref.initialValue,
+    onChange = _ref.onChange,
+    readOnly = _ref.readOnly,
+    value = _ref.value,
+    onClearClick = _ref.onClearClick,
+    clearable = _ref.clearable,
+    className = _ref.className,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    autoComplete = _ref.autoComplete,
+    placeholder = _ref.placeholder,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    rounded = _ref.rounded,
+    backgroundColor = _ref.backgroundColor,
+    borderColor = _ref.borderColor,
+    hoverBorder = _ref.hoverBorder,
+    error = _ref.error,
+    errorMessage = _ref.errorMessage,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var inputRef = useRef(null);
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
-
   var _useState = useState(''),
-      _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 isControlledComponent = useMemo(function () {
     return value !== undefined;
   }, [value]);
@@ -84,40 +75,33 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var colors = useMemo(function () {
     return getColors(theme.palette, type, disabled);
   }, [theme.palette, type, disabled]);
-
   var changeHandler = function changeHandler(event) {
     if (disabled || readOnly) return;
     setSelfValue(event.target.value);
     onChange && onChange(event);
   };
-
   var clearHandler = function clearHandler(event) {
     setSelfValue('');
     onClearClick && onClearClick(event);
     /* istanbul ignore next */
-
     if (!inputRef.current) return;
     var changeEvent = simulateChangeEvent(inputRef.current, event);
     changeEvent.target.value = '';
     onChange && onChange(changeEvent);
     inputRef.current.focus();
   };
-
   var focusHandler = function focusHandler(e) {
     setHover(true);
     onFocus && onFocus(e);
   };
-
   var blurHandler = function blurHandler(e) {
     setHover(false);
     onBlur && onBlur(e);
   };
-
   var iconClickHandler = function iconClickHandler(e) {
     if (disabled) return;
     onIconClick && onIconClick(e);
   };
-
   var iconProps = useMemo(function () {
     return {
       clickable: iconClickable,
@@ -134,9 +118,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   } : {
     defaultValue: initialValue
   };
-
   var inputProps = _extends({}, props, controlledValue);
-
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2075686027", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]]]) + " " + "with-label"
   }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
@@ -158,8 +140,8 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onBlur: blurHandler,
     onChange: changeHandler,
     autoComplete: autoComplete
-  }, crossOrigin, inputProps, {
-    className: _JSXStyle.dynamic([["2075686027", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || crossOrigin && crossOrigin.className != null && crossOrigin.className || useClasses({
+  }, inputProps, {
+    className: _JSXStyle.dynamic([["2075686027", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
       disabled: disabled
     }, iconClasses) || "")
   })), clearable && /*#__PURE__*/React.createElement(InputClearIcon, {

package/esm/Input/InputBlockLabel.d.ts

@@ -3,7 +3,7 @@ export interface InputBlockLabelLabel {
     children?: ReactNode;
     error?: boolean;
 }
-declare function InputBlockLabelComponent({ children, error }: InputBlockLabelLabel): JSX.Element;
+declare function InputBlockLabelComponent({ children, error }: InputBlockLabelLabel): React.JSX.Element;
 declare namespace InputBlockLabelComponent {
     var displayName: string;
 }

package/esm/Input/InputBlockLabel.js

@@ -1,10 +1,9 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
-
 function InputBlockLabelComponent(_ref) {
   var children = _ref.children,
-      error = _ref.error;
+    error = _ref.error;
   var theme = useTheme();
   return /*#__PURE__*/React.createElement("label", {
     className: _JSXStyle.dynamic([["3520806922", [error ? theme.palette.error : theme.palette.accents_6, error ? 0 : '0.5em', error ? '0.2em' : 0, error ? '0.775rem' : '1em']]])
@@ -13,7 +12,6 @@ function InputBlockLabelComponent(_ref) {
     dynamic: [error ? theme.palette.error : theme.palette.accents_6, error ? 0 : '0.5em', error ? '0.2em' : 0, error ? '0.775rem' : '1em']
   }, "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(error ? theme.palette.error : theme.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:").concat(error ? 0 : '0.5em', ";margin-top:").concat(error ? '0.2em' : 0, ";font-size:").concat(error ? '0.775rem' : '1em', ";line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
 }
-
 InputBlockLabelComponent.displayName = 'BolioUIInputBlockLabel';
 var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
 export default InputBlockLabel;

package/esm/Input/InputIcon.d.ts

@@ -4,7 +4,7 @@ export interface InputIconProps {
     clickable?: boolean;
     onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
-declare function InputIconComponent({ icon, clickable, onClick }: InputIconProps): JSX.Element;
+declare function InputIconComponent({ icon, clickable, onClick }: InputIconProps): React.JSX.Element;
 declare namespace InputIconComponent {
     var displayName: string;
 }

package/esm/Input/InputIcon.js

@@ -1,10 +1,9 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-
 function InputIconComponent(_ref) {
   var icon = _ref.icon,
-      clickable = _ref.clickable,
-      onClick = _ref.onClick;
+    clickable = _ref.clickable,
+    onClick = _ref.onClick;
   return /*#__PURE__*/React.createElement("span", {
     onClick: onClick,
     className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon"
@@ -13,7 +12,6 @@ function InputIconComponent(_ref) {
     dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']
   }, ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-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;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
 }
-
 InputIconComponent.displayName = 'BolioUIInputIcon';
 var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
 export default InputIcon;

package/esm/Input/InputIconClear.d.ts

@@ -4,6 +4,6 @@ interface Props {
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
     disabled?: boolean;
 }
-declare function InputIconClear({ onClick, disabled, visible }: Props): JSX.Element;
+declare function InputIconClear({ onClick, disabled, visible }: Props): React.JSX.Element;
 declare const MemoInputIconClear: React.MemoExoticComponent<typeof InputIconClear>;
 export default MemoInputIconClear;

package/esm/Input/InputIconClear.js

@@ -1,24 +1,21 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
 import useClasses from '../use-classes';
-
 function InputIconClear(_ref) {
   var onClick = _ref.onClick,
-      disabled = _ref.disabled,
-      visible = _ref.visible;
+    disabled = _ref.disabled,
+    visible = _ref.visible;
   var theme = useTheme();
   var classes = useClasses('clear-icon', {
     visible: visible
   });
-
   var clickHandler = function clickHandler(event) {
     event.preventDefault();
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     onClick && onClick(event);
   };
-
   return /*#__PURE__*/React.createElement("div", {
     onClick: clickHandler,
     className: _JSXStyle.dynamic([["2817842826", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]]) + " " + (classes || "")
@@ -42,6 +39,5 @@ function InputIconClear(_ref) {
     dynamic: [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]
   }, ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-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;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme.palette.accents_3 : theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
 }
-
 var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
 export default MemoInputIconClear;

package/esm/Input/InputLabel.d.ts

@@ -3,6 +3,6 @@ export interface InputLabel {
     isRight?: boolean;
     children?: ReactNode;
 }
-declare function InputLabel({ children, isRight }: InputLabel): JSX.Element;
+declare function InputLabel({ children, isRight }: InputLabel): React.JSX.Element;
 declare const MemoInputLabel: React.MemoExoticComponent<typeof InputLabel>;
 export default MemoInputLabel;

package/esm/Input/InputLabel.js

@@ -1,10 +1,9 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
-
 function InputLabel(_ref) {
   var children = _ref.children,
-      isRight = _ref.isRight;
+    isRight = _ref.isRight;
   var theme = useTheme();
   return /*#__PURE__*/React.createElement("span", {
     className: _JSXStyle.dynamic([["839392656", [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border]]]) + " " + ((isRight ? 'right' : '') || "")
@@ -13,6 +12,5 @@ function InputLabel(_ref) {
     dynamic: [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border]
   }, "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:initial;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none;margin:0;padding:0 ".concat(theme.layout.gapHalf, ";color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_1, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-top:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";font-size:inherit;line-height:1;}span.right.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";border-left:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";}")));
 }
-
 var MemoInputLabel = /*#__PURE__*/React.memo(InputLabel);
 export default MemoInputLabel;

package/esm/Input/InputProps.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type InputTypes = NormalTypes;
-export declare type CrossOrigin = 'anonymous' | 'use-credentials' | '' | undefined;
+import { NormalTypes } from '../utils/prop-types';
+export type InputTypes = NormalTypes;
+export type CrossOrigin = 'anonymous' | 'use-credentials' | '' | undefined;
 export interface Props {
     value?: string;
     initialValue?: string;

package/esm/Input/Password.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import { Props } from "./InputProps";
+import { Props } from './InputProps';
 interface PasswordProps extends Props {
     hideToggle?: boolean;
 }
-declare type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof PasswordProps>;
-export declare type InputPasswordProps = PasswordProps & NativeAttrs;
-declare const InputPassword: React.ForwardRefExoticComponent<Pick<PasswordProps & NativeAttrs & React.RefAttributes<HTMLInputElement> & import("../use-scale").ScaleProps, "min" | "max" | "form" | "slot" | "style" | "title" | "pattern" | "children" | keyof import("../use-scale").ScaleProps | "list" | "src" | "alt" | "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" | "step" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "key" | "checked" | "accept" | "capture" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "required" | "size" | keyof PasswordProps> & React.RefAttributes<HTMLInputElement>>;
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof PasswordProps>;
+export type InputPasswordProps = PasswordProps & NativeAttrs;
+declare const InputPassword: import("../use-scale/with-scale").ScaleComponent<HTMLInputElement, PasswordProps & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
 export default InputPassword;

package/esm/Input/Password.js

@@ -7,41 +7,32 @@ import { defaultProps } from './InputProps';
 import PasswordIcon from './PasswordIcon';
 import Input from './Input';
 import { useScale, withScale } from '../use-scale';
-
 var passwordDefaultProps = _extends({}, defaultProps, {
   hideToggle: false
 });
-
 var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var hideToggle = _ref.hideToggle,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      getAllScaleProps = _useScale.getAllScaleProps;
-
+    getAllScaleProps = _useScale.getAllScaleProps;
   var inputRef = useRef(null);
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
-
   var iconClickHandler = function iconClickHandler() {
     setVisible(function (v) {
       return !v;
     });
     /* istanbul ignore next */
-
     if (inputRef && inputRef.current) {
       inputRef.current.focus();
     }
   };
-
   var inputProps = useMemo(function () {
     return _extends({}, props, {
       ref: inputRef,

package/esm/Input/PasswordIcon.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 interface Props {
     visible: boolean;
 }
-declare function PasswordIcon({ visible }: Props): JSX.Element;
+declare function PasswordIcon({ visible }: Props): React.JSX.Element;
 declare const MemoPasswordIcon: React.MemoExoticComponent<typeof PasswordIcon>;
 export default MemoPasswordIcon;

package/esm/Input/PasswordIcon.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 function PasswordIcon(_ref) {
   var visible = _ref.visible;
   return /*#__PURE__*/React.createElement("svg", {
@@ -25,6 +24,5 @@ function PasswordIcon(_ref) {
     d: "M1 1l22 22"
   })));
 }
-
 var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
 export default MemoPasswordIcon;

package/esm/Input/index.d.ts

@@ -1,13 +1,13 @@
-import Input from "./Input";
-import Textarea from "../Textarea";
-import InputPassword from "./Password";
-export declare type InputComponentType = typeof Input & {
+import Input from './Input';
+import Textarea from '../Textarea';
+import InputPassword from './Password';
+export type InputComponentType = typeof Input & {
     Textarea: typeof Textarea;
     Password: typeof InputPassword;
 };
-export type { InputProps } from "./Input";
-export type { InputTypes } from "./InputProps";
-export type { InputPasswordProps } from "./Password";
-export type { TextareaProps } from "../Textarea";
+export type { InputProps } from './Input';
+export type { InputTypes } from './InputProps';
+export type { InputPasswordProps } from './Password';
+export type { TextareaProps } from '../Textarea';
 declare const _default: InputComponentType;
 export default _default;

package/esm/Input/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Input from './Input';
 import Textarea from '../Textarea';
 import InputPassword from './Password';

package/esm/Input/styles.d.ts

@@ -1,9 +1,10 @@
-import { BolioUIThemesPalette } from "../Themes/Presets";
-export declare type InputColor = {
+import { NormalTypes } from '../utils/prop-types';
+import { BolioUIThemesPalette } from '../Themes/Presets';
+export type InputColor = {
     color: string;
     bgColor: string;
     borderColor: string;
     hoverBgColor: string;
     hoverBorder: string;
 };
-export declare const getColors: (palette: BolioUIThemesPalette, status?: "success" | "primary" | "secondary" | "error" | "warning" | "info" | "default" | undefined, disabled?: boolean | undefined, readOnly?: boolean | undefined) => InputColor;
+export declare const getColors: (palette: BolioUIThemesPalette, status?: NormalTypes, disabled?: boolean, readOnly?: boolean) => InputColor;

package/esm/Keyboard/Keyboard.d.ts

@@ -6,7 +6,9 @@ interface Props {
     ctrl?: boolean;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.KeygenHTMLAttributes<any>, keyof Props>;
-export declare type KeyboardProps = Props & NativeAttrs;
-declare const Keyboard: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.KeygenHTMLAttributes<any>, keyof Props>;
+export type KeyboardProps = Props & NativeAttrs;
+declare const Keyboard: import("../use-scale/with-scale").ScaleComponent<HTMLElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
 export default Keyboard;