@bspk/ui 1.2.0 → 1.3.1

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

@@ -61,26 +61,6 @@ style.appendChild(document.createTextNode(`[data-bspk=banner-alert] {
     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;
@@ -92,12 +72,6 @@ style.appendChild(document.createTextNode(`[data-bspk=banner-alert] {
 }
 [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/BottomNavigation/BottomNavigation.d.ts

@@ -0,0 +1,53 @@
+import './bottom-navigation.scss';
+import { TabListProps } from '-/components/TabList';
+export type BottomNavigationProps = Pick<TabListProps, 'label' | 'onChange' | 'options' | 'value'> & {
+    /**
+     * Determines how the BottomNavigation will appear.
+     *
+     * @default flat
+     */
+    variant?: 'elevated' | 'flat';
+    /**
+     * If the bottom navigation should render inline or fixed to the bottom of the viewport.
+     *
+     * @default inline
+     */
+    mode?: 'fixed' | 'inline';
+};
+/**
+ * A bottom bar displaying three to five top level destinations at the bottom of screen for a mobile application.
+ *
+ * @example
+ *     import { BottomNavigation } from '@bspk/ui/BottomNavigation';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState<string>('1');
+ *
+ *         return (
+ *             <BottomNavigation
+ *                 value={value}
+ *                 onChange={onChange}
+ *                 options={[
+ *                     {
+ *                         value: '1',
+ *                         label: 'Item 1',
+ *                         icon: <SvgSettings />,
+ *                         iconSelected: <SvgSettingsFill />,
+ *                     },
+ *                     {
+ *                         value: '2',
+ *                         label: 'Item 2',
+ *                         icon: <SvgCloud />,
+ *                         iconSelected: <SvgCloudFill />,
+ *                     },
+ *                 ]}
+ *             />
+ *         );
+ *     }
+ *
+ * @name BottomNavigation
+ * @phase Dev
+ */
+export declare function BottomNavigation({ mode, variant, ...tabListProps }: BottomNavigationProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/BottomNavigation/BottomNavigation.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './bottom-navigation.css.js';
+import { TabList } from '../TabList';
+/**
+ * A bottom bar displaying three to five top level destinations at the bottom of screen for a mobile application.
+ *
+ * @example
+ *     import { BottomNavigation } from '@bspk/ui/BottomNavigation';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState<string>('1');
+ *
+ *         return (
+ *             <BottomNavigation
+ *                 value={value}
+ *                 onChange={onChange}
+ *                 options={[
+ *                     {
+ *                         value: '1',
+ *                         label: 'Item 1',
+ *                         icon: <SvgSettings />,
+ *                         iconSelected: <SvgSettingsFill />,
+ *                     },
+ *                     {
+ *                         value: '2',
+ *                         label: 'Item 2',
+ *                         icon: <SvgCloud />,
+ *                         iconSelected: <SvgCloudFill />,
+ *                     },
+ *                 ]}
+ *             />
+ *         );
+ *     }
+ *
+ * @name BottomNavigation
+ * @phase Dev
+ */
+export function BottomNavigation({ mode = 'inline', variant = 'flat', ...tabListProps }) {
+    return (_jsx(TabList, { "data-bspk": "bottom-navigation", "data-mode": mode, "data-variant": variant, size: "large", ...tabListProps }));
+}
+//# sourceMappingURL=BottomNavigation.js.map

package/dist/components/BottomNavigation/BottomNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNavigation.js","sourceRoot":"","sources":["../../../src/components/BottomNavigation/BottomNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAgB,MAAM,sBAAsB,CAAC;AAiB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,YAAY,EAAyB;IAC1G,OAAO,CACH,KAAC,OAAO,iBAAW,mBAAmB,eAAY,IAAI,kBAAgB,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,YAAY,GAAI,CACnH,CAAC;AACN,CAAC"}

package/dist/components/BottomNavigation/BottomNavigationExample.d.ts

@@ -0,0 +1,4 @@
+import { BottomNavigationProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<BottomNavigationProps>[];
+export declare const BottomNavigationExample: ComponentExample<BottomNavigationProps>;

package/dist/components/BottomNavigation/BottomNavigationExample.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgCloud } from '@bspk/icons/Cloud';
+import { SvgCloudFill } from '@bspk/icons/CloudFill';
+import { SvgEvent } from '@bspk/icons/Event';
+import { SvgEventFill } from '@bspk/icons/EventFill';
+import { SvgPerson } from '@bspk/icons/Person';
+import { SvgPersonFill } from '@bspk/icons/PersonFill';
+import { SvgSettings } from '@bspk/icons/Settings';
+import { SvgSettingsFill } from '@bspk/icons/SettingsFill';
+import { SvgSmartphone } from '@bspk/icons/Smartphone';
+import { SvgSmartphoneFill } from '@bspk/icons/SmartphoneFill';
+export const presets = [
+    {
+        label: 'Three options',
+        propState: {
+            options: [
+                {
+                    value: '1',
+                    label: 'Item 1',
+                    icon: _jsx(SvgSettings, {}),
+                    iconSelected: _jsx(SvgSettingsFill, {}),
+                },
+                {
+                    value: '2',
+                    label: 'Item 2',
+                    icon: _jsx(SvgCloud, {}),
+                    iconSelected: _jsx(SvgCloudFill, {}),
+                },
+                {
+                    value: '3',
+                    label: 'Item 3',
+                    icon: _jsx(SvgSmartphone, {}),
+                    iconSelected: _jsx(SvgSmartphoneFill, {}),
+                },
+            ],
+            value: '1',
+            label: 'Single Icon',
+        },
+    },
+    {
+        label: 'Five options',
+        propState: {
+            options: [
+                {
+                    value: '1',
+                    label: 'Item 1',
+                    icon: _jsx(SvgSettings, {}),
+                    iconSelected: _jsx(SvgSettingsFill, {}),
+                },
+                {
+                    value: '2',
+                    label: 'Item 2',
+                    icon: _jsx(SvgCloud, {}),
+                    iconSelected: _jsx(SvgCloudFill, {}),
+                },
+                {
+                    value: '3',
+                    label: 'Item 3',
+                    icon: _jsx(SvgSmartphone, {}),
+                    iconSelected: _jsx(SvgSmartphoneFill, {}),
+                },
+                {
+                    value: '4',
+                    label: 'Item 4',
+                    icon: _jsx(SvgEvent, {}),
+                    iconSelected: _jsx(SvgEventFill, {}),
+                },
+                {
+                    value: '5',
+                    label: 'Item 5',
+                    icon: _jsx(SvgPerson, {}),
+                    iconSelected: _jsx(SvgPersonFill, {}),
+                },
+            ],
+            value: '1',
+            label: 'Single Icon',
+        },
+    },
+    {
+        label: 'Disabled option',
+        propState: {
+            options: [
+                {
+                    value: '1',
+                    label: 'Item 1',
+                    icon: _jsx(SvgSettings, {}),
+                    iconSelected: _jsx(SvgSettingsFill, {}),
+                },
+                {
+                    value: '2',
+                    label: 'Item 2',
+                    icon: _jsx(SvgCloud, {}),
+                    iconSelected: _jsx(SvgCloudFill, {}),
+                    disabled: true,
+                },
+            ],
+            value: '1',
+            label: 'Single Icon',
+        },
+    },
+];
+export const BottomNavigationExample = {
+    containerStyle: {
+        height: '200px',
+        width: '100%',
+        padding: 0,
+        justifyContent: 'end',
+    },
+    defaultState: {
+        value: '1',
+        options: presets[0].propState.options,
+    },
+    disableProps: [],
+    presets,
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
+    sections: [],
+    variants: false,
+};
+//# sourceMappingURL=BottomNavigationExample.js.map

package/dist/components/BottomNavigation/BottomNavigationExample.js.map

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

package/dist/components/BottomNavigation/bottom-navigation.css

@@ -0,0 +1,68 @@
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] {
+  width: 100%;
+  border-top: solid 1px var(--stroke-neutral-low);
+  box-sizing: border-box;
+  background-color: var(--background-base);
+  height: var(--spacing-sizing-13);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation][data-variant=elevated] {
+  box-shadow: var(--drop-shadow-north);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation]:has(:focus-visible) {
+  outline: none;
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li {
+  flex: 1;
+  position: relative;
+  height: var(--spacing-sizing-13);
+  color: var(--foreground-neutral-on-surface-variant-02);
+  font: var(--labels-x-small);
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[data-pseudo=focus] > ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li, ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:focus-visible {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[aria-selected=true] {
+  color: var(--foreground-brand-primary);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[aria-selected=true]::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: var(--spacing-sizing-06);
+  height: 2px;
+  border-radius: 0 0 2px 2px;
+  background-color: var(--foreground-brand-primary);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[aria-disabled=true] {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-pseudo=hover] ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]), ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]):hover {
+  background-color: var(--interactions-neutral-hover-opacity);
+}
+[data-pseudo=active] ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]), ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]):active {
+  background-color: var(--interactions-neutral-press-opacity);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation][data-mode=fixed] {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: var(--surface-neutral-t1-base);
+  box-shadow: var(--drop-shadow-north);
+  z-index: var(--z-index-button-dock);
+}
+
+@media (width >= 640px) {
+  ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-sizing-02);
+  }
+  ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[data-active=true]::after {
+    width: var(--spacing-sizing-12);
+  }
+}
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/BottomNavigation/bottom-navigation.css.js

@@ -0,0 +1,73 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] {
+  width: 100%;
+  border-top: solid 1px var(--stroke-neutral-low);
+  box-sizing: border-box;
+  background-color: var(--background-base);
+  height: var(--spacing-sizing-13);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation][data-variant=elevated] {
+  box-shadow: var(--drop-shadow-north);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation]:has(:focus-visible) {
+  outline: none;
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li {
+  flex: 1;
+  position: relative;
+  height: var(--spacing-sizing-13);
+  color: var(--foreground-neutral-on-surface-variant-02);
+  font: var(--labels-x-small);
+  flex-direction: column;
+  gap: 0;
+  overflow: hidden;
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[data-pseudo=focus] > ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li, ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:focus-visible {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[aria-selected=true] {
+  color: var(--foreground-brand-primary);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[aria-selected=true]::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: var(--spacing-sizing-06);
+  height: 2px;
+  border-radius: 0 0 2px 2px;
+  background-color: var(--foreground-brand-primary);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[aria-disabled=true] {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-pseudo=hover] ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]), ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]):hover {
+  background-color: var(--interactions-neutral-hover-opacity);
+}
+[data-pseudo=active] ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]), ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]):active {
+  background-color: var(--interactions-neutral-press-opacity);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation][data-mode=fixed] {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: var(--surface-neutral-t1-base);
+  box-shadow: var(--drop-shadow-north);
+  z-index: var(--z-index-button-dock);
+}
+
+@media (width >= 640px) {
+  ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-sizing-02);
+  }
+  ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[data-active=true]::after {
+    width: var(--spacing-sizing-12);
+  }
+}
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

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

package/dist/components/BottomNavigation/index.js

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

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

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

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

@@ -1,6 +1,6 @@
-import { CommonProps } from '-/types/common';
 import './breadcrumb.scss';
-import '-/components/ListItem/list-item.scss';
+import { ListItemMenuProps } from '-/components/ListItemMenu';
+import { CommonProps } from '-/types/common';
 export type BreadcrumbItem = {
     /**
      * The label of the breadcrumb item.
@@ -21,7 +21,7 @@ export type BreadcrumbItem = {
      */
     href: string;
 };
-export type BreadcrumbProps = CommonProps<'id'> & {
+export type BreadcrumbProps = CommonProps<'id'> & Pick<ListItemMenuProps, 'scrollLimit'> & {
     /**
      * The array of breadcrumb items.
      *
@@ -74,5 +74,5 @@ export type BreadcrumbProps = CommonProps<'id'> & {
  * @name Breadcrumb
  * @phase UXReview
  */
-export declare function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Breadcrumb({ id: propId, items: itemsProp, scrollLimit }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './breadcrumb.css.js';
 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 { ListItemMenu } from '../ListItemMenu';
 import { Txt } from '../Txt';
-import { useCombobox } from '../../hooks/useCombobox';
 import { useId } from '../../hooks/useId';
-import './breadcrumb.css.js';
-import '../ListItem/list-item.css.js';
+import { useIds } from '../../utils/useIds';
 /**
  * Used to indicate the current page's location within a navigational hierarchy.
  *
@@ -38,18 +36,11 @@ import '../ListItem/list-item.css.js';
  * @name Breadcrumb
  * @phase UXReview
  */
-export function Breadcrumb({ id: propId, items: itemsProp }) {
+export function Breadcrumb({ id: propId, items: itemsProp = [], scrollLimit }) {
     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);
+    const items = useIds(`breadcrumb-${id}`, itemsProp);
     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(SvgChevronRight, { "aria-hidden": true })] }), items.length > 5 ? (_jsxs("li", { children: [_jsx(Button, { icon: _jsx(SvgMoreHoriz, {}), iconOnly: true, innerRef: elements.setReference, label: `Access to ${middleItems.length} pages`, size: "small", toolTip: `${middleItems.length} pages`, variant: "tertiary", ...toggleProps }), isOpen && (_jsx(Menu, { innerRef: elements.setFloating, itemCount: middleItems.length, itemDisplayCount: middleItems.length <= 10 ? middleItems.length : 10, ...menuProps, role: "navigation", style: {
-                                ...menuProps.style,
-                                width: '200px',
-                            }, children: middleItems.map((item, idx) => (_jsx(ListItem, { ...item, active: activeIndex === idx || undefined, id: `${id}-item-${idx}` }, `Breadcrumb-${idx}`))) })), _jsx(SvgChevronRight, { "aria-hidden": true })] })) : (middleItems.map((item, idx) => (_jsxs("li", { children: [_jsx(Link, { ...item }), _jsx(SvgChevronRight, { "aria-hidden": true })] }, `Breadcrumb-${idx}`)))), _jsx("li", { "aria-current": "true", children: _jsx(Txt, { variant: "body-base", children: items[items.length - 1].label }) })] }) }));
+        return null;
+    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(SvgChevronRight, { "aria-hidden": true })] }), items.length > 5 ? (_jsxs("li", { children: [_jsx(ListItemMenu, { hideWhenClosed: true, itemOnClick: ({ setShow }) => setShow(false), items: items.slice(1, items.length - 1), label: "Expanded breadcrumb", owner: "Breadcrumb", placement: "bottom", role: "menu", scrollLimit: scrollLimit, width: "200px", children: (triggerProps, { setRef, itemCount }) => (_jsx(Button, { ...triggerProps, icon: _jsx(SvgMoreHoriz, {}), iconOnly: true, innerRef: setRef, label: `Access to ${itemCount} pages`, onClick: triggerProps.onClick, size: "small", variant: "tertiary" })) }), _jsx(SvgChevronRight, { "aria-hidden": true })] })) : (items.slice(1, items.length - 1).map((item, idx) => (_jsxs("li", { children: [_jsx(Link, { ...item }), _jsx(SvgChevronRight, { "aria-hidden": true })] }, `Breadcrumb-${idx}`)))), _jsx("li", { "aria-current": "true", children: _jsx(Txt, { variant: "body-base", children: items[items.length - 1].label }) })] }) }));
 }
 //# sourceMappingURL=Breadcrumb.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAqB,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAmDxC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,EAAE,EAAE,WAAW,EAAmB;IAC1F,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,KAAK,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,EAAE,SAAS,CAAC,CAAC;IAEpD,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IAElC,OAAO,CACH,4BAAgB,YAAY,eAAW,YAAY,EAAC,EAAE,EAAE,EAAE,YACtD,yBACI,yBACI,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAI,EACpD,KAAC,eAAe,0BAAe,IAC9B,EACJ,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAChB,yBACI,KAAC,YAAY,IACT,cAAc,QACd,WAAW,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC5C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EACvC,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAC,YAAY,EAClB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,KAAK,EAAC,OAAO,YAEZ,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACtC,KAAC,MAAM,OACC,YAAY,EAChB,IAAI,EAAE,KAAC,YAAY,KAAG,EACtB,QAAQ,QACR,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,aAAa,SAAS,QAAQ,EACrC,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,CACL,GACU,EACf,KAAC,eAAe,0BAAe,IAC9B,CACR,CAAC,CAAC,CAAC,CACA,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CAChD,yBACI,KAAC,IAAI,OAAK,IAAI,GAAI,EAClB,KAAC,eAAe,0BAAe,KAF1B,cAAc,GAAG,EAAE,CAGvB,CACR,CAAC,CACL,EACD,6BAAiB,MAAM,YACnB,KAAC,GAAG,IAAC,OAAO,EAAC,WAAW,YAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,GAAO,GAC7D,IACJ,GACH,CACT,CAAC;AACN,CAAC"}

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

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