@bolio-ui/core 1.0.3 → 1.0.5

package/esm/Divider/stories.js

@@ -0,0 +1,41 @@
+import Divider from '.';
+import Text from '../Text';
+import Grid from '../Grid';
+export default {
+  title: 'Others/Divider',
+  component: Divider
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Text, null, "Declarative views make your code more predictable and easier to debug.")));
+};
+export var WithText = function WithText() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Divider, null, "A Simple Component"), /*#__PURE__*/React.createElement(Text, null, "React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props."), /*#__PURE__*/React.createElement(Divider, {
+    align: "start"
+  }, "A Stateful Component"), /*#__PURE__*/React.createElement(Text, null, "In addition to taking input data (accessed via this.props), a component can maintain internal state data (accessed via this.state). When a component\u2019s state data changes, the rendered markup will be updated by re-invoking render().")));
+};
+export var Space = function Space() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Divider, {
+    h: 5
+  }, "A Simple Component"), /*#__PURE__*/React.createElement(Text, null, "React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props."), /*#__PURE__*/React.createElement(Divider, {
+    my: 5,
+    h: 5
+  }, "A Stateful Component"), /*#__PURE__*/React.createElement(Text, null, "In addition to taking input data (accessed via this.props), a component can maintain internal state data (accessed via this.state). When a component\u2019s state data changes, the rendered markup will be updated by re-invoking render().")));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Text, null, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Divider, {
+    h: 3,
+    type: "success"
+  }, "A Simple Component"), /*#__PURE__*/React.createElement(Text, null, "React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props."), /*#__PURE__*/React.createElement(Divider, {
+    h: 3,
+    my: 3,
+    type: "warning"
+  }, "A Stateful Component"), /*#__PURE__*/React.createElement(Text, null, "In addition to taking input data (accessed via this.props), a component can maintain internal state data (accessed via this.state). When a component\u2019s state data changes, the rendered markup will be updated by re-invoking render().")));
+};

package/esm/Dot/Dot.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type DotTypes = NormalTypes;
+interface Props {
+    type?: DotTypes;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type DotProps = Props & NativeAttrs;
+declare const Dot: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default Dot;

package/esm/Dot/index.d.ts

@@ -0,0 +1,3 @@
+import Dot from "./Dot";
+export type { DotProps, DotTypes } from "./Dot";
+export default Dot;

package/esm/Dot/index.js

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

package/esm/Dot/stories.js

@@ -0,0 +1,40 @@
+import Dot from '.';
+import Grid from '../Grid';
+export default {
+  title: 'Data Display/Dot',
+  component: Dot
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, null)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "primary"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "secondary"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "success"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "warning"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "error"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "info"
+  })));
+};
+export var Text = function Text() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, null, "Canceled")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "primary"
+  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "secondary"
+  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "success"
+  }, "Ready")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "warning"
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "error"
+  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Dot, {
+    type: "info"
+  }, "Info")));
+};

package/esm/Drawer/Drawer.d.ts

@@ -0,0 +1,15 @@
+import React, { MouseEvent } from 'react';
+import { DrawerPlacement } from "./helper";
+interface Props {
+    visible?: boolean;
+    keyboard?: boolean;
+    disableBackdropClick?: boolean;
+    wrapClassName?: string;
+    placement: DrawerPlacement;
+    onClose?: () => void;
+    onContentClick?: (event: MouseEvent<HTMLElement>) => void;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type DrawerProps = Props & NativeAttrs;
+declare const Drawer: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default Drawer;

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 './DrawerWrapper';
+
+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/DrawerWrapper.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DrawerPlacement } from "./helper";
+interface Props {
+    className?: string;
+    visible?: boolean;
+    placement: DrawerPlacement;
+}
+export declare type DrawerWrapperProps = Props;
+declare function DrawerWrapper({ className, children, visible, placement, ...props }: React.PropsWithChildren<DrawerWrapperProps>): JSX.Element;
+declare namespace DrawerWrapper {
+    var displayName: string;
+}
+export default DrawerWrapper;

package/esm/Drawer/DrawerWrapper.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/helper.d.ts

@@ -0,0 +1,9 @@
+declare const drawerPlacement: ["top", "right", "bottom", "left"];
+export declare type DrawerPlacement = typeof drawerPlacement[number];
+export declare type DrawerTranslateItem = {
+    initial: string;
+    hidden: string;
+    visible: string;
+};
+export declare const getDrawerTransform: (placement: DrawerPlacement) => DrawerTranslateItem;
+export {};

package/esm/Drawer/index.d.ts

@@ -0,0 +1,13 @@
+import Drawer from "./Drawer";
+import ModalTitle from "../Modal/ModalTitle";
+import ModalSubtitle from "../Modal/ModalSubtitle";
+import ModalContent from "../Modal/ModalContent";
+export declare type DrawerComponentType = typeof Drawer & {
+    Title: typeof ModalTitle;
+    Subtitle: typeof ModalSubtitle;
+    Content: typeof ModalContent;
+};
+export type { DrawerProps } from "./Drawer";
+export type { ModalTitleProps as DrawerTitleProps, ModalSubtitleProps as DrawerSubtitleProps, ModalContentProps as DrawerContentProps } from "../Modal";
+declare const _default: DrawerComponentType;
+export default _default;

package/esm/Drawer/index.js

@@ -0,0 +1,8 @@
+import Drawer from './Drawer';
+import ModalTitle from '../Modal/ModalTitle';
+import ModalSubtitle from '../Modal/ModalSubtitle';
+import ModalContent from '../Modal/ModalContent';
+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.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+interface Props {
+    value?: string;
+    label?: string;
+    title?: string | ReactNode;
+    subtitle?: string | ReactNode;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.FieldsetHTMLAttributes<any>, keyof Props>;
+export declare type FieldsetProps = Props & NativeAttrs;
+declare const Fieldset: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default Fieldset;

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 './FieldsetTitle';
+import FieldsetSubtitle from './FieldsetSubtitle';
+import FieldsetFooter from './FieldsetFooter';
+import FieldsetContent from './FieldsetContent';
+import { hasChild, pickChild } from '../utils/collections';
+import { useFieldset } from './FieldsetContext';
+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/FieldsetContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type FieldsetContentProps = Props & NativeAttrs;
+declare const FieldsetContent: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default FieldsetContent;

package/esm/Fieldset/FieldsetContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface FieldItem {
+    value: string;
+    label: string;
+}
+export interface FieldsetConfig {
+    register?: (item: FieldItem) => void;
+    currentValue: string;
+    inGroup: boolean;
+}
+export declare const FieldsetContext: React.Context<FieldsetConfig>;
+export declare const useFieldset: () => FieldsetConfig;

package/esm/Fieldset/FieldsetFooter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type FieldsetFooterProps = Props & NativeAttrs;
+declare const FieldsetFooter: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default FieldsetFooter;

package/esm/Fieldset/FieldsetGroup.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    value: string;
+    className?: string;
+    onChange?: (value: string) => void;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type FieldsetGroupProps = Props & NativeAttrs;
+declare const FieldsetGroup: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default FieldsetGroup;