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

package/esm/Select/SelectOption.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import { useSelectContext } from './SelectContext';
@@ -9,33 +9,28 @@ import useWarning from '../utils/use-warning';
 import Ellipsis from '../Shared/ellipsis';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 function SelectOptionComponent(_ref) {
   var _ref$value = _ref.value,
-      identValue = _ref$value === void 0 ? '' : _ref$value,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      children = _ref.children,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$divider = _ref.divider,
-      divider = _ref$divider === void 0 ? false : _ref$divider,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? false : _ref$label,
-      _ref$preventAllEvents = _ref.preventAllEvents,
-      preventAllEvents = _ref$preventAllEvents === void 0 ? false : _ref$preventAllEvents,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    identValue = _ref$value === void 0 ? '' : _ref$value,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$divider = _ref.divider,
+    divider = _ref$divider === void 0 ? false : _ref$divider,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? false : _ref$label,
+    _ref$preventAllEvents = _ref.preventAllEvents,
+    preventAllEvents = _ref$preventAllEvents === void 0 ? false : _ref$preventAllEvents,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useSelectContext = useSelectContext(),
-      updateValue = _useSelectContext.updateValue,
-      value = _useSelectContext.value,
-      disableAll = _useSelectContext.disableAll;
-
+    updateValue = _useSelectContext.updateValue,
+    value = _useSelectContext.value,
+    disableAll = _useSelectContext.disableAll;
   var isDisabled = useMemo(function () {
     return disabled || disableAll;
   }, [disabled, disableAll]);
@@ -46,19 +41,15 @@ function SelectOptionComponent(_ref) {
     divider: divider,
     label: label
   }, className);
-
   if (!isLabel && identValue === undefined) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useWarning('The props "value" is required.', 'Select Option');
   }
-
   var selected = useMemo(function () {
     if (!value) return false;
-
     if (typeof value === 'string') {
       return identValue === value;
     }
-
     return value.includes("".concat(identValue));
   }, [identValue, value]);
   var bgColor = useMemo(function () {
@@ -73,7 +64,6 @@ function SelectOptionComponent(_ref) {
     if (isDisabled) return theme.palette.accents_4;
     return selected ? theme.palette.foreground : theme.palette.accents_5;
   }, [selected, isDisabled, theme.palette]);
-
   var clickHandler = function clickHandler(event) {
     if (preventAllEvents) return;
     event.stopPropagation();
@@ -82,7 +72,6 @@ function SelectOptionComponent(_ref) {
     if (isDisabled || isLabel) return;
     updateValue && updateValue(identValue);
   };
-
   return /*#__PURE__*/React.createElement("div", _extends({
     onClick: clickHandler
   }, props, {
@@ -94,7 +83,6 @@ function SelectOptionComponent(_ref) {
     dynamic: [bgColor, color, isDisabled ? 'not-allowed' : 'pointer', SCALES.font(0.75), SCALES.width(1, '100%'), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.accents_3, SCALES.width(1, '100%'), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.accents_3, SCALES.font(0.875), SCALES.width(1, '100%')]
   }, ".option.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:normal;background-color:".concat(bgColor, ";color:").concat(color, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;--select-font-size:").concat(SCALES.font(0.75), ";font-size:var(--select-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(2.25), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.667), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.option.__jsx-style-dynamic-selector:hover{background-color:").concat(hoverBgColor, ";color:").concat(theme.palette.accents_7, ";}.divider.__jsx-style-dynamic-selector{line-height:0;overflow:hidden;border-top:1px solid ").concat(theme.palette.accents_3, ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0.5), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.5), " ").concat(SCALES.ml(0), ";}.label.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_7, ";border-bottom:1px solid ").concat(theme.palette.accents_3, ";text-transform:capitalize;cursor:default;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, '100%'), ";font-weight:500;}")));
 }
-
 SelectOptionComponent.displayName = 'BolioUISelectOption';
 var SelectOption = withScale(SelectOptionComponent);
 export default SelectOption;

package/esm/Select/index.d.ts

@@ -1,9 +1,9 @@
-import Select from "./Select";
-import SelectOption from "./SelectOption";
-export declare type SelectComponentType = typeof Select & {
+import Select from './Select';
+import SelectOption from './SelectOption';
+export type SelectComponentType = typeof Select & {
     Option: typeof SelectOption;
 };
-export type { SelectProps, SelectTypes, SelectRef } from "./Select";
-export type { SelectOptionProps } from "./SelectOption";
+export type { SelectProps, SelectTypes, SelectRef } from './Select';
+export type { SelectOptionProps } from './SelectOption';
 declare const _default: SelectComponentType;
 export default _default;

package/esm/Select/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Select from './Select';
 import SelectOption from './SelectOption';
 Select.Option = SelectOption;

package/esm/Select/styles.d.ts

@@ -1,9 +1,10 @@
-import { BolioUIThemesPalette } from "../Themes/Presets";
-export declare type SelectColor = {
+import { NormalTypes } from '../utils/prop-types';
+import { BolioUIThemesPalette } from '../Themes/Presets';
+export type SelectColor = {
     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) => SelectColor;
+export declare const getColors: (palette: BolioUIThemesPalette, status?: NormalTypes, disabled?: boolean) => SelectColor;

package/esm/Shared/backdrop.d.ts

@@ -15,9 +15,9 @@ declare const defaultProps: {
     positionClassName: string;
     layerClassName: string;
 };
-declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
-export declare type BackdropProps = Props & NativeAttrs;
-declare function BackdropComponent({ children, onClick, visible, width, onContentClick, backdropClassName, positionClassName, layerClassName, ...props }: React.PropsWithChildren<BackdropProps> & typeof defaultProps): JSX.Element;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export type BackdropProps = Props & NativeAttrs;
+declare function BackdropComponent({ children, onClick, visible, width, onContentClick, backdropClassName, positionClassName, layerClassName, ...props }: React.PropsWithChildren<BackdropProps> & typeof defaultProps): React.JSX.Element;
 declare namespace BackdropComponent {
     var defaultProps: {
         onClick: () => void;

package/esm/Shared/backdrop.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 = ["children", "onClick", "visible", "width", "onContentClick", "backdropClassName", "positionClassName", "layerClassName"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
 import CssTransition from './css-transition';
@@ -16,30 +16,25 @@ var defaultProps = {
   positionClassName: '',
   layerClassName: ''
 };
-
 function BackdropComponent(_ref) {
   var children = _ref.children,
-      onClick = _ref.onClick,
-      visible = _ref.visible,
-      width = _ref.width,
-      onContentClick = _ref.onContentClick,
-      backdropClassName = _ref.backdropClassName,
-      positionClassName = _ref.positionClassName,
-      layerClassName = _ref.layerClassName,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    onClick = _ref.onClick,
+    visible = _ref.visible,
+    width = _ref.width,
+    onContentClick = _ref.onContentClick,
+    backdropClassName = _ref.backdropClassName,
+    positionClassName = _ref.positionClassName,
+    layerClassName = _ref.layerClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useCurrentState = useCurrentState(false),
-      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-      setIsContentMouseDown = _useCurrentState2[1],
-      IsContentMouseDownRef = _useCurrentState2[2];
-
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    setIsContentMouseDown = _useCurrentState2[1],
+    IsContentMouseDownRef = _useCurrentState2[2];
   var clickHandler = function clickHandler(event) {
     if (IsContentMouseDownRef.current) return;
     onClick && onClick(event);
   };
-
   var mouseUpHandler = function mouseUpHandler() {
     if (!IsContentMouseDownRef.current) return;
     var timer = setTimeout(function () {
@@ -47,7 +42,6 @@ function BackdropComponent(_ref) {
       clearTimeout(timer);
     }, 0);
   };
-
   return /*#__PURE__*/React.createElement(CssTransition, {
     name: "backdrop-wrapper",
     visible: visible,
@@ -70,7 +64,6 @@ function BackdropComponent(_ref) {
     dynamic: [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]
   }, ".backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:1000;-webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;}.position.__jsx-style-dynamic-selector{position:relative;z-index:1001;outline:none;max-width:90%;width:".concat(width, ";margin:20px auto;vertical-align:middle;display:inline-block;}.backdrop.__jsx-style-dynamic-selector:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:").concat(theme.expressiveness.portalOpacity, ";background-color:black;-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:1000;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}"))));
 }
-
 BackdropComponent.defaultProps = defaultProps;
 BackdropComponent.displayName = 'BolioUIBackdrop';
 var Backdrop = /*#__PURE__*/React.memo(BackdropComponent);

package/esm/Shared/css-transition.d.ts

@@ -15,7 +15,7 @@ declare const defaultProps: {
     className: string;
     name: string;
 };
-export declare type CssTransitionProps = Props;
+export type CssTransitionProps = Props;
 declare function CssTransition({ children, className, visible, enterTime, leaveTime, clearTime, name, ...props }: React.PropsWithChildren<CssTransitionProps> & typeof defaultProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 declare namespace CssTransition {
     var defaultProps: {

package/esm/Shared/css-transition.js

@@ -11,48 +11,43 @@ var defaultProps = {
   className: '',
   name: 'transition'
 };
-
 function CssTransition(_ref) {
   var children = _ref.children,
-      className = _ref.className,
-      visible = _ref.visible,
-      enterTime = _ref.enterTime,
-      leaveTime = _ref.leaveTime,
-      clearTime = _ref.clearTime,
-      name = _ref.name,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    className = _ref.className,
+    visible = _ref.visible,
+    enterTime = _ref.enterTime,
+    leaveTime = _ref.leaveTime,
+    clearTime = _ref.clearTime,
+    name = _ref.name,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      classes = _useState2[0],
-      setClasses = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    classes = _useState2[0],
+    setClasses = _useState2[1];
   var _useState3 = useState(visible),
-      _useState4 = _slicedToArray(_useState3, 2),
-      renderable = _useState4[0],
-      setRenderable = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    renderable = _useState4[0],
+    setRenderable = _useState4[1];
   useEffect(function () {
     var statusClassName = visible ? 'enter' : 'leave';
     var time = visible ? enterTime : leaveTime;
-
     if (visible && !renderable) {
       setRenderable(true);
     }
+    setClasses("".concat(name, "-").concat(statusClassName));
 
-    setClasses("".concat(name, "-").concat(statusClassName)); // set class to active
-
+    // set class to active
     var timer = setTimeout(function () {
       setClasses("".concat(name, "-").concat(statusClassName, " ").concat(name, "-").concat(statusClassName, "-active"));
       clearTimeout(timer);
-    }, time); // remove classess when animation over
+    }, time);
 
+    // remove classess when animation over
     var clearClassesTimer = setTimeout(function () {
       if (!visible) {
         setClasses('');
         setRenderable(false);
       }
-
       clearTimeout(clearClassesTimer);
     }, time + clearTime);
     return function () {
@@ -61,11 +56,11 @@ function CssTransition(_ref) {
     };
   }, [visible, renderable]);
   if (! /*#__PURE__*/React.isValidElement(children) || !renderable) return null;
-  return /*#__PURE__*/React.cloneElement(children, _extends({}, props, {
-    className: "".concat(children.props.className, " ").concat(className, " ").concat(classes)
+  var element = children;
+  return /*#__PURE__*/React.cloneElement(element, _extends({}, props, {
+    className: "".concat(element.props.className, " ").concat(className, " ").concat(classes)
   }));
 }
-
 CssTransition.defaultProps = defaultProps;
 CssTransition.displayName = 'BolioUICssTransition';
 export default CssTransition;

package/esm/Shared/dropdown.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import usePortal from '../utils/use-portal';
@@ -18,40 +18,34 @@ var defaultRect = {
 };
 var Dropdown = /*#__PURE__*/React.memo(function (_ref) {
   var children = _ref.children,
-      parent = _ref.parent,
-      visible = _ref.visible,
-      disableMatchWidth = _ref.disableMatchWidth,
-      getPopupContainer = _ref.getPopupContainer;
+    parent = _ref.parent,
+    visible = _ref.visible,
+    disableMatchWidth = _ref.disableMatchWidth,
+    getPopupContainer = _ref.getPopupContainer;
   var el = usePortal('dropdown', getPopupContainer);
-
   var _useState = useState(defaultRect),
-      _useState2 = _slicedToArray(_useState, 2),
-      rect = _useState2[0],
-      setRect = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    rect = _useState2[0],
+    setRect = _useState2[1];
   var classes = useClasses('dropdown', disableMatchWidth ? 'disable-match' : 'width-match');
   if (!parent) return null;
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   if (process.env.NODE_ENV !== 'production') {
     if (getPopupContainer && getPopupContainer()) {
       var _el = getPopupContainer();
-
       var style = window.getComputedStyle(_el);
-
       if (style.position === 'static') {
         useWarning('The element specified by "getPopupContainer" must have "position" set.');
       }
     }
   }
-
   var updateRect = function updateRect() {
     var _getRefRect = getRefRect(parent, getPopupContainer),
-        top = _getRefRect.top,
-        left = _getRefRect.left,
-        right = _getRefRect.right,
-        nativeWidth = _getRefRect.width;
-
+      top = _getRefRect.top,
+      left = _getRefRect.left,
+      right = _getRefRect.right,
+      nativeWidth = _getRefRect.width;
     setRect({
       top: top,
       left: left,
@@ -59,13 +53,11 @@ var Dropdown = /*#__PURE__*/React.memo(function (_ref) {
       width: nativeWidth
     });
   };
-
   useResize(updateRect);
   useClickAnyWhere(function () {
     var _getRefRect2 = getRefRect(parent, getPopupContainer),
-        top = _getRefRect2.top,
-        left = _getRefRect2.left;
-
+      top = _getRefRect2.top,
+      left = _getRefRect2.left;
     var shouldUpdatePosition = top !== rect.top || left !== rect.left;
     if (!shouldUpdatePosition) return;
     updateRect();
@@ -77,25 +69,21 @@ var Dropdown = /*#__PURE__*/React.memo(function (_ref) {
     if (!parent || !parent.current) return;
     parent.current.addEventListener('mouseenter', updateRect);
     /* istanbul ignore next */
-
     return function () {
       if (!parent || !parent.current) return;
       parent.current.removeEventListener('mouseenter', updateRect);
     };
   }, [parent]);
-
   var clickHandler = function clickHandler(event) {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     event.preventDefault();
   };
-
   var mouseDownHandler = function mouseDownHandler(event) {
     event.preventDefault();
   };
-
   if (!el) return null;
-  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(CssTransition, {
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(CssTransition, {
     visible: visible
   }, /*#__PURE__*/React.createElement("div", {
     onClick: clickHandler,

package/esm/Shared/ellipsis.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type EllipsisProps = {
+export type EllipsisProps = {
     height: string;
 };
 declare const _default: React.NamedExoticComponent<React.PropsWithChildren<EllipsisProps>>;

package/esm/Shared/ellipsis.js

@@ -1,9 +1,8 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-
 var Ellipsis = function Ellipsis(_ref) {
   var children = _ref.children,
-      height = _ref.height;
+    height = _ref.height;
   return /*#__PURE__*/React.createElement("span", {
     className: _JSXStyle.dynamic([["822089635", [height]]])
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -11,5 +10,4 @@ var Ellipsis = function Ellipsis(_ref) {
     dynamic: [height]
   }, "span.__jsx-style-dynamic-selector{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:".concat(height, ";min-width:0;}")));
 };
-
 export default /*#__PURE__*/React.memo(Ellipsis);

package/esm/Shared/expand.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ExpandProps = {
+export type ExpandProps = {
     isExpanded?: boolean;
     delay?: number;
 };
@@ -7,7 +7,7 @@ declare const defaultProps: {
     isExpanded: boolean;
     delay: number;
 };
-declare function Expand({ isExpanded, delay, children }: React.PropsWithChildren<ExpandProps> & typeof defaultProps): JSX.Element;
+declare function Expand({ isExpanded, delay, children }: React.PropsWithChildren<ExpandProps> & typeof defaultProps): React.JSX.Element;
 declare namespace Expand {
     var defaultProps: {
         isExpanded: boolean;

package/esm/Shared/expand.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useRef, useState } from 'react';
 import useRealShape from '../utils/use-real-shape';
 import useClasses from '../use-classes';
@@ -7,37 +7,30 @@ var defaultProps = {
   isExpanded: false,
   delay: 200
 };
-
 function Expand(_ref) {
   var isExpanded = _ref.isExpanded,
-      delay = _ref.delay,
-      children = _ref.children;
-
+    delay = _ref.delay,
+    children = _ref.children;
   var _useState = useState(isExpanded ? 'auto' : '0'),
-      _useState2 = _slicedToArray(_useState, 2),
-      height = _useState2[0],
-      setHeight = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
   var _useState3 = useState(isExpanded),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selfExpanded = _useState4[0],
-      setSelfExpanded = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    selfExpanded = _useState4[0],
+    setSelfExpanded = _useState4[1];
   var _useState5 = useState(isExpanded),
-      _useState6 = _slicedToArray(_useState5, 2),
-      visible = _useState6[0],
-      setVisible = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    visible = _useState6[0],
+    setVisible = _useState6[1];
   var contentRef = useRef(null);
   var entryTimer = useRef();
   var leaveTimer = useRef();
   var resetTimer = useRef();
-
   var _useRealShape = useRealShape(contentRef),
-      _useRealShape2 = _slicedToArray(_useRealShape, 2),
-      state = _useRealShape2[0],
-      updateShape = _useRealShape2[1];
-
+    _useRealShape2 = _slicedToArray(_useRealShape, 2),
+    state = _useRealShape2[0],
+    updateShape = _useRealShape2[1];
   var classes = useClasses('container', {
     expanded: selfExpanded
   });
@@ -53,14 +46,15 @@ function Expand(_ref) {
     } else {
       updateShape();
       setHeight("".concat(state.height, "px"));
-    } // show expand animation
-
+    }
 
+    // show expand animation
     entryTimer.current = window.setTimeout(function () {
       setSelfExpanded(isExpanded);
       clearTimeout(entryTimer.current);
-    }, 30); // Reset height after animation
+    }, 30);
 
+    // Reset height after animation
     if (isExpanded) {
       resetTimer.current = window.setTimeout(function () {
         setHeight('auto');
@@ -72,7 +66,6 @@ function Expand(_ref) {
         clearTimeout(leaveTimer.current);
       }, delay / 2);
     }
-
     return function () {
       clearTimeout(entryTimer.current);
       clearTimeout(leaveTimer.current);
@@ -89,7 +82,6 @@ function Expand(_ref) {
     dynamic: [visible ? 'visible' : 'hidden', delay, height]
   }, ".container.__jsx-style-dynamic-selector{padding:0;margin:0;height:0;overflow:hidden;visibility:".concat(visible ? 'visible' : 'hidden', ";-webkit-transition:height ").concat(delay, "ms ease;transition:height ").concat(delay, "ms ease;}.expanded.__jsx-style-dynamic-selector{height:").concat(height, ";visibility:visible;}")));
 }
-
 Expand.defaultProps = defaultProps;
 Expand.displayName = 'BolioUIExpand';
 export default Expand;

package/esm/Shared/highlight.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import { ReactiveDomReact } from "../utils/layouts";
-declare type Props = {
+import { ReactiveDomReact } from '../utils/layouts';
+type Props = {
     rect: ReactiveDomReact;
     visible?: boolean;
     hoverHeightRatio?: number;
     hoverWidthRatio?: number;
     activeOpacity?: number;
 };
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type HighlightProps = Props & NativeAttrs;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type HighlightProps = Props & NativeAttrs;
 declare const Highlight: React.FC<HighlightProps>;
 export default Highlight;

package/esm/Shared/highlight.js

@@ -1,25 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["rect", "visible", "hoverHeightRatio", "hoverWidthRatio", "activeOpacity", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo, useRef } from 'react';
 import { isUnplacedRect } from '../utils/layouts';
 import usePrevious from '../utils/use-previous';
 import useTheme from '../use-theme';
 import useClasses from '../use-classes';
-
 var Highlight = function Highlight(_ref) {
   var rect = _ref.rect,
-      visible = _ref.visible,
-      _ref$hoverHeightRatio = _ref.hoverHeightRatio,
-      hoverHeightRatio = _ref$hoverHeightRatio === void 0 ? 1 : _ref$hoverHeightRatio,
-      _ref$hoverWidthRatio = _ref.hoverWidthRatio,
-      hoverWidthRatio = _ref$hoverWidthRatio === void 0 ? 1 : _ref$hoverWidthRatio,
-      _ref$activeOpacity = _ref.activeOpacity,
-      activeOpacity = _ref$activeOpacity === void 0 ? 0.8 : _ref$activeOpacity,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    visible = _ref.visible,
+    _ref$hoverHeightRatio = _ref.hoverHeightRatio,
+    hoverHeightRatio = _ref$hoverHeightRatio === void 0 ? 1 : _ref$hoverHeightRatio,
+    _ref$hoverWidthRatio = _ref.hoverWidthRatio,
+    hoverWidthRatio = _ref$hoverWidthRatio === void 0 ? 1 : _ref$hoverWidthRatio,
+    _ref$activeOpacity = _ref.activeOpacity,
+    activeOpacity = _ref$activeOpacity === void 0 ? 0.8 : _ref$activeOpacity,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var ref = useRef(null);
   var isFirstVisible = usePrevious(isUnplacedRect(rect));
@@ -43,5 +41,4 @@ var Highlight = function Highlight(_ref) {
     dynamic: [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition]
   }, ".highlight.__jsx-style-dynamic-selector{background:".concat(theme.palette.accents_2, ";position:absolute;border-radius:5px;width:").concat(position.width, ";left:").concat(position.left, ";height:").concat(position.height, ";top:").concat(position.top, ";opacity:").concat(visible ? activeOpacity : 0, ";-webkit-transition:0.15s ease;transition:0.15s ease;-webkit-transition-property:").concat(position.transition, ";transition-property:").concat(position.transition, ";}")));
 };
-
 export default Highlight;

package/esm/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type SliderTypes = NormalTypes;
+import { NormalTypes } from '../utils/prop-types';
+export type SliderTypes = NormalTypes;
 interface Props {
     hideValue?: boolean;
     value?: number;
@@ -14,7 +14,9 @@ interface Props {
     onChange?: (val: number) => void;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type SliderProps = Props & NativeAttrs;
-declare const Slider: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SliderProps = Props & NativeAttrs;
+declare const Slider: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Slider;