@bolio-ui/core 1.0.0

package/esm/button-group/button-group.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["disabled", "type", "ghost", "vertical", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { ButtonGroupContext } from './button-group-context';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var defaultProps = {
+  disabled: false,
+  vertical: false,
+  ghost: false,
+  type: 'default',
+  className: ''
+};
+
+var getGroupBorderColors = function getGroupBorderColors(palette, props) {
+  var ghost = props.ghost,
+      type = props.type;
+  if (!ghost && type !== 'default') return palette.background;
+  var colors = {
+    "default": palette.border,
+    success: palette.success,
+    secondary: palette.secondary,
+    error: palette.error,
+    warning: palette.warning
+  };
+  var withoutLightType = type === null || type === void 0 ? void 0 : type.replace('-light', '');
+  return colors[withoutLightType] || colors["default"];
+};
+
+function ButtonGroupComponent(groupProps) {
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var disabled = groupProps.disabled,
+      type = groupProps.type,
+      ghost = groupProps.ghost,
+      vertical = groupProps.vertical,
+      children = groupProps.children,
+      className = groupProps.className,
+      props = _objectWithoutProperties(groupProps, _excluded);
+
+  var initialValue = useMemo(function () {
+    return {
+      disabled: disabled,
+      type: type,
+      ghost: ghost,
+      isButtonGroup: true
+    };
+  }, [disabled, ghost, type]);
+  var border = useMemo(function () {
+    return getGroupBorderColors(theme.palette, groupProps);
+  }, [theme.palette, groupProps]);
+  var classes = useClasses('btn-group', {
+    vertical: vertical,
+    horizontal: !vertical
+  }, className);
+  return /*#__PURE__*/React.createElement(ButtonGroupContext.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["3583665674", [theme.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3583665674",
+    dynamic: [theme.layout.radius, border, SCALES.width(1, 'auto'), SCALES.height(1, 'min-content'), SCALES.mt(0.313), SCALES.mr(0.313), SCALES.mb(0.313), SCALES.ml(0.313), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), border, border]
+  }, ".btn-group.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(border, ";background-color:transparent;overflow:hidden;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'min-content'), ";margin:").concat(SCALES.mt(0.313), " ").concat(SCALES.mr(0.313), " ").concat(SCALES.mb(0.313), " ").concat(SCALES.ml(0.313), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.vertical.__jsx-style-dynamic-selector{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.btn-group.__jsx-style-dynamic-selector .btn{border:none;}.btn-group.__jsx-style-dynamic-selector .btn .text{top:0;}.horizontal.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid ").concat(border, ";}.horizontal.__jsx-style-dynamic-selector .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;}.vertical.__jsx-style-dynamic-selector .btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-top:1px solid ").concat(border, ";}.vertical.__jsx-style-dynamic-selector .btn:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0;}"))));
+}
+
+ButtonGroupComponent.defaultProps = defaultProps;
+ButtonGroupComponent.displayName = 'BolioUIButtonGroup';
+var ButtonGroup = withScale(ButtonGroupComponent);
+export default ButtonGroup;

package/esm/button-group/index.js

@@ -0,0 +1,2 @@
+import ButtonGroup from './button-group';
+export default ButtonGroup;

package/esm/button-group/stories.js

@@ -0,0 +1,66 @@
+import ButtonGroup from '.';
+import Button from '../button';
+import Grid from '../grid';
+export default {
+  title: 'Data Entry/ButtonGroup',
+  component: ButtonGroup
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, "One"), /*#__PURE__*/React.createElement(Button, null, "Two"), /*#__PURE__*/React.createElement(Button, null, "Three"))));
+};
+export var Variant = function Variant() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    type: "success"
+  }, /*#__PURE__*/React.createElement(Button, null, "One"), /*#__PURE__*/React.createElement(Button, null, "Two"), /*#__PURE__*/React.createElement(Button, null, "Three"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    type: "abort"
+  }, /*#__PURE__*/React.createElement(Button, null, "Action1"), /*#__PURE__*/React.createElement(Button, null, "Action2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    type: "warning",
+    ghost: true
+  }, /*#__PURE__*/React.createElement(Button, null, "Action1"), /*#__PURE__*/React.createElement(Button, null, "Action2"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    type: "success-light"
+  }, /*#__PURE__*/React.createElement(Button, null, "One"), /*#__PURE__*/React.createElement(Button, null, "Two"), /*#__PURE__*/React.createElement(Button, null, "Three"))));
+};
+export var Sizes = function Sizes() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    scale: 2 / 3
+  }, /*#__PURE__*/React.createElement(Button, {
+    scale: 2 / 3
+  }, "One"), /*#__PURE__*/React.createElement(Button, {
+    scale: 2 / 3
+  }, "Two"), /*#__PURE__*/React.createElement(Button, {
+    scale: 2 / 3
+  }, "Three"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    scale: 1 / 3
+  }, /*#__PURE__*/React.createElement(Button, {
+    scale: 1 / 3
+  }, "Action1"), /*#__PURE__*/React.createElement(Button, {
+    scale: 1 / 3
+  }, "Action2"))));
+};
+export var Vertical = function Vertical() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    vertical: true
+  }, /*#__PURE__*/React.createElement(Button, null, "One"), /*#__PURE__*/React.createElement(Button, null, "Two"), /*#__PURE__*/React.createElement(Button, null, "Three"), /*#__PURE__*/React.createElement(Button, null, "Four"))));
+};
+export var Disabled = function Disabled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    scale: 0.5,
+    disabled: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    scale: 0.5
+  }, "One"), /*#__PURE__*/React.createElement(Button, {
+    scale: 0.5
+  }, "Two"), /*#__PURE__*/React.createElement(Button, {
+    scale: 0.5
+  }, "Three"))));
+};

package/esm/capacity/capacity.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "limit", "color", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { useProportions } from '../utils/calculations';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+var getColor = function getColor(val, palette) {
+  if (val < 33) return palette.info;
+  if (val < 66) return palette.warning;
+  return palette.errorDark;
+};
+
+function CapacityComponent(_ref) {
+  var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      _ref$limit = _ref.limit,
+      limit = _ref$limit === void 0 ? 100 : _ref$limit,
+      userColor = _ref.color,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var percentValue = useProportions(value, limit);
+  var classes = useClasses('capacity', className);
+  var color = useMemo(function () {
+    if (userColor && userColor !== '') return userColor;
+    return getColor(percentValue, theme.palette);
+  }, [userColor, percentValue, theme.palette]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    title: "".concat(percentValue, "%")
+  }, props, {
+    className: _JSXStyle.dynamic([["3589142679", [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3589142679", [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]]])
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3589142679",
+    dynamic: [SCALES.width(3.125), SCALES.height(0.625), theme.layout.radius, theme.palette.accents_2, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), percentValue, color]
+  }, ".capacity.__jsx-style-dynamic-selector{width:".concat(SCALES.width(3.125), ";height:").concat(SCALES.height(0.625), ";border-radius:").concat(theme.layout.radius, ";overflow:hidden;background-color:").concat(theme.palette.accents_2, ";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), ";}span.__jsx-style-dynamic-selector{width:").concat(percentValue, "%;background-color:").concat(color, ";height:100%;margin:0;padding:0;display:block;}")));
+}
+
+CapacityComponent.displayName = 'BolioUICapacity';
+var Capacity = withScale(CapacityComponent);
+export default Capacity;

package/esm/capacity/index.js

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

package/esm/capacity/stories.js

@@ -0,0 +1,55 @@
+import useTheme from '../use-theme';
+import Capacity from '.';
+import Grid from '../grid';
+export default {
+  title: 'Data Display/Capacity',
+  component: Capacity
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 15,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 45,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 95,
+    width: "200px"
+  })));
+};
+export var FixedColor = function FixedColor() {
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.foreground,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.primary,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.secondary,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.success,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.warning,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.error,
+    width: "200px"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Capacity, {
+    value: 75,
+    color: theme.palette.info,
+    width: "200px"
+  })));
+};

package/esm/card/card-content.js

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

package/esm/card/card-footer.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "disableAutoMargin"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function CardFooterComponent(_ref) {
+  var children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$disableAutoMargi = _ref.disableAutoMargin,
+      disableAutoMargin = _ref$disableAutoMargi === void 0 ? false : _ref$disableAutoMargi,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var classes = useClasses({
+    'auto-margin': !disableAutoMargin
+  }, className);
+  return /*#__PURE__*/React.createElement("footer", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2898207213", [SCALES.py(0.66), SCALES.px(1.31), SCALES.font(0.875), theme.palette.border, theme.layout.radius, theme.layout.radius, SCALES.height(3.3), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.layout.gapQuarter]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2898207213",
+    dynamic: [SCALES.py(0.66), SCALES.px(1.31), SCALES.font(0.875), theme.palette.border, theme.layout.radius, theme.layout.radius, SCALES.height(3.3), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.layout.gapQuarter]
+  }, "footer.__jsx-style-dynamic-selector{padding:".concat(SCALES.py(0.66), " ").concat(SCALES.px(1.31), ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:inherit;background-color:inherit;font-size:").concat(SCALES.font(0.875), ";border-top:1px solid ").concat(theme.palette.border, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";min-height:").concat(SCALES.height(3.3), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.auto-margin.__jsx-style-dynamic-selector *{margin-top:0;margin-bottom:0;margin-right:").concat(theme.layout.gapQuarter, ";}")));
+}
+
+CardFooterComponent.displayName = 'BolioUICardFooter';
+var CardFooter = withScale(CardFooterComponent);
+export default CardFooter;

package/esm/card/card.js

@@ -0,0 +1,68 @@
+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", "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 './card-footer';
+import CardContent from './card-content';
+import Image from '../image';
+import { hasChild, pickChild } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function CardComponent(_ref) {
+  var children = _ref.children,
+      _ref$hoverable = _ref.hoverable,
+      hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$shadow = _ref.shadow,
+      shadow = _ref$shadow === void 0 ? false : _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([["1458732320", [theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, 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, {
+    className: "card"
+  }, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1458732320",
+    dynamic: [theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, 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{-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:".concat(theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";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.displayName = 'BolioUICard';
+var Card = withScale(CardComponent);
+export default Card;

package/esm/card/index.js

@@ -0,0 +1,8 @@
+import Card from './card';
+import CardFooter from './card-footer';
+import CardContent from './card-content';
+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.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export var getStyles = function getStyles(type, palette, isShadow) {
+  var colors = {
+    "default": {
+      color: palette.foreground,
+      bgColor: palette.accents_1
+    },
+    dark: {
+      color: palette.background,
+      bgColor: palette.foreground
+    },
+    primary: {
+      color: palette.background,
+      bgColor: palette.primary
+    },
+    secondary: {
+      color: palette.background,
+      bgColor: palette.secondary
+    },
+    success: {
+      color: palette.background,
+      bgColor: palette.success
+    },
+    warning: {
+      color: palette.background,
+      bgColor: palette.warning
+    },
+    error: {
+      color: palette.background,
+      bgColor: palette.error
+    },
+    lite: {
+      color: palette.foreground,
+      bgColor: palette.background
+    },
+    info: {
+      color: palette.background,
+      bgColor: palette.info
+    }
+  };
+  var showBorder = type === 'default' && !isShadow;
+  return _extends({}, colors[type], {
+    borderColor: showBorder ? palette.border : 'transparent'
+  });
+};

package/esm/checkbox/checkbox-context.js

@@ -0,0 +1,10 @@
+import React from 'react';
+var defaultContext = {
+  disabledAll: false,
+  inGroup: false,
+  values: []
+};
+export var CheckboxContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useCheckbox = function useCheckbox() {
+  return React.useContext(CheckboxContext);
+};