@bolio-ui/core 1.0.3 → 1.0.5

package/dist/Tooltip/placement.d.ts

@@ -0,0 +1,29 @@
+import { Placement } from "../utils/prop-types";
+interface ParentDomRect {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface TooltipPosition {
+    top: string;
+    left: string;
+    transform: string;
+}
+export declare const defaultTooltipPosition: {
+    top: string;
+    left: string;
+    transform: string;
+};
+export interface TooltipIconPosition {
+    top: string;
+    left: string;
+    right: string;
+    bottom: string;
+    transform: string;
+}
+export declare const getPosition: (placement: Placement, rect: ParentDomRect, offset: number) => TooltipPosition;
+export declare const getIconPosition: (placement: Placement, offsetX: string, offsetY: string, offsetAbsolute?: string) => TooltipIconPosition;
+export {};

package/dist/Tooltip/styles.d.ts

@@ -0,0 +1,7 @@
+import { SnippetTypes } from "../utils/prop-types";
+import { BolioUIThemesPalette } from "../Themes/Presets";
+export declare type TooltipColors = {
+    bgColor: string;
+    color: string;
+};
+export declare const getColors: (type: SnippetTypes, palette: BolioUIThemesPalette) => TooltipColors;

package/dist/index.d.ts

@@ -0,0 +1,125 @@
+export { default as Avatar } from "./Avatar";
+export type { AvatarProps, AvatarGroupProps } from "./Avatar";
+export { default as Badge } from "./Badge";
+export type { BadgeProps, BadgeAnchorProps } from "./Badge";
+export { default as BolioUIProvider } from "./BolioUIProvider";
+export type { BolioUIProviderProps } from "./BolioUIProvider";
+export { default as Breadcrumbs } from "./Breadcrumbs";
+export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbsSeparatorProps } from "./Breadcrumbs";
+export { default as Button } from "./Button";
+export type { ButtonProps } from "./Button";
+export { default as ButtonDropdown } from "./ButtonDropdown";
+export type { ButtonDropdownProps, ButtonDropdownItemProps } from "./ButtonDropdown";
+export { default as ButtonGroup } from "./ButtonGroup";
+export type { ButtonGroupProps } from "./ButtonGroup";
+export { default as Capacity } from "./Capacity";
+export type { CapacityProps } from "./Capacity";
+export { default as Card } from "./Card";
+export type { CardProps, CardContentProps, CardFooterProps } from "./Card";
+export { default as Checkbox } from "./Checkbox";
+export type { CheckboxProps, CheckboxGroupProps } from "./Checkbox";
+export { default as Code } from "./Code";
+export type { CodeProps } from "./Code";
+export { default as Col } from "./Col";
+export type { ColProps } from "./Col";
+export { default as Collapse } from "./Collapse";
+export type { CollapseProps, CollapseGroupProps } from "./Collapse";
+export { default as Container } from "./Container";
+export type { ContainerProps } from "./Container";
+export { default as Description } from "./Description";
+export type { DescriptionProps } from "./Description";
+export { default as Display } from "./Display";
+export type { DisplayProps } from "./Display";
+export { default as Divider } from "./Divider";
+export type { DividerProps } from "./Divider";
+export { default as Dot } from "./Dot";
+export type { DotProps } from "./Dot";
+export { default as Drawer } from "./Drawer";
+export type { DrawerProps } from "./Drawer";
+export { default as Fieldset } from "./Fieldset";
+export type { FieldsetProps, FieldsetTitleProps, FieldsetSubtitleProps, FieldsetGroupProps, FieldsetFooterProps, FieldsetContentProps } from "./Fieldset";
+export { default as Grid } from "./Grid";
+export type { GridProps, GridContainerProps } from "./Grid";
+export { default as Image } from "./Image";
+export type { ImageProps, ImageBrowserProps } from "./Image";
+export { default as Input } from "./Input";
+export type { InputProps, InputPasswordProps } from "./Input";
+export { default as Keyboard } from "./Keyboard";
+export type { KeyboardProps } from "./Keyboard";
+export { default as Link } from "./Link";
+export type { LinkProps } from "./Link";
+export { default as Loading } from "./Loading";
+export type { LoadingProps } from "./Loading";
+export { default as Modal } from "./Modal";
+export type { ModalProps, ModalTitleProps, ModalSubtitleProps, ModalContentProps, ModalActionProps } from "./Modal";
+export { default as Note } from "./Note";
+export type { NoteProps } from "./Note";
+export { default as Page } from "./Page";
+export type { PageProps, PageHeaderProps, PageContentProps, PageFooterProps } from "./Page";
+export { default as Pagination } from "./Pagination";
+export type { PaginationProps, PaginationNextProps, PaginationPreviousProps } from "./Pagination";
+export { default as Popover } from "./Popover";
+export type { PopoverProps, PopoverItemProps } from "./Popover";
+export { default as Progress } from "./Progress";
+export type { ProgressProps } from "./Progress";
+export { default as Radio } from "./Radio";
+export type { RadioProps, RadioGroupProps, RadioDescriptionProps } from "./Radio";
+export { default as Rating } from "./Rating";
+export type { RatingProps } from "./Rating";
+export { default as Row } from "./Row";
+export type { RowProps } from "./Row";
+export { default as Section } from "./Section";
+export type { SectionProps } from "./Section";
+export { default as Select } from "./Select";
+export type { SelectProps, SelectOptionProps } from "./Select";
+export { default as Slider } from "./Slider";
+export type { SliderProps } from "./Slider";
+export { default as Snippet } from "./Snippet";
+export type { SnippetProps } from "./Snippet";
+export { default as Spacer } from "./Spacer";
+export type { SpacerProps } from "./Spacer";
+export { default as Spinner } from "./Spinner";
+export type { SpinnerProps } from "./Spinner";
+export { default as Table } from "./Table";
+export type { TableProps, TableColumnProps } from "./Table";
+export { default as Tabs } from "./Tabs";
+export type { TabsProps } from "./Tabs";
+export { default as Tag } from "./Tag";
+export type { TagProps } from "./Tag";
+export { default as Text } from "./Text";
+export type { TextProps } from "./Text";
+export { default as Textarea } from "./Textarea";
+export type { TextareaProps } from "./Textarea";
+export { default as Themes } from "./Themes";
+export type { BolioUIThemes, BolioUIUserTheme } from "./Themes";
+export { default as Toggle } from "./Toggle";
+export type { ToggleProps } from "./Toggle";
+export { default as Tooltip } from "./Tooltip";
+export type { TooltipProps } from "./Tooltip";
+export { default as useAllThemes } from "./use-all-themes";
+export type { AllThemesConfig } from "./use-all-themes";
+export { default as useToasts } from "./use-toasts";
+export type { Toast, ToastInput, ToastAction, ToastLayout } from "./use-toasts";
+export { default as useBodyScroll } from "./use-body-scroll";
+export type { BodyScrollOptions } from "./use-body-scroll";
+export { default as useClipboard } from "./use-clipboard";
+export type { UseClipboardOptions } from "./use-clipboard";
+export { default as useMediaQuery } from "./use-media-query";
+export type { ResponsiveOptions, ResponsiveBreakpoint } from "./use-media-query";
+export { default as useKeyboard, KeyMod, KeyCode } from "./use-keyboard";
+export type { KeyboardOptions, UseKeyboardHandler } from "./use-keyboard";
+export { default as useInput } from "./use-input";
+export { default as useModal } from "./use-modal";
+export { default as useTabs } from "./use-tabs";
+export { default as useClickAway } from "./use-click-away";
+export { default as useCurrentState } from "./use-current-state";
+export { default as CssBaseline } from "./CssBaseline";
+export { default as useTheme } from "./use-theme";
+export { default as useClasses } from "./use-classes";
+export { default as useScale } from "./use-scale";
+export { withScale, ScalePropKeys, ScaleContext } from "./use-scale";
+export type { ScaleProps, ScaleConfig, GetScalePropsFunction, GetAllScalePropsFunction } from "./use-scale";
+export { useRect } from "./utils/layouts";
+export type { ReactiveDomReact } from "./utils/layouts";
+export { default as Highlight } from "./Shared/highlight";
+export type { HighlightProps } from "./Shared/highlight";

package/dist/index.js

@@ -302,7 +302,7 @@ var palette$1 = {
   accents_8: '#111',
   selection: '#cee4fe',
   code: '#C25FFF',
-  border: '#eaeaea',
+  border: '#999',
   primary: '#0072F6',
   primaryLight: '#96C1F3',
   primaryLighter: '#CEE4FF',
@@ -369,7 +369,7 @@ var palette = {
   accents_8: '#fafafa',
   selection: '#f81ce5',
   code: '#C25FFF',
-  border: '#333',
+  border: '#444',
   primary: '#0072F6',
   primaryLight: '#96C1F3',
   primaryLighter: '#CEE4FF',
@@ -888,16 +888,6 @@ var useClasses = function useClasses() {
 
 var useClasses$1 = useClasses;
 
-var transformDataSource$1 = function transformDataSource(src) {
-  var left = "".concat(src).slice(0, 4);
-
-  if (encodeURIComponent(left) === '%3Csvg') {
-    return "data:image/svg+xml;utf8,".concat(src);
-  }
-
-  return src;
-};
-
 var _excluded$1i = ["src", "stacked", "text", "isSquare", "className"];
 
 var safeText = function safeText(text) {
@@ -942,9 +932,6 @@ function AvatarComponent(_ref) {
       setShowSkeleton = _useState4[1];
 
   var imageRef = React.useRef(null);
-  React.useMemo(function () {
-    return transformDataSource$1(src);
-  }, [src]);
 
   var imageLoaded = function imageLoaded() {
     if (!showAnimation) return;
@@ -1317,7 +1304,7 @@ var usePortal = function usePortal() {
 var usePortal$1 = usePortal;
 
 var _excluded$1g = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
-var defaultProps$e = {
+var defaultProps$f = {
   visible: false,
   enterTime: 60,
   leaveTime: 60,
@@ -1380,10 +1367,10 @@ function CssTransition(_ref) {
   }));
 }
 
-CssTransition.defaultProps = defaultProps$e;
+CssTransition.defaultProps = defaultProps$f;
 CssTransition.displayName = 'BolioUICssTransition';
 
-var defaultProps$d = {
+var defaultProps$e = {
   x: 0,
   y: 0
 };
@@ -1435,7 +1422,7 @@ var ButtonDrip = function ButtonDrip(_ref) {
   }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
 };
 
-ButtonDrip.defaultProps = defaultProps$d;
+ButtonDrip.defaultProps = defaultProps$e;
 ButtonDrip.displayName = 'BolioUItButtonDrip';
 var ButtonDrip$1 = ButtonDrip;
 
@@ -1858,7 +1845,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
 };
 
 var _excluded$1d = ["children", "disabled", "type", "loading", "shadow", "ghost", "rounded", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className"];
-var defaultProps$c = {
+var defaultProps$d = {
   type: 'default',
   htmlType: 'button',
   ghost: false,
@@ -1986,7 +1973,7 @@ var ButtonComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     dynamic: [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]
   }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";font-weight:500;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? '0 4px 10px 0' + bg : 'none', ";--bolio-ui-button-icon-padding:").concat(SCALES.pl(0.75), ";--bolio-ui-button-height:").concat(SCALES.height(2.5), ";--bolio-ui-button-color:").concat(color, ";--bolio-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--bolio-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";}.btn.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.98,0.98);-ms-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
 });
-ButtonComponent.defaultProps = defaultProps$c;
+ButtonComponent.defaultProps = defaultProps$d;
 ButtonComponent.displayName = 'BolioUIButton';
 var Button = withScale$1(ButtonComponent);
 var Button$1 = Button;
@@ -2718,7 +2705,7 @@ var ButtonDropdown$1 = ButtonDropdown;
 ButtonDropdown$1.Item = ButtonDropdownItem;
 
 var _excluded$18 = ["disabled", "type", "ghost", "vertical", "children", "className"];
-var defaultProps$b = {
+var defaultProps$c = {
   disabled: false,
   vertical: false,
   ghost: false,
@@ -2780,7 +2767,7 @@ function ButtonGroupComponent(groupProps) {
   }, ".btn-group.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(border, ";background-color:transparent;overflow:hidden;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'min-content'), ";margin:").concat(SCALES.mt(0.313), " ").concat(SCALES.mr(0.313), " ").concat(SCALES.mb(0.313), " ").concat(SCALES.ml(0.313), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.vertical.__jsx-style-dynamic-selector{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.btn-group.__jsx-style-dynamic-selector .btn{border:none;}.btn-group.__jsx-style-dynamic-selector .btn .text{top:0;}.horizontal.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid ").concat(border, ";}.horizontal.__jsx-style-dynamic-selector .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;}.vertical.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid ").concat(border, ";}.vertical.__jsx-style-dynamic-selector .btn:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;}"))));
 }
 
-ButtonGroupComponent.defaultProps = defaultProps$b;
+ButtonGroupComponent.defaultProps = defaultProps$c;
 ButtonGroupComponent.displayName = 'BolioUIButtonGroup';
 var ButtonGroup = withScale$1(ButtonGroupComponent);
 var ButtonGroup$1 = ButtonGroup;
@@ -3187,17 +3174,20 @@ var ImageBrowser$1 = ImageBrowser;
 Image$1.Browser = ImageBrowser$1;
 
 var _excluded$11 = ["children", "hoverable", "rounded", "className", "shadow", "type"];
+var defaultProps$b = {
+  type: 'default',
+  hoverable: false,
+  shadow: false,
+  className: ''
+};
 
 function CardComponent(_ref) {
   var children = _ref.children,
-      _ref$hoverable = _ref.hoverable,
-      hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
-      _ref$rounded = _ref.rounded,
-      rounded = _ref$rounded === void 0 ? false : _ref$rounded,
+      hoverable = _ref.hoverable,
+      rounded = _ref.rounded,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      _ref$shadow = _ref.shadow,
-      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+      shadow = _ref.shadow,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
       props = _objectWithoutProperties(_ref, _excluded$11);
@@ -3216,8 +3206,8 @@ function CardComponent(_ref) {
     return getStyles$1(type, theme.palette, shadow);
   }, [type, theme.palette, shadow]),
       color = _useMemo.color,
-      bgColor = _useMemo.bgColor;
-      _useMemo.borderColor;
+      bgColor = _useMemo.bgColor,
+      borderColor = _useMemo.borderColor;
 
   var _pickChild = pickChild(children, CardFooter$1),
       _pickChild2 = _slicedToArray(_pickChild, 2),
@@ -3231,15 +3221,14 @@ function CardComponent(_ref) {
 
   var hasContent = hasChild(withoutImageChildren, CardContent$1);
   return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
-    className: styledJsx_cjs.style.dynamic([["470877697", [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
-  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React__default["default"].createElement(CardContent$1, {
-    className: "card"
-  }, withoutImageChildren), footerChildren, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "470877697",
-    dynamic: [rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
-  }, ".card.__jsx-style-dynamic-selector{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
+    className: styledJsx_cjs.style.dynamic([["1209748169", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
+  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React__default["default"].createElement(CardContent$1, null, withoutImageChildren), footerChildren, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
+    id: "1209748169",
+    dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
+  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
 }
 
+CardComponent.defaultProps = defaultProps$b;
 CardComponent.displayName = 'BolioUICard';
 var Card = withScale$1(CardComponent);
 var Card$1 = Card;
@@ -5304,7 +5293,7 @@ var defaultProps$6 = {
   initialValue: ''
 };
 
-var _excluded$C = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor"];
+var _excluded$C = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor", "borderColor"];
 
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
@@ -5337,6 +5326,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
       disabled = _ref.disabled,
       rounded = _ref.rounded,
       backgroundColor = _ref.backgroundColor,
+      borderColor = _ref.borderColor,
       props = _objectWithoutProperties(_ref, _excluded$C);
 
   var theme = useTheme();
@@ -5372,9 +5362,9 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
   var _useMemo = React.useMemo(function () {
     return getColors$6(theme.palette, type);
   }, [theme.palette, type]),
-      color = _useMemo.color;
-      _useMemo.borderColor;
-      var hoverBorder = _useMemo.hoverBorder;
+      color = _useMemo.color,
+      borderColorThemed = _useMemo.borderColor,
+      hoverBorder = _useMemo.hoverBorder;
 
   var changeHandler = function changeHandler(event) {
     if (disabled || readOnly) return;
@@ -5429,11 +5419,11 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
   var inputProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["363116299", [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, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
+    className: styledJsx_cjs.style.dynamic([["2780775675", [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 : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
   }, children && /*#__PURE__*/React__default["default"].createElement(InputBlockLabel$1, null, children), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["363116299", [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, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-container', className) || "")
+    className: styledJsx_cjs.style.dynamic([["2780775675", [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 : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-container', className) || "")
   }, label && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, null, label), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styledJsx_cjs.style.dynamic([["363116299", [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, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-wrapper', {
+    className: styledJsx_cjs.style.dynamic([["2780775675", [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 : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-wrapper', {
       hover: hover,
       disabled: disabled
     }, labelClasses) || "")
@@ -5450,7 +5440,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
     onChange: changeHandler,
     autoComplete: autoComplete
   }, inputProps, {
-    className: styledJsx_cjs.style.dynamic([["363116299", [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, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses$1({
+    className: styledJsx_cjs.style.dynamic([["2780775675", [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 : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses$1({
       disabled: disabled
     }, iconClasses) || "")
   })), clearable && /*#__PURE__*/React__default["default"].createElement(InputClearIcon, {
@@ -5462,9 +5452,9 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
   }, iconProps))), labelRight && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, {
     isRight: true
   }, labelRight)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "363116299",
-    dynamic: [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, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
-  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.accents_2, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
+    id: "2780775675",
+    dynamic: [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 : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
+  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";border:1px solid ").concat(borderColor ? borderColor : borderColorThemed, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.accents_2, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
 });
 InputComponent.defaultProps = defaultProps$6;
 InputComponent.displayName = 'BolioUIInput';

package/dist/use-all-themes/all-themes-context.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BolioUIThemes } from "../Themes/Presets";
+export declare type AllThemesConfig = {
+    themes: Array<BolioUIThemes>;
+};
+export declare const AllThemesContext: React.Context<AllThemesConfig>;
+export declare const useAllThemes: () => AllThemesConfig;

package/dist/use-all-themes/index.d.ts

@@ -0,0 +1,3 @@
+import { useAllThemes } from "./all-themes-context";
+export type { AllThemesConfig } from "./all-themes-context";
+export default useAllThemes;

package/dist/use-all-themes/index.js

@@ -115,7 +115,7 @@ var palette$1 = {
   accents_8: '#111',
   selection: '#cee4fe',
   code: '#C25FFF',
-  border: '#eaeaea',
+  border: '#999',
   primary: '#0072F6',
   primaryLight: '#96C1F3',
   primaryLighter: '#CEE4FF',
@@ -182,7 +182,7 @@ var palette = {
   accents_8: '#fafafa',
   selection: '#f81ce5',
   code: '#C25FFF',
-  border: '#333',
+  border: '#444',
   primary: '#0072F6',
   primaryLight: '#96C1F3',
   primaryLighter: '#CEE4FF',

package/dist/use-body-scroll/index.d.ts

@@ -0,0 +1,3 @@
+import useBodyScroll from "./use-body-scroll";
+export type { BodyScrollOptions } from "./use-body-scroll";
+export default useBodyScroll;

package/dist/use-body-scroll/use-body-scroll.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+export declare type ElementStackItem = {
+    overflow: string;
+    paddingRight: string;
+};
+export declare type BodyScrollOptions = {
+    scrollLayer?: boolean;
+    delayReset?: number;
+};
+declare function useBodyScroll(elementRef?: RefObject<HTMLElement> | null, options?: BodyScrollOptions): [boolean, Dispatch<SetStateAction<boolean>>];
+export default useBodyScroll;

package/dist/use-classes/index.d.ts

@@ -0,0 +1,2 @@
+import { default as useClasses } from "./use-classes";
+export default useClasses;

package/dist/use-classes/use-classes.d.ts

@@ -0,0 +1,4 @@
+export declare type classNamesObject = Record<string, boolean | string | number | null | undefined>;
+export declare type className = string | classNamesObject | null | undefined | boolean | number;
+declare const useClasses: (...classNames: Array<className>) => string;
+export default useClasses;

package/dist/use-click-away/index.d.ts

@@ -0,0 +1,2 @@
+import useClickAway from "./use-click-away";
+export default useClickAway;

package/dist/use-click-away/use-click-away.d.ts

@@ -0,0 +1,4 @@
+import { MutableRefObject } from 'react';
+export declare type ClickAwayGetContainer = () => HTMLElement | null;
+declare const useClickAway: (ref: MutableRefObject<HTMLElement | null>, handler: (event: Event) => void) => void;
+export default useClickAway;

package/dist/use-clipboard/index.d.ts

@@ -0,0 +1,3 @@
+import useClipboard from "./use-clipboard";
+export type { UseClipboardOptions, UseClipboardResult } from "./use-clipboard";
+export default useClipboard;

package/dist/use-clipboard/use-clipboard.d.ts

@@ -0,0 +1,8 @@
+export declare type UseClipboardOptions = {
+    onError: () => unknown;
+};
+export declare type UseClipboardResult = {
+    copy: (text: string) => void;
+};
+declare const useClipboard: (options?: UseClipboardOptions) => UseClipboardResult;
+export default useClipboard;

package/dist/use-current-state/index.d.ts

@@ -0,0 +1,2 @@
+import useCurrentState from "./use-current-state";
+export default useCurrentState;

package/dist/use-current-state/use-current-state.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+export declare type CurrentStateType<S> = [
+    S,
+    Dispatch<SetStateAction<S>>,
+    MutableRefObject<S>
+];
+declare const useCurrentState: <S>(initialState: S | (() => S)) => CurrentStateType<S>;
+export default useCurrentState;

package/dist/use-input/index.d.ts

@@ -0,0 +1,3 @@
+import useInput from "./use-input";
+export type { BindingsChangeTarget } from "./use-input";
+export default useInput;

package/dist/use-input/use-input.d.ts

@@ -0,0 +1,13 @@
+import React, { Dispatch, MutableRefObject, SetStateAction } from 'react';
+export declare type BindingsChangeTarget = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string;
+declare const useInput: (initialValue: string) => {
+    state: string;
+    setState: Dispatch<SetStateAction<string>>;
+    currentRef: MutableRefObject<string>;
+    reset: () => void;
+    bindings: {
+        value: string;
+        onChange: (event: BindingsChangeTarget) => void;
+    };
+};
+export default useInput;