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

package/esm/Shared/backdrop.js

@@ -1,70 +0,0 @@
-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/style";
-import React from 'react';
-import useTheme from '../use-theme';
-import CssTransition from './css-transition';
-import useCurrentState from '../utils/use-current-state';
-import useClasses from '../use-classes';
-var defaultProps = {
-  onClick: function onClick() {},
-  visible: false,
-  // onContentClick: () => {},
-  backdropClassName: '',
-  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);
-  var theme = useTheme();
-  var _useCurrentState = useCurrentState(false),
-    _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 () {
-      setIsContentMouseDown(false);
-      clearTimeout(timer);
-    }, 0);
-  };
-  return /*#__PURE__*/React.createElement(CssTransition, {
-    name: "backdrop-wrapper",
-    visible: visible,
-    clearTime: 300
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    onClick: clickHandler,
-    onMouseUp: mouseUpHandler
-  }, props, {
-    className: _JSXStyle.dynamic([["1944751280", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (props && props.className != null && props.className || useClasses('backdrop', backdropClassName) || "")
-  }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1944751280", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('layer', layerClassName) || "")
-  }), /*#__PURE__*/React.createElement("div", {
-    onClick: onContentClick,
-    onMouseDown: function onMouseDown() {
-      return setIsContentMouseDown(true);
-    },
-    className: _JSXStyle.dynamic([["1944751280", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('position', positionClassName) || "")
-  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1944751280",
-    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);
-export default Backdrop;

package/esm/Shared/css-transition.js

@@ -1,66 +0,0 @@
-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", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
-import React, { useEffect, useState } from 'react';
-var defaultProps = {
-  visible: false,
-  enterTime: 60,
-  leaveTime: 60,
-  clearTime: 60,
-  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);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    classes = _useState2[0],
-    setClasses = _useState2[1];
-  var _useState3 = useState(visible),
-    _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));
-
-    // 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
-    var clearClassesTimer = setTimeout(function () {
-      if (!visible) {
-        setClasses('');
-        setRenderable(false);
-      }
-      clearTimeout(clearClassesTimer);
-    }, time + clearTime);
-    return function () {
-      clearTimeout(timer);
-      clearTimeout(clearClassesTimer);
-    };
-  }, [visible, renderable]);
-  if (! /*#__PURE__*/React.isValidElement(children) || !renderable) return null;
-  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,97 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import usePortal from '../utils/use-portal';
-import useResize from '../utils/use-resize';
-import CssTransition from './css-transition';
-import useClickAnyWhere from '../utils/use-click-anywhere';
-import useDOMObserver from '../utils/use-dom-observer';
-import useWarning from '../utils/use-warning';
-import { getRefRect } from '../utils/layouts';
-import useClasses from '../use-classes';
-var defaultRect = {
-  top: -1000,
-  left: -1000,
-  right: -1000,
-  width: 0
-};
-var Dropdown = /*#__PURE__*/React.memo(function (_ref) {
-  var children = _ref.children,
-    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];
-  var classes = useClasses('dropdown', disableMatchWidth ? 'disable-match' : 'width-match');
-  if (!parent) return null;
-
-  /* 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;
-    setRect({
-      top: top,
-      left: left,
-      right: right,
-      width: nativeWidth
-    });
-  };
-  useResize(updateRect);
-  useClickAnyWhere(function () {
-    var _getRefRect2 = getRefRect(parent, getPopupContainer),
-      top = _getRefRect2.top,
-      left = _getRefRect2.left;
-    var shouldUpdatePosition = top !== rect.top || left !== rect.left;
-    if (!shouldUpdatePosition) return;
-    updateRect();
-  });
-  useDOMObserver(parent, function () {
-    updateRect();
-  });
-  useEffect(function () {
-    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, {
-    visible: visible
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: clickHandler,
-    onMouseDown: mouseDownHandler,
-    className: _JSXStyle.dynamic([["1644673105", [rect.top + 2, rect.left, rect.width, rect.width]]]) + " " + (classes || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1644673105",
-    dynamic: [rect.top + 2, rect.left, rect.width, rect.width]
-  }, ".dropdown.__jsx-style-dynamic-selector{position:absolute;top:".concat(rect.top + 2, "px;left:").concat(rect.left, "px;z-index:1100;}.width-match.__jsx-style-dynamic-selector{width:").concat(rect.width, "px;}.disable-match.__jsx-style-dynamic-selector{min-width:").concat(rect.width, "px;}")))), el);
-});
-export default Dropdown;

package/esm/Shared/ellipsis.js

@@ -1,13 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-import React from 'react';
-var Ellipsis = function Ellipsis(_ref) {
-  var children = _ref.children,
-    height = _ref.height;
-  return /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["822089635", [height]]])
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "822089635",
-    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.js

@@ -1,87 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-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';
-var defaultProps = {
-  isExpanded: false,
-  delay: 200
-};
-function Expand(_ref) {
-  var isExpanded = _ref.isExpanded,
-    delay = _ref.delay,
-    children = _ref.children;
-  var _useState = useState(isExpanded ? 'auto' : '0'),
-    _useState2 = _slicedToArray(_useState, 2),
-    height = _useState2[0],
-    setHeight = _useState2[1];
-  var _useState3 = useState(isExpanded),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selfExpanded = _useState4[0],
-    setSelfExpanded = _useState4[1];
-  var _useState5 = useState(isExpanded),
-    _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];
-  var classes = useClasses('container', {
-    expanded: selfExpanded
-  });
-  useEffect(function () {
-    return setHeight("".concat(state.height, "px"));
-  }, [state.height]);
-  useEffect(function () {
-    // show element or reset height.
-    // force an update once manually, even if the element does not change.
-    // (the height of the element might be "auto")
-    if (isExpanded) {
-      setVisible(isExpanded);
-    } else {
-      updateShape();
-      setHeight("".concat(state.height, "px"));
-    }
-
-    // show expand animation
-    entryTimer.current = window.setTimeout(function () {
-      setSelfExpanded(isExpanded);
-      clearTimeout(entryTimer.current);
-    }, 30);
-
-    // Reset height after animation
-    if (isExpanded) {
-      resetTimer.current = window.setTimeout(function () {
-        setHeight('auto');
-        clearTimeout(resetTimer.current);
-      }, delay);
-    } else {
-      leaveTimer.current = window.setTimeout(function () {
-        setVisible(isExpanded);
-        clearTimeout(leaveTimer.current);
-      }, delay / 2);
-    }
-    return function () {
-      clearTimeout(entryTimer.current);
-      clearTimeout(leaveTimer.current);
-      clearTimeout(resetTimer.current);
-    };
-  }, [isExpanded]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + (classes || "")
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: contentRef,
-    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + "content"
-  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1918690829",
-    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.js

@@ -1,44 +0,0 @@
-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/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);
-  var theme = useTheme();
-  var ref = useRef(null);
-  var isFirstVisible = usePrevious(isUnplacedRect(rect));
-  var position = useMemo(function () {
-    var width = rect.width * hoverWidthRatio;
-    var height = rect.height * hoverHeightRatio;
-    return {
-      width: "".concat(width, "px"),
-      left: "".concat(rect.left + (rect.width - width) / 2, "px"),
-      height: "".concat(height, "px"),
-      top: "".concat(rect.elementTop + (rect.height - height) / 2, "px"),
-      transition: isFirstVisible ? 'opacity' : 'opacity, width, left, top'
-    };
-  }, [rect, hoverWidthRatio, hoverHeightRatio]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["603024321", [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition]]]) + " " + (props && props.className != null && props.className || useClasses('highlight', className) || "")
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "603024321",
-    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.js

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

package/esm/Slider/SliderDot.js

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

package/esm/Slider/SliderMark.js

@@ -1,35 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _JSXStyle from "styled-jsx/style";
-import React, { useMemo } from 'react';
-import useTheme from '../use-theme';
-var getMarks = function getMarks(min, max, step) {
-  var value = max - min;
-  var roundFunc = !(value % step) ? Math.floor : Math.ceil;
-  var count = roundFunc(value / step) - 1;
-  if (count >= 99) return [];
-  return _toConsumableArray(new Array(count)).map(function (_, index) {
-    return step * (index + 1) * 100 / value;
-  });
-};
-function SliderMark(_ref) {
-  var step = _ref.step,
-    max = _ref.max,
-    min = _ref.min;
-  var theme = useTheme();
-  var marks = useMemo(function () {
-    return getMarks(min, max, step);
-  }, [min, max, step]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, marks.map(function (val, index) {
-    return /*#__PURE__*/React.createElement("span", {
-      key: "".concat(val, "-").concat(index),
-      style: {
-        left: "".concat(val, "%")
-      },
-      className: _JSXStyle.dynamic([["324900419", [theme.palette.background]]])
-    });
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "324900419",
-    dynamic: [theme.palette.background]
-  }, "span.__jsx-style-dynamic-selector{position:absolute;width:2px;height:100%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:".concat(theme.palette.background, ";}")));
-}
-export default SliderMark;

package/esm/Slider/styles.js

@@ -1,27 +0,0 @@
-export var getColors = function getColors(palette, status) {
-  var colors = {
-    "default": {
-      bg: palette.accents_8
-    },
-    primary: {
-      bg: palette.primary
-    },
-    secondary: {
-      bg: palette.secondary
-    },
-    success: {
-      bg: palette.success
-    },
-    warning: {
-      bg: palette.warning
-    },
-    error: {
-      bg: palette.error
-    },
-    info: {
-      bg: palette.info
-    }
-  };
-  if (!status) return colors["default"];
-  return colors[status];
-};