@bolio-ui/core 1.0.0

package/esm/drawer/drawer-wrapper.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children", "visible", "placement"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef } from 'react';
+import useScale from '../use-scale';
+import useTheme from '../use-theme';
+import CssTransition from '../shared/css-transition';
+import { isChildElement } from '../utils/collections';
+import { getDrawerTransform } from './helper';
+import useClasses from '../use-classes';
+
+function DrawerWrapper(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children,
+      _ref$visible = _ref.visible,
+      visible = _ref$visible === void 0 ? false : _ref$visible,
+      placement = _ref.placement,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var modalContent = useRef(null);
+  var tabStart = useRef(null);
+  var tabEnd = useRef(null);
+  var transform = useMemo(function () {
+    return getDrawerTransform(placement);
+  }, [placement]);
+  var classes = useClasses('wrapper', placement, className);
+  useEffect(function () {
+    if (!visible) return;
+    var activeElement = document.activeElement;
+    var isChild = isChildElement(modalContent.current, activeElement);
+    if (isChild) return;
+    tabStart.current && tabStart.current.focus();
+  }, [visible]);
+
+  var onKeyDown = function onKeyDown(event) {
+    var isTabDown = event.keyCode === 9;
+    if (!visible || !isTabDown) return;
+    var activeElement = document.activeElement;
+
+    if (event.shiftKey) {
+      if (activeElement === tabStart.current) {
+        tabEnd.current && tabEnd.current.focus();
+      }
+    } else {
+      if (activeElement === tabEnd.current) {
+        tabStart.current && tabStart.current.focus();
+      }
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(CssTransition, {
+    name: "wrapper",
+    visible: visible,
+    clearTime: 300
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    role: "dialog",
+    tabIndex: -1,
+    onKeyDown: onKeyDown,
+    ref: modalContent
+  }, props, {
+    className: _JSXStyle.dynamic([["1322120384", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    "aria-hidden": "true",
+    ref: tabStart,
+    className: _JSXStyle.dynamic([["1322120384", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + "hide-tab start"
+  }), children, /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    "aria-hidden": "true",
+    ref: tabEnd,
+    className: _JSXStyle.dynamic([["1322120384", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + "hide-tab end"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1322120384",
+    dynamic: [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.width(1, 'auto'), SCALES.height(1, '100%'), transform.hidden, transform.visible, transform.visible, transform.hidden]
+  }, ".wrapper.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;max-width:100%;vertical-align:middle;overflow:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";border-radius:calc(3 * ").concat(theme.layout.radius, ");box-shadow:").concat(theme.expressiveness.shadowLarge, ";opacity:0;outline:none;-webkit-transform:").concat(transform.initial, ";-ms-transform:").concat(transform.initial, ";transform:").concat(transform.initial, ";-webkit-transition:opacity,-webkit-transform 400ms cubic-bezier(0.1,0.6,0.1,1);-webkit-transition:opacity,transform 400ms cubic-bezier(0.1,0.6,0.1,1);transition:opacity,transform 400ms cubic-bezier(0.1,0.6,0.1,1);font-size:").concat(SCALES.font(1), ";--modal-wrapper-padding-left:").concat(SCALES.pl(1.3125), ";--modal-wrapper-padding-right:").concat(SCALES.pr(1.3125), ";padding:").concat(SCALES.pt(1.3125), " var(--modal-wrapper-padding-right) ").concat(SCALES.pb(1.3125), " var(--modal-wrapper-padding-left);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.top.__jsx-style-dynamic-selector,.bottom.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";}.left.__jsx-style-dynamic-selector,.right.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, '100%'), ";}.top.__jsx-style-dynamic-selector{bottom:auto;border-top-left-radius:0;border-top-right-radius:0;}.left.__jsx-style-dynamic-selector{right:auto;border-top-left-radius:0;border-bottom-left-radius:0;}.bottom.__jsx-style-dynamic-selector{top:auto;border-bottom-left-radius:0;border-bottom-right-radius:0;}.right.__jsx-style-dynamic-selector{left:auto;border-top-right-radius:0;border-bottom-right-radius:0;}.wrapper-enter.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:").concat(transform.hidden, ";-ms-transform:").concat(transform.hidden, ";transform:").concat(transform.hidden, ";}.wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:").concat(transform.visible, ";-ms-transform:").concat(transform.visible, ";transform:").concat(transform.visible, ";}.wrapper-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:").concat(transform.visible, ";-ms-transform:").concat(transform.visible, ";transform:").concat(transform.visible, ";-webkit-transition:opacity,-webkit-transform 400ms cubic-bezier(0.1,0.2,0.1,1);-webkit-transition:opacity,transform 400ms cubic-bezier(0.1,0.2,0.1,1);transition:opacity,transform 400ms cubic-bezier(0.1,0.2,0.1,1);}.wrapper-leave-active.__jsx-style-dynamic-selector{opacity:0.4;-webkit-transform:").concat(transform.hidden, ";-ms-transform:").concat(transform.hidden, ";transform:").concat(transform.hidden, ";}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}"))));
+}
+
+DrawerWrapper.displayName = 'BolioUIDrawerWrapper';
+export default DrawerWrapper;

package/esm/drawer/drawer.js

@@ -0,0 +1,77 @@
+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 = ["visible", "keyboard", "disableBackdropClick", "wrapClassName", "children", "placement", "onClose", "onContentClick"];
+import React, { useEffect, useState } from 'react';
+import { withScale } from '../use-scale';
+import usePortal from '../utils/use-portal';
+import useBodyScroll from '../utils/use-body-scroll';
+import useKeyboard, { KeyCode } from '../use-keyboard';
+import { createPortal } from 'react-dom';
+import Backdrop from '../shared/backdrop';
+import DrawerWrapper from './drawer-wrapper';
+
+function DrawerComponent(_ref) {
+  var customVisible = _ref.visible,
+      keyboard = _ref.keyboard,
+      disableBackdropClick = _ref.disableBackdropClick,
+      wrapClassName = _ref.wrapClassName,
+      children = _ref.children,
+      placement = _ref.placement,
+      onClose = _ref.onClose,
+      onContentClick = _ref.onContentClick,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var portal = usePortal('drawer');
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var _useBodyScroll = useBodyScroll(null, {
+    delayReset: 300
+  }),
+      _useBodyScroll2 = _slicedToArray(_useBodyScroll, 2),
+      setBodyHidden = _useBodyScroll2[1];
+
+  var closeDrawer = function closeDrawer() {
+    onClose && onClose();
+    setVisible(false);
+    setBodyHidden(false);
+  };
+
+  useEffect(function () {
+    if (typeof customVisible === 'undefined') return;
+    setVisible(customVisible);
+    setBodyHidden(customVisible);
+  }, [customVisible, setBodyHidden]);
+
+  var _useKeyboard = useKeyboard(function () {
+    keyboard && closeDrawer();
+  }, KeyCode.Escape, {
+    disableGlobalEvent: true
+  }),
+      bindings = _useKeyboard.bindings;
+
+  var closeFromBackdrop = function closeFromBackdrop() {
+    if (disableBackdropClick) return;
+    closeDrawer();
+  };
+
+  if (!portal) return null;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Backdrop, _extends({
+    onClick: closeFromBackdrop,
+    onContentClick: onContentClick,
+    visible: visible,
+    width: "100%"
+  }, bindings), /*#__PURE__*/React.createElement(DrawerWrapper, _extends({
+    visible: visible,
+    className: wrapClassName,
+    placement: placement
+  }, props), children)), portal);
+}
+
+DrawerComponent.displayName = 'BolioUIDrawer';
+var Drawer = withScale(DrawerComponent);
+export default Drawer;

package/esm/drawer/helper.js

@@ -0,0 +1,27 @@
+import { tuple } from '../utils/prop-types';
+var drawerPlacement = tuple('top', 'right', 'bottom', 'left');
+export var getDrawerTransform = function getDrawerTransform(placement) {
+  var translates = {
+    top: {
+      initial: 'translate3d(0, -100%, 0)',
+      hidden: 'translate3d(0, -100%, 0)',
+      visible: 'translate3d(0, 0, 0)'
+    },
+    left: {
+      initial: 'translate3d(-100%, 0, 0)',
+      hidden: 'translate3d(-100%, 0, 0)',
+      visible: 'translate3d(0, 0, 0)'
+    },
+    bottom: {
+      initial: 'translate3d(0, 100%, 0)',
+      hidden: 'translate3d(0, 100%, 0)',
+      visible: 'translate3d(0, 0, 0)'
+    },
+    right: {
+      initial: 'translate3d(100%, 0, 0)',
+      hidden: 'translate3d(100%, 0, 0)',
+      visible: 'translate3d(0, 0, 0)'
+    }
+  };
+  return translates[placement];
+};

package/esm/drawer/index.js

@@ -0,0 +1,8 @@
+import Drawer from './drawer';
+import ModalTitle from '../modal/modal-title';
+import ModalSubtitle from '../modal/modal-subtitle';
+import ModalContent from '../modal/modal-content';
+Drawer.Title = ModalTitle;
+Drawer.Subtitle = ModalSubtitle;
+Drawer.Content = ModalContent;
+export default Drawer;

package/esm/drawer/stories.js

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Drawer from '.';
+import Button from '../button';
+import Grid from '../grid';
+export default {
+  title: 'Feedback/Drawer',
+  component: Drawer
+};
+export var Default = function Default() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return setState(true);
+    }
+  }, "Show Drawer"), /*#__PURE__*/React.createElement(Drawer, {
+    visible: state,
+    onClose: function onClose() {
+      return setState(false);
+    },
+    placement: "right"
+  }, /*#__PURE__*/React.createElement(Drawer.Title, null, "Drawer"), /*#__PURE__*/React.createElement(Drawer.Subtitle, null, "Example of a drawer"), /*#__PURE__*/React.createElement(Drawer.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the drawer.")))));
+};
+export var Placement = function Placement() {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      state = _React$useState2[0],
+      setState = _React$useState2[1];
+
+  var _React$useState3 = React.useState('bottom'),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      placement = _React$useState4[0],
+      setPlacement = _React$useState4[1];
+
+  var open = function open(text) {
+    setPlacement(text);
+    setState(true);
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return open('top');
+    },
+    mr: "10px"
+  }, "Top")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return open('right');
+    },
+    mr: "10px"
+  }, "Right")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return open('bottom');
+    },
+    mr: "10px"
+  }, "Bottom")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return open('left');
+    }
+  }, "Left")), /*#__PURE__*/React.createElement(Drawer, {
+    visible: state,
+    onClose: function onClose() {
+      return setState(false);
+    },
+    placement: placement
+  }, /*#__PURE__*/React.createElement(Drawer.Title, null, "Drawer"), /*#__PURE__*/React.createElement(Drawer.Subtitle, null, "Example of a drawer"), /*#__PURE__*/React.createElement(Drawer.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the drawer."))));
+};

package/esm/fieldset/fieldset-content.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function FieldsetContentComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var classes = useClasses('content', className);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1553218241", [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1553218241",
+    dynamic: [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, ".content.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1.3), " ").concat(SCALES.pr(1.3), " ").concat(SCALES.pb(1.3), " ").concat(SCALES.pl(1.3), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.content.__jsx-style-dynamic-selector > *:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector > *:last-child{margin-bottom:0;}")));
+}
+
+FieldsetContentComponent.displayName = 'BolioUIFieldsetContent';
+var FieldsetContent = withScale(FieldsetContentComponent);
+export default FieldsetContent;

package/esm/fieldset/fieldset-context.js

@@ -0,0 +1,9 @@
+import React from 'react';
+var defaultContext = {
+  inGroup: false,
+  currentValue: ''
+};
+export var FieldsetContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useFieldset = function useFieldset() {
+  return React.useContext(FieldsetContext);
+};

package/esm/fieldset/fieldset-footer.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+
+function FieldsetFooterComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  return /*#__PURE__*/React.createElement("footer", _extends({}, props, {
+    className: _JSXStyle.dynamic([["4117809613", [theme.palette.accents_1, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.accents_6, theme.layout.gapHalf, theme.layout.gap, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4117809613",
+    dynamic: [theme.palette.accents_1, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.accents_6, theme.layout.gapHalf, theme.layout.gap, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "footer.__jsx-style-dynamic-selector{background-color:".concat(theme.palette.accents_1, ";border-top:1px solid ").concat(theme.palette.border, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";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;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:").concat(theme.palette.accents_6, ";padding:").concat(theme.layout.gapHalf, " ").concat(theme.layout.gap, ";box-sizing:border-box;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(2.875), ";padding:").concat(SCALES.pt(0.625), " ").concat(SCALES.pr(1.31), " ").concat(SCALES.pb(0.625), " ").concat(SCALES.pl(1.31), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
+}
+
+FieldsetFooterComponent.displayName = 'BolioUIFieldsetFooter';
+var FieldsetFooter = withScale(FieldsetFooterComponent);
+export default FieldsetFooter;

package/esm/fieldset/fieldset-group.js

@@ -0,0 +1,88 @@
+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 = ["className", "children", "value", "onChange"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useCallback, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import useCurrentState from '../utils/use-current-state';
+import { FieldsetContext } from './fieldset-context';
+import useWarning from '../utils/use-warning';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function FieldsetGroupComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      selfVal = _useState2[0],
+      setSelfVal = _useState2[1];
+
+  var _useCurrentState = useCurrentState([]),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      items = _useCurrentState2[0],
+      setItems = _useCurrentState2[1],
+      ref = _useCurrentState2[2];
+
+  var classes = useClasses('group', className);
+
+  var register = function register(newItem) {
+    var hasItem = ref.current.find(function (item) {
+      return item.value === newItem.value;
+    });
+
+    if (hasItem) {
+      useWarning('The "value" of each "Fieldset" must be unique.', 'Fieldset');
+    }
+
+    setItems([].concat(_toConsumableArray(ref.current), [newItem]));
+  };
+
+  var providerValue = useMemo(function () {
+    return {
+      currentValue: selfVal,
+      inGroup: true,
+      register: register
+    };
+  }, [selfVal]);
+  var clickHandle = useCallback(function (nextValue) {
+    setSelfVal(nextValue);
+    onChange && onChange(nextValue);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(FieldsetContext.Provider, {
+    value: providerValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["4025768429", [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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4025768429", [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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + "group-tabs"
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        return clickHandle(item.value);
+      },
+      key: item.value,
+      className: _JSXStyle.dynamic([["4025768429", [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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + ((selfVal === item.value ? 'active' : '') || "")
+    }, item.label);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4025768429", [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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + "group-content"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4025768429",
+    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, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]
+  }, ".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, 0), " ").concat(SCALES.ml(0), ";}.group-tabs.__jsx-style-dynamic-selector{white-space:nowrap;overflow-y:hidden;overflow-x:auto;font-size:").concat(SCALES.font(1), ";margin-bottom:-1px;}.group-content.__jsx-style-dynamic-selector{border-top-left-radius:0;overflow:hidden;}.group-content.__jsx-style-dynamic-selector .fieldset{border-top-left-radius:0;}button.__jsx-style-dynamic-selector{height:2.7em;line-height:2.7em;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(theme.palette.accents_3, ";background-color:").concat(theme.palette.accents_1, ";font-size:0.875em;white-space:nowrap;text-transform:capitalize;-webkit-appearance:none;cursor:pointer;margin:0;padding:0 1.45em;overflow:hidden;-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;border-radius:0;border:1px solid ").concat(theme.palette.border, ";-webkit-text-decoration:none;text-decoration:none;outline:none;}button.active.__jsx-style-dynamic-selector{border-bottom-color:transparent;background-color:").concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";cursor:default;}button.__jsx-style-dynamic-selector:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";}button.__jsx-style-dynamic-selector:last-of-type{border-top-right-radius:").concat(theme.layout.radius, ";}button.__jsx-style-dynamic-selector+button.__jsx-style-dynamic-selector{border-left:0;}"))));
+}
+
+FieldsetGroupComponent.displayName = 'BolioUIFieldsetGroup';
+var FieldsetGroup = withScale(FieldsetGroupComponent);
+export default FieldsetGroup;

package/esm/fieldset/fieldset-subtitle.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+
+function FieldsetSubtitle(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: "jsx-2265168013" + " " + (props && props.className != null && props.className || className || "")
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2265168013"
+  }, "div.jsx-2265168013{font-size:0.875em;line-height:1.6;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;margin:0.75em 0;}"));
+}
+
+FieldsetSubtitle.displayName = 'BolioUIFieldsetSubtitle';
+export default FieldsetSubtitle;

package/esm/fieldset/fieldset-title.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useClasses from '../use-classes';
+
+function FieldsetTitle(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var classes = useClasses('title', className);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: "jsx-4105044205" + " " + (props && props.className != null && props.className || classes || "")
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4105044205"
+  }, ".title.jsx-4105044205{line-height:1.5;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;word-break:break-word;font-weight:600;-webkit-letter-spacing:-0.020625em;-moz-letter-spacing:-0.020625em;-ms-letter-spacing:-0.020625em;letter-spacing:-0.020625em;font-size:1.25em;width:auto;}"));
+}
+
+FieldsetTitle.displayName = 'BolioUIFieldsetTitle';
+export default FieldsetTitle;

package/esm/fieldset/fieldset.js

@@ -0,0 +1,96 @@
+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 = ["className", "title", "subtitle", "children", "value", "label"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import FieldsetTitle from './fieldset-title';
+import FieldsetSubtitle from './fieldset-subtitle';
+import FieldsetFooter from './fieldset-footer';
+import FieldsetContent from './fieldset-content';
+import { hasChild, pickChild } from '../utils/collections';
+import { useFieldset } from './fieldset-context';
+import useWarning from '../utils/use-warning';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function FieldsetComponent(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle,
+      children = _ref.children,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useFieldset = useFieldset(),
+      inGroup = _useFieldset.inGroup,
+      currentValue = _useFieldset.currentValue,
+      register = _useFieldset.register;
+
+  var _useState = useState(inGroup),
+      _useState2 = _slicedToArray(_useState, 2),
+      hidden = _useState2[0],
+      setHidden = _useState2[1];
+
+  var classes = useClasses('fieldset', className);
+
+  var _pickChild = pickChild(children, FieldsetFooter),
+      _pickChild2 = _slicedToArray(_pickChild, 2),
+      withoutFooterChildren = _pickChild2[0],
+      FooterChildren = _pickChild2[1];
+
+  var hasTitle = hasChild(withoutFooterChildren, FieldsetTitle);
+  var hasSubtitle = hasChild(withoutFooterChildren, FieldsetSubtitle);
+  var hasContent = hasChild(withoutFooterChildren, FieldsetContent);
+
+  if (inGroup) {
+    if (!label) {
+      useWarning('Props "label" is required when in a group.', 'Fieldset Group');
+    }
+
+    if (!value || value === '') {
+      value = label;
+    }
+
+    useEffect(function () {
+      register && register({
+        value: value,
+        label: label
+      });
+    }, []);
+    useEffect(function () {
+      // In a few cases, the user will set Fieldset state manually.
+      // If the user incorrectly set the state, Group component should ignore it.
+
+      /* istanbul ignore if */
+      if (!currentValue || currentValue === '') return;
+      setHidden(currentValue !== value);
+    }, [currentValue, value]);
+  }
+
+  var content = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, withoutFooterChildren, !hasTitle && title && /*#__PURE__*/React.createElement(FieldsetTitle, null, title), !hasSubtitle && subtitle && /*#__PURE__*/React.createElement(FieldsetSubtitle, null, subtitle));
+  }, [withoutFooterChildren, hasTitle, hasSubtitle, title, subtitle]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["169128941", [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), 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)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), hasContent ? content : /*#__PURE__*/React.createElement(FieldsetContent, null, content), FooterChildren && FooterChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "169128941",
+    dynamic: [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), 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)]
+  }, ".fieldset.__jsx-style-dynamic-selector{background-color:".concat(theme.palette.background, ";border:1px solid ").concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";overflow:hidden;display:").concat(hidden ? 'none' : 'block', ";font-size:").concat(SCALES.font(1), ";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), ";}")));
+}
+
+FieldsetComponent.displayName = 'BolioUIFieldset';
+var Fieldset = withScale(FieldsetComponent);
+export default Fieldset;

package/esm/fieldset/index.js

@@ -0,0 +1,13 @@
+import Fieldset from './fieldset';
+import FieldsetTitle from './fieldset-title';
+import FieldsetSubtitle from './fieldset-subtitle';
+import FieldsetFooter from './fieldset-footer';
+import FieldsetGroup from './fieldset-group';
+import FieldsetContent from './fieldset-content';
+Fieldset.Title = FieldsetTitle;
+Fieldset.Subtitle = FieldsetSubtitle;
+Fieldset.Footer = FieldsetFooter;
+Fieldset.Group = FieldsetGroup;
+Fieldset.Content = FieldsetContent;
+Fieldset.Body = FieldsetContent;
+export default Fieldset;