@bolio-ui/core 1.0.4 → 1.0.6

package/esm/Card/Card.js

@@ -0,0 +1,72 @@
+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", "hoverable", "rounded", "className", "shadow", "type"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { getStyles } from './styles';
+import CardFooter from './CardFooter';
+import CardContent from './CardContent';
+import Image from '../Image';
+import { hasChild, pickChild } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var defaultProps = {
+  type: 'default',
+  hoverable: false,
+  shadow: false,
+  className: ''
+};
+
+function CardComponent(_ref) {
+  var children = _ref.children,
+      hoverable = _ref.hoverable,
+      rounded = _ref.rounded,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      shadow = _ref.shadow,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var hoverShadow = useMemo(function () {
+    if (shadow) return theme.expressiveness.shadowMedium;
+    return hoverable ? theme.expressiveness.shadowSmall : 'none';
+  }, [hoverable, shadow, theme.expressiveness]);
+
+  var _useMemo = useMemo(function () {
+    return getStyles(type, theme.palette, shadow);
+  }, [type, theme.palette, shadow]),
+      color = _useMemo.color,
+      bgColor = _useMemo.bgColor,
+      borderColor = _useMemo.borderColor;
+
+  var _pickChild = pickChild(children, CardFooter),
+      _pickChild2 = _slicedToArray(_pickChild, 2),
+      withoutFooterChildren = _pickChild2[0],
+      footerChildren = _pickChild2[1];
+
+  var _pickChild3 = pickChild(withoutFooterChildren, Image),
+      _pickChild4 = _slicedToArray(_pickChild3, 2),
+      withoutImageChildren = _pickChild4[0],
+      imageChildren = _pickChild4[1];
+
+  var hasContent = hasChild(withoutImageChildren, CardContent);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1209748169", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, 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), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses('card', className) || "")
+  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React.createElement(CardContent, null, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1209748169",
+    dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, 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), hoverShadow]
+  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:none;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), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
+}
+
+CardComponent.defaultProps = defaultProps;
+CardComponent.displayName = 'BolioUICard';
+var Card = withScale(CardComponent);
+export default Card;

package/esm/Card/CardContent.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 CardContentProps = Props & NativeAttrs;
+declare const CardContent: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default CardContent;

package/esm/Card/CardFooter.d.ts

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

package/esm/Card/index.d.ts

@@ -0,0 +1,15 @@
+import Card from "./Card";
+import CardFooter from "./CardFooter";
+import CardContent from "./CardContent";
+export declare type CardComponentType = typeof Card & {
+    Footer: typeof CardFooter;
+    Actions: typeof CardFooter;
+    Content: typeof CardContent;
+    Body: typeof CardContent;
+};
+export type { CardProps } from "./Card";
+export type { CardContentProps } from "./CardContent";
+export type { CardFooterProps } from "./CardFooter";
+export type { CardTypes } from "../utils/prop-types";
+declare const _default: CardComponentType;
+export default _default;

package/esm/Card/index.js

@@ -0,0 +1,8 @@
+import Card from './Card';
+import CardFooter from './CardFooter';
+import CardContent from './CardContent';
+Card.Footer = CardFooter;
+Card.Actions = CardFooter;
+Card.Content = CardContent;
+Card.Body = CardContent;
+export default Card;

package/esm/Card/stories.js

@@ -0,0 +1,126 @@
+import Card from '.';
+import Text from '../Text';
+import Grid from '../Grid';
+import Link from '../Link';
+import Image from '../Image';
+import Code from '../Code';
+import Divider from '../Divider';
+export default {
+  title: 'Surface/Card',
+  component: Card
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Card, null, "A default card.")));
+};
+export var Hover = function Hover() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Card, {
+    hoverable: true
+  }, "A hover default card.")));
+};
+export var Shadow = function Shadow() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Card, {
+    shadow: true
+  }, /*#__PURE__*/React.createElement(Text, {
+    h4: true,
+    my: 0
+  }, "React is declarative"), /*#__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(Text, null, "Declarative views make your code more predictable and easier to debug."))));
+};
+export var Variants = function Variants() {
+  var tuple = function tuple() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return args;
+  };
+
+  var types = tuple('default', 'primary', 'secondary', 'success', 'warning', 'error', 'dark', 'lite', 'info');
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, types.map(function (type) {
+    return /*#__PURE__*/React.createElement(Grid, {
+      xs: 6,
+      md: 4,
+      key: type
+    }, /*#__PURE__*/React.createElement(Card, {
+      type: type,
+      width: "100%"
+    }, /*#__PURE__*/React.createElement(Text, {
+      h4: true,
+      my: 0,
+      style: {
+        textTransform: 'uppercase'
+      }
+    }, type), /*#__PURE__*/React.createElement(Text, null, type)));
+  }));
+};
+export var WithFooter = function WithFooter() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    justify: "center"
+  }, /*#__PURE__*/React.createElement(Card, {
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Text, {
+    h4: true,
+    my: 0
+  }, "Bolio UI"), /*#__PURE__*/React.createElement(Text, null, "More creative and fun with amazing features for React."), /*#__PURE__*/React.createElement(Card.Footer, null, /*#__PURE__*/React.createElement(Link, {
+    color: true,
+    target: "_blank",
+    href: "https://github.com/bolio-ui/bolio-ui"
+  }, "Visit source code on GitHub.")))), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    justify: "center"
+  }, /*#__PURE__*/React.createElement(Card, {
+    width: "100%",
+    type: "dark"
+  }, /*#__PURE__*/React.createElement(Text, {
+    h4: true,
+    my: 0
+  }, "Bolio UI"), /*#__PURE__*/React.createElement(Text, null, "More creative and fun with amazing features for React."), /*#__PURE__*/React.createElement(Card.Footer, null, /*#__PURE__*/React.createElement(Link, {
+    target: "_blank",
+    href: "https://github.com/bolio-ui/bolio-ui"
+  }, "Visit source code on GitHub.")))));
+};
+export var WithImage = function WithImage() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Card, {
+    width: "350px"
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: "https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg",
+    width: "350px",
+    draggable: false
+  }), /*#__PURE__*/React.createElement(Text, {
+    h4: true,
+    mb: 0,
+    mt: 0
+  }, "Bolio UI"), /*#__PURE__*/React.createElement(Text, {
+    type: "secondary",
+    small: true
+  }, "More creative and fun with amazing features for React."), /*#__PURE__*/React.createElement(Card.Footer, null, /*#__PURE__*/React.createElement(Link, {
+    block: true,
+    target: "_blank",
+    href: "https://github.com/bolio-ui/bolio-ui"
+  }, "Visit source code on GitHub.")))));
+};
+export var WithDivider = function WithDivider() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Card, {
+    width: "400px"
+  }, /*#__PURE__*/React.createElement(Card.Content, null, /*#__PURE__*/React.createElement(Text, {
+    b: true,
+    my: 0
+  }, "A Simple Component")), /*#__PURE__*/React.createElement(Divider, {
+    h: "1px",
+    my: 0
+  }), /*#__PURE__*/React.createElement(Card.Content, null, /*#__PURE__*/React.createElement(Text, null, "React components implement a ", /*#__PURE__*/React.createElement(Code, null, "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 ", /*#__PURE__*/React.createElement(Code, null, "render()"), " via", ' ', /*#__PURE__*/React.createElement(Code, null, "this.props"), ".")))));
+};

package/esm/Card/styles.d.ts

@@ -0,0 +1,8 @@
+import { CardTypes } from "../utils/prop-types";
+import { BolioUIThemesPalette } from "../Themes/Presets";
+export declare type CardStyles = {
+    color: string;
+    bgColor: string;
+    borderColor: string;
+};
+export declare const getStyles: (type: CardTypes, palette: BolioUIThemesPalette, isShadow?: boolean | undefined) => CardStyles;

package/esm/Checkbox/Checkbox.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type CheckboxTypes = NormalTypes;
+export interface CheckboxEventTarget {
+    checked: boolean;
+}
+export interface CheckboxEvent {
+    target: CheckboxEventTarget;
+    stopPropagation: () => void;
+    preventDefault: () => void;
+    nativeEvent: React.ChangeEvent;
+}
+interface Props {
+    checked?: boolean;
+    disabled?: boolean;
+    type?: CheckboxTypes;
+    initialChecked?: boolean;
+    onChange?: (e: CheckboxEvent) => void;
+    className?: string;
+    value?: string;
+}
+declare type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export declare type CheckboxProps = Props & NativeAttrs;
+declare const Checkbox: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Checkbox;

package/esm/Checkbox/Checkbox.js

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

package/esm/Checkbox/CheckboxContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface CheckboxConfig {
+    updateState?: (value: string, checked: boolean) => void;
+    disabledAll: boolean;
+    values: string[];
+    inGroup: boolean;
+}
+export declare const CheckboxContext: React.Context<CheckboxConfig>;
+export declare const useCheckbox: () => CheckboxConfig;

package/esm/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    value: string[];
+    disabled?: boolean;
+    onChange?: (values: string[]) => void;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type CheckboxGroupProps = Props & NativeAttrs;
+declare const CheckboxGroup: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default CheckboxGroup;

package/esm/Checkbox/CheckboxGroup.js

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

package/esm/Checkbox/CheckboxIcon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    disabled?: boolean;
+    checked?: boolean;
+    fill?: string;
+    bg?: string;
+}
+declare function CheckboxIconComponent({ fill, bg, disabled, checked }: Props): JSX.Element;
+declare namespace CheckboxIconComponent {
+    var displayName: string;
+}
+declare const CheckboxIcon: React.MemoExoticComponent<typeof CheckboxIconComponent>;
+export default CheckboxIcon;

package/esm/Checkbox/index.d.ts

@@ -0,0 +1,9 @@
+import Checkbox from "./Checkbox";
+import CheckboxGroup from "./CheckboxGroup";
+export declare type CheckboxComponentType = typeof Checkbox & {
+    Group: typeof CheckboxGroup;
+};
+export type { CheckboxProps, CheckboxEvent, CheckboxEventTarget, CheckboxTypes } from "./Checkbox";
+export type { CheckboxGroupProps } from "./CheckboxGroup";
+declare const _default: CheckboxComponentType;
+export default _default;

package/esm/Checkbox/index.js

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

package/esm/Checkbox/stories.js

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

package/esm/Checkbox/styles.d.ts

@@ -0,0 +1,6 @@
+import { BolioUIThemesPalette } from "../Themes/Presets";
+export declare type CheckboxColor = {
+    fill: string;
+    bg: string;
+};
+export declare const getColors: (palette: BolioUIThemesPalette, status?: "success" | "primary" | "secondary" | "error" | "warning" | "info" | "default" | undefined) => CheckboxColor;

package/esm/Code/Code.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    block?: boolean;
+    className?: string;
+    name?: string;
+    classic?: boolean;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type CodeProps = Props & NativeAttrs;
+declare const Code: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Code;

package/esm/Code/index.d.ts

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

package/esm/Code/index.js

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