@bolio-ui/core 1.0.0

package/esm/fieldset/stories.js

@@ -0,0 +1,72 @@
+import Fieldset from '.';
+import Button from '../button';
+import Text from '../text';
+import Divider from '../divider';
+import Grid from '../grid';
+export default {
+  title: 'Surface/Fieldset',
+  component: Fieldset
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(Fieldset.Title, null, "Try React "), /*#__PURE__*/React.createElement(Fieldset.Subtitle, null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement(Fieldset.Footer, null, "Try React", /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 1 / 3,
+    font: "12px"
+  }, "Confirm")))));
+};
+export var CustomText = function CustomText() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(Fieldset.Title, null, "Add React to a Website "), /*#__PURE__*/React.createElement(Fieldset.Subtitle, null, "You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets"), /*#__PURE__*/React.createElement(Fieldset.Footer, null, /*#__PURE__*/React.createElement(Text, {
+    type: "error"
+  }, "An error has occurred."), /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 1 / 3,
+    type: "error",
+    font: "12px"
+  }, "Cancel")))));
+};
+export var Tabs = function Tabs() {
+  var handler = function handler(v) {
+    return console.log(v);
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Fieldset.Group, {
+    value: "create new react app",
+    onChange: handler
+  }, /*#__PURE__*/React.createElement(Fieldset, {
+    label: "create new react app"
+  }, /*#__PURE__*/React.createElement(Fieldset.Title, null, "Create a New React App"), /*#__PURE__*/React.createElement(Fieldset.Subtitle, null, "When starting a React project, a simple HTML page with script tags might still be the best option. It only takes a minute to set up!"), /*#__PURE__*/React.createElement(Fieldset.Footer, null, "Create a New React App", /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 1 / 3,
+    font: "12px"
+  }, "Functions"))), /*#__PURE__*/React.createElement(Fieldset, {
+    label: "learn react"
+  }, /*#__PURE__*/React.createElement(Fieldset.Title, null, "Learn React"), /*#__PURE__*/React.createElement(Fieldset.Subtitle, null, "People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you\u2019ll find this section helpful."), /*#__PURE__*/React.createElement(Fieldset.Footer, null, "Learn React", /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 1 / 3,
+    font: "12px"
+  }, "Functions"))), /*#__PURE__*/React.createElement(Fieldset, {
+    label: "first examples"
+  }, /*#__PURE__*/React.createElement(Fieldset.Title, null, "First Examples"), /*#__PURE__*/React.createElement(Fieldset.Subtitle, null, "The React homepage contains a few small React examples with a live editor. Even if you don\u2019t know anything about React yet, try changing their code and see how it affects the result."), /*#__PURE__*/React.createElement(Fieldset.Footer, null, "First Examples", /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 1 / 3,
+    font: "12px"
+  }, "Functions"))))));
+};
+export var WithDivider = function WithDivider() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(Fieldset.Content, {
+    style: {
+      paddingTop: '10pt',
+      paddingBottom: '10pt'
+    }
+  }, /*#__PURE__*/React.createElement("h4", null, "React")), /*#__PURE__*/React.createElement(Divider, {
+    my: 0
+  }), /*#__PURE__*/React.createElement(Fieldset.Content, null, /*#__PURE__*/React.createElement(Fieldset.Title, null, "For Beginners"), /*#__PURE__*/React.createElement("p", null, "If you feel that the React documentation goes at a faster pace than you\u2019re comfortable with, check out this overview of React by Tania Rascia. It introduces the most important React concepts in a detailed, beginner-friendly way. Once you\u2019re done, give the documentation another try!")), /*#__PURE__*/React.createElement(Fieldset.Footer, null, /*#__PURE__*/React.createElement("small", null, "JavaScript Resources ")))));
+};

package/esm/grid/basic-item.js

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale from '../use-scale';
+import useClasses from '../use-classes';
+var defaultProps = {
+  xs: false,
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  className: ''
+};
+
+var getItemLayout = function getItemLayout(val) {
+  var display = val === 0 ? 'display: none;' : 'display: inherit;';
+
+  if (typeof val === 'number') {
+    var width = 100 / 12 * val;
+    var ratio = width > 100 ? '100%' : width < 0 ? '0' : "".concat(width, "%");
+    return {
+      grow: 0,
+      display: display,
+      width: ratio,
+      basis: ratio
+    };
+  }
+
+  return {
+    grow: 1,
+    display: display,
+    width: '100%',
+    basis: '0'
+  };
+};
+
+function GridBasicItem(_ref) {
+  var xs = _ref.xs,
+      sm = _ref.sm,
+      md = _ref.md,
+      lg = _ref.lg,
+      xl = _ref.xl,
+      justify = _ref.justify,
+      direction = _ref.direction,
+      alignItems = _ref.alignItems,
+      alignContent = _ref.alignContent,
+      children = _ref.children,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var classes = useMemo(function () {
+    var aligns = {
+      justify: justify,
+      direction: direction,
+      alignItems: alignItems,
+      alignContent: alignContent,
+      xs: xs,
+      sm: sm,
+      md: md,
+      lg: lg,
+      xl: xl
+    };
+    var classString = Object.keys(aligns).reduce(function (pre, name) {
+      if (aligns[name] !== undefined && aligns[name] !== false) return "".concat(pre, " ").concat(name);
+      return pre;
+    }, '');
+    return classString.trim();
+  }, [justify, direction, alignItems, alignContent, xs, sm, md, lg, xl]);
+  var layout = useMemo(function () {
+    return {
+      xs: getItemLayout(xs),
+      sm: getItemLayout(sm),
+      md: getItemLayout(md),
+      lg: getItemLayout(lg),
+      xl: getItemLayout(xl)
+    };
+  }, [xs, sm, md, lg, xl]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["568430467", [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]]]) + " " + (props && props.className != null && props.className || useClasses('item', classes, className) || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "568430467",
+    dynamic: [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]
+  }, ".item.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1, 'inherit'), ";height:").concat(SCALES.height(1, 'auto'), ";}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xs.grow, ";-webkit-flex-grow:").concat(layout.xs.grow, ";-ms-flex-positive:").concat(layout.xs.grow, ";flex-grow:").concat(layout.xs.grow, ";max-width:").concat(layout.xs.width, ";-webkit-flex-basis:").concat(layout.xs.basis, ";-ms-flex-preferred-size:").concat(layout.xs.basis, ";flex-basis:").concat(layout.xs.basis, ";").concat(layout.xs.display, ";}@media only screen and (min-width:").concat(theme.breakpoints.sm.min, "){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.sm.grow, ";-webkit-flex-grow:").concat(layout.sm.grow, ";-ms-flex-positive:").concat(layout.sm.grow, ";flex-grow:").concat(layout.sm.grow, ";max-width:").concat(layout.sm.width, ";-webkit-flex-basis:").concat(layout.sm.basis, ";-ms-flex-preferred-size:").concat(layout.sm.basis, ";flex-basis:").concat(layout.sm.basis, ";").concat(layout.sm.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.md.min, "){.md.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.md.grow, ";-webkit-flex-grow:").concat(layout.md.grow, ";-ms-flex-positive:").concat(layout.md.grow, ";flex-grow:").concat(layout.md.grow, ";max-width:").concat(layout.md.width, ";-webkit-flex-basis:").concat(layout.md.basis, ";-ms-flex-preferred-size:").concat(layout.md.basis, ";flex-basis:").concat(layout.md.basis, ";").concat(layout.md.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.lg.min, "){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.lg.grow, ";-webkit-flex-grow:").concat(layout.lg.grow, ";-ms-flex-positive:").concat(layout.lg.grow, ";flex-grow:").concat(layout.lg.grow, ";max-width:").concat(layout.lg.width, ";-webkit-flex-basis:").concat(layout.lg.basis, ";-ms-flex-preferred-size:").concat(layout.lg.basis, ";flex-basis:").concat(layout.lg.basis, ";").concat(layout.lg.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.xl.min, "){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xl.grow, ";-webkit-flex-grow:").concat(layout.xl.grow, ";-ms-flex-positive:").concat(layout.xl.grow, ";flex-grow:").concat(layout.xl.grow, ";max-width:").concat(layout.xl.width, ";-webkit-flex-basis:").concat(layout.xl.basis, ";-ms-flex-preferred-size:").concat(layout.xl.basis, ";flex-basis:").concat(layout.xl.basis, ";").concat(layout.xl.display, ";}}")));
+}
+
+GridBasicItem.defaultProps = defaultProps;
+GridBasicItem.displayName = 'BolioUIGridBasicItem';
+export default GridBasicItem;

package/esm/grid/grid-container.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["gap", "wrap", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import GridBasicItem from './basic-item';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function GridContainerComponent(_ref) {
+  var _ref$gap = _ref.gap,
+      gap = _ref$gap === void 0 ? 0 : _ref$gap,
+      _ref$wrap = _ref.wrap,
+      wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      unit = _useScale.unit,
+      SCALES = _useScale.SCALES;
+
+  var gapUnit = useMemo(function () {
+    return "calc(".concat(gap, " * ").concat(unit, " * 1/3)");
+  }, [gap, unit]);
+  var gridConMargin = 'calc(-1 * var(--grid-gap-unit))';
+  var gridConWidth = 'calc(100% + var(--grid-gap-unit) * 2)';
+  var _styles$className = {
+    styles: /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "1072081127",
+      dynamic: [gapUnit, gridConMargin, gridConWidth, wrap, SCALES.width(1, gridConWidth), SCALES.mt(0, gridConMargin), SCALES.mr(0, gridConMargin), SCALES.mb(0, gridConMargin), SCALES.ml(0, gridConMargin)]
+    }, "div.__jsx-style-dynamic-selector{--grid-gap-unit:".concat(gapUnit, ";--grid-container-margin:").concat(gridConMargin, ";--grid-container-width:").concat(gridConWidth, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:").concat(wrap, ";-ms-flex-wrap:").concat(wrap, ";flex-wrap:").concat(wrap, ";box-sizing:border-box;}")),
+    className: _JSXStyle.dynamic([["1072081127", [gapUnit, gridConMargin, gridConWidth, wrap, SCALES.width(1, gridConWidth), SCALES.mt(0, gridConMargin), SCALES.mr(0, gridConMargin), SCALES.mb(0, gridConMargin), SCALES.ml(0, gridConMargin)]]])
+  },
+      resolveClassName = _styles$className.className,
+      styles = _styles$className.styles;
+  var classes = useClasses(resolveClassName, className);
+  return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
+    className: classes
+  }, props), children, styles);
+}
+
+GridContainerComponent.displayName = 'BolioUIGridContainer';
+var GridContainer = withScale(GridContainerComponent);
+export default GridContainer;

package/esm/grid/grid-types.js

@@ -0,0 +1,6 @@
+import { tuple } from '../utils/prop-types';
+var justify = tuple('flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly');
+var alignItems = tuple('flex-start', 'center', 'flex-end', 'stretch', 'baseline');
+var alignContent = tuple('stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around');
+var direction = tuple('row', 'row-reverse', 'column', 'column-reverse');
+var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');

package/esm/grid/grid.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import GridBasicItem from './basic-item';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function GridComponent(_ref) {
+  var 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 gridGapUnit = 'var(--grid-gap-unit)';
+  var _styles$className = {
+    styles: /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "2935018504",
+      dynamic: [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, gridGapUnit), SCALES.pr(0, gridGapUnit), SCALES.pb(0, gridGapUnit), SCALES.pl(0, gridGapUnit)]
+    }, "div.__jsx-style-dynamic-selector{margin:".concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";box-sizing:border-box;padding:").concat(SCALES.pt(0, gridGapUnit), " ").concat(SCALES.pr(0, gridGapUnit), " ").concat(SCALES.pb(0, gridGapUnit), " ").concat(SCALES.pl(0, gridGapUnit), ";}")),
+    className: _JSXStyle.dynamic([["2935018504", [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, gridGapUnit), SCALES.pr(0, gridGapUnit), SCALES.pb(0, gridGapUnit), SCALES.pl(0, gridGapUnit)]]])
+  },
+      resolveClassName = _styles$className.className,
+      styles = _styles$className.styles;
+  var classes = useClasses(resolveClassName, className);
+  return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
+    className: classes
+  }, props), children, styles);
+}
+
+GridComponent.displayName = 'BolioUIGrid';
+var Grid = withScale(GridComponent);
+export default Grid;

package/esm/grid/index.js

@@ -0,0 +1,4 @@
+import Grid from './grid';
+import GridContainer from './grid-container';
+Grid.Container = GridContainer;
+export default Grid;

package/esm/grid/stories.js

@@ -0,0 +1,212 @@
+import Grid from '.';
+import Card from '../card';
+export default {
+  title: 'Layout/Grid',
+  component: Grid
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    justify: "center",
+    height: "100px"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 6
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%"
+  })));
+};
+export var FluidLayout = function FluidLayout() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    justify: "center"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })));
+};
+export var ResponsiveLayout = function ResponsiveLayout() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    justify: "center"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 12,
+    md: 6
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 6
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 3
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 3
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    md: 3
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })));
+};
+export var HideElement = function HideElement() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    justify: "center"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    sm: 0
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6,
+    sm: 0
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })));
+};
+export var AutoWidth = function AutoWidth() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    justify: "center"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: true
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: true
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: true
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  }))), /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    justify: "center"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: true
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: 12
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  })), /*#__PURE__*/React.createElement(Grid, {
+    xs: true
+  }, /*#__PURE__*/React.createElement(Card, {
+    shadow: true,
+    width: "100%",
+    height: "50px"
+  }))));
+};

package/esm/icon/stories.js

@@ -0,0 +1,36 @@
+import Card from '../card';
+import Grid from '../grid';
+import { Smile } from '@bolio-ui/icons';
+export default {
+  title: 'General/Icons',
+  component: Card
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, null)));
+};
+export var Colored = function Colored() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
+    color: "purple"
+  })));
+};
+export var Size = function Size() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
+    fontSize: 16
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
+    fontSize: 20
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
+    fontSize: 24
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
+    fontSize: 28
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
+    fontSize: 32
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Smile, {
+    fontSize: 36
+  })));
+};

package/esm/image/helpers.js

@@ -0,0 +1,16 @@
+export var transformDataSource = function transformDataSource(src) {
+  var left = "".concat(src).slice(0, 4);
+
+  if (encodeURIComponent(left) === '%3Csvg') {
+    return "data:image/svg+xml;utf8,".concat(src);
+  }
+
+  return src;
+};
+export var getHostFromUrl = function getHostFromUrl(url) {
+  try {
+    return new URL(url).host;
+  } catch (e) {
+    return url;
+  }
+};

package/esm/image/image-browser-https-icon.js

@@ -0,0 +1,23 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+
+var ImageBrowserHttpsIcon = function ImageBrowserHttpsIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className: "jsx-4165143638"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5 10.2H19V21H5V10.2Z",
+    className: "jsx-4165143638"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z",
+    className: "jsx-4165143638"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4165143638"
+  }, "svg.jsx-4165143638{width:1em;height:1em;}"));
+};
+
+var MemoImageBrowserHttpsIcon = /*#__PURE__*/React.memo(ImageBrowserHttpsIcon);
+export default MemoImageBrowserHttpsIcon;

package/esm/image/image-browser.js

@@ -0,0 +1,86 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["url", "title", "children", "showFullLink", "invert", "anchorProps", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import Link from '../link';
+import useTheme from '../use-theme';
+import ImageBrowserHttpsIcon from './image-browser-https-icon';
+import { getBrowserColors } from './styles';
+import { getHostFromUrl } from './helpers';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+var getTitle = function getTitle(title, colors) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["524099755", [colors.titleColor]]]) + " " + "title"
+  }, title, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "524099755",
+    dynamic: [colors.titleColor]
+  }, ".title.__jsx-style-dynamic-selector{color:".concat(colors.titleColor, ";font-size:0.75em;}")));
+};
+
+var getAddressInput = function getAddressInput(url, showFullLink, colors, anchorProps) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3718009574", [colors.inputBgColor]]]) + " " + "address-input"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3718009574", [colors.inputBgColor]]]) + " " + "https"
+  }, /*#__PURE__*/React.createElement(ImageBrowserHttpsIcon, null)), /*#__PURE__*/React.createElement(Link, _extends({
+    href: url,
+    title: url,
+    target: "_blank"
+  }, anchorProps), showFullLink ? url : getHostFromUrl(url)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3718009574",
+    dynamic: [colors.inputBgColor]
+  }, ".address-input.__jsx-style-dynamic-selector{height:1.75em;max-width:60%;min-width:40%;background-color:".concat(colors.inputBgColor, ";color:inherit;border-radius:3px;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:0 10px;overflow:hidden;position:relative;}.address-input.__jsx-style-dynamic-selector *{font-size:0.75em;color:inherit;}.address-input.__jsx-style-dynamic-selector a{max-width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;color:inherit;}.https.__jsx-style-dynamic-selector{width:0.75em;height:0.75em;font-size:1em;margin-right:0.31em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;color:inherit;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")));
+};
+
+var ImageBrowserComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var url = _ref.url,
+      title = _ref.title,
+      children = _ref.children,
+      _ref$showFullLink = _ref.showFullLink,
+      showFullLink = _ref$showFullLink === void 0 ? false : _ref$showFullLink,
+      _ref$invert = _ref.invert,
+      invert = _ref$invert === void 0 ? false : _ref$invert,
+      _ref$anchorProps = _ref.anchorProps,
+      anchorProps = _ref$anchorProps === void 0 ? {} : _ref$anchorProps,
+      _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 colors = useMemo(function () {
+    return getBrowserColors(invert, theme.palette);
+  }, [invert, theme.palette]);
+  var input = useMemo(function () {
+    if (url) return getAddressInput(url, showFullLink, colors, anchorProps);
+    if (title) return getTitle(title, colors);
+    return null;
+  }, [url, showFullLink, title, colors, anchorProps]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + (props && props.className != null && props.className || useClasses('browser', className) || "")
+  }), /*#__PURE__*/React.createElement("header", {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "traffic"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "close"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "mini"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "full"
+  })), input), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2129234839",
+    dynamic: [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]
+  }, ".browser.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:".concat(theme.expressiveness.shadowLarge, ";max-width:100%;border-radius:").concat(theme.layout.radius, ";overflow:hidden;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'max-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.browser.__jsx-style-dynamic-selector .image{border-top-left-radius:0;border-top-right-radius:0;}header.__jsx-style-dynamic-selector{height:2.5em;width:100%;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:relative;color:").concat(colors.color, ";background-color:").concat(colors.barBgColor, ";border-bottom:1px solid ").concat(colors.borderColor, ";}.traffic.__jsx-style-dynamic-selector{width:auto;position:absolute;left:").concat(theme.layout.gapHalf, ";top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);bottom:0;height:100%;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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:inherit;}.traffic.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{border-radius:50%;width:0.75em;height:0.75em;max-width:20px;max-height:20px;display:inline-block;margin-right:0.5em;}.close.__jsx-style-dynamic-selector{background-color:#ff5f56;}.mini.__jsx-style-dynamic-selector{background-color:#ffbd2e;}.full.__jsx-style-dynamic-selector{background-color:#27c93f;}")));
+});
+ImageBrowserComponent.displayName = 'BolioUIImageBrowser';
+var ImageBrowser = withScale(ImageBrowserComponent);
+export default ImageBrowser;