@bolio-ui/core 1.0.4 → 1.0.5

package/esm/Collapse/Collapse.js

@@ -0,0 +1,93 @@
+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 = ["children", "title", "subtitle", "initialVisible", "shadow", "className", "index"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect } from 'react';
+import CollapseIcon from './CollapseIcon';
+import useTheme from '../use-theme';
+import Expand from '../Shared/expand';
+import { useCollapseContext } from './CollapseContext';
+import useCurrentState from '../utils/use-current-state';
+import useWarning from '../utils/use-warning';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function CollapseComponent(_ref) {
+  var children = _ref.children,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      _ref$initialVisible = _ref.initialVisible,
+      initialVisible = _ref$initialVisible === void 0 ? false : _ref$initialVisible,
+      _ref$shadow = _ref.shadow,
+      shadow = _ref$shadow === void 0 ? false : _ref$shadow,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      index = _ref.index,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useCollapseContext = useCollapseContext(),
+      values = _useCollapseContext.values,
+      updateValues = _useCollapseContext.updateValues;
+
+  var _useCurrentState = useCurrentState(initialVisible),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      visible = _useCurrentState2[0],
+      setVisible = _useCurrentState2[1],
+      visibleRef = _useCurrentState2[2];
+
+  var classes = useClasses('collapse', {
+    shadow: shadow
+  }, className);
+
+  if (!title) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useWarning('"title" is required.', 'Collapse');
+  }
+
+  useEffect(function () {
+    if (!values.length) return;
+    var isActive = !!values.find(function (item) {
+      return item === index;
+    });
+    setVisible(isActive);
+  }, [index, setVisible, values]);
+
+  var clickHandler = function clickHandler() {
+    var next = !visibleRef.current;
+    setVisible(next);
+    updateValues && updateValues(index, next);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "view"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "title"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]])
+  }, title), " ", /*#__PURE__*/React.createElement(CollapseIcon, {
+    active: visible
+  })), subtitle && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "subtitle"
+  }, subtitle)), /*#__PURE__*/React.createElement(Expand, {
+    isExpanded: visible
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1460486588", [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]]]) + " " + "content"
+  }, children)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1460486588",
+    dynamic: [theme.palette.border, theme.palette.border, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.expressiveness.shadowSmall, theme.layout.radius, theme.layout.gap, theme.palette.foreground, theme.palette.accents_5, SCALES.pt(1.2), SCALES.pr(0), SCALES.pb(1.2), SCALES.pl(0)]
+  }, ".collapse.__jsx-style-dynamic-selector{border-top:1px solid ".concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1.2), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(1.2), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.shadow.__jsx-style-dynamic-selector{box-shadow:").concat(theme.expressiveness.shadowSmall, ";border:none;border-radius:").concat(theme.layout.radius, ";padding:").concat(theme.layout.gap, ";}.view.__jsx-style-dynamic-selector{cursor:pointer;outline:none;}.title.__jsx-style-dynamic-selector{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;color:").concat(theme.palette.foreground, ";}.title.__jsx-style-dynamic-selector h3.__jsx-style-dynamic-selector{margin:0;font-size:1.5em;}.subtitle.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_5, ";margin:0;}.subtitle.__jsx-style-dynamic-selector>*{margin:0;}.content.__jsx-style-dynamic-selector{font-size:inherit;line-height:1.6em;padding:").concat(SCALES.pt(1.2), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(1.2), " ").concat(SCALES.pl(0), ";}.content.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
+}
+
+CollapseComponent.displayName = 'BolioUICollapse';
+var Collapse = withScale(CollapseComponent);
+export default Collapse;

package/esm/Collapse/CollapseContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface CollapseConfig {
+    values: Array<number>;
+    updateValues?: (currentIndex: number | undefined, nextState: boolean) => unknown;
+}
+export declare const CollapseContext: React.Context<CollapseConfig>;
+export declare const useCollapseContext: () => CollapseConfig;

package/esm/Collapse/CollapseGroup.d.ts

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

package/esm/Collapse/CollapseGroup.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 './CollapseContext';
+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/CollapseIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    active?: boolean;
+}
+declare function CollapseIcon({ active }: Props): JSX.Element;
+declare const MemoCollapseIcon: React.MemoExoticComponent<typeof CollapseIcon>;
+export default MemoCollapseIcon;

package/esm/Collapse/index.d.ts

@@ -0,0 +1,9 @@
+import Collapse from "./Collapse";
+import CollapseGroup from "./CollapseGroup";
+export declare type CollapseComponentType = typeof Collapse & {
+    Group: typeof CollapseGroup;
+};
+export type { CollapseProps } from "./Collapse";
+export type { CollapseGroupProps } from "./CollapseGroup";
+declare const _default: CollapseComponentType;
+export default _default;

package/esm/Collapse/index.js

@@ -0,0 +1,4 @@
+import Collapse from './Collapse';
+import CollapseGroup from './CollapseGroup';
+Collapse.Group = CollapseGroup;
+export default Collapse;

package/esm/Collapse/stories.js

@@ -0,0 +1,48 @@
+import Collapse from '.';
+import Text from '../Text';
+import Grid from '../Grid';
+export default {
+  title: 'Surface/Collapse',
+  component: Collapse
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse.Group, null, /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 1"
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 2"
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))));
+};
+export var Expanded = function Expanded() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse.Group, null, /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 1",
+    initialVisible: true
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 2"
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))));
+};
+export var Subtitle = function Subtitle() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse.Group, null, /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 1",
+    subtitle: "More description about Lorem ipsum 1"
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")), /*#__PURE__*/React.createElement(Collapse, {
+    title: "Lorem ipsum 2",
+    subtitle: /*#__PURE__*/React.createElement(React.Fragment, null, "More description about ", /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "Lorem ipsum 2"))
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")))));
+};
+export var Shadow = function Shadow() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Collapse, {
+    shadow: true,
+    title: "Lorem ipsum 1",
+    subtitle: "More description about Lorem ipsum 1"
+  }, /*#__PURE__*/React.createElement(Text, null, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"))));
+};

package/esm/Container/Container.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+declare type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+declare type Align = 'top' | 'middle' | 'bottom';
+interface Props {
+    gap?: number;
+    justify?: Justify;
+    align?: Align;
+    component?: keyof JSX.IntrinsicElements;
+    className?: string;
+}
+declare const defaultProps: {
+    gap: number;
+    justify: Justify;
+    align: Align;
+    component: keyof JSX.IntrinsicElements;
+    className: string;
+    fluid: boolean;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type ContainerProps = Props & NativeAttrs;
+declare function Container({ children, component, justify, align, fluid, className, ...props }: React.PropsWithChildren<ContainerProps> & typeof defaultProps): JSX.Element;
+declare namespace Container {
+    var defaultProps: {
+        gap: number;
+        justify: Justify;
+        align: Align;
+        component: keyof JSX.IntrinsicElements;
+        className: string;
+        fluid: boolean;
+    };
+    var displayName: string;
+}
+export default Container;

package/esm/Container/index.d.ts

@@ -0,0 +1,3 @@
+import Container from "./Container";
+export type { ContainerProps } from "./Container";
+export default Container;

package/esm/Container/index.js

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

package/esm/CssBaseline/CssBaseline.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react';
+export declare type FlushToReact = <T>(opts?: {
+    nonce?: string;
+}) => Array<ReactElement<T>>;
+export declare type FlushToHTML = (opts?: {
+    nonce?: string;
+}) => string;
+declare type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
+    flush: FlushToReact;
+    flushToHTML: FlushToHTML;
+};
+declare const MemoCssBaseline: MemoCssBaselineComponent<{
+    children?: React.ReactNode;
+}>;
+export default MemoCssBaseline;

package/esm/CssBaseline/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./CssBaseline";

package/esm/CssBaseline/index.js

@@ -0,0 +1 @@
+export { default } from './CssBaseline';

package/esm/Description/Description.d.ts

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

package/esm/Description/index.d.ts

@@ -0,0 +1,3 @@
+import Description from "./Description";
+export type { DescriptionProps } from "./Description";
+export default Description;

package/esm/Description/index.js

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

package/esm/Description/stories.js

@@ -0,0 +1,23 @@
+import Description from '.';
+import Code from '../Code';
+import Grid from '../Grid';
+export default {
+  title: 'Data Display/Description',
+  component: Description
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Description, {
+    title: "Section Title",
+    content: "Data about this section."
+  })));
+};
+export var WithComponent = function WithComponent() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Description, {
+    title: "Section Title",
+    content: /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Code, null, "code"), " about this section.")
+  })));
+};

package/esm/Display/Display.d.ts

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

package/esm/Display/index.d.ts

@@ -0,0 +1,3 @@
+import Display from "./Display";
+export type { DisplayProps } from "./Display";
+export default Display;

package/esm/Display/index.js

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

package/esm/Divider/Divider.d.ts

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

package/esm/Divider/index.d.ts

@@ -0,0 +1,4 @@
+import Divider from "./Divider";
+export type { DividerProps, DividerTypes } from "./Divider";
+export type { DividerAlign } from "../utils/prop-types";
+export default Divider;

package/esm/Divider/index.js

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

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;