@bolio-ui/core 1.0.3 → 1.0.5

package/esm/Avatar/Avatar.js

@@ -0,0 +1,103 @@
+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, useRef, useState } from 'react';
+import AvatarSkeleton from './AvatarSkeleton';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+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 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([["2739790524", [radius, theme.palette.accents_2, 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([["2739790524", [radius, theme.palette.accents_2, 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([["2739790524", [radius, theme.palette.accents_2, 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: "2739790524",
+    dynamic: [radius, theme.palette.accents_2, 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_2, ";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/AvatarGroup.d.ts

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

package/esm/Avatar/AvatarSkeleton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    opacity?: number;
+}
+export declare type AvatarSkeletonProps = Props;
+declare const AvatarSkeleton: React.FC<AvatarSkeletonProps>;
+export default AvatarSkeleton;

package/esm/Avatar/index.d.ts

@@ -0,0 +1,9 @@
+import Avatar from "./Avatar";
+import AvatarGroup from "./AvatarGroup";
+export declare type AvatarComponentType = typeof Avatar & {
+    Group: typeof AvatarGroup;
+};
+export type { AvatarProps } from "./Avatar";
+export type { AvatarGroupProps } from "./AvatarGroup";
+declare const _default: AvatarComponentType;
+export default _default;

package/esm/Avatar/index.js

@@ -0,0 +1,4 @@
+import Avatar from './Avatar';
+import AvatarGroup from './AvatarGroup';
+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.d.ts

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

package/esm/Badge/BadgeAnchor.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+declare const placement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
+export declare type BadgeAnchorPlacement = typeof placement[number];
+interface Props {
+    placement?: BadgeAnchorPlacement;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type BadgeAnchorProps = Props & NativeAttrs;
+declare function BadgeAnchor({ children, placement }: BadgeAnchorProps): JSX.Element;
+declare namespace BadgeAnchor {
+    var displayName: string;
+}
+export default BadgeAnchor;

package/esm/Badge/BadgeAnchor.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/index.d.ts

@@ -0,0 +1,9 @@
+import Badge from "./Badge";
+import BadgeAnchor from "./BadgeAnchor";
+export declare type BadgeComponentType = typeof Badge & {
+    Anchor: typeof BadgeAnchor;
+};
+export type { BadgeProps, BadgeTypes } from "./Badge";
+export type { BadgeAnchorProps, BadgeAnchorPlacement } from "./BadgeAnchor";
+declare const _default: BadgeComponentType;
+export default _default;

package/esm/Badge/index.js

@@ -0,0 +1,4 @@
+import Badge from './Badge';
+import BadgeAnchor from './BadgeAnchor';
+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/BolioUIProvider/BolioUIProvider.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+import { BolioUIThemes } from "../Themes/Presets";
+export declare type BolioUIProviderProps = {
+    themes?: Array<BolioUIThemes>;
+    themeType?: string | 'dark' | 'light';
+};
+declare const BolioUIProvider: React.FC<PropsWithChildren<BolioUIProviderProps>>;
+export default BolioUIProvider;

package/esm/BolioUIProvider/BolioUIProvider.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 './ThemeProvider';
+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/BolioUIProvider/ThemeProvider.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+import { BolioUIThemes } from "../Themes/Presets";
+export interface Props {
+    themeType?: string;
+    themes?: Array<BolioUIThemes>;
+}
+declare const ThemeProvider: React.FC<PropsWithChildren<Props>>;
+export default ThemeProvider;

package/esm/BolioUIProvider/ThemeProvider.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/BolioUIProvider/index.d.ts

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

package/esm/BolioUIProvider/index.js

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

package/esm/Breadcrumbs/Breadcrumbs.d.ts

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

package/esm/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,47 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import BreadcrumbsSeparator from './BreadcrumbsSeparator';
+import { addColorAlpha } from '../utils/color';
+import useScale, { withScale } from '../use-scale';
+
+function BreadcrumbsComponent(_ref) {
+  var _ref$separator = _ref.separator,
+      separator = _ref$separator === void 0 ? '/' : _ref$separator,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className;
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var hoverColor = useMemo(function () {
+    return addColorAlpha(theme.palette.link, 0.85);
+  }, [theme.palette.link]);
+  var childrenArray = React.Children.toArray(children);
+  var withSeparatorChildren = childrenArray.map(function (item, index) {
+    if (! /*#__PURE__*/React.isValidElement(item)) return item;
+    var last = childrenArray[index - 1];
+    var lastIsSeparator = /*#__PURE__*/React.isValidElement(last) && last.type === BreadcrumbsSeparator;
+    var currentIsSeparator = item.type === BreadcrumbsSeparator;
+
+    if (!lastIsSeparator && !currentIsSeparator && index > 0) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement(BreadcrumbsSeparator, null, separator), item);
+    }
+
+    return item;
+  });
+  return /*#__PURE__*/React.createElement("nav", {
+    className: _JSXStyle.dynamic([["2655258916", [theme.palette.accents_4, SCALES.font(1), 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), hoverColor, theme.palette.accents_6]]]) + " " + (className || "")
+  }, withSeparatorChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2655258916",
+    dynamic: [theme.palette.accents_4, SCALES.font(1), 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), hoverColor, theme.palette.accents_6]
+  }, "nav.__jsx-style-dynamic-selector{line-height:inherit;color:".concat(theme.palette.accents_4, ";box-sizing:border-box;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;font-size:").concat(SCALES.font(1), ";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), ";}nav.__jsx-style-dynamic-selector .link:hover{color:").concat(hoverColor, ";}nav.__jsx-style-dynamic-selector>span:last-of-type{color:").concat(theme.palette.accents_6, ";}nav.__jsx-style-dynamic-selector>.separator:last-child{display:none;}nav.__jsx-style-dynamic-selector svg{width:1em;height:1em;margin:0 4px;}nav.__jsx-style-dynamic-selector .breadcrumbs-item{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;}")));
+}
+
+BreadcrumbsComponent.displayName = 'BolioUIBreadcrumbs';
+var Breadcrumbs = withScale(BreadcrumbsComponent);
+export default Breadcrumbs;