@bolio-ui/core 1.0.4 → 1.0.6

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<Props & NativeAttrs & import("../use-scale").ScaleProps & 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<Props & NativeAttrs & import("../use-scale").ScaleProps & 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;

package/esm/Breadcrumbs/BreadcrumbsItem.d.ts

@@ -0,0 +1,15 @@
+import { Props as LinkBasicProps } from "../Link/Link";
+import React from 'react';
+interface Props {
+    href?: string;
+    nextLink?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>;
+declare type NativeLinkAttrs = Omit<NativeAttrs, keyof LinkBasicProps>;
+export declare type BreadcrumbsItemProps = Props & NativeLinkAttrs;
+declare const BreadcrumbsItem: React.ForwardRefExoticComponent<Props & NativeLinkAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export default BreadcrumbsItem;

package/esm/Breadcrumbs/BreadcrumbsItem.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 './BreadcrumbsSeparator';
+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;

package/esm/Breadcrumbs/BreadcrumbsSeparator.d.ts

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

package/esm/Breadcrumbs/index.d.ts

@@ -0,0 +1,12 @@
+import Breadcrumbs from "./Breadcrumbs";
+import BreadcrumbsItem from "./BreadcrumbsItem";
+import BreadcrumbsSeparator from "./BreadcrumbsSeparator";
+export declare type BreadcrumbsComponentType = typeof Breadcrumbs & {
+    Item: typeof BreadcrumbsItem;
+    Separator: typeof BreadcrumbsSeparator;
+};
+export type { BreadcrumbsProps } from "./Breadcrumbs";
+export type { BreadcrumbsItemProps } from "./BreadcrumbsItem";
+export type { BreadcrumbsSeparatorProps } from "./BreadcrumbsSeparator";
+declare const _default: BreadcrumbsComponentType;
+export default _default;

package/esm/Breadcrumbs/index.js

@@ -0,0 +1,6 @@
+import Breadcrumbs from './Breadcrumbs';
+import BreadcrumbsItem from './BreadcrumbsItem';
+import BreadcrumbsSeparator from './BreadcrumbsSeparator';
+Breadcrumbs.Item = BreadcrumbsItem;
+Breadcrumbs.Separator = BreadcrumbsSeparator;
+export default Breadcrumbs;