@bolio-ui/core 1.0.4 → 1.0.6

package/esm/slider/slider.js

@@ -1,163 +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"];
-import _JSXStyle from "../styled-jsx.es.js";
-import React, { useCallback, useEffect, 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 './slider-dot';
-import SliderMark from './slider-mark';
-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));
-};
-
-function SliderComponent(_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,
-      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);
-  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 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([["1938095908", [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
-  }, hideValue || value), showMarkers && /*#__PURE__*/React.createElement(SliderMark, {
-    max: max,
-    min: min,
-    step: step
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1938095908",
-    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/stories.js

@@ -1,134 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
-import Slider from '.';
-import Grid from '../grid';
-export default {
-  title: 'Data Entry/Slider',
-  component: Slider
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    initialValue: 40
-  })));
-};
-export var Type = function Type() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    initialValue: 40
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    type: "primary",
-    initialValue: 20
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    type: "secondary",
-    initialValue: 70
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    type: "success",
-    initialValue: 60
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    type: "warning",
-    initialValue: 10
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    type: "error",
-    initialValue: 80
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    type: "info",
-    initialValue: 90
-  })));
-};
-export var Disabled = function Disabled() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    initialValue: 50,
-    disabled: true
-  })));
-};
-export var Markers = function Markers() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    step: 10,
-    showMarkers: true,
-    width: "75%"
-  })));
-};
-export var Range = function Range() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    step: 5,
-    max: 50,
-    min: 10,
-    initialValue: 25,
-    showMarkers: true,
-    width: "75%"
-  })), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    step: 0.2,
-    max: 1,
-    min: 0.2,
-    initialValue: 0.4,
-    showMarkers: true,
-    width: "75%"
-  })));
-};
-export var Event = function Event() {
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var handler = function handler(val) {
-    console.log(val);
-    setValue(val);
-  };
-
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    md: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    value: value,
-    onChange: handler,
-    width: "50%"
-  })));
-};

package/esm/snippet/index.js

@@ -1,2 +0,0 @@
-import Snippet from './snippet';
-export default Snippet;

package/esm/snippet/snippet.js

@@ -1,102 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "filled", "rounded", "children", "symbol", "toastText", "toastType", "text", "copy", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
-import React, { useMemo, useRef } from 'react';
-import useTheme from '../use-theme';
-import { getStyles } from './styles';
-import SnippetIcon from './snippet-icon';
-import useClipboard from '../utils/use-clipboard';
-import useToasts from '../use-toasts';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-
-var textArrayToString = function textArrayToString(text) {
-  return text.reduce(function (pre, current) {
-    if (!current) return pre;
-    return pre ? "".concat(pre, "\n").concat(current) : current;
-  }, '');
-};
-
-function SnippetComponent(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'default' : _ref$type,
-      _ref$filled = _ref.filled,
-      filled = _ref$filled === void 0 ? false : _ref$filled,
-      _ref$rounded = _ref.rounded,
-      rounded = _ref$rounded === void 0 ? false : _ref$rounded,
-      children = _ref.children,
-      _ref$symbol = _ref.symbol,
-      symbol = _ref$symbol === void 0 ? '$' : _ref$symbol,
-      _ref$toastText = _ref.toastText,
-      toastText = _ref$toastText === void 0 ? 'Copied!' : _ref$toastText,
-      _ref$toastType = _ref.toastType,
-      toastType = _ref$toastType === void 0 ? 'primary' : _ref$toastType,
-      text = _ref.text,
-      copyType = _ref.copy,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var theme = useTheme();
-
-  var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
-  var _useClipboard = useClipboard(),
-      copy = _useClipboard.copy;
-
-  var _useToasts = useToasts(),
-      setToast = _useToasts.setToast;
-
-  var ref = useRef(null);
-  var isMultiLine = text && Array.isArray(text);
-  var style = useMemo(function () {
-    return getStyles(type, theme.palette, filled);
-  }, [type, theme.palette, filled]);
-  var showCopyIcon = useMemo(function () {
-    return copyType !== 'prevent';
-  }, [copyType]);
-  var childText = useMemo(function () {
-    if (isMultiLine) return textArrayToString(text);
-    if (!children) return text;
-    if (!ref.current) return '';
-    return ref.current.textContent;
-  }, [isMultiLine, text, children]);
-  var symbolBefore = useMemo(function () {
-    var str = symbol.trim();
-    return str ? "".concat(str, " ") : '';
-  }, [symbol]);
-
-  var clickHandler = function clickHandler() {
-    if (!childText || !showCopyIcon) return;
-    copy(childText);
-    if (copyType === 'silent') return;
-    setToast({
-      text: toastText,
-      type: toastType
-    });
-  };
-
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + (props && props.className != null && props.className || useClasses('snippet', className) || "")
-  }), isMultiLine ? text.map(function (t, index) {
-    return /*#__PURE__*/React.createElement("pre", {
-      key: "snippet-".concat(index, "-").concat(t),
-      className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
-    }, t);
-  }) : /*#__PURE__*/React.createElement("pre", {
-    ref: ref,
-    className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
-  }, children || text), showCopyIcon && /*#__PURE__*/React.createElement("div", {
-    onClick: clickHandler,
-    className: _JSXStyle.dynamic([["1826028201", [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + "copy"
-  }, /*#__PURE__*/React.createElement(SnippetIcon, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1826028201",
-    dynamic: [style.color, style.bgColor, style.border, rounded ? '25px' : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', rounded ? '25px' : theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]
-  }, ".snippet.__jsx-style-dynamic-selector{position:relative;max-width:100%;color:".concat(style.color, ";background-color:").concat(style.bgColor, ";border:1px solid ").concat(style.border, ";border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";--snippet-font-size:").concat(SCALES.font(0.8125), ";--snippet-padding-top:").concat(SCALES.pt(0.667), ";font-size:var(--snippet-font-size);width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.667), " ").concat(SCALES.pr(2.667), " ").concat(SCALES.pb(0.667), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:").concat(style.color, ";font-size:inherit;}pre.__jsx-style-dynamic-selector::before{content:'").concat(symbolBefore, "';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:0;bottom:0;background-color:").concat(style.bgColor, ";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:").concat(isMultiLine ? 'flex-start' : 'center', ";-webkit-box-align:").concat(isMultiLine ? 'flex-start' : 'center', ";-ms-flex-align:").concat(isMultiLine ? 'flex-start' : 'center', ";align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";width:calc(3.281 * var(--snippet-font-size));color:inherit;-webkit-transition:opacity 150ms ease 0s;transition:opacity 150ms ease 0s;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:").concat(isMultiLine ? 'var(--snippet-padding-top)' : 0, ";opacity:0.65;}.copy.__jsx-style-dynamic-selector:hover{opacity:1;}")));
-}
-
-SnippetComponent.displayName = 'BolioUISnippet';
-var Snippet = withScale(SnippetComponent);
-export default Snippet;

package/esm/snippet/stories.js

@@ -1,177 +0,0 @@
-import Snippet from '.';
-import Grid from '../grid';
-export default {
-  title: 'Others/Snippet',
-  component: Snippet
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    width: "300px"
-  })));
-};
-export var Width = function Width() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    width: "100%"
-  })));
-};
-export var Types = function Types() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "primary",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "secondary",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "success",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "warning",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "error",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "secondary",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "lite",
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "dark",
-    width: "300px"
-  })));
-};
-export var Rounded = function Rounded() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "primary",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "secondary",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "success",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "warning",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "error",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "lite",
-    width: "300px",
-    rounded: true
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "dark",
-    width: "300px",
-    rounded: true
-  })));
-};
-export var Multiline = function Multiline() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: ['cd project', 'now'],
-    width: "300px"
-  })));
-};
-export var DisabledCopy = function DisabledCopy() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    copy: "prevent",
-    text: "yarn add @bolio-ui/core",
-    width: "300px"
-  })));
-};
-export var CustomSymbol = function CustomSymbol() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    symbol: ">",
-    text: "yarn add @bolio-ui/core",
-    width: "300px"
-  })));
-};
-export var CustomToast = function CustomToast() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    toastText: "Code copied!",
-    toastType: "secondary",
-    text: "yarn add @bolio-ui/core",
-    width: "300px"
-  })));
-};
-export var Filled = function Filled() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "primary",
-    filled: true,
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "secondary",
-    filled: true,
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "success",
-    filled: true,
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "warning",
-    filled: true,
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "error",
-    filled: true,
-    width: "300px"
-  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Snippet, {
-    text: "yarn add @bolio-ui/core",
-    type: "info",
-    filled: true,
-    width: "300px"
-  })));
-};

package/esm/spacer/index.js

@@ -1,2 +0,0 @@
-import Spacer from './spacer';
-export default Spacer;

package/esm/spacer/stories.js

@@ -1,54 +0,0 @@
-import Spacer from '.';
-import Grid from '../grid';
-export default {
-  title: 'Layout/Spacer',
-  component: Spacer
-};
-export var Vertical = function Vertical() {
-  return /*#__PURE__*/React.createElement(Grid.Container, null, /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    style: {
-      background: '#444',
-      borderRadius: '15px'
-    }
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    h: 2
-  })), /*#__PURE__*/React.createElement(Spacer, {
-    h: 2
-  }), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    style: {
-      background: '#666',
-      borderRadius: '15px'
-    }
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    h: 3
-  })), /*#__PURE__*/React.createElement(Spacer, {
-    h: 3
-  }), /*#__PURE__*/React.createElement(Grid, {
-    xs: 12,
-    style: {
-      background: '#999',
-      borderRadius: '15px'
-    }
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    h: 4
-  })));
-};
-export var Horizontal = function Horizontal() {
-  return /*#__PURE__*/React.createElement(Grid.Container, null, /*#__PURE__*/React.createElement(Grid, {
-    xs: 4,
-    style: {
-      background: '#444',
-      borderRadius: '15px'
-    }
-  }), /*#__PURE__*/React.createElement(Spacer, {
-    w: 5
-  }), /*#__PURE__*/React.createElement(Grid, {
-    xs: 4,
-    style: {
-      background: '#444',
-      borderRadius: '15px'
-    }
-  }));
-};

package/esm/spinner/index.js

@@ -1,2 +0,0 @@
-import Spinner from './spinner';
-export default Spinner;

package/esm/spinner/stories.js

@@ -1,13 +0,0 @@
-import Spinner from '.';
-import Grid from '../grid';
-export default {
-  title: 'Feedback/Spinner',
-  component: Spinner
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Spinner, {
-    scale: 2
-  })));
-};

package/esm/table/index.js

@@ -1,2 +0,0 @@
-import Table from './table';
-export default Table;