@serendie/ui 3.5.1-dev.202606091509 → 3.5.1-dev.202606221120

package/dist/client.js

@@ -1,144 +1,148 @@
 "use client";
 import { SerendiePreset as r } from "./preset.js";
 import { ThemeContext as a, resolveTheme as m, useThemeContext as p } from "./theme/ThemeContext.js";
-import { useSystemColorScheme as x } from "./theme/useSystemColorScheme.js";
-import { ColorSchemeScript as s, getColorSchemeScript as f } from "./theme/initColorScheme.js";
+import { useSystemColorScheme as i } from "./theme/useSystemColorScheme.js";
+import { ColorSchemeScript as n, getColorSchemeScript as f } from "./theme/initColorScheme.js";
 import { formatDateByLang as l, getTranslations as d, useTranslations as S } from "./i18n/index.js";
 import { Accordion as C } from "./components/Accordion/Accordion.js";
 import { AccordionGroup as u } from "./components/Accordion/AccordionGroup.js";
-import { Avatar as B, AvatarStyle as T } from "./components/Avatar/Avatar.js";
-import { Badge as P, BadgeCloseButton as D, BadgeStyle as b } from "./components/Badge/Badge.js";
+import { Avatar as y, AvatarStyle as I } from "./components/Avatar/Avatar.js";
+import { Badge as b, BadgeCloseButton as P, BadgeStyle as D } from "./components/Badge/Badge.js";
 import { Banner as v } from "./components/Banner/Banner.js";
-import { BottomNavigation as w } from "./components/BottomNavigation/BottomNavigation.js";
-import { BottomNavigationItem as L, BottomNavigationItemStyle as N } from "./components/BottomNavigation/BottomNavigationItem.js";
-import { Button as F, ButtonStyle as G } from "./components/Button/Button.js";
-import { SerendieChartTheme as W } from "./components/Chart/SerendieChartTheme.js";
-import { compactChartMargin as q, defaultChartMargin as z, getChartColor as E, getChartColors as H, legendChartMargin as J, spaciousChartMargin as K, useBarChartProps as O, useChartProps as Q, useLineChartProps as V, usePieChartProps as X } from "./components/Chart/SerendieChartProps.js";
-import { CheckBox as Z, CheckBoxStyle as _, checkboxCheckedIconCss as $, checkboxIconCss as oo, checkboxUncheckedIconCss as eo } from "./components/CheckBox/CheckBox.js";
-import { ChoiceBox as to, ChoiceBoxStyle as ao } from "./components/ChoiceBox/ChoiceBox.js";
-import { DashboardWidget as po } from "./components/DashboardWidget/DashboardWidget.js";
-import { DataTable as xo } from "./components/DataTable/index.js";
-import { DatePicker as so } from "./components/DatePicker/DatePicker.js";
-import { Divider as co, DividerStyle as lo } from "./components/Divider/Divider.js";
-import { Drawer as ho } from "./components/Drawer/Drawer.js";
-import { DropdownMenu as go, DropdownMenuStyle as uo } from "./components/DropdownMenu/DropdownMenu.js";
-import { IconButton as Bo, IconButtonStyle as To } from "./components/IconButton/IconButton.js";
-import { List as Po } from "./components/List/List.js";
-import { ListItem as bo, ListItemStyle as ko } from "./components/List/ListItem.js";
-import { ModalDialog as Mo } from "./components/ModalDialog/ModalDialog.js";
-import { NotificationBadge as Ao } from "./components/NotificationBadge/NotificationBadge.js";
-import { Pagination as No, PaginationStyle as Ro } from "./components/Pagination/Pagination.js";
-import { PasswordField as Go } from "./components/PasswordField/PasswordField.js";
-import { ProgressIndicator as Wo } from "./components/ProgressIndicator/ProgressIndicator.js";
-import { ProgressIndicatorIndeterminate as qo } from "./components/ProgressIndicator/ProgressIndicatorIndeterminate.js";
-import { RadioButton as Eo, RadioButtonStyle as Ho, radioCheckedIconCss as Jo, radioIconCss as Ko, radioUncheckedIconCss as Oo } from "./components/RadioButton/RadioButton.js";
-import { RadioGroup as Vo } from "./components/RadioButton/RadioGroup.js";
-import { Search as Yo, SearchStyle as Zo } from "./components/Search/Search.js";
-import { Select as $o, SelectStyle as oe } from "./components/Select/Select.js";
-import { Slider as re, SliderStyle as te } from "./components/Slider/Slider.js";
-import { Steps as me, stepsStyles as pe } from "./components/Steps/Steps.js";
-import { Switch as xe, SwitchStyle as ne } from "./components/Switch/Switch.js";
-import { Tabs as fe, TabsStyle as ce } from "./components/Tabs/Tabs.js";
-import { TabItem as de, TabItemStyle as Se } from "./components/Tabs/TabItem.js";
-import { TextArea as Ce } from "./components/TextArea/TextArea.js";
-import { TextField as ue } from "./components/TextField/TextField.js";
-import { Toast as Be, ToastStyle as Te, toaster as Ie } from "./components/Toast/Toast.js";
-import { Tooltip as De } from "./components/Tooltip/Tooltip.js";
-import { TopAppBar as ke } from "./components/TopAppBar/TopAppBar.js";
-import { DataTableComponent as Me } from "./components/DataTable/DataTableComponent.js";
-import { LanguageProvider as Ae, SerendieProvider as Le } from "./i18n/provider.js";
-import { parse as Re } from "./node_modules/@zag-js/date-picker/dist/date-picker.parse.js";
+import { BreadcrumbItem as w, Breadcrumbs as A, breadcrumbsStyle as L } from "./components/Breadcrumbs/Breadcrumbs.js";
+import { BottomNavigation as R } from "./components/BottomNavigation/BottomNavigation.js";
+import { BottomNavigationItem as G, BottomNavigationItemStyle as U } from "./components/BottomNavigation/BottomNavigationItem.js";
+import { Button as j, ButtonStyle as q } from "./components/Button/Button.js";
+import { SerendieChartTheme as E } from "./components/Chart/SerendieChartTheme.js";
+import { compactChartMargin as J, defaultChartMargin as K, getChartColor as O, getChartColors as Q, legendChartMargin as V, spaciousChartMargin as X, useBarChartProps as Y, useChartProps as Z, useLineChartProps as _, usePieChartProps as $ } from "./components/Chart/SerendieChartProps.js";
+import { CheckBox as eo, CheckBoxStyle as ro, checkboxCheckedIconCss as to, checkboxIconCss as ao, checkboxUncheckedIconCss as mo } from "./components/CheckBox/CheckBox.js";
+import { ChoiceBox as xo, ChoiceBoxStyle as io } from "./components/ChoiceBox/ChoiceBox.js";
+import { DashboardWidget as no } from "./components/DashboardWidget/DashboardWidget.js";
+import { DataTable as co } from "./components/DataTable/index.js";
+import { DatePicker as So } from "./components/DatePicker/DatePicker.js";
+import { Divider as Co, DividerStyle as go } from "./components/Divider/Divider.js";
+import { Drawer as Bo } from "./components/Drawer/Drawer.js";
+import { DropdownMenu as Io, DropdownMenuStyle as To } from "./components/DropdownMenu/DropdownMenu.js";
+import { IconButton as Po, IconButtonStyle as Do } from "./components/IconButton/IconButton.js";
+import { List as vo } from "./components/List/List.js";
+import { ListItem as wo, ListItemStyle as Ao } from "./components/List/ListItem.js";
+import { ModalDialog as No } from "./components/ModalDialog/ModalDialog.js";
+import { NotificationBadge as Fo } from "./components/NotificationBadge/NotificationBadge.js";
+import { Pagination as Uo, PaginationStyle as Wo } from "./components/Pagination/Pagination.js";
+import { PasswordField as qo } from "./components/PasswordField/PasswordField.js";
+import { ProgressIndicator as Eo } from "./components/ProgressIndicator/ProgressIndicator.js";
+import { ProgressIndicatorIndeterminate as Jo } from "./components/ProgressIndicator/ProgressIndicatorIndeterminate.js";
+import { RadioButton as Oo, RadioButtonStyle as Qo, radioCheckedIconCss as Vo, radioIconCss as Xo, radioUncheckedIconCss as Yo } from "./components/RadioButton/RadioButton.js";
+import { RadioGroup as _o } from "./components/RadioButton/RadioGroup.js";
+import { Search as oe, SearchStyle as ee } from "./components/Search/Search.js";
+import { Select as te, SelectStyle as ae } from "./components/Select/Select.js";
+import { Slider as pe, SliderStyle as xe } from "./components/Slider/Slider.js";
+import { Steps as se, stepsStyles as ne } from "./components/Steps/Steps.js";
+import { Switch as ce, SwitchStyle as le } from "./components/Switch/Switch.js";
+import { Tabs as Se, TabsStyle as he } from "./components/Tabs/Tabs.js";
+import { TabItem as ge, TabItemStyle as ue } from "./components/Tabs/TabItem.js";
+import { TextArea as ye } from "./components/TextArea/TextArea.js";
+import { TextField as Te } from "./components/TextField/TextField.js";
+import { Toast as Pe, ToastStyle as De, toaster as ke } from "./components/Toast/Toast.js";
+import { Tooltip as Me } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as Ae } from "./components/TopAppBar/TopAppBar.js";
+import { DataTableComponent as Ne } from "./components/DataTable/DataTableComponent.js";
+import { LanguageProvider as Fe, SerendieProvider as Ge } from "./i18n/provider.js";
+import { parse as We } from "./node_modules/@zag-js/date-picker/dist/date-picker.parse.js";
 export {
   C as Accordion,
   u as AccordionGroup,
-  B as Avatar,
-  T as AvatarStyle,
-  P as Badge,
-  D as BadgeCloseButton,
-  b as BadgeStyle,
+  y as Avatar,
+  I as AvatarStyle,
+  b as Badge,
+  P as BadgeCloseButton,
+  D as BadgeStyle,
   v as Banner,
-  w as BottomNavigation,
-  L as BottomNavigationItem,
-  N as BottomNavigationItemStyle,
-  F as Button,
-  G as ButtonStyle,
-  Z as CheckBox,
-  _ as CheckBoxStyle,
-  to as ChoiceBox,
-  ao as ChoiceBoxStyle,
-  s as ColorSchemeScript,
-  po as DashboardWidget,
-  xo as DataTable,
-  Me as DataTableComponent,
-  so as DatePicker,
-  co as Divider,
-  lo as DividerStyle,
-  ho as Drawer,
-  go as DropdownMenu,
-  uo as DropdownMenuStyle,
-  Bo as IconButton,
-  To as IconButtonStyle,
-  Ae as LanguageProvider,
-  Po as List,
-  bo as ListItem,
-  ko as ListItemStyle,
-  Mo as ModalDialog,
-  Ao as NotificationBadge,
-  No as Pagination,
-  Ro as PaginationStyle,
-  Go as PasswordField,
-  Wo as ProgressIndicator,
-  qo as ProgressIndicatorIndeterminate,
-  Eo as RadioButton,
-  Ho as RadioButtonStyle,
-  Vo as RadioGroup,
-  Yo as Search,
-  Zo as SearchStyle,
-  $o as Select,
-  oe as SelectStyle,
-  W as SerendieChartTheme,
+  R as BottomNavigation,
+  G as BottomNavigationItem,
+  U as BottomNavigationItemStyle,
+  w as BreadcrumbItem,
+  A as Breadcrumbs,
+  j as Button,
+  q as ButtonStyle,
+  eo as CheckBox,
+  ro as CheckBoxStyle,
+  xo as ChoiceBox,
+  io as ChoiceBoxStyle,
+  n as ColorSchemeScript,
+  no as DashboardWidget,
+  co as DataTable,
+  Ne as DataTableComponent,
+  So as DatePicker,
+  Co as Divider,
+  go as DividerStyle,
+  Bo as Drawer,
+  Io as DropdownMenu,
+  To as DropdownMenuStyle,
+  Po as IconButton,
+  Do as IconButtonStyle,
+  Fe as LanguageProvider,
+  vo as List,
+  wo as ListItem,
+  Ao as ListItemStyle,
+  No as ModalDialog,
+  Fo as NotificationBadge,
+  Uo as Pagination,
+  Wo as PaginationStyle,
+  qo as PasswordField,
+  Eo as ProgressIndicator,
+  Jo as ProgressIndicatorIndeterminate,
+  Oo as RadioButton,
+  Qo as RadioButtonStyle,
+  _o as RadioGroup,
+  oe as Search,
+  ee as SearchStyle,
+  te as Select,
+  ae as SelectStyle,
+  E as SerendieChartTheme,
   r as SerendiePreset,
-  Le as SerendieProvider,
-  re as Slider,
-  te as SliderStyle,
-  me as Steps,
-  xe as Switch,
-  ne as SwitchStyle,
-  de as TabItem,
-  Se as TabItemStyle,
-  fe as Tabs,
-  ce as TabsStyle,
-  Ce as TextArea,
-  ue as TextField,
+  Ge as SerendieProvider,
+  pe as Slider,
+  xe as SliderStyle,
+  se as Steps,
+  ce as Switch,
+  le as SwitchStyle,
+  ge as TabItem,
+  ue as TabItemStyle,
+  Se as Tabs,
+  he as TabsStyle,
+  ye as TextArea,
+  Te as TextField,
   a as ThemeContext,
-  Be as Toast,
-  Te as ToastStyle,
-  De as Tooltip,
-  ke as TopAppBar,
-  $ as checkboxCheckedIconCss,
-  oo as checkboxIconCss,
-  eo as checkboxUncheckedIconCss,
-  q as compactChartMargin,
-  z as defaultChartMargin,
+  Pe as Toast,
+  De as ToastStyle,
+  Me as Tooltip,
+  Ae as TopAppBar,
+  L as breadcrumbsStyle,
+  to as checkboxCheckedIconCss,
+  ao as checkboxIconCss,
+  mo as checkboxUncheckedIconCss,
+  J as compactChartMargin,
+  K as defaultChartMargin,
   l as formatDateByLang,
-  E as getChartColor,
-  H as getChartColors,
+  O as getChartColor,
+  Q as getChartColors,
   f as getColorSchemeScript,
   d as getTranslations,
-  J as legendChartMargin,
-  Re as parseDate,
-  Jo as radioCheckedIconCss,
-  Ko as radioIconCss,
-  Oo as radioUncheckedIconCss,
+  V as legendChartMargin,
+  We as parseDate,
+  Vo as radioCheckedIconCss,
+  Xo as radioIconCss,
+  Yo as radioUncheckedIconCss,
   m as resolveTheme,
-  K as spaciousChartMargin,
-  pe as stepsStyles,
-  Ie as toaster,
-  O as useBarChartProps,
-  Q as useChartProps,
-  V as useLineChartProps,
-  X as usePieChartProps,
-  x as useSystemColorScheme,
+  X as spaciousChartMargin,
+  ne as stepsStyles,
+  ke as toaster,
+  Y as useBarChartProps,
+  Z as useChartProps,
+  _ as useLineChartProps,
+  $ as usePieChartProps,
+  i as useSystemColorScheme,
   p as useThemeContext,
   S as useTranslations
 };

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,84 @@
+import { default as React, ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../../styled-system/css';
+export declare const breadcrumbsStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"link" | "item" | "icon" | "list" | "separator" | "root" | "ellipsis", {
+    size: {
+        medium: {
+            link: {
+                textStyle: "sd.system.typography.body.small_compact";
+                paddingInline: "sd.system.dimension.spacing.extraSmall";
+                paddingBlock: "sd.system.dimension.spacing.twoExtraSmall";
+                minHeight: "sd.reference.dimension.scale.10";
+                _expanded: {
+                    textStyle: "sd.system.typography.body.small_expanded";
+                };
+            };
+            separator: {
+                _expanded: {
+                    textStyle: "sd.system.typography.body.small_expanded";
+                };
+            };
+            ellipsis: {
+                "& button": {
+                    paddingInline: "sd.system.dimension.spacing.extraSmall";
+                    paddingBlock: "sd.system.dimension.spacing.twoExtraSmall";
+                    minHeight: "sd.reference.dimension.scale.10";
+                };
+            };
+            icon: {
+                width: "sd.reference.dimension.scale.7";
+                height: "sd.reference.dimension.scale.7";
+                "& svg": {
+                    width: "sd.reference.dimension.scale.7";
+                    height: "sd.reference.dimension.scale.7";
+                };
+            };
+        };
+        small: {
+            link: {
+                textStyle: "sd.system.typography.label.medium_compact";
+                paddingInline: "sd.system.dimension.spacing.twoExtraSmall";
+                paddingBlock: "sd.system.dimension.spacing.twoExtraSmall";
+                gap: "sd.system.dimension.spacing.twoExtraSmall";
+                minHeight: "sd.reference.dimension.scale.10";
+                _expanded: {
+                    textStyle: "sd.system.typography.label.medium_expanded";
+                };
+            };
+            separator: {
+                _expanded: {
+                    textStyle: "sd.system.typography.label.medium_expanded";
+                };
+            };
+            ellipsis: {
+                "& button": {
+                    paddingInline: "sd.system.dimension.spacing.twoExtraSmall";
+                    paddingBlock: "sd.system.dimension.spacing.twoExtraSmall";
+                    minHeight: "sd.reference.dimension.scale.10";
+                };
+            };
+            icon: {
+                width: "14px";
+                height: "14px";
+                "& svg": {
+                    width: "14px";
+                    height: "14px";
+                };
+            };
+        };
+    };
+}>;
+type BreadcrumbsVariantProps = RecipeVariantProps<typeof breadcrumbsStyle>;
+export type BreadcrumbsProps = ComponentProps<"nav"> & BreadcrumbsVariantProps & {
+    separator?: "chevron" | "slash";
+    maxItems?: number;
+    itemsBeforeCollapse?: number;
+    itemsAfterCollapse?: number;
+};
+export type BreadcrumbItemProps = ComponentProps<"li"> & {
+    href?: string;
+    current?: boolean;
+    icon?: React.ReactElement;
+};
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<Omit<BreadcrumbsProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<BreadcrumbItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export {};

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,268 @@
+import { jsx as e, jsxs as y, Fragment as j } from "react/jsx-runtime";
+import l, { useState as P, useEffect as F, useContext as L, createContext as T } from "react";
+import { SerendieSymbolMoreHorizontal as A, SerendieSymbolChevronRight as D } from "@serendie/symbols";
+import { useTranslations as q } from "../../i18n/index.js";
+import { cx as g } from "../../styled-system/css/cx.js";
+import { css as k } from "../../styled-system/css/css.js";
+import { sva as G } from "../../styled-system/css/sva.js";
+const C = G({
+  slots: ["root", "list", "item", "link", "separator", "ellipsis", "icon"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    list: {
+      display: "flex",
+      alignItems: "center",
+      listStyle: "none",
+      margin: 0,
+      padding: 0,
+      flexWrap: "wrap"
+    },
+    item: {
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    link: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "sd.system.dimension.spacing.extraSmall",
+      color: "sd.system.color.impression.primary",
+      textDecoration: "none",
+      cursor: "pointer",
+      borderRadius: "sd.system.dimension.radius.small",
+      transition: "background-color 0.2s",
+      _hover: {
+        backgroundColor: "sd.system.color.interaction.hoveredVariant"
+      },
+      _focusVisible: {
+        outlineWidth: "sd.system.dimension.border.medium",
+        outlineStyle: "solid",
+        outlineColor: "sd.system.color.impression.primary"
+      },
+      "&[aria-current='page']": {
+        color: "sd.system.color.component.onSurface",
+        fontWeight: "sd.reference.typography.fontWeight.regular",
+        cursor: "default",
+        _hover: {
+          backgroundColor: "transparent"
+        }
+      }
+    },
+    separator: {
+      display: "inline-flex",
+      alignItems: "center",
+      color: "sd.system.color.component.onSurfaceVariant",
+      userSelect: "none"
+    },
+    ellipsis: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "sd.system.color.impression.primary",
+      cursor: "pointer",
+      "& button": {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "none",
+        border: "none",
+        color: "inherit",
+        cursor: "pointer",
+        borderRadius: "sd.system.dimension.radius.small",
+        transition: "background-color 0.2s",
+        _hover: {
+          backgroundColor: "sd.system.color.interaction.hoveredVariant"
+        },
+        _focusVisible: {
+          outlineWidth: "sd.system.dimension.border.medium",
+          outlineStyle: "solid",
+          outlineColor: "sd.system.color.impression.primary"
+        }
+      }
+    },
+    icon: {
+      display: "inline-flex",
+      alignItems: "center",
+      flexShrink: 0
+    }
+  },
+  variants: {
+    size: {
+      medium: {
+        link: {
+          textStyle: "sd.system.typography.body.small_compact",
+          paddingInline: "sd.system.dimension.spacing.extraSmall",
+          paddingBlock: "sd.system.dimension.spacing.twoExtraSmall",
+          minHeight: "sd.reference.dimension.scale.10",
+          _expanded: {
+            textStyle: "sd.system.typography.body.small_expanded"
+          }
+        },
+        separator: {
+          _expanded: {
+            textStyle: "sd.system.typography.body.small_expanded"
+          }
+        },
+        ellipsis: {
+          "& button": {
+            paddingInline: "sd.system.dimension.spacing.extraSmall",
+            paddingBlock: "sd.system.dimension.spacing.twoExtraSmall",
+            minHeight: "sd.reference.dimension.scale.10"
+          }
+        },
+        icon: {
+          width: "sd.reference.dimension.scale.7",
+          height: "sd.reference.dimension.scale.7",
+          "& svg": {
+            width: "sd.reference.dimension.scale.7",
+            height: "sd.reference.dimension.scale.7"
+          }
+        }
+      },
+      small: {
+        link: {
+          textStyle: "sd.system.typography.label.medium_compact",
+          paddingInline: "sd.system.dimension.spacing.twoExtraSmall",
+          paddingBlock: "sd.system.dimension.spacing.twoExtraSmall",
+          gap: "sd.system.dimension.spacing.twoExtraSmall",
+          minHeight: "sd.reference.dimension.scale.10",
+          _expanded: {
+            textStyle: "sd.system.typography.label.medium_expanded"
+          }
+        },
+        separator: {
+          _expanded: {
+            textStyle: "sd.system.typography.label.medium_expanded"
+          }
+        },
+        ellipsis: {
+          "& button": {
+            paddingInline: "sd.system.dimension.spacing.twoExtraSmall",
+            paddingBlock: "sd.system.dimension.spacing.twoExtraSmall",
+            minHeight: "sd.reference.dimension.scale.10"
+          }
+        },
+        icon: {
+          width: "14px",
+          height: "14px",
+          "& svg": {
+            width: "14px",
+            height: "14px"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+}), _ = T(null), J = () => {
+  const i = L(_);
+  return i || {
+    styles: C(),
+    size: "medium"
+  };
+}, K = l.forwardRef(
+  ({
+    children: i,
+    separator: o = "chevron",
+    className: a,
+    size: s = "medium",
+    maxItems: d,
+    itemsBeforeCollapse: m = 1,
+    itemsAfterCollapse: c = 1,
+    ...r
+  }, p) => {
+    const n = C({ size: s }), [I, u] = P(!1), x = q(), t = l.Children.toArray(i).filter(
+      l.isValidElement
+    ), B = t.length;
+    F(() => {
+      u(!1);
+    }, [B]);
+    const f = d !== void 0 && t.length > d && t.length > m + c && !I, b = Math.max(0, m), E = Math.max(0, c), S = f ? [
+      ...t.slice(0, b),
+      ...t.slice(t.length - E)
+    ] : t, w = s === "small" ? 16 : 24, N = s === "small" ? 16 : 32, V = 32, W = s === "medium" ? k({
+      padding: "sd.system.dimension.spacing.twoExtraSmall"
+    }) : k({
+      paddingBlock: "sd.system.dimension.spacing.twoExtraSmall"
+    }), v = () => /* @__PURE__ */ e(
+      "li",
+      {
+        className: g(
+          n.separator,
+          o === "chevron" ? W : void 0
+        ),
+        role: "presentation",
+        "aria-hidden": "true",
+        children: o === "chevron" ? /* @__PURE__ */ e(
+          D,
+          {
+            width: w,
+            height: w
+          }
+        ) : /* @__PURE__ */ e(
+          "svg",
+          {
+            width: N,
+            height: V,
+            viewBox: "0 0 32 32",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ e("path", { d: "M18.5 10L13 21", stroke: "currentColor", strokeWidth: "1.2" })
+          }
+        )
+      }
+    );
+    return /* @__PURE__ */ e(_.Provider, { value: { styles: n, size: s }, children: /* @__PURE__ */ e(
+      "nav",
+      {
+        ref: p,
+        "aria-label": x("breadcrumbs.label"),
+        className: g(n.root, a),
+        ...r,
+        children: /* @__PURE__ */ e("ol", { className: n.list, children: S.map((H, h) => {
+          const R = h === S.length - 1, M = f && h === b;
+          return /* @__PURE__ */ y(l.Fragment, { children: [
+            M && /* @__PURE__ */ y(j, { children: [
+              /* @__PURE__ */ e("li", { className: n.ellipsis, children: /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": x("breadcrumbs.showMore"),
+                  onClick: () => u(!0),
+                  children: /* @__PURE__ */ e(
+                    A,
+                    {
+                      width: s === "small" ? 14 : 20,
+                      height: s === "small" ? 17 : 20
+                    }
+                  )
+                }
+              ) }),
+              v()
+            ] }),
+            H,
+            !R && v()
+          ] }, h);
+        }) })
+      }
+    ) });
+  }
+);
+K.displayName = "Breadcrumbs";
+const O = l.forwardRef(({ children: i, href: o, current: a, icon: s, className: d, ...m }, c) => {
+  const { styles: r } = J(), p = a ? "span" : o ? "a" : "span", n = a ? { "aria-current": "page" } : o ? { href: o } : {};
+  return /* @__PURE__ */ e("li", { ref: c, className: g(r.item, d), ...m, children: /* @__PURE__ */ y(p, { className: r.link, ...n, children: [
+    s && /* @__PURE__ */ e("span", { className: r.icon, children: s }),
+    i
+  ] }) });
+});
+O.displayName = "BreadcrumbItem";
+export {
+  O as BreadcrumbItem,
+  K as Breadcrumbs,
+  C as breadcrumbsStyle
+};

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

@@ -0,0 +1,2 @@
+export { Breadcrumbs, BreadcrumbItem, breadcrumbsStyle } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItemProps } from './Breadcrumbs';

package/dist/components/Breadcrumbs/index.js

@@ -0,0 +1,6 @@
+import { BreadcrumbItem as m, Breadcrumbs as b, breadcrumbsStyle as a } from "./Breadcrumbs.js";
+export {
+  m as BreadcrumbItem,
+  b as Breadcrumbs,
+  a as breadcrumbsStyle
+};

package/dist/components/DataTable/DataTable.sampleData.d.ts

@@ -0,0 +1,12 @@
+export type DataRow = {
+    id: number;
+    area: string;
+    time: string;
+    status: string;
+    connections: number;
+    households: number;
+    coverage: string;
+    errorRate: string;
+    process: string;
+};
+export declare function createDataTableRows(seed?: number): DataRow[];

package/dist/components/DataTable/DataTable.sampleData.test.d.ts

@@ -0,0 +1 @@
+export {};