@bspk/ui 1.1.31 → 1.1.33

package/dist/components/BannerAlert/BannerAlert.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
+import { SvgClose } from '@bspk/icons/Close';
+import { SvgErrorFill } from '@bspk/icons/ErrorFill';
+import { SvgInfoFill } from '@bspk/icons/InfoFill';
+import { SvgWarningFill } from '@bspk/icons/WarningFill';
+import './banner-alert.css.js';
+/**
+ * A visual and contextual message used to communicate an important message or notification to users relating to a
+ * status or the body content of a page.
+ *
+ * @example
+ *     import { BannerAlert } from '@bspk/ui/BannerAlert';
+ *
+ *     function Example() {
+ *         <BannerAlert
+ *             variant="error"
+ *             header="Error"
+ *             body="There was an error processing your request."
+ *             onClose={() => console.log('Alert closed')}
+ *         />;
+ *     }
+ *
+ * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
+ *
+ *
+ *
+ *
+ * @name BannerAlert
+ * @phase DesignReview
+ */
+function BannerAlert({ variant = 'informational', onClose, header, callToAction, body, elevated = false, }) {
+    return (_jsxs("article", { "data-bspk": "banner-alert", "data-elevated": elevated || undefined, "data-variant": variant, children: [_jsxs("div", { "data-icon-bar": true, children: [variant === 'error' && _jsx(SvgErrorFill, {}), variant === 'informational' && _jsx(SvgInfoFill, {}), variant === 'success' && _jsx(SvgCheckCircleFill, {}), variant === 'warning' && _jsx(SvgWarningFill, {})] }), _jsxs("div", { "data-content": true, children: [(header || onClose) && (_jsxs("header", { children: [_jsx("span", { children: header }), typeof onClose === 'function' && (_jsx("button", { "aria-label": "Close", onClick: onClose, type: "button", children: _jsx(SvgClose, {}) }))] })), _jsxs("div", { "data-body": true, children: [_jsx("span", { children: body }), callToAction?.label && callToAction?.onClick && (_jsx("button", { onClick: callToAction.onClick, children: callToAction.label }))] })] })] }));
+}
+BannerAlert.bspkName = 'BannerAlert';
+export { BannerAlert };
+//# sourceMappingURL=BannerAlert.js.map

package/dist/components/BannerAlert/BannerAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlert.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,OAAO,qBAAqB,CAAC;AA0C7B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAS,WAAW,CAAC,EACjB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,GAAG,KAAK,GACoB;IACpC,OAAO,CACH,gCAAmB,cAAc,mBAAgB,QAAQ,IAAI,SAAS,kBAAgB,OAAO,aACzF,iDACK,OAAO,KAAK,OAAO,IAAI,KAAC,YAAY,KAAG,EACvC,OAAO,KAAK,eAAe,IAAI,KAAC,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAI,KAAC,kBAAkB,KAAG,EAC/C,OAAO,KAAK,SAAS,IAAI,KAAC,cAAc,KAAG,IAC1C,EACN,gDACK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CACpB,6BACI,yBAAO,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,IAAI,CAC9B,+BAAmB,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,YACtD,KAAC,QAAQ,KAAG,GACP,CACZ,IACI,CACZ,EACD,6CACI,yBAAO,IAAI,GAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,iBAAQ,OAAO,EAAE,YAAY,CAAC,OAAO,YAAG,YAAY,CAAC,KAAK,GAAU,CACvE,IACC,IACJ,IACA,CACb,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/BannerAlert/BannerAlertExample.d.ts

@@ -0,0 +1,3 @@
+import { ComponentExampleFn } from '../../utils/demo';
+import { BannerAlertProps } from '.';
+export declare const BannerAlertExample: ComponentExampleFn<BannerAlertProps>;

package/dist/components/BannerAlert/BannerAlertExample.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BannerAlertExample = ({ action }) => ({
+    containerStyle: { width: '100%' },
+    render: ({ props, context, Component }) => {
+        let nextHeader = props.header || 'This is a banner alert';
+        if (context?.variantName === 'variant') {
+            if (context?.variantValue === 'informational')
+                nextHeader = 'This is informational banner';
+            if (context?.variantValue === 'success')
+                nextHeader = 'This is success banner';
+            if (context?.variantValue === 'warning')
+                nextHeader = 'This is warning banner';
+            if (context?.variantValue === 'error')
+                nextHeader = 'This is error banner';
+        }
+        return _jsx(Component, { ...props, header: nextHeader });
+    },
+    presets: [
+        {
+            label: 'With CallToAction',
+            propState: {
+                callToAction: {
+                    label: 'Click me',
+                    onClick: () => action('Call to action clicked!'),
+                },
+            },
+        },
+        {
+            label: 'Without OnClose',
+            propState: {
+                onClose: undefined,
+            },
+        },
+    ],
+});
+//# sourceMappingURL=BannerAlertExample.js.map

package/dist/components/BannerAlert/BannerAlertExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerAlertExample.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlertExample.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,kBAAkB,GAAyC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACrF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;QACtC,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,IAAI,wBAAwB,CAAC;QAC1D,IAAI,OAAO,EAAE,WAAW,KAAK,SAAS,EAAE,CAAC;YACrC,IAAI,OAAO,EAAE,YAAY,KAAK,eAAe;gBAAE,UAAU,GAAG,8BAA8B,CAAC;YAC3F,IAAI,OAAO,EAAE,YAAY,KAAK,SAAS;gBAAE,UAAU,GAAG,wBAAwB,CAAC;YAC/E,IAAI,OAAO,EAAE,YAAY,KAAK,SAAS;gBAAE,UAAU,GAAG,wBAAwB,CAAC;YAC/E,IAAI,OAAO,EAAE,YAAY,KAAK,OAAO;gBAAE,UAAU,GAAG,sBAAsB,CAAC;QAC/E,CAAC;QACD,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,MAAM,EAAE,UAAU,GAAI,CAAC;IACxD,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,YAAY,EAAE;oBACV,KAAK,EAAE,UAAU;oBACjB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;aACJ;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE;gBACP,OAAO,EAAE,SAAS;aACrB;SACJ;KACJ;CACJ,CAAC,CAAC"}

package/dist/components/BannerAlert/banner-alert.css

@@ -0,0 +1,100 @@
+[data-bspk=banner-alert] {
+  --color: var(--status-information);
+  --on-color: var(--status-on-information);
+  display: flex;
+  flex-direction: row;
+  border: 2px solid var(--color);
+  border-radius: var(--radius-medium);
+  background-color: var(--surface-neutral-t1-base);
+  width: 100%;
+}
+[data-bspk=banner-alert][data-variant=error] {
+  --color: var(--status-error);
+  --on-color: var(--status-on-error);
+}
+[data-bspk=banner-alert][data-variant=success] {
+  --color: var(--status-success);
+  --on-color: var(--status-on-success);
+}
+[data-bspk=banner-alert][data-variant=warning] {
+  --color: var(--status-warning);
+  --on-color: var(--status-on-warning);
+}
+[data-bspk=banner-alert][data-elevated] {
+  box-shadow: var(--drop-shadow-raise);
+}
+[data-bspk=banner-alert] [data-icon-bar] {
+  flex: 1;
+  padding: var(--spacing-sizing-04) var(--spacing-sizing-03);
+  background: var(--color);
+  color: var(--on-color);
+}
+[data-bspk=banner-alert] [data-icon-bar] svg {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=banner-alert] [data-content] {
+  flex: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
+}
+[data-bspk=banner-alert] [data-content] header {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-sizing-03);
+  height: var(--spacing-sizing-12);
+  align-items: center;
+}
+[data-bspk=banner-alert] [data-content] header span {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  color: var(--foreground-neutral-on-surface);
+  font: var(--heading-h6);
+}
+@media (any-pointer: coarse) {
+  [data-bspk=banner-alert] [data-content] header span {
+    font: var(--heading-h6);
+  }
+}
+[data-bspk=banner-alert] [data-content] header button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0 0 0 auto;
+  color: var(--foreground-neutral-on-surface-variant-01);
+  height: var(--spacing-sizing-08);
+  width: var(--spacing-sizing-08);
+}
+@media (any-pointer: coarse) {
+  [data-bspk=banner-alert] [data-content] header button {
+    height: var(--spacing-sizing-12);
+    width: var(--spacing-sizing-12);
+  }
+}
+[data-bspk=banner-alert] [data-content] header button svg {
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+}
+[data-bspk=banner-alert] [data-content] [data-body] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-02);
+  padding: 0 var(--spacing-sizing-02) var(--spacing-sizing-02) 0;
+}
+[data-bspk=banner-alert] [data-content] [data-body] span {
+  font: var(--body-base);
+}
+[data-bspk=banner-alert] [data-content] [data-body] button {
+  margin-left: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 var(--spacing-sizing-03);
+  height: var(--spacing-sizing-12);
+  font: var(--labels-small);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/BannerAlert/banner-alert.css.js

@@ -0,0 +1,106 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=banner-alert] {
+  --color: var(--status-information);
+  --on-color: var(--status-on-information);
+  display: flex;
+  flex-direction: row;
+  border: 2px solid var(--color);
+  border-radius: var(--radius-medium);
+  background-color: var(--surface-neutral-t1-base);
+  width: 100%;
+}
+[data-bspk=banner-alert][data-variant=error] {
+  --color: var(--status-error);
+  --on-color: var(--status-on-error);
+}
+[data-bspk=banner-alert][data-variant=success] {
+  --color: var(--status-success);
+  --on-color: var(--status-on-success);
+}
+[data-bspk=banner-alert][data-variant=warning] {
+  --color: var(--status-warning);
+  --on-color: var(--status-on-warning);
+}
+[data-bspk=banner-alert][data-elevated] {
+  box-shadow: var(--drop-shadow-raise);
+}
+[data-bspk=banner-alert] [data-icon-bar] {
+  flex: 1;
+  padding: var(--spacing-sizing-04) var(--spacing-sizing-03);
+  background: var(--color);
+  color: var(--on-color);
+}
+[data-bspk=banner-alert] [data-icon-bar] svg {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=banner-alert] [data-content] {
+  flex: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
+}
+[data-bspk=banner-alert] [data-content] header {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-sizing-03);
+  height: var(--spacing-sizing-12);
+  align-items: center;
+}
+[data-bspk=banner-alert] [data-content] header span {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  color: var(--foreground-neutral-on-surface);
+  font: var(--heading-h6);
+}
+@media (any-pointer: coarse) {
+  [data-bspk=banner-alert] [data-content] header span {
+    font: var(--heading-h6);
+  }
+}
+[data-bspk=banner-alert] [data-content] header button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0 0 0 auto;
+  color: var(--foreground-neutral-on-surface-variant-01);
+  height: var(--spacing-sizing-08);
+  width: var(--spacing-sizing-08);
+}
+@media (any-pointer: coarse) {
+  [data-bspk=banner-alert] [data-content] header button {
+    height: var(--spacing-sizing-12);
+    width: var(--spacing-sizing-12);
+  }
+}
+[data-bspk=banner-alert] [data-content] header button svg {
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+}
+[data-bspk=banner-alert] [data-content] [data-body] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-02);
+  padding: 0 var(--spacing-sizing-02) var(--spacing-sizing-02) 0;
+}
+[data-bspk=banner-alert] [data-content] [data-body] span {
+  font: var(--body-base);
+}
+[data-bspk=banner-alert] [data-content] [data-body] button {
+  margin-left: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 var(--spacing-sizing-03);
+  height: var(--spacing-sizing-12);
+  font: var(--labels-small);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/BannerAlert/index.d.ts

@@ -0,0 +1 @@
+export * from './BannerAlert';

package/dist/components/BannerAlert/index.js

@@ -0,0 +1,2 @@
+export * from './BannerAlert';
+//# sourceMappingURL=index.js.map

package/dist/components/BannerAlert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,81 @@
+import { CommonProps } from '../../index.js';
+import './breadcrumb.scss';
+export type BreadcrumbItem = {
+    /**
+     * The label of the breadcrumb item.
+     *
+     * @example
+     *     'Page 1';
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The href of the breadcrumb item.
+     *
+     * @example
+     *     'https://bspk.anywhere.re';
+     *
+     * @required
+     */
+    href: string;
+};
+export type BreadcrumbProps = CommonProps<'id'> & {
+    /**
+     * The array of breadcrumb items.
+     *
+     * If **less than 2** items are provided, the component will not render.
+     *
+     * @example
+     *     [
+     *         { label: 'Level 1', href: '#level-1' },
+     *         { label: 'Level 2', href: '#level-2' },
+     *         { label: 'Level 3', href: '#level-3' },
+     *         { label: 'Level 4', href: '#level-4' },
+     *         { label: 'Level 5', href: '#level-5' },
+     *         { label: 'Level 6', href: '#level-6' },
+     *         { label: 'Level 7', href: '#level-7' },
+     *         { label: 'Level 8', href: '#level-8' },
+     *         { label: 'Level 9', href: '#level-9' },
+     *         { label: 'Level 10', href: '#level-10' },
+     *     ];
+     *
+     * @type Array<BreadcrumbItem>
+     * @required
+     */
+    items: BreadcrumbItem[];
+};
+/**
+ * Used to indicate the current page's location within a navigational hierarchy.
+ *
+ * @example
+ *     import { Breadcrumb } from '@bspk/ui/breadcrumb';
+ *
+ *     function Example() {
+ *         return (
+ *             <Breadcrumb
+ *                 items={[
+ *                     { label: 'level 1', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 2', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 3', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 4', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 5', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 6', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 7', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 8', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 9', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 10', href: 'https://bspk.anywhere.re' },
+ *                 ]}
+ *             />
+ *         );
+ *     }
+ *
+ * @name Breadcrumb
+ * @phase DesignReview
+ */
+declare function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace Breadcrumb {
+    var bspkName: string;
+}
+export { Breadcrumb };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-multi-comp */ import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { SvgMoreHoriz } from '@bspk/icons/MoreHoriz';
+import { Button } from '../Button';
+import { Link } from '../Link';
+import { ListItem } from '../ListItem';
+import { Menu } from '../Menu';
+import { Txt } from '../Txt';
+import { useCombobox } from '../../hooks/useCombobox';
+import { useId } from '../../hooks/useId';
+import './breadcrumb.css.js';
+const BreadcrumbDivider = () => _jsx(SvgChevronRight, { "aria-hidden": true });
+/**
+ * Used to indicate the current page's location within a navigational hierarchy.
+ *
+ * @example
+ *     import { Breadcrumb } from '@bspk/ui/breadcrumb';
+ *
+ *     function Example() {
+ *         return (
+ *             <Breadcrumb
+ *                 items={[
+ *                     { label: 'level 1', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 2', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 3', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 4', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 5', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 6', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 7', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 8', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 9', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 10', href: 'https://bspk.anywhere.re' },
+ *                 ]}
+ *             />
+ *         );
+ *     }
+ *
+ * @name Breadcrumb
+ * @phase DesignReview
+ */
+function Breadcrumb({ id: propId, items: itemsProp }) {
+    const id = useId(propId);
+    const items = Array.isArray(itemsProp) ? itemsProp : [];
+    const { elements, isOpen, menuProps, toggleProps, activeIndex } = useCombobox({
+        refWidth: false,
+    });
+    const middleItems = items.slice(1, items.length - 1);
+    if (items.length < 2)
+        return null; // No items to render
+    return (_jsx("nav", { "aria-label": "Breadcrumb", "data-bspk": "breadcrumb", id: id, children: _jsxs("ol", { children: [_jsxs("li", { children: [_jsx(Link, { href: items[0].href, label: items[0].label }), _jsx(BreadcrumbDivider, {})] }), items.length > 5 ? (_jsxs("li", { children: [_jsx(Button, { icon: _jsx(SvgMoreHoriz, {}), innerRef: elements.setReference, label: `Access to ${middleItems.length} pages`, showLabel: false, size: "small", toolTip: `${middleItems.length} pages`, variant: "tertiary", ...toggleProps }), isOpen && (_jsx(Menu, { innerRef: elements.setFloating, itemDisplayCount: false, ...menuProps, style: {
+                                ...menuProps.style,
+                                width: '200px',
+                            }, children: middleItems.map((item, idx) => (_jsx(ListItem, { ...item, active: activeIndex === idx || undefined, id: `${id}-item-${idx}` }, `Breadcrumb-${idx}`))) })), _jsx(BreadcrumbDivider, {})] })) : (middleItems.map((item, idx) => (_jsxs("li", { children: [_jsx(Link, { ...item }), _jsx(BreadcrumbDivider, {})] }, `Breadcrumb-${idx}`)))), _jsx("li", { "aria-current": "true", children: _jsx(Txt, { variant: "body-base", children: items[items.length - 1].label }) })] }) }));
+}
+Breadcrumb.bspkName = 'Breadcrumb';
+export { Breadcrumb };
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"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"}

package/dist/components/Breadcrumb/BreadcrumbExample.d.ts

@@ -0,0 +1,3 @@
+import { ComponentExample } from '../../utils/demo';
+import { BreadcrumbProps } from '.';
+export declare const BreadcrumbExample: ComponentExample<BreadcrumbProps>;

package/dist/components/Breadcrumb/BreadcrumbExample.js

@@ -0,0 +1,89 @@
+export const BreadcrumbExample = {
+    presets: [
+        {
+            label: '1 Item (nothing visible)',
+            propState: {
+                items: [
+                    {
+                        label: 'Item 1',
+                        href: '#link-1',
+                    },
+                ],
+            },
+        },
+        {
+            label: '2 Items (minimum)',
+            propState: {
+                items: [
+                    {
+                        label: 'Item 1',
+                        href: '#link-1',
+                    },
+                    {
+                        label: 'Item 2',
+                        href: '#link-2',
+                    },
+                ],
+            },
+        },
+        {
+            label: '5 Items',
+            propState: {
+                items: [
+                    {
+                        label: 'Item 1',
+                        href: '#link-1',
+                    },
+                    {
+                        label: 'Item 2',
+                        href: '#link-2',
+                    },
+                    {
+                        label: 'Item 3',
+                        href: '#link-3',
+                    },
+                    {
+                        label: 'Item 4',
+                        href: '#link-4',
+                    },
+                    {
+                        label: 'Item 5',
+                        href: '#link-5',
+                    },
+                ],
+            },
+        },
+        {
+            label: '6 Items',
+            propState: {
+                items: [
+                    {
+                        label: 'Item 1',
+                        href: '#link-1',
+                    },
+                    {
+                        label: 'Item 2',
+                        href: '#link-2',
+                    },
+                    {
+                        label: 'Item 3',
+                        href: '#link-3',
+                    },
+                    {
+                        label: 'Item 4',
+                        href: '#link-4',
+                    },
+                    {
+                        label: 'Item 5',
+                        href: '#link-5',
+                    },
+                    {
+                        label: 'Item 6',
+                        href: '#link-6',
+                    },
+                ],
+            },
+        },
+    ],
+};
+//# sourceMappingURL=BreadcrumbExample.js.map

package/dist/components/Breadcrumb/BreadcrumbExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbExample.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/BreadcrumbExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,OAAO,EAAE;QACL;YACI,KAAK,EAAE,0BAA0B;YACjC,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;iBACJ;aACJ;SACJ;QACD;YACI,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;oBACD;wBACI,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,SAAS;qBAClB;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC"}

package/dist/components/Breadcrumb/breadcrumb.css

@@ -0,0 +1,14 @@
+[data-bspk=breadcrumb] {
+  width: 100%;
+}
+[data-bspk=breadcrumb] ol {
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  list-style: none;
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=breadcrumb] ol li {
+  display: flex;
+  gap: var(--spacing-sizing-02);
+}

package/dist/components/Breadcrumb/breadcrumb.css.js

@@ -0,0 +1,20 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=breadcrumb] {
+  width: 100%;
+}
+[data-bspk=breadcrumb] ol {
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  list-style: none;
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=breadcrumb] ol li {
+  display: flex;
+  gap: var(--spacing-sizing-02);
+}
+`));
+document.head.appendChild(style);
+

package/dist/components/Breadcrumb/index.d.ts

@@ -0,0 +1 @@
+export * from './Breadcrumb';

package/dist/components/Breadcrumb/index.js

@@ -0,0 +1,2 @@
+export * from './Breadcrumb';
+//# sourceMappingURL=index.js.map

package/dist/components/Breadcrumb/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}