@bolio-ui/core 1.0.0

package/esm/avatar/avatar.js

@@ -0,0 +1,107 @@
+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 = ["src", "stacked", "text", "isSquare", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import AvatarSkeleton from './avatar.skeleton';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+import { transformDataSource } from './helpers';
+
+var safeText = function safeText(text) {
+  if (text.length <= 4) return text;
+  return text.slice(0, 3);
+};
+
+function AvatarComponent(_ref) {
+  var src = _ref.src,
+      _ref$stacked = _ref.stacked,
+      stacked = _ref$stacked === void 0 ? false : _ref$stacked,
+      _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$isSquare = _ref.isSquare,
+      isSquare = _ref$isSquare === void 0 ? false : _ref$isSquare,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES,
+      getScaleProps = _useScale.getScaleProps;
+
+  var showText = !src;
+  var radius = isSquare ? theme.layout.radius : '50%';
+  var marginLeft = stacked ? SCALES.ml(-0.625) : SCALES.ml(0);
+  var classes = useClasses('avatar', className);
+  var width = getScaleProps(['width', 'w']);
+  var height = getScaleProps(['height', 'h']);
+  var showAnimation = width && height;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showSkeleton = _useState4[0],
+      setShowSkeleton = _useState4[1];
+
+  var imageRef = useRef(null);
+  var url = useMemo(function () {
+    return transformDataSource(src);
+  }, [src]);
+
+  var imageLoaded = function imageLoaded() {
+    if (!showAnimation) return;
+    setLoading(false);
+  };
+
+  useEffect(function () {
+    if (!showAnimation) return;
+    if (!imageRef.current) return;
+
+    if (imageRef.current.complete) {
+      setLoading(false);
+      setShowSkeleton(false);
+    }
+  }, [showAnimation]);
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      if (showAnimation) {
+        setShowSkeleton(false);
+      }
+
+      clearTimeout(timer);
+    }, 3000);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [loading, showAnimation]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["1130296330", [radius, theme.palette.accents_1, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
+  }, !showText && /*#__PURE__*/React.createElement(React.Fragment, null, showSkeleton && showAnimation && /*#__PURE__*/React.createElement(AvatarSkeleton, {
+    opacity: loading ? 1 : 0
+  }), /*#__PURE__*/React.createElement("img", _extends({
+    alt: "Avatar",
+    src: src,
+    ref: imageRef,
+    onLoad: imageLoaded,
+    draggable: false
+  }, props, {
+    className: _JSXStyle.dynamic([["1130296330", [radius, theme.palette.accents_1, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
+  }))), showText && /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1130296330", [radius, theme.palette.accents_1, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
+  }), safeText(text)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1130296330",
+    dynamic: [radius, theme.palette.accents_1, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]
+  }, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.accents_1, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";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(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
+}
+
+AvatarComponent.displayName = 'BolioUIAvatar';
+var Avatar = withScale(AvatarComponent);
+export default Avatar;

package/esm/avatar/avatar.skeleton.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["opacity"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+var AvatarSkeleton = /*#__PURE__*/React.memo(function (_ref) {
+  var _ref$opacity = _ref.opacity,
+      opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2946022605", [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity]]]) + " " + (props && props.className != null && props.className || "skeleton")
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2946022605",
+    dynamic: [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity]
+  }, ".skeleton.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-image:linear-gradient( 270deg, ".concat(theme.palette.accents_1, ", ").concat(theme.palette.accents_2, ", ").concat(theme.palette.accents_2, ", ").concat(theme.palette.accents_1, " );background-size:400% 100%;-webkit-animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;opacity:").concat(opacity, ";-webkit-transition:opacity 300ms ease-out;transition:opacity 300ms ease-out;}@-webkit-keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}@keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}")));
+});
+AvatarSkeleton.displayName = 'BolioUIAvatarSkeleton';
+export default AvatarSkeleton;

package/esm/avatar/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/avatar/index.js

@@ -0,0 +1,4 @@
+import Avatar from './avatar';
+import AvatarGroup from './avatar-group';
+Avatar.Group = AvatarGroup;
+export default Avatar;

package/esm/avatar/stories.js

@@ -0,0 +1,113 @@
+import Avatar from '.';
+import Grid from '../grid';
+export default {
+  title: 'Data Display/Avatar',
+  component: Avatar
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://i.pravatar.cc/150?img=60",
+    isSquare: true,
+    width: 1.5,
+    height: 1.5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    text: "Bill",
+    isSquare: true,
+    width: 1.5,
+    height: 1.5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://i.pravatar.cc/150?img=30",
+    isSquare: true,
+    width: 1.5,
+    height: 1.5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    text: "Max",
+    isSquare: true,
+    width: 1.5,
+    height: 1.5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://i.pravatar.cc/150?img=20",
+    isSquare: true,
+    width: 1.5,
+    height: 1.5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    text: "Jane",
+    isSquare: true,
+    width: 1.5,
+    height: 1.5
+  })));
+};
+export var Text = function Text() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    text: "BA",
+    width: 1.5,
+    height: 1.5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    text: "ES",
+    width: 1.5,
+    height: 1.5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    text: "MB",
+    width: 1.5,
+    height: 1.5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    text: "WL",
+    width: 1.5,
+    height: 1.5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    text: "ML",
+    width: 1.5,
+    height: 1.5
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar, {
+    text: "TR",
+    width: 1.5,
+    height: 1.5
+  })));
+};
+export var Group = function Group() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar.Group, null, /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://i.pravatar.cc/150?img=60",
+    width: 1.5,
+    height: 1.5,
+    stacked: true
+  }), /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://i.pravatar.cc/150?img=30",
+    width: 1.5,
+    height: 1.5,
+    stacked: true
+  }), /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://i.pravatar.cc/150?img=20",
+    width: 1.5,
+    height: 1.5,
+    stacked: true
+  }), /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://i.pravatar.cc/150?img=10",
+    width: 1.5,
+    height: 1.5,
+    stacked: true
+  }))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Avatar.Group, {
+    count: 6
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://i.pravatar.cc/150?img=60",
+    width: 1.5,
+    height: 1.5,
+    stacked: true
+  }), /*#__PURE__*/React.createElement(Avatar, {
+    text: "C",
+    width: 1.5,
+    height: 1.5,
+    stacked: true
+  }), /*#__PURE__*/React.createElement(Avatar, {
+    text: "Mag",
+    width: 1.5,
+    height: 1.5,
+    stacked: true
+  }))));
+};

package/esm/badge/badge-anchor.js

@@ -0,0 +1,70 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import { pickChild } from '../utils/collections';
+import { tuple } from '../utils/prop-types';
+import Badge from './badge';
+var placement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
+
+var getTransform = function getTransform(placement) {
+  var styles = {
+    topLeft: {
+      top: '0',
+      left: '0',
+      value: 'translate(-50%, -50%)',
+      origin: '0% 0%'
+    },
+    topRight: {
+      top: '0',
+      right: '0',
+      value: 'translate(50%, -50%)',
+      origin: '100% 0%'
+    },
+    bottomLeft: {
+      left: '0',
+      bottom: '0',
+      value: 'translate(-50%, 50%)',
+      origin: '0% 100%'
+    },
+    bottomRight: {
+      right: '0',
+      bottom: '0',
+      value: 'translate(50%, 50%)',
+      origin: '100% 100%'
+    }
+  };
+  return styles[placement];
+};
+
+function BadgeAnchor(_ref) {
+  var children = _ref.children,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'topRight' : _ref$placement;
+
+  var _pickChild = pickChild(children, Badge),
+      _pickChild2 = _slicedToArray(_pickChild, 2),
+      withoutBadgeChildren = _pickChild2[0],
+      badgeChldren = _pickChild2[1];
+
+  var _useMemo = useMemo(function () {
+    return getTransform(placement);
+  }, [placement]),
+      top = _useMemo.top,
+      bottom = _useMemo.bottom,
+      left = _useMemo.left,
+      right = _useMemo.right,
+      value = _useMemo.value,
+      origin = _useMemo.origin;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1121745930", [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]]]) + " " + "anchor"
+  }, withoutBadgeChildren, /*#__PURE__*/React.createElement("sup", {
+    className: _JSXStyle.dynamic([["1121745930", [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]]])
+  }, badgeChldren), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1121745930",
+    dynamic: [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]
+  }, ".anchor.__jsx-style-dynamic-selector{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;box-sizing:border-box;}sup.__jsx-style-dynamic-selector{position:absolute;top:".concat(top || 'auto', ";left:").concat(left || 'auto', ";right:").concat(right || 'auto', ";bottom:").concat(bottom || 'auto', ";-webkit-transform:").concat(value, ";-ms-transform:").concat(value, ";transform:").concat(value, ";-webkit-transform-origin:").concat(origin, ";-ms-transform-origin:").concat(origin, ";transform-origin:").concat(origin, ";z-index:1;}")));
+}
+
+BadgeAnchor.displayName = 'BolioUIBadgeAnchor';
+export default BadgeAnchor;

package/esm/badge/badge.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "className", "children", "dot"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+var getBgColor = function getBgColor(type, palette) {
+  var colors = {
+    "default": palette.foreground,
+    secondary: palette.secondary,
+    primary: palette.primary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  return colors[type];
+};
+
+function BadgeComponent(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      children = _ref.children,
+      _ref$dot = _ref.dot,
+      dot = _ref$dot === void 0 ? false : _ref$dot,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var bg = useMemo(function () {
+    return getBgColor(type, theme.palette);
+  }, [type, theme.palette]);
+  var color = useMemo(function () {
+    if (!type || type === 'default') return theme.palette.background;
+    return 'white';
+  }, [type, theme.palette.background]);
+  var classes = useClasses('badge', {
+    dot: dot
+  }, className);
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: _JSXStyle.dynamic([["3372370275", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), !dot && children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3372370275",
+    dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
+  }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";font-weight:500;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.5), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
+}
+
+BadgeComponent.displayName = 'BolioUIBadge';
+var Badge = withScale(BadgeComponent);
+export default Badge;

package/esm/badge/index.js

@@ -0,0 +1,4 @@
+import Badge from './badge';
+import BadgeAnchor from './badge-anchor';
+Badge.Anchor = BadgeAnchor;
+export default Badge;

package/esm/badge/stories.js

@@ -0,0 +1,92 @@
+import { useTheme } from '../use-theme/theme-context';
+import Badge from '.';
+import Grid from '../grid';
+import Avatar from '../avatar';
+import Button from '../button';
+import Link from '../link';
+export default {
+  title: 'Data Display/Badge',
+  component: Badge
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, null, "Default")));
+};
+export var Type = function Type() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, null, "Default")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
+    type: "primary"
+  }, "Primary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
+    type: "secondary"
+  }, "Secondary")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
+    type: "success"
+  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
+    type: "warning"
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
+    type: "error"
+  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
+    type: "info"
+  }, "Info")));
+};
+export var CustomColor = function CustomColor() {
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      backgroundColor: theme.palette.successLight
+    }
+  }, "Success Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      backgroundColor: theme.palette.alert
+    }
+  }, "Alert")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      backgroundColor: theme.palette.purple
+    }
+  }, "Purple")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
+    style: {
+      backgroundColor: theme.palette.secondary
+    }
+  }, "Violet")));
+};
+export var Anchor = function Anchor() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge.Anchor, null, /*#__PURE__*/React.createElement(Badge, {
+    scale: 0.5
+  }, "10"), /*#__PURE__*/React.createElement(Avatar, {
+    src: "https://i.pravatar.cc/150?img=60"
+  }))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge.Anchor, {
+    placement: "bottomRight"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    scale: 0.5,
+    type: "success"
+  }, "10"), /*#__PURE__*/React.createElement(Avatar, {
+    scale: 1.5,
+    isSquare: true,
+    src: "https://i.pravatar.cc/150?img=30"
+  }))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge.Anchor, null, /*#__PURE__*/React.createElement(Badge, {
+    scale: 0.5,
+    type: "warning"
+  }, "99+"), /*#__PURE__*/React.createElement(Button, {
+    scale: 0.5,
+    auto: true
+  }, "Action"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge.Anchor, null, /*#__PURE__*/React.createElement(Badge, {
+    scale: 0.5,
+    type: "error",
+    dot: true
+  }), /*#__PURE__*/React.createElement(Link, {
+    target: "_blank",
+    href: "https://github.com/bolio-ui/bolio-ui/"
+  }, "Bolio UI"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge.Anchor, null, /*#__PURE__*/React.createElement(Badge, {
+    type: "error",
+    dot: true,
+    padding: "5px"
+  }), /*#__PURE__*/React.createElement(Link, {
+    target: "_blank",
+    href: "https://github.com/bolio-ui/bolio-ui/"
+  }, "Share Link"))));
+};

package/esm/bolio-ui-provider/bolio-ui-provider.js

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useMemo, useState } from 'react';
+import { BolioUIContent, defaultToastLayout } from '../utils/use-bolio-ui-context';
+import ThemeProvider from './theme-provider';
+import useCurrentState from '../utils/use-current-state';
+import ToastContainer from '../use-toasts/toast-container';
+
+var BolioUIProvider = function BolioUIProvider(_ref) {
+  var themes = _ref.themes,
+      themeType = _ref.themeType,
+      children = _ref.children;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      lastUpdateToastId = _useState2[0],
+      setLastUpdateToastId = _useState2[1];
+
+  var _useCurrentState = useCurrentState([]),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      toasts = _useCurrentState2[0],
+      setToasts = _useCurrentState2[1],
+      toastsRef = _useCurrentState2[2];
+
+  var _useCurrentState3 = useCurrentState(defaultToastLayout),
+      _useCurrentState4 = _slicedToArray(_useCurrentState3, 3),
+      toastLayout = _useCurrentState4[0],
+      setToastLayout = _useCurrentState4[1],
+      toastLayoutRef = _useCurrentState4[2];
+
+  var updateToasts = function updateToasts(fn) {
+    var nextToasts = fn(toastsRef.current);
+    setToasts(nextToasts);
+  };
+
+  var updateToastLayout = function updateToastLayout(fn) {
+    var nextLayout = fn(toastLayoutRef.current);
+    setToastLayout(nextLayout);
+  };
+
+  var updateLastToastId = function updateLastToastId(fn) {
+    setLastUpdateToastId(fn());
+  };
+
+  var initialValue = useMemo(function () {
+    return {
+      toasts: toasts,
+      toastLayout: toastLayout,
+      updateToasts: updateToasts,
+      lastUpdateToastId: lastUpdateToastId,
+      updateToastLayout: updateToastLayout,
+      updateLastToastId: updateLastToastId
+    };
+  }, [toasts, toastLayout, lastUpdateToastId]);
+  return /*#__PURE__*/React.createElement(BolioUIContent.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    themes: themes,
+    themeType: themeType
+  }, children, /*#__PURE__*/React.createElement(ToastContainer, null)));
+};
+
+export default BolioUIProvider;

package/esm/bolio-ui-provider/index.js

@@ -0,0 +1,2 @@
+import BolioUIProvider from './bolio-ui-provider';
+export default BolioUIProvider;

package/esm/bolio-ui-provider/theme-provider.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useMemo, useState } from 'react';
+import Themes from '../themes';
+import { ThemeContext } from '../use-theme/theme-context';
+import { AllThemesContext } from '../use-all-themes/all-themes-context';
+
+var ThemeProvider = function ThemeProvider(_ref) {
+  var children = _ref.children,
+      themeType = _ref.themeType,
+      _ref$themes = _ref.themes,
+      themes = _ref$themes === void 0 ? [] : _ref$themes;
+
+  var _useState = useState({
+    themes: Themes.getPresets()
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      allThemes = _useState2[0],
+      setAllThemes = _useState2[1];
+
+  var currentTheme = useMemo(function () {
+    var theme = allThemes.themes.find(function (item) {
+      return item.type === themeType;
+    });
+    if (theme) return theme;
+    return Themes.getPresetStaticTheme();
+  }, [allThemes, themeType]);
+  useEffect(function () {
+    if (!(themes !== null && themes !== void 0 && themes.length)) return;
+    setAllThemes(function (last) {
+      var safeThemes = themes.filter(function (item) {
+        return Themes.isAvailableThemeType(item.type);
+      });
+      var nextThemes = Themes.getPresets().concat(safeThemes);
+      return _extends({}, last, {
+        themes: nextThemes
+      });
+    });
+  }, [themes]);
+  return /*#__PURE__*/React.createElement(AllThemesContext.Provider, {
+    value: allThemes
+  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: currentTheme
+  }, children));
+};
+
+export default ThemeProvider;

package/esm/breadcrumbs/breadcrumbs-item.js

@@ -0,0 +1,49 @@
+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 = ["href", "nextLink", "onClick", "children", "className"];
+import Link from '../link';
+import React, { useMemo } from 'react';
+import { pickChild } from '../utils/collections';
+import BreadcrumbsSeparator from './breadcrumbs-separator';
+import useClasses from '../use-classes';
+var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var href = _ref.href,
+      _ref$nextLink = _ref.nextLink,
+      nextLink = _ref$nextLink === void 0 ? false : _ref$nextLink,
+      onClick = _ref.onClick,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var isLink = useMemo(function () {
+    return href !== undefined || nextLink;
+  }, [href, nextLink]);
+
+  var _pickChild = pickChild(children, BreadcrumbsSeparator),
+      _pickChild2 = _slicedToArray(_pickChild, 1),
+      withoutSepChildren = _pickChild2[0];
+
+  var classes = useClasses('breadcrumbs-item', className);
+
+  var clickHandler = function clickHandler(event) {
+    onClick && onClick(event);
+  };
+
+  if (!isLink) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: classes,
+      onClick: clickHandler
+    }, withoutSepChildren);
+  }
+
+  return /*#__PURE__*/React.createElement(Link, _extends({
+    className: classes,
+    href: href,
+    onClick: clickHandler,
+    ref: ref
+  }, props), withoutSepChildren);
+});
+BreadcrumbsItem.displayName = 'BolioUIBreadcrumbsItem';
+export default BreadcrumbsItem;