@bolio-ui/core 1.0.0

package/esm/shared/highlight.js

@@ -0,0 +1,47 @@
+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 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/index.js

@@ -0,0 +1,2 @@
+import Slider from './slider';
+export default Slider;

package/esm/slider/slider-dot.js

@@ -0,0 +1,27 @@
+import _JSXStyle from "../styled-jsx.es.js";
+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;
+  var theme = useTheme();
+  var classes = useClasses('dot', {
+    disabled: disabled,
+    click: isClick
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: _JSXStyle.dynamic([["1726643890", [left, theme.palette.primary, theme.palette.background, theme.palette.accents_2, theme.palette.accents_4]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1726643890",
+    dynamic: [left, theme.palette.primary, theme.palette.background, 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.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/slider-mark.js

@@ -0,0 +1,38 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _JSXStyle from "../styled-jsx.es.js";
+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/slider.js

@@ -0,0 +1,163 @@
+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

@@ -0,0 +1,134 @@
+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/slider/styles.js

@@ -0,0 +1,27 @@
+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];
+};

package/esm/snippet/index.js

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

package/esm/snippet/snippet-icon.js

@@ -0,0 +1,27 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+
+function SnippetIconComponent() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    style: {
+      color: 'currentcolor'
+    },
+    className: "jsx-418323402"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z",
+    className: "jsx-418323402"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "418323402"
+  }, "svg.jsx-418323402{width:calc(var(--snippet-font-size) * 1.69);height:calc(var(--snippet-font-size) * 1.69);}"));
+}
+
+SnippetIconComponent.displayName = 'BolioUISnippetIcon';
+var SnippetIcon = /*#__PURE__*/React.memo(SnippetIconComponent);
+export default SnippetIcon;

package/esm/snippet/snippet.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "filled", "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,
+      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([["2957719341", [style.color, style.bgColor, style.border, 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', 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([["2957719341", [style.color, style.bgColor, style.border, 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', theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
+    }, t);
+  }) : /*#__PURE__*/React.createElement("pre", {
+    ref: ref,
+    className: _JSXStyle.dynamic([["2957719341", [style.color, style.bgColor, style.border, 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', theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
+  }, children || text), showCopyIcon && /*#__PURE__*/React.createElement("div", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["2957719341", [style.color, style.bgColor, style.border, 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', theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + "copy"
+  }, /*#__PURE__*/React.createElement(SnippetIcon, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2957719341",
+    dynamic: [style.color, style.bgColor, style.border, 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', 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(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(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;