@grandbazar/ui-baza 1.2.13 → 1.2.15

package/dist/index.cjs

@@ -52,8 +52,8 @@ function omit(object, ...keys) {
 }
 
 const badge = "_badge_p5h5n_2";
-const primary$3 = "_primary_p5h5n_9";
-const secondary$4 = "_secondary_p5h5n_13";
+const primary$4 = "_primary_p5h5n_9";
+const secondary$5 = "_secondary_p5h5n_13";
 const accent$3 = "_accent_p5h5n_18";
 const violet = "_violet_p5h5n_23";
 const pink = "_pink_p5h5n_28";
@@ -62,11 +62,11 @@ const orange = "_orange_p5h5n_38";
 const green = "_green_p5h5n_43";
 const neutral$3 = "_neutral_p5h5n_48";
 const lg$6 = "_lg_p5h5n_53";
-const md$9 = "_md_p5h5n_60";
-const styles$v = {
+const md$a = "_md_p5h5n_60";
+const styles$w = {
 	badge: badge,
-	primary: primary$3,
-	secondary: secondary$4,
+	primary: primary$4,
+	secondary: secondary$5,
 	accent: accent$3,
 	violet: violet,
 	pink: pink,
@@ -75,20 +75,20 @@ const styles$v = {
 	green: green,
 	neutral: neutral$3,
 	lg: lg$6,
-	md: md$9
+	md: md$a
 };
 
 function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$v.badge, styles$v[size], styles$v[color], styles$v[mode], className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$w.badge, styles$w[size], styles$w[color], styles$w[mode], className), ...props, children });
 }
 
 const badgeTabsItem = "_badgeTabsItem_10lit_2";
-const primary$2 = "_primary_10lit_18";
-const secondary$3 = "_secondary_10lit_36";
-const styles$u = {
+const primary$3 = "_primary_10lit_18";
+const secondary$4 = "_secondary_10lit_36";
+const styles$v = {
 	badgeTabsItem: badgeTabsItem,
-	primary: primary$2,
-	secondary: secondary$3
+	primary: primary$3,
+	secondary: secondary$4
 };
 
 function BadgeTabsItem({ className, children, isActive, mode = "primary", ...props }) {
@@ -98,7 +98,7 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
       type: "button",
       role: "tab",
       "aria-selected": Boolean(isActive),
-      className: classNames(styles$u.badgeTabsItem, styles$u[mode], className),
+      className: classNames(styles$v.badgeTabsItem, styles$v[mode], className),
       ...props,
       children
     }
@@ -106,12 +106,12 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
 }
 
 const badgeTabsRoot = "_badgeTabsRoot_1qkat_2";
-const styles$t = {
+const styles$u = {
 	badgeTabsRoot: badgeTabsRoot
 };
 
 function BadgeTabsRoot({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$t.badgeTabsRoot, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$u.badgeTabsRoot, className), ...props, children });
 }
 
 function BadgeTabs(props) {
@@ -1016,7 +1016,7 @@ function IconXMarkCircle(props) {
 const breadcrumbs = "_breadcrumbs_1bfmb_2";
 const breadcrumbsItem = "_breadcrumbsItem_1bfmb_8";
 const defaultSeparator = "_defaultSeparator_1bfmb_14";
-const styles$s = {
+const styles$t = {
 	breadcrumbs: breadcrumbs,
 	breadcrumbsItem: breadcrumbsItem,
 	defaultSeparator: defaultSeparator
@@ -1065,7 +1065,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$r = {
+const styles$s = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -1076,7 +1076,7 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
     {
       "data-active": isActive,
       "data-disabled": props.disabled,
-      className: classNames(styles$r.breadcrumbItem, className),
+      className: classNames(styles$s.breadcrumbItem, className),
       ...isActive && { "aria-current": "page" },
       ...!asChild && { type: "button" },
       ...props,
@@ -1088,51 +1088,51 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
 function Breadcrumbs({
   className,
   children,
-  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$s.defaultSeparator })
+  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$t.defaultSeparator })
 }) {
   const childrenArray = Array.isArray(children) ? children : [children];
   const lastIndex = childrenArray.length - 1;
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles$s.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$s.breadcrumbsItem, children: item }),
-    index < lastIndex && /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$s.breadcrumbsItem, "aria-hidden": "true", children: separator })
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles$t.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$t.breadcrumbsItem, children: item }),
+    index < lastIndex && /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$t.breadcrumbsItem, "aria-hidden": "true", children: separator })
   ] }, index)) }) });
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
-const button = "_button_cmbkj_2";
-const accent$2 = "_accent_cmbkj_11";
-const primary$1 = "_primary_cmbkj_12";
-const secondary$2 = "_secondary_cmbkj_30";
-const tertiary = "_tertiary_cmbkj_48";
-const line = "_line_cmbkj_49";
-const neutral$2 = "_neutral_cmbkj_78";
-const lg$5 = "_lg_cmbkj_145";
-const md$8 = "_md_cmbkj_153";
-const sm$3 = "_sm_cmbkj_161";
-const styles$q = {
+const button = "_button_17gao_2";
+const accent$2 = "_accent_17gao_11";
+const primary$2 = "_primary_17gao_12";
+const secondary$3 = "_secondary_17gao_30";
+const tertiary = "_tertiary_17gao_48";
+const line = "_line_17gao_49";
+const neutral$2 = "_neutral_17gao_78";
+const lg$5 = "_lg_17gao_145";
+const md$9 = "_md_17gao_153";
+const sm$4 = "_sm_17gao_161";
+const styles$r = {
 	button: button,
 	accent: accent$2,
-	primary: primary$1,
-	secondary: secondary$2,
+	primary: primary$2,
+	secondary: secondary$3,
 	tertiary: tertiary,
 	line: line,
 	neutral: neutral$2,
 	lg: lg$5,
-	md: md$8,
-	sm: sm$3
+	md: md$9,
+	sm: sm$4
 };
 
 const buttonFunction = "_buttonFunction_o8iku_2";
 const accent$1 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
 const lg$4 = "_lg_o8iku_41";
-const md$7 = "_md_o8iku_46";
-const styles$p = {
+const md$8 = "_md_o8iku_46";
+const styles$q = {
 	buttonFunction: buttonFunction,
 	accent: accent$1,
 	neutral: neutral$1,
 	lg: lg$4,
-	md: md$7
+	md: md$8
 };
 
 function ButtonFunction({
@@ -1147,7 +1147,7 @@ function ButtonFunction({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: classNames(styles$p.buttonFunction, styles$p[color], styles$p[size], className),
+      className: classNames(styles$q.buttonFunction, styles$q[color], styles$q[size], className),
       ...props.disabled && { "data-disabled": true },
       ...!asChild && { type: "button" },
       ...props,
@@ -1169,7 +1169,7 @@ function Button({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: classNames(styles$q.button, styles$q[color], styles$q[size], styles$q[mode], className),
+      className: classNames(styles$r.button, styles$r[color], styles$r[size], styles$r[mode], className),
       ...!asChild && { type: "button" },
       ...props,
       children
@@ -1181,7 +1181,7 @@ Button.Function = ButtonFunction;
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
 const icon$2 = "_icon_k1shg_23";
 const checkbox = "_checkbox_k1shg_2";
-const styles$o = {
+const styles$p = {
 	checkboxWrapper: checkboxWrapper,
 	icon: icon$2,
 	checkbox: checkbox
@@ -1194,11 +1194,11 @@ function Checkbox({ className, label, indeterminate, ...props }) {
     {
       "data-disabled": `${Boolean(props.disabled)}`,
       "data-state": dataState,
-      className: classNames(styles$o.checkboxWrapper, className),
+      className: classNames(styles$p.checkboxWrapper, className),
       children: [
-        dataState === "checked" && /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$o.icon }),
-        dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$o.icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", className: styles$o.checkbox, ...props }),
+        dataState === "checked" && /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$p.icon }),
+        dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$p.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", className: styles$p.checkbox, ...props }),
         label
       ]
     }
@@ -1206,7 +1206,7 @@ function Checkbox({ className, label, indeterminate, ...props }) {
 }
 
 const chip = "_chip_dj4kw_2";
-const styles$n = {
+const styles$o = {
 	chip: chip
 };
 
@@ -1214,7 +1214,7 @@ function Chip({ isSelected, children, className, disabled, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames(styles$n.chip, className),
+      className: classNames(styles$o.chip, className),
       "data-selected": isSelected,
       "data-disabled": disabled,
       "aria-disabled": disabled,
@@ -1226,25 +1226,25 @@ function Chip({ isSelected, children, className, disabled, ...props }) {
 
 const root$1 = "_root_ww0fb_2";
 const lg$3 = "_lg_ww0fb_16";
-const md$6 = "_md_ww0fb_24";
+const md$7 = "_md_ww0fb_24";
 const red = "_red_ww0fb_32";
 const accent = "_accent_ww0fb_37";
 const neutral = "_neutral_ww0fb_42";
-const secondary$1 = "_secondary_ww0fb_47";
+const secondary$2 = "_secondary_ww0fb_47";
 const white = "_white_ww0fb_52";
-const styles$m = {
+const styles$n = {
 	root: root$1,
 	lg: lg$3,
-	md: md$6,
+	md: md$7,
 	red: red,
 	accent: accent,
 	neutral: neutral,
-	secondary: secondary$1,
+	secondary: secondary$2,
 	white: white
 };
 
 function Counter({ className, size = "lg", color = "red", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$m.root, styles$m[size], styles$m[color], className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$n.root, styles$n[size], styles$n[color], className), ...props });
 }
 
 const LOCALE_FIRST_DAY_OF_WEEK = {
@@ -1254,7 +1254,7 @@ const LOCALE_FIRST_DAY_OF_WEEK = {
 
 const datePickerCellWrapper = "_datePickerCellWrapper_np1gx_2";
 const datePickerCell = "_datePickerCell_np1gx_2";
-const styles$l = {
+const styles$m = {
 	datePickerCellWrapper: datePickerCellWrapper,
 	datePickerCell: datePickerCell,
 	"radius-none": "_radius-none_np1gx_83",
@@ -1264,10 +1264,10 @@ const styles$l = {
 };
 
 function DatePickerCell({ children, className, state, isCurrent, radius = "both", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$l.datePickerCellWrapper, styles$l[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$m.datePickerCellWrapper, styles$m[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
-      className: classNames(styles$l.datePickerCell, styles$l[`radius-${radius}`], className),
+      className: classNames(styles$m.datePickerCell, styles$m[`radius-${radius}`], className),
       type: "button",
       role: "gridcell",
       "aria-selected": state === "selected",
@@ -1337,7 +1337,7 @@ function normalizeDateRange(firstDate, secondDate) {
 const datePickerField = "_datePickerField_1qk8s_2";
 const datePickerFieldCalendar = "_datePickerFieldCalendar_1qk8s_8";
 const datePickerFieldWeek = "_datePickerFieldWeek_1qk8s_14";
-const styles$k = {
+const styles$l = {
 	datePickerField: datePickerField,
 	datePickerFieldCalendar: datePickerFieldCalendar,
 	datePickerFieldWeek: datePickerFieldWeek
@@ -1352,9 +1352,9 @@ function DatePickerField({
   firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru
 }) {
   const weeks = React.useMemo(() => getCalendarGrid(month, year, firstDayOfWeek), [month, year, firstDayOfWeek]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$k.datePickerField, className), role: "grid", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$l.datePickerField, className), role: "grid", children: [
     renderWeekdays?.(),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$k.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$k.datePickerFieldWeek, role: "row", "aria-rowindex": weekIndex + 1, children: week.map((day, dayIndex) => /* @__PURE__ */ jsxRuntime.jsx(Slot, { role: "gridcell", "aria-colindex": dayIndex + 1, children: children(day) }, `${day.year}-${day.month}-${day.date}`)) }, weekIndex)) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$l.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$l.datePickerFieldWeek, role: "row", "aria-rowindex": weekIndex + 1, children: week.map((day, dayIndex) => /* @__PURE__ */ jsxRuntime.jsx(Slot, { role: "gridcell", "aria-colindex": dayIndex + 1, children: children(day) }, `${day.year}-${day.month}-${day.date}`)) }, weekIndex)) })
   ] });
 }
 
@@ -1395,13 +1395,13 @@ const I18N_MONTH_LABELS = {
 
 const datePickerWeekdays = "_datePickerWeekdays_p8tsm_2";
 const datePickerWeekday = "_datePickerWeekday_p8tsm_2";
-const styles$j = {
+const styles$k = {
 	datePickerWeekdays: datePickerWeekdays,
 	datePickerWeekday: datePickerWeekday
 };
 
 function DatePickerWeekDays({ className, locale = "ru" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$j.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$j.datePickerWeekday, role: "columnheader", children: label }, label)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$k.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$k.datePickerWeekday, role: "columnheader", children: label }, label)) });
 }
 
 function DatePicker() {
@@ -1637,21 +1637,21 @@ const DROPDOWN_PORTAL_SIDE_CONFIG = {
 };
 
 const dropdownContent = "_dropdownContent_12tkb_2";
-const styles$i = {
+const styles$j = {
 	dropdownContent: dropdownContent
 };
 
 function DropdownContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$i.dropdownContent, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$j.dropdownContent, className), ...props, children });
 }
 
 const dropdownItem = "_dropdownItem_msc4i_2";
-const styles$h = {
+const styles$i = {
 	dropdownItem: dropdownItem
 };
 
 function DropdownItem({ className, children, disabled, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$h.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$i.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
 }
 
 const CLICK_OUTSIDE_IGNORE_DATA_NAME = "data-clickoutside-ignore";
@@ -2079,7 +2079,7 @@ function useTriggerHandlersByEventTrigger() {
 }
 
 const dropdownPortal = "_dropdownPortal_p3tdk_2";
-const styles$g = {
+const styles$h = {
 	dropdownPortal: dropdownPortal
 };
 
@@ -2119,7 +2119,7 @@ function DropdownPortal({
           ...style
         },
         ref: portalRef,
-        className: classNames(styles$g.dropdownPortal, className),
+        className: classNames(styles$h.dropdownPortal, className),
         ...handlersByTrigger[triggerEvent],
         ...isNested && { [CLICK_OUTSIDE_IGNORE_DATA_NAME]: "true" },
         children
@@ -2170,12 +2170,12 @@ const SIDE_OFFSET = 3;
 const BOUNDARY_PAGES = 2;
 
 const paginationItem = "_paginationItem_1ll6p_2";
-const md$5 = "_md_1ll6p_46";
-const sm$2 = "_sm_1ll6p_60";
-const styles$f = {
+const md$6 = "_md_1ll6p_46";
+const sm$3 = "_sm_1ll6p_60";
+const styles$g = {
 	paginationItem: paginationItem,
-	md: md$5,
-	sm: sm$2
+	md: md$6,
+	sm: sm$3
 };
 
 function PaginationItem({ className, children, size = "md", isCurrent, ...props }) {
@@ -2184,7 +2184,7 @@ function PaginationItem({ className, children, size = "md", isCurrent, ...props
     {
       type: "button",
       ...isCurrent && { "aria-current": "page" },
-      className: classNames(styles$f.paginationItem, styles$f[size], className),
+      className: classNames(styles$g.paginationItem, styles$g[size], className),
       ...props,
       children
     }
@@ -2221,7 +2221,7 @@ function getVisiblePages(totalPages, maxVisiblePagesWithEllipsis, currentPage) {
 const paginationRoot = "_paginationRoot_c5fwx_2";
 const paginationList = "_paginationList_c5fwx_7";
 const arrowLeft = "_arrowLeft_c5fwx_13";
-const styles$e = {
+const styles$f = {
 	paginationRoot: paginationRoot,
 	paginationList: paginationList,
 	arrowLeft: arrowLeft
@@ -2248,9 +2248,9 @@ function PaginationRoot({
     {
       "aria-label": "pagination navigation",
       role: "navigation",
-      className: classNames(styles$e.paginationRoot, className),
+      className: classNames(styles$f.paginationRoot, className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles$e.paginationList, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles$f.paginationList, children: [
         showArrows && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
           PaginationItem$1,
           {
@@ -2258,7 +2258,7 @@ function PaginationRoot({
             onClick: () => onPageChange(currentPage - 1),
             disabled: isFirstPage,
             size,
-            children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron$1, { className: styles$e.arrowLeft })
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron$1, { className: styles$f.arrowLeft })
           }
         ) }),
         visiblePages.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: page === ELLIPSIS_SYMBOL ? /* @__PURE__ */ jsxRuntime.jsx(PaginationItem$1, { "aria-label": "More pages", disabled: true, size, children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -2296,16 +2296,16 @@ const segment = "_segment_33gbh_10";
 const flexGrow = "_flexGrow_33gbh_19";
 const fill = "_fill_33gbh_23";
 const trail = "_trail_33gbh_28";
-const sm$1 = "_sm_33gbh_32";
-const md$4 = "_md_33gbh_36";
-const styles$d = {
+const sm$2 = "_sm_33gbh_32";
+const md$5 = "_md_33gbh_36";
+const styles$e = {
 	root: root,
 	segment: segment,
 	flexGrow: flexGrow,
 	fill: fill,
 	trail: trail,
-	sm: sm$1,
-	md: md$4
+	sm: sm$2,
+	md: md$5
 };
 
 function ProgressBarLinear({
@@ -2319,7 +2319,7 @@ function ProgressBarLinear({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames(styles$d.root, styles$d[size], className),
+      className: classNames(styles$e.root, styles$e[size], className),
       role: "progressbar",
       "aria-valuenow": clampedPercent,
       "aria-valuemin": 0,
@@ -2331,14 +2331,14 @@ function ProgressBarLinear({
         (Boolean(clampedPercent) || showFillOnZero) && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames(styles$d.segment, styles$d.fill),
+            className: classNames(styles$e.segment, styles$e.fill),
             style: {
               "--clamped-percent": `${clampedPercent}%`
             },
             "aria-hidden": "true"
           }
         ),
-        clampedPercent < 100 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$d.segment, styles$d.flexGrow, styles$d.trail), "aria-hidden": "true" })
+        clampedPercent < 100 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$e.segment, styles$e.flexGrow, styles$e.trail), "aria-hidden": "true" })
       ]
     }
   );
@@ -2358,7 +2358,7 @@ function ProgressBarSteps({
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames(styles$d.segment, styles$d.flexGrow, isFilled ? styles$d.fill : styles$d.trail),
+        className: classNames(styles$e.segment, styles$e.flexGrow, isFilled ? styles$e.fill : styles$e.trail),
         "aria-hidden": "true"
       },
       index
@@ -2367,7 +2367,7 @@ function ProgressBarSteps({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames(styles$d.root, styles$d[size], className),
+      className: classNames(styles$e.root, styles$e[size], className),
       role: "progressbar",
       "aria-valuenow": clampedCurrent,
       "aria-valuemin": 0,
@@ -2387,25 +2387,25 @@ ProgressBar.Steps = ProgressBarSteps;
 
 const radioWrapper = "_radioWrapper_13xie_2";
 const radio = "_radio_13xie_2";
-const styles$c = {
+const styles$d = {
 	radioWrapper: radioWrapper,
 	radio: radio
 };
 
 function RadioButton({ className, label, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-disabled": `${Boolean(props.disabled)}`, className: classNames(styles$c.radioWrapper, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: styles$c.radio, ...props }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-disabled": `${Boolean(props.disabled)}`, className: classNames(styles$d.radioWrapper, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: styles$d.radio, ...props }),
     label
   ] });
 }
 
 const DEFAULT_CUSTOM_SEARCH_BUTTON_WIDTH = 64;
 
-const textFieldAreaWrapper = "_textFieldAreaWrapper_ay9ou_2";
-const textFieldAreaLabel = "_textFieldAreaLabel_ay9ou_14";
-const textFieldAreaLabelSuffix = "_textFieldAreaLabelSuffix_ay9ou_24";
-const textFieldArea = "_textFieldArea_ay9ou_2";
-const styles$b = {
+const textFieldAreaWrapper = "_textFieldAreaWrapper_pia91_2";
+const textFieldAreaLabel = "_textFieldAreaLabel_pia91_14";
+const textFieldAreaLabelSuffix = "_textFieldAreaLabelSuffix_pia91_24";
+const textFieldArea = "_textFieldArea_pia91_2";
+const styles$c = {
 	textFieldAreaWrapper: textFieldAreaWrapper,
 	textFieldAreaLabel: textFieldAreaLabel,
 	textFieldAreaLabelSuffix: textFieldAreaLabelSuffix,
@@ -2426,22 +2426,22 @@ function TextFieldArea({
       "data-invalid": isInvalid,
       "aria-invalid": isInvalid,
       "data-element": "field",
-      className: classNames(styles$b.textFieldArea, className),
+      className: classNames(styles$c.textFieldArea, className),
       placeholder,
       ...props
     }
   );
-  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$b.textFieldAreaWrapper, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$b.textFieldAreaLabel, "data-element": "label", children: floatingLabel }),
-    floatingLabelSuffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$b.textFieldAreaLabelSuffix, "data-element": "label-suffix", children: floatingLabelSuffix }),
+  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$c.textFieldAreaWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$c.textFieldAreaLabel, "data-element": "label", children: floatingLabel }),
+    floatingLabelSuffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$c.textFieldAreaLabelSuffix, "data-element": "label-suffix", children: floatingLabelSuffix }),
     textFieldArea
   ] }) : textFieldArea;
 }
 
-const textFieldInputWrapper = "_textFieldInputWrapper_qpk1n_2";
-const textFieldInputLabel = "_textFieldInputLabel_qpk1n_9";
-const textFieldInput = "_textFieldInput_qpk1n_2";
-const styles$a = {
+const textFieldInputWrapper = "_textFieldInputWrapper_1m8sa_2";
+const textFieldInputLabel = "_textFieldInputLabel_1m8sa_9";
+const textFieldInput = "_textFieldInput_1m8sa_2";
+const styles$b = {
 	textFieldInputWrapper: textFieldInputWrapper,
 	textFieldInputLabel: textFieldInputLabel,
 	textFieldInput: textFieldInput
@@ -2460,37 +2460,37 @@ function TextFieldInput({
       "data-invalid": isInvalid,
       "aria-invalid": isInvalid,
       "data-element": "field",
-      className: classNames(styles$a.textFieldInput, className),
+      className: classNames(styles$b.textFieldInput, className),
       placeholder,
       ...props
     }
   );
-  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$a.textFieldInputWrapper, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$a.textFieldInputLabel, "data-element": "label", children: floatingLabel }),
+  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$b.textFieldInputWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$b.textFieldInputLabel, "data-element": "label", children: floatingLabel }),
     textFieldInput
   ] }) : textFieldInput;
 }
 
 const textFieldLabel = "_textFieldLabel_1l2ya_1";
-const styles$9 = {
+const styles$a = {
 	textFieldLabel: textFieldLabel
 };
 
 function TextFieldLabel({ className, children, isRequired, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("label", { className: classNames(styles$9.textFieldLabel, className), "data-required": isRequired, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("label", { className: classNames(styles$a.textFieldLabel, className), "data-required": isRequired, ...props, children });
 }
 
 const textFieldRoot = "_textFieldRoot_cs7mv_2";
 const lg$2 = "_lg_cs7mv_38";
-const md$3 = "_md_cs7mv_70";
-const styles$8 = {
+const md$4 = "_md_cs7mv_70";
+const styles$9 = {
 	textFieldRoot: textFieldRoot,
 	lg: lg$2,
-	md: md$3
+	md: md$4
 };
 
 function TextFieldRoot({ className, size = "lg", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$8.textFieldRoot, styles$8[size], className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$9.textFieldRoot, styles$9[size], className), ...props });
 }
 
 function TextField() {
@@ -2505,7 +2505,7 @@ const custom = "_custom_gh87y_15";
 const icon$1 = "_icon_gh87y_25";
 const inputCustomWrapper = "_inputCustomWrapper_gh87y_34";
 const customButton = "_customButton_gh87y_49";
-const styles$7 = {
+const styles$8 = {
 	search: search,
 	"default": "_default_gh87y_10",
 	custom: custom,
@@ -2531,7 +2531,7 @@ function Search(props) {
     value && /* @__PURE__ */ jsxRuntime.jsx(
       IconXMark.Small,
       {
-        className: styles$7.icon,
+        className: styles$8.icon,
         "aria-label": "clear search",
         role: "button",
         onClick: () => {
@@ -2545,13 +2545,13 @@ function Search(props) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(TextField.Root, { size: "md", className: classNames(styles$7.search, styles$7[mode], className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(TextField.Root, { size: "md", className: classNames(styles$8.search, styles$8[mode], className), children: [
     mode === "default" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: styles$7.icon, "data-element": "icon" }),
+      /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: styles$8.icon, "data-element": "icon" }),
       inputField
     ] }),
     mode === "custom" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$7.inputCustomWrapper, children: inputField }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$8.inputCustomWrapper, children: inputField }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -2559,11 +2559,11 @@ function Search(props) {
           type: "button",
           onClick: props.onSearch,
           "data-element": "custom-button",
-          className: styles$7.customButton,
+          className: styles$8.customButton,
           style: {
             "--custom-button-width": `${props.buttonWidth ?? DEFAULT_CUSTOM_SEARCH_BUTTON_WIDTH}px`
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: classNames(styles$7.icon), "data-element": "icon" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: classNames(styles$8.icon), "data-element": "icon" })
         }
       )
     ] })
@@ -2588,11 +2588,11 @@ function useSegmentControlContext() {
 
 const segmentControlItem = "_segmentControlItem_178px_2";
 const lg$1 = "_lg_178px_23";
-const md$2 = "_md_178px_28";
-const styles$6 = {
+const md$3 = "_md_178px_28";
+const styles$7 = {
 	segmentControlItem: segmentControlItem,
 	lg: lg$1,
-	md: md$2
+	md: md$3
 };
 
 function SegmentControlItem({ className, children, value, ...props }) {
@@ -2605,7 +2605,7 @@ function SegmentControlItem({ className, children, value, ...props }) {
       "aria-checked": value === activeValue,
       "data-state": value === activeValue ? "on" : "off",
       "data-value": value,
-      className: classNames(styles$6.segmentControlItem, styles$6[size], className),
+      className: classNames(styles$7.segmentControlItem, styles$7[size], className),
       ...props,
       children
     }
@@ -2640,13 +2640,13 @@ function useActiveSegment(value) {
 const segmentControlRoot = "_segmentControlRoot_pulca_8";
 const showAfterDelay = "_showAfterDelay_pulca_1";
 const lg = "_lg_pulca_19";
-const md$1 = "_md_pulca_23";
+const md$2 = "_md_pulca_23";
 const indicator$1 = "_indicator_pulca_28";
-const styles$5 = {
+const styles$6 = {
 	segmentControlRoot: segmentControlRoot,
 	showAfterDelay: showAfterDelay,
 	lg: lg,
-	md: md$1,
+	md: md$2,
 	indicator: indicator$1
 };
 
@@ -2657,11 +2657,11 @@ function SegmentControlRoot({ className, children, value, size = "md", ...props
     {
       ref: rootRef,
       role: "radiogroup",
-      className: classNames(styles$5.segmentControlRoot, styles$5[size], className),
+      className: classNames(styles$6.segmentControlRoot, styles$6[size], className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$5.indicator, styles$5[size]), style: indicatorStyle })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$6.indicator, styles$6[size]), style: indicatorStyle })
       ]
     }
   ) });
@@ -2672,6 +2672,86 @@ function SegmentControl(props) {
 }
 SegmentControl.Item = SegmentControlItem;
 
+const stepper = "_stepper_1bwaa_2";
+const sm$1 = "_sm_1bwaa_10";
+const md$1 = "_md_1bwaa_17";
+const primary$1 = "_primary_1bwaa_24";
+const secondary$1 = "_secondary_1bwaa_34";
+const value = "_value_1bwaa_43";
+const styles$5 = {
+	stepper: stepper,
+	sm: sm$1,
+	md: md$1,
+	primary: primary$1,
+	secondary: secondary$1,
+	value: value
+};
+
+function Stepper({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  size = "md",
+  mode = "primary",
+  disabled,
+  className,
+  ...props
+}) {
+  const buttonColor = mode === "primary" ? "accent" : "neutral";
+  const buttonMode = mode === "primary" ? "primary" : "tertiary";
+  const handleStep = (direction) => {
+    let next = value + direction * step;
+    if (min != null) {
+      next = Math.max(next, min);
+    }
+    if (max != null) {
+      next = Math.min(next, max);
+    }
+    if (next !== value) {
+      onChange(next);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Stepper",
+      className: classNames(styles$5.stepper, styles$5[size], styles$5[mode], className),
+      "data-disabled": disabled,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            color: buttonColor,
+            mode: buttonMode,
+            size,
+            "aria-label": "Decrease value",
+            disabled: disabled || min != null && value <= min,
+            onClick: () => handleStep(-1),
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconMinus, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$5.value, "aria-live": "polite", children: value }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            color: buttonColor,
+            mode: buttonMode,
+            size,
+            "aria-label": "Increase value",
+            disabled: disabled || max != null && value >= max,
+            onClick: () => handleStep(1),
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconPlus, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
 const switchWrapper = "_switchWrapper_1yukb_2";
 const icon = "_icon_1yukb_25";
 const styles$4 = {
@@ -2982,6 +3062,7 @@ exports.ProgressBar = ProgressBar;
 exports.RadioButton = RadioButton;
 exports.Search = Search;
 exports.SegmentControl = SegmentControl;
+exports.Stepper = Stepper;
 exports.Switch = Switch;
 exports.Tabs = Tabs;
 exports.Tag = Tag;