@bolio-ui/core 1.0.0

package/esm/checkbox/checkbox-group.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["disabled", "onChange", "value", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import { CheckboxContext } from './checkbox-context';
+import useWarning from '../utils/use-warning';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function CheckboxGroupComponent(_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selfVal = _useState2[0],
+      setSelfVal = _useState2[1];
+
+  var classes = useClasses('group', className);
+
+  if (!value) {
+    value = [];
+    useWarning('Props "value" is required.', 'Checkbox Group');
+  }
+
+  var updateState = function updateState(val, checked) {
+    var removed = selfVal.filter(function (v) {
+      return v !== val;
+    });
+    var next = checked ? [].concat(_toConsumableArray(removed), [val]) : removed;
+    setSelfVal(next);
+    onChange && onChange(next);
+  };
+
+  var providerValue = useMemo(function () {
+    return {
+      updateState: updateState,
+      disabledAll: disabled,
+      inGroup: true,
+      values: selfVal
+    };
+  }, [disabled, selfVal]);
+  useEffect(function () {
+    setSelfVal(value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement(CheckboxContext.Provider, {
+    value: providerValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2254703651", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.font(1), SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2254703651",
+    dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.font(1), SCALES.font(1)]
+  }, ".group.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.group.__jsx-style-dynamic-selector label{margin-right:calc(").concat(SCALES.font(1), " * 2);--checkbox-size:").concat(SCALES.font(1), ";}.group.__jsx-style-dynamic-selector label:last-of-type{margin-right:0;}"))));
+}
+
+CheckboxGroupComponent.displayName = 'BolioUICheckboxGroup';
+var CheckboxGroup = withScale(CheckboxGroupComponent);
+export default CheckboxGroup;

package/esm/checkbox/checkbox.icon.js

@@ -0,0 +1,50 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+
+function CheckboxIconComponent(_ref) {
+  var fill = _ref.fill,
+      bg = _ref.bg,
+      disabled = _ref.disabled,
+      checked = _ref.checked;
+  var theme = useTheme();
+
+  var _useMemo = useMemo(function () {
+    return {
+      propsFill: fill,
+      propsBg: bg
+    };
+  }, [bg, fill]),
+      propsFill = _useMemo.propsFill,
+      propsBg = _useMemo.propsBg;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, checked ? /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 17 16",
+    fill: "none",
+    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.1429 0H3.85714C1.7269 0 0 1.79086 0 4V12C0 14.2091 1.7269 16 3.85714 16H12.1429C14.2731 16 16 14.2091 16 12V4C16 1.79086 14.2731 0 12.1429 0Z",
+    fill: propsFill,
+    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 3L7.72491 11L5 8",
+    stroke: propsBg,
+    strokeWidth: "1.5",
+    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  })) : /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 12 12",
+    fill: "none",
+    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z",
+    stroke: theme.palette.accents_5,
+    className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "996181129",
+    dynamic: [disabled ? 0.4 : 1, disabled ? 'not-allowed' : 'pointer']
+  }, "svg.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(0.86 * var(--checkbox-size));height:calc(0.86 * var(--checkbox-size));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:".concat(disabled ? 0.4 : 1, ";cursor:").concat(disabled ? 'not-allowed' : 'pointer', ";}")));
+}
+
+CheckboxIconComponent.displayName = 'BolioUICheckboxIcon';
+var CheckboxIcon = /*#__PURE__*/React.memo(CheckboxIconComponent);
+export default CheckboxIcon;

package/esm/checkbox/checkbox.js

@@ -0,0 +1,114 @@
+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 = ["checked", "initialChecked", "disabled", "onChange", "className", "children", "type", "value"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCheckbox } from './checkbox-context';
+import CheckboxIcon from './checkbox.icon';
+import useWarning from '../utils/use-warning';
+import { getColors } from './styles';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function CheckboxComponent(_ref) {
+  var checked = _ref.checked,
+      _ref$initialChecked = _ref.initialChecked,
+      initialChecked = _ref$initialChecked === void 0 ? false : _ref$initialChecked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onChange = _ref.onChange,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState(initialChecked),
+      _useState2 = _slicedToArray(_useState, 2),
+      selfChecked = _useState2[0],
+      setSelfChecked = _useState2[1];
+
+  var _useCheckbox = useCheckbox(),
+      updateState = _useCheckbox.updateState,
+      inGroup = _useCheckbox.inGroup,
+      disabledAll = _useCheckbox.disabledAll,
+      values = _useCheckbox.values;
+
+  var isDisabled = inGroup ? disabledAll || disabled : disabled;
+  var classes = useClasses('checkbox', className);
+
+  if (inGroup && checked) {
+    useWarning('Remove props "checked" when [Checkbox] component is in the group.', 'Checkbox');
+  }
+
+  if (inGroup) {
+    useEffect(function () {
+      var next = values.includes(value);
+      if (next === selfChecked) return;
+      setSelfChecked(next);
+    }, [selfChecked, value, values]);
+  }
+
+  var _useMemo = useMemo(function () {
+    return getColors(theme.palette, type);
+  }, [theme.palette, type]),
+      fill = _useMemo.fill,
+      bg = _useMemo.bg;
+
+  var changeHandle = useCallback(function (ev) {
+    if (isDisabled) return;
+    var selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: ev.stopPropagation,
+      preventDefault: ev.preventDefault,
+      nativeEvent: ev
+    };
+
+    if (inGroup && updateState) {
+      updateState && updateState(value, !selfChecked);
+    }
+
+    setSelfChecked(!selfChecked);
+    onChange && onChange(selfEvent);
+  }, [isDisabled, selfChecked, inGroup, updateState, onChange, value]);
+  useEffect(function () {
+    if (checked === undefined) return;
+    setSelfChecked(checked);
+  }, [checked]);
+  return /*#__PURE__*/React.createElement("label", {
+    className: _JSXStyle.dynamic([["4063610472", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement(CheckboxIcon, {
+    fill: fill,
+    bg: bg,
+    disabled: isDisabled,
+    checked: selfChecked
+  }), /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    disabled: isDisabled,
+    checked: selfChecked,
+    onChange: changeHandle
+  }, props, {
+    className: _JSXStyle.dynamic([["4063610472", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + (props && props.className != null && props.className || "")
+  })), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4063610472", [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']]]) + " " + "text"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4063610472",
+    dynamic: [SCALES.font(0.875), isDisabled ? 'not-allowed' : 'pointer', isDisabled ? 0.75 : 1, SCALES.width(1, 'auto'), SCALES.height(1, 'var(--checkbox-size)'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? 'not-allowed' : 'pointer']
+  }, ".checkbox.__jsx-style-dynamic-selector{--checkbox-size:".concat(SCALES.font(0.875), ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";opacity:").concat(isDisabled ? 0.75 : 1, ";line-height:var(--checkbox-size);width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'var(--checkbox-size)'), ";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), ";}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}")));
+}
+
+CheckboxComponent.displayName = 'BolioUICheckbox';
+var Checkbox = withScale(CheckboxComponent);
+export default Checkbox;

package/esm/checkbox/index.js

@@ -0,0 +1,4 @@
+import Checkbox from './checkbox';
+import CheckboxGroup from './checkbox-group';
+Checkbox.Group = CheckboxGroup;
+export default Checkbox;

package/esm/checkbox/stories.js

@@ -0,0 +1,84 @@
+import Checkbox from '.';
+import Grid from '../grid';
+export default {
+  title: 'Data Entry/Checkbox',
+  component: Checkbox
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: true
+  }, "Check option")));
+};
+export var Scale = function Scale() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    mr: "15px",
+    checked: true,
+    scale: 0.25
+  }, "scale-0.25")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    mr: "15px",
+    checked: true,
+    scale: 0.5
+  }, "scale-0.5")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    mr: "15px",
+    checked: true,
+    scale: 0.75
+  }, "scale-0.75")));
+};
+export var Type = function Type() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: true,
+    type: "default"
+  }, "Checkbox Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: true,
+    type: "primary"
+  }, "Checkbox Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: true,
+    type: "secondary"
+  }, "Checkbox Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: true,
+    type: "success"
+  }, "Checkbox Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: true,
+    type: "warning"
+  }, "Checkbox Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: true,
+    type: "error"
+  }, "Checkbox Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: true,
+    type: "info"
+  }, "Checkbox Info")));
+};
+export var Disabled = function Disabled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, null, "Checkbox option")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox, {
+    disabled: true,
+    checked: true
+  }, "Checkbox option disabled")));
+};
+export var Group = function Group() {
+  var handler = function handler(value) {
+    console.log(value);
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Checkbox.Group, {
+    value: ['check3'],
+    onChange: handler
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    value: "check1"
+  }, "Checkbox option 1"), /*#__PURE__*/React.createElement(Checkbox, {
+    value: "check2"
+  }, "Checkbox option 2"), /*#__PURE__*/React.createElement(Checkbox, {
+    value: "check3"
+  }, "Checkbox option 3"), /*#__PURE__*/React.createElement(Checkbox, {
+    value: "check4"
+  }, "Checkbox option 4"))));
+};

package/esm/checkbox/styles.js

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

package/esm/code/code.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "block", "className", "name", "classic"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useScale, { withScale } from '../use-scale';
+import useTheme from '../use-theme';
+import { addColorAlpha } from '../utils/color';
+
+function CodeComponent(_ref) {
+  var children = _ref.children,
+      _ref$block = _ref.block,
+      block = _ref$block === void 0 ? false : _ref$block,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$classic = _ref.classic,
+      classic = _ref$classic === void 0 ? false : _ref$classic,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var theme = useTheme();
+
+  var _useMemo = useMemo(function () {
+    if (!classic) return {
+      border: theme.palette.accents_1,
+      background: addColorAlpha(theme.palette.accents_1, 0.75)
+    };
+    return {
+      border: theme.palette.accents_2,
+      background: theme.palette.background
+    };
+  }, [classic, theme.palette]),
+      background = _useMemo.background,
+      border = _useMemo.border;
+
+  if (!block) return /*#__PURE__*/React.createElement("code", props, children);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4255158627", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + "pre"
+  }, name && /*#__PURE__*/React.createElement("header", {
+    className: _JSXStyle.dynamic([["4255158627", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4255158627", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + "name"
+  }, name)), /*#__PURE__*/React.createElement("pre", _extends({}, props, {
+    className: _JSXStyle.dynamic([["4255158627", [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4255158627",
+    dynamic: [border, SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.mt(1.3), SCALES.mr(0), SCALES.mb(1.3), SCALES.ml(0), theme.layout.radius, background, SCALES.pt(1.1), SCALES.pr(1), SCALES.pb(1.1), SCALES.pl(1), theme.layout.radius, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_5, SCALES.font(0.8125), SCALES.font(0.32), SCALES.font(0.5), SCALES.font(0.32), SCALES.font(0.5), theme.layout.radius, theme.layout.radius]
+  }, ".pre.__jsx-style-dynamic-selector{max-width:100%;border:1px solid ".concat(border, ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(1.3), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(1.3), " ").concat(SCALES.ml(0), ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(background, ";}pre.__jsx-style-dynamic-selector{max-width:100%;font-size:inherit;border:none;margin:0;line-height:1.5em;padding:").concat(SCALES.pt(1.1), " ").concat(SCALES.pr(1), " ").concat(SCALES.pb(1.1), " ").concat(SCALES.pl(1), ";}.dark.__jsx-style-dynamic-selector{color:white;background:black;}.dark.__jsx-style-dynamic-selector code.__jsx-style-dynamic-selector{color:white;}header.__jsx-style-dynamic-selector{height:auto;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;border-radius:").concat(theme.layout.radius, ";background-color:transparent;}.name.__jsx-style-dynamic-selector{border:1px solid ").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_2, ";color:").concat(theme.palette.accents_5, ";height:auto;line-height:1.35em;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(0.8125), ";padding:").concat(SCALES.font(0.32), " ").concat(SCALES.font(0.5), " ").concat(SCALES.font(0.32), " ").concat(SCALES.font(0.5), ";width:auto;border-top-left-radius:calc(").concat(theme.layout.radius, " - 1px);border-bottom-right-radius:").concat(theme.layout.radius, ";}")));
+}
+
+CodeComponent.displayName = 'BolioUICode';
+var Code = withScale(CodeComponent);
+export default Code;

package/esm/code/index.js

@@ -0,0 +1,2 @@
+import Code from './code';
+export default Code;

package/esm/code/stories.js

@@ -0,0 +1,53 @@
+import Code from '.';
+import Text from '../text';
+import Grid from '../grid';
+import WaitTime from '../mdx-widgets/parsed-codes/wait-time';
+export default {
+  title: 'General/Code',
+  component: Code
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, {
+    my: 0
+  }, "Run ", /*#__PURE__*/React.createElement(Code, null, "npm i @bolio-ui/core"), " to install."), /*#__PURE__*/React.createElement(Text, {
+    my: 0
+  }, "Or run ", /*#__PURE__*/React.createElement(Code, null, "yarn add @bolio-ui/core"), " to install.")));
+};
+export var Block = function Block() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Code, {
+    block: true,
+    my: 0
+  }, /*#__PURE__*/React.createElement(WaitTime, null))));
+};
+export var Width = function Width() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Code, {
+    block: true,
+    width: "50%",
+    my: 0
+  }, /*#__PURE__*/React.createElement(WaitTime, null))));
+};
+export var Name = function Name() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Code, {
+    block: true,
+    name: "/Components/WaitTime.jsx",
+    my: 0
+  }, /*#__PURE__*/React.createElement(WaitTime, null))));
+};
+export var Classic = function Classic() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Code, {
+    block: true,
+    classic: true,
+    name: "/Components/WaitTime.jsx",
+    my: 0
+  }, /*#__PURE__*/React.createElement(WaitTime, null))));
+};

package/esm/col/col.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["component", "children", "span", "offset", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+
+function Col(_ref) {
+  var _ref$component = _ref.component,
+      component = _ref$component === void 0 ? 'div' : _ref$component,
+      children = _ref.children,
+      _ref$span = _ref.span,
+      span = _ref$span === void 0 ? 12 : _ref$span,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? 0 : _ref$offset,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var Component = component;
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    className: _JSXStyle.dynamic([["2614916236", [100 / 12 * span, 100 / 12 * offset]]]) + " " + (props && props.className != null && props.className || "col ".concat(className))
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2614916236",
+    dynamic: [100 / 12 * span, 100 / 12 * offset]
+  }, ".col.__jsx-style-dynamic-selector{float:left;box-sizing:border-box;padding-left:calc(var(--row-gap) / 2);padding-right:calc(var(--row-gap) / 2);width:".concat(100 / 12 * span, "%;margin-left:").concat(100 / 12 * offset, "%;}")));
+}
+
+Col.displayName = 'BolioUICol';
+export default Col;

package/esm/col/index.js

@@ -0,0 +1,2 @@
+import Col from './col';
+export default Col;

package/esm/collapse/collapse-context.js

@@ -0,0 +1,8 @@
+import React from 'react';
+var defaultContext = {
+  values: []
+};
+export var CollapseContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useCollapseContext = function useCollapseContext() {
+  return React.useContext(CollapseContext);
+};

package/esm/collapse/collapse-group.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "accordion", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import Collapse from './collapse';
+import useCurrentState from '../utils/use-current-state';
+import { setChildrenIndex } from '../utils/collections';
+import { CollapseContext } from './collapse-context';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function CollapseGroupComponent(_ref) {
+  var children = _ref.children,
+      _ref$accordion = _ref.accordion,
+      accordion = _ref$accordion === void 0 ? true : _ref$accordion,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useCurrentState = useCurrentState([]),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      state = _useCurrentState2[0],
+      setState = _useCurrentState2[1],
+      stateRef = _useCurrentState2[2];
+
+  var classes = useClasses('collapse-group', className);
+
+  var updateValues = function updateValues(currentIndex, nextState) {
+    var hasChild = stateRef.current.find(function (val) {
+      return val === currentIndex;
+    });
+
+    if (accordion) {
+      if (nextState) return setState([currentIndex]);
+      return setState([]);
+    }
+
+    if (nextState) {
+      if (hasChild) return;
+      return setState([].concat(_toConsumableArray(stateRef.current), [currentIndex]));
+    }
+
+    setState(stateRef.current.filter(function (item) {
+      return item !== currentIndex;
+    }));
+  };
+
+  var initialValue = useMemo(function () {
+    return {
+      values: state,
+      updateValues: updateValues
+    };
+  }, [state.join(',')]);
+  var hasIndexChildren = useMemo(function () {
+    return setChildrenIndex(children, [Collapse]);
+  }, [children]);
+  return /*#__PURE__*/React.createElement(CollapseContext.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1712563073", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.6), SCALES.pb(0), SCALES.pl(0.6), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), hasIndexChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1712563073",
+    dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.6), SCALES.pb(0), SCALES.pl(0.6), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, ".collapse-group.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.6), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.6), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.collapse-group.__jsx-style-dynamic-selector>div + div{border-top:none;}"))));
+}
+
+CollapseGroupComponent.displayName = 'BolioUICollapseGroup';
+var CollapseGroup = withScale(CollapseGroupComponent);
+export default CollapseGroup;

package/esm/collapse/collapse-icon.js

@@ -0,0 +1,28 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+
+function CollapseIcon(_ref) {
+  var active = _ref.active;
+  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: _JSXStyle.dynamic([["2249786880", [active ? '-180deg' : '0']]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 9l6 6 6-6",
+    className: _JSXStyle.dynamic([["2249786880", [active ? '-180deg' : '0']]])
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2249786880",
+    dynamic: [active ? '-180deg' : '0']
+  }, "svg.__jsx-style-dynamic-selector{-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;-webkit-transform:rotateZ(".concat(active ? '-180deg' : '0', ");-ms-transform:rotateZ(").concat(active ? '-180deg' : '0', ");transform:rotateZ(").concat(active ? '-180deg' : '0', ");width:1.5em;height:1.5em;}")));
+}
+
+var MemoCollapseIcon = /*#__PURE__*/React.memo(CollapseIcon);
+export default MemoCollapseIcon;