@grandbazar/ui-baza 1.2.21 → 1.3.0

package/dist/index.cjs

@@ -63,7 +63,7 @@ const green = "_green_p5h5n_43";
 const neutral$3 = "_neutral_p5h5n_48";
 const lg$7 = "_lg_p5h5n_53";
 const md$a = "_md_p5h5n_60";
-const styles$w = {
+const styles$x = {
 	badge: badge,
 	primary: primary$4,
 	secondary: secondary$5,
@@ -79,13 +79,13 @@ const styles$w = {
 };
 
 function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$w.badge, styles$w[size], styles$w[color], styles$w[mode], className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$x.badge, styles$x[size], styles$x[color], styles$x[mode], className), ...props, children });
 }
 
 const badgeTabsItem = "_badgeTabsItem_10lit_2";
 const primary$3 = "_primary_10lit_18";
 const secondary$4 = "_secondary_10lit_36";
-const styles$v = {
+const styles$w = {
 	badgeTabsItem: badgeTabsItem,
 	primary: primary$3,
 	secondary: secondary$4
@@ -98,7 +98,7 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
       type: "button",
       role: "tab",
       "aria-selected": Boolean(isActive),
-      className: classNames(styles$v.badgeTabsItem, styles$v[mode], className),
+      className: classNames(styles$w.badgeTabsItem, styles$w[mode], className),
       ...props,
       children
     }
@@ -106,12 +106,12 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
 }
 
 const badgeTabsRoot = "_badgeTabsRoot_1qkat_2";
-const styles$u = {
+const styles$v = {
 	badgeTabsRoot: badgeTabsRoot
 };
 
 function BadgeTabsRoot({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$u.badgeTabsRoot, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$v.badgeTabsRoot, className), ...props, children });
 }
 
 function BadgeTabs(props) {
@@ -1068,7 +1068,7 @@ function IconXMarkCircle(props) {
 const breadcrumbs = "_breadcrumbs_1bfmb_2";
 const breadcrumbsItem = "_breadcrumbsItem_1bfmb_8";
 const defaultSeparator = "_defaultSeparator_1bfmb_14";
-const styles$t = {
+const styles$u = {
 	breadcrumbs: breadcrumbs,
 	breadcrumbsItem: breadcrumbsItem,
 	defaultSeparator: defaultSeparator
@@ -1117,7 +1117,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$s = {
+const styles$t = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -1128,7 +1128,7 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
     {
       "data-active": isActive,
       "data-disabled": props.disabled,
-      className: classNames(styles$s.breadcrumbItem, className),
+      className: classNames(styles$t.breadcrumbItem, className),
       ...isActive && { "aria-current": "page" },
       ...!asChild && { type: "button" },
       ...props,
@@ -1140,13 +1140,13 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
 function Breadcrumbs({
   className,
   children,
-  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$t.defaultSeparator })
+  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$u.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$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 })
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles$u.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$u.breadcrumbsItem, children: item }),
+    index < lastIndex && /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$u.breadcrumbsItem, "aria-hidden": "true", children: separator })
   ] }, index)) }) });
 }
 Breadcrumbs.Item = BreadcrumbItem;
@@ -1161,7 +1161,7 @@ const neutral$2 = "_neutral_1waqk_78";
 const lg$6 = "_lg_1waqk_145";
 const md$9 = "_md_1waqk_153";
 const sm$4 = "_sm_1waqk_161";
-const styles$r = {
+const styles$s = {
 	button: button,
 	accent: accent$2,
 	primary: primary$2,
@@ -1179,7 +1179,7 @@ const accent$1 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
 const lg$5 = "_lg_o8iku_41";
 const md$8 = "_md_o8iku_46";
-const styles$q = {
+const styles$r = {
 	buttonFunction: buttonFunction,
 	accent: accent$1,
 	neutral: neutral$1,
@@ -1199,7 +1199,7 @@ function ButtonFunction({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: classNames(styles$q.buttonFunction, styles$q[color], styles$q[size], className),
+      className: classNames(styles$r.buttonFunction, styles$r[color], styles$r[size], className),
       ...props.disabled && { "data-disabled": true },
       ...!asChild && { type: "button" },
       ...props,
@@ -1221,7 +1221,7 @@ function Button({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: classNames(styles$r.button, styles$r[color], styles$r[size], styles$r[mode], className),
+      className: classNames(styles$s.button, styles$s[color], styles$s[size], styles$s[mode], className),
       ...!asChild && { type: "button" },
       ...props,
       children
@@ -1233,7 +1233,7 @@ Button.Function = ButtonFunction;
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
 const icon$2 = "_icon_k1shg_23";
 const checkbox = "_checkbox_k1shg_2";
-const styles$p = {
+const styles$q = {
 	checkboxWrapper: checkboxWrapper,
 	icon: icon$2,
 	checkbox: checkbox
@@ -1246,11 +1246,11 @@ function Checkbox({ className, label, indeterminate, ...props }) {
     {
       "data-disabled": `${Boolean(props.disabled)}`,
       "data-state": dataState,
-      className: classNames(styles$p.checkboxWrapper, className),
+      className: classNames(styles$q.checkboxWrapper, className),
       children: [
-        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 }),
+        dataState === "checked" && /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$q.icon }),
+        dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$q.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", className: styles$q.checkbox, ...props }),
         label
       ]
     }
@@ -1258,7 +1258,7 @@ function Checkbox({ className, label, indeterminate, ...props }) {
 }
 
 const chip = "_chip_dj4kw_2";
-const styles$o = {
+const styles$p = {
 	chip: chip
 };
 
@@ -1266,7 +1266,7 @@ function Chip({ isSelected, children, className, disabled, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames(styles$o.chip, className),
+      className: classNames(styles$p.chip, className),
       "data-selected": isSelected,
       "data-disabled": disabled,
       "aria-disabled": disabled,
@@ -1284,7 +1284,7 @@ const accent = "_accent_ww0fb_37";
 const neutral = "_neutral_ww0fb_42";
 const secondary$2 = "_secondary_ww0fb_47";
 const white = "_white_ww0fb_52";
-const styles$n = {
+const styles$o = {
 	root: root$1,
 	lg: lg$4,
 	md: md$7,
@@ -1296,7 +1296,7 @@ const styles$n = {
 };
 
 function Counter({ className, size = "lg", color = "red", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$n.root, styles$n[size], styles$n[color], className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$o.root, styles$o[size], styles$o[color], className), ...props });
 }
 
 const LOCALE_FIRST_DAY_OF_WEEK = {
@@ -1306,7 +1306,7 @@ const LOCALE_FIRST_DAY_OF_WEEK = {
 
 const datePickerCellWrapper = "_datePickerCellWrapper_np1gx_2";
 const datePickerCell = "_datePickerCell_np1gx_2";
-const styles$m = {
+const styles$n = {
 	datePickerCellWrapper: datePickerCellWrapper,
 	datePickerCell: datePickerCell,
 	"radius-none": "_radius-none_np1gx_83",
@@ -1316,10 +1316,10 @@ const styles$m = {
 };
 
 function DatePickerCell({ children, className, state, isCurrent, radius = "both", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$m.datePickerCellWrapper, styles$m[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$n.datePickerCellWrapper, styles$n[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
-      className: classNames(styles$m.datePickerCell, styles$m[`radius-${radius}`], className),
+      className: classNames(styles$n.datePickerCell, styles$n[`radius-${radius}`], className),
       type: "button",
       role: "gridcell",
       "aria-selected": state === "selected",
@@ -1389,7 +1389,7 @@ function normalizeDateRange(firstDate, secondDate) {
 const datePickerField = "_datePickerField_1qk8s_2";
 const datePickerFieldCalendar = "_datePickerFieldCalendar_1qk8s_8";
 const datePickerFieldWeek = "_datePickerFieldWeek_1qk8s_14";
-const styles$l = {
+const styles$m = {
 	datePickerField: datePickerField,
 	datePickerFieldCalendar: datePickerFieldCalendar,
 	datePickerFieldWeek: datePickerFieldWeek
@@ -1404,9 +1404,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$l.datePickerField, className), role: "grid", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$m.datePickerField, className), role: "grid", children: [
     renderWeekdays?.(),
-    /* @__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)) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$m.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$m.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)) })
   ] });
 }
 
@@ -1447,13 +1447,13 @@ const I18N_MONTH_LABELS = {
 
 const datePickerWeekdays = "_datePickerWeekdays_p8tsm_2";
 const datePickerWeekday = "_datePickerWeekday_p8tsm_2";
-const styles$k = {
+const styles$l = {
 	datePickerWeekdays: datePickerWeekdays,
 	datePickerWeekday: datePickerWeekday
 };
 
 function DatePickerWeekDays({ className, locale = "ru" }) {
-  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)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$l.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$l.datePickerWeekday, role: "columnheader", children: label }, label)) });
 }
 
 function DatePicker() {
@@ -1689,21 +1689,21 @@ const DROPDOWN_PORTAL_SIDE_CONFIG = {
 };
 
 const dropdownContent = "_dropdownContent_12tkb_2";
-const styles$j = {
+const styles$k = {
 	dropdownContent: dropdownContent
 };
 
 function DropdownContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$j.dropdownContent, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$k.dropdownContent, className), ...props, children });
 }
 
 const dropdownItem = "_dropdownItem_msc4i_2";
-const styles$i = {
+const styles$j = {
 	dropdownItem: dropdownItem
 };
 
 function DropdownItem({ className, children, disabled, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$i.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$j.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
 }
 
 const CLICK_OUTSIDE_IGNORE_DATA_NAME = "data-clickoutside-ignore";
@@ -2131,7 +2131,7 @@ function useTriggerHandlersByEventTrigger() {
 }
 
 const dropdownPortal = "_dropdownPortal_p3tdk_2";
-const styles$h = {
+const styles$i = {
 	dropdownPortal: dropdownPortal
 };
 
@@ -2171,7 +2171,7 @@ function DropdownPortal({
           ...style
         },
         ref: portalRef,
-        className: classNames(styles$h.dropdownPortal, className),
+        className: classNames(styles$i.dropdownPortal, className),
         ...handlersByTrigger[triggerEvent],
         ...isNested && { [CLICK_OUTSIDE_IGNORE_DATA_NAME]: "true" },
         children
@@ -2224,7 +2224,7 @@ const BOUNDARY_PAGES = 2;
 const paginationItem = "_paginationItem_1ll6p_2";
 const md$6 = "_md_1ll6p_46";
 const sm$3 = "_sm_1ll6p_60";
-const styles$g = {
+const styles$h = {
 	paginationItem: paginationItem,
 	md: md$6,
 	sm: sm$3
@@ -2236,7 +2236,7 @@ function PaginationItem({ className, children, size = "md", isCurrent, ...props
     {
       type: "button",
       ...isCurrent && { "aria-current": "page" },
-      className: classNames(styles$g.paginationItem, styles$g[size], className),
+      className: classNames(styles$h.paginationItem, styles$h[size], className),
       ...props,
       children
     }
@@ -2273,7 +2273,7 @@ function getVisiblePages(totalPages, maxVisiblePagesWithEllipsis, currentPage) {
 const paginationRoot = "_paginationRoot_c5fwx_2";
 const paginationList = "_paginationList_c5fwx_7";
 const arrowLeft = "_arrowLeft_c5fwx_13";
-const styles$f = {
+const styles$g = {
 	paginationRoot: paginationRoot,
 	paginationList: paginationList,
 	arrowLeft: arrowLeft
@@ -2300,9 +2300,9 @@ function PaginationRoot({
     {
       "aria-label": "pagination navigation",
       role: "navigation",
-      className: classNames(styles$f.paginationRoot, className),
+      className: classNames(styles$g.paginationRoot, className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles$f.paginationList, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles$g.paginationList, children: [
         showArrows && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
           PaginationItem$1,
           {
@@ -2310,7 +2310,7 @@ function PaginationRoot({
             onClick: () => onPageChange(currentPage - 1),
             disabled: isFirstPage,
             size,
-            children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron$1, { className: styles$f.arrowLeft })
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron$1, { className: styles$g.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(
@@ -2346,15 +2346,15 @@ Pagination.Item = PaginationItem;
 const root = "_root_33gbh_2";
 const segment = "_segment_33gbh_10";
 const flexGrow = "_flexGrow_33gbh_19";
-const fill = "_fill_33gbh_23";
+const fill$1 = "_fill_33gbh_23";
 const trail = "_trail_33gbh_28";
 const sm$2 = "_sm_33gbh_32";
 const md$5 = "_md_33gbh_36";
-const styles$e = {
+const styles$f = {
 	root: root,
 	segment: segment,
 	flexGrow: flexGrow,
-	fill: fill,
+	fill: fill$1,
 	trail: trail,
 	sm: sm$2,
 	md: md$5
@@ -2371,7 +2371,7 @@ function ProgressBarLinear({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames(styles$e.root, styles$e[size], className),
+      className: classNames(styles$f.root, styles$f[size], className),
       role: "progressbar",
       "aria-valuenow": clampedPercent,
       "aria-valuemin": 0,
@@ -2383,14 +2383,14 @@ function ProgressBarLinear({
         (Boolean(clampedPercent) || showFillOnZero) && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: classNames(styles$e.segment, styles$e.fill),
+            className: classNames(styles$f.segment, styles$f.fill),
             style: {
               "--clamped-percent": `${clampedPercent}%`
             },
             "aria-hidden": "true"
           }
         ),
-        clampedPercent < 100 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$e.segment, styles$e.flexGrow, styles$e.trail), "aria-hidden": "true" })
+        clampedPercent < 100 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$f.segment, styles$f.flexGrow, styles$f.trail), "aria-hidden": "true" })
       ]
     }
   );
@@ -2410,7 +2410,7 @@ function ProgressBarSteps({
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: classNames(styles$e.segment, styles$e.flexGrow, isFilled ? styles$e.fill : styles$e.trail),
+        className: classNames(styles$f.segment, styles$f.flexGrow, isFilled ? styles$f.fill : styles$f.trail),
         "aria-hidden": "true"
       },
       index
@@ -2419,7 +2419,7 @@ function ProgressBarSteps({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames(styles$e.root, styles$e[size], className),
+      className: classNames(styles$f.root, styles$f[size], className),
       role: "progressbar",
       "aria-valuenow": clampedCurrent,
       "aria-valuemin": 0,
@@ -2439,14 +2439,14 @@ ProgressBar.Steps = ProgressBarSteps;
 
 const radioWrapper = "_radioWrapper_13xie_2";
 const radio = "_radio_13xie_2";
-const styles$d = {
+const styles$e = {
 	radioWrapper: radioWrapper,
 	radio: radio
 };
 
 function RadioButton({ className, label, ...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 }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-disabled": `${Boolean(props.disabled)}`, className: classNames(styles$e.radioWrapper, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: styles$e.radio, ...props }),
     label
   ] });
 }
@@ -2457,7 +2457,7 @@ const textFieldAreaWrapper = "_textFieldAreaWrapper_pia91_2";
 const textFieldAreaLabel = "_textFieldAreaLabel_pia91_14";
 const textFieldAreaLabelSuffix = "_textFieldAreaLabelSuffix_pia91_24";
 const textFieldArea = "_textFieldArea_pia91_2";
-const styles$c = {
+const styles$d = {
 	textFieldAreaWrapper: textFieldAreaWrapper,
 	textFieldAreaLabel: textFieldAreaLabel,
 	textFieldAreaLabelSuffix: textFieldAreaLabelSuffix,
@@ -2478,14 +2478,14 @@ function TextFieldArea({
       "data-invalid": isInvalid,
       "aria-invalid": isInvalid,
       "data-element": "field",
-      className: classNames(styles$c.textFieldArea, className),
+      className: classNames(styles$d.textFieldArea, className),
       placeholder,
       ...props
     }
   );
-  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 }),
+  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$d.textFieldAreaWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$d.textFieldAreaLabel, "data-element": "label", children: floatingLabel }),
+    floatingLabelSuffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$d.textFieldAreaLabelSuffix, "data-element": "label-suffix", children: floatingLabelSuffix }),
     textFieldArea
   ] }) : textFieldArea;
 }
@@ -2493,7 +2493,7 @@ function TextFieldArea({
 const textFieldInputWrapper = "_textFieldInputWrapper_1m8sa_2";
 const textFieldInputLabel = "_textFieldInputLabel_1m8sa_9";
 const textFieldInput = "_textFieldInput_1m8sa_2";
-const styles$b = {
+const styles$c = {
 	textFieldInputWrapper: textFieldInputWrapper,
 	textFieldInputLabel: textFieldInputLabel,
 	textFieldInput: textFieldInput
@@ -2512,37 +2512,37 @@ function TextFieldInput({
       "data-invalid": isInvalid,
       "aria-invalid": isInvalid,
       "data-element": "field",
-      className: classNames(styles$b.textFieldInput, className),
+      className: classNames(styles$c.textFieldInput, className),
       placeholder,
       ...props
     }
   );
-  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 }),
+  return floatingLabel ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$c.textFieldInputWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: props.id, className: styles$c.textFieldInputLabel, "data-element": "label", children: floatingLabel }),
     textFieldInput
   ] }) : textFieldInput;
 }
 
-const textFieldLabel = "_textFieldLabel_1l2ya_1";
-const styles$a = {
+const textFieldLabel = "_textFieldLabel_1xy6x_2";
+const styles$b = {
 	textFieldLabel: textFieldLabel
 };
 
 function TextFieldLabel({ className, children, isRequired, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("label", { className: classNames(styles$a.textFieldLabel, className), "data-required": isRequired, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("label", { className: classNames(styles$b.textFieldLabel, className), "data-required": isRequired, ...props, children });
 }
 
 const textFieldRoot = "_textFieldRoot_cs7mv_2";
 const lg$3 = "_lg_cs7mv_38";
 const md$4 = "_md_cs7mv_70";
-const styles$9 = {
+const styles$a = {
 	textFieldRoot: textFieldRoot,
 	lg: lg$3,
 	md: md$4
 };
 
 function TextFieldRoot({ className, size = "lg", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$9.textFieldRoot, styles$9[size], className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$a.textFieldRoot, styles$a[size], className), ...props });
 }
 
 function TextField() {
@@ -2557,7 +2557,7 @@ const custom = "_custom_gh87y_15";
 const icon$1 = "_icon_gh87y_25";
 const inputCustomWrapper = "_inputCustomWrapper_gh87y_34";
 const customButton = "_customButton_gh87y_49";
-const styles$8 = {
+const styles$9 = {
 	search: search,
 	"default": "_default_gh87y_10",
 	custom: custom,
@@ -2583,7 +2583,7 @@ function Search(props) {
     value && /* @__PURE__ */ jsxRuntime.jsx(
       IconXMark.Small,
       {
-        className: styles$8.icon,
+        className: styles$9.icon,
         "aria-label": "clear search",
         role: "button",
         onClick: () => {
@@ -2597,13 +2597,13 @@ function Search(props) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(TextField.Root, { size: "md", className: classNames(styles$8.search, styles$8[mode], className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(TextField.Root, { size: "md", className: classNames(styles$9.search, styles$9[mode], className), children: [
     mode === "default" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: styles$8.icon, "data-element": "icon" }),
+      /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: styles$9.icon, "data-element": "icon" }),
       inputField
     ] }),
     mode === "custom" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$8.inputCustomWrapper, children: inputField }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$9.inputCustomWrapper, children: inputField }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -2611,11 +2611,11 @@ function Search(props) {
           type: "button",
           onClick: props.onSearch,
           "data-element": "custom-button",
-          className: styles$8.customButton,
+          className: styles$9.customButton,
           style: {
             "--custom-button-width": `${props.buttonWidth ?? DEFAULT_CUSTOM_SEARCH_BUTTON_WIDTH}px`
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: classNames(styles$8.icon), "data-element": "icon" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: classNames(styles$9.icon), "data-element": "icon" })
         }
       )
     ] })
@@ -2641,7 +2641,7 @@ function useSegmentControlContext() {
 const segmentControlItem = "_segmentControlItem_178px_2";
 const lg$2 = "_lg_178px_23";
 const md$3 = "_md_178px_28";
-const styles$7 = {
+const styles$8 = {
 	segmentControlItem: segmentControlItem,
 	lg: lg$2,
 	md: md$3
@@ -2657,7 +2657,7 @@ function SegmentControlItem({ className, children, value, ...props }) {
       "aria-checked": value === activeValue,
       "data-state": value === activeValue ? "on" : "off",
       "data-value": value,
-      className: classNames(styles$7.segmentControlItem, styles$7[size], className),
+      className: classNames(styles$8.segmentControlItem, styles$8[size], className),
       ...props,
       children
     }
@@ -2694,7 +2694,7 @@ const showAfterDelay = "_showAfterDelay_pulca_1";
 const lg$1 = "_lg_pulca_19";
 const md$2 = "_md_pulca_23";
 const indicator$1 = "_indicator_pulca_28";
-const styles$6 = {
+const styles$7 = {
 	segmentControlRoot: segmentControlRoot,
 	showAfterDelay: showAfterDelay,
 	lg: lg$1,
@@ -2709,11 +2709,11 @@ function SegmentControlRoot({ className, children, value, size = "md", ...props
     {
       ref: rootRef,
       role: "radiogroup",
-      className: classNames(styles$6.segmentControlRoot, styles$6[size], className),
+      className: classNames(styles$7.segmentControlRoot, styles$7[size], className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$6.indicator, styles$6[size]), style: indicatorStyle })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$7.indicator, styles$7[size]), style: indicatorStyle })
       ]
     }
   ) });
@@ -2724,6 +2724,302 @@ function SegmentControl(props) {
 }
 SegmentControl.Item = SegmentControlItem;
 
+const SLIDER_DEFAULT_MIN = 0;
+const SLIDER_DEFAULT_MAX = 100;
+const SLIDER_DEFAULT_STEP = 1;
+const SLIDER_PAGE_STEP_MULTIPLIER = 10;
+const SLIDER_STEP_MULTIPLIER_BY_KEY = {
+  ArrowRight: 1,
+  ArrowUp: 1,
+  ArrowLeft: -1,
+  ArrowDown: -1,
+  PageUp: SLIDER_PAGE_STEP_MULTIPLIER,
+  PageDown: -SLIDER_PAGE_STEP_MULTIPLIER
+};
+
+function getNearestHandleIndex(target, values) {
+  let nearestIndex = 0;
+  let nearestDistance = Number.POSITIVE_INFINITY;
+  values.forEach((value, index) => {
+    const distance = Math.abs(value - target);
+    const isCloser = distance < nearestDistance;
+    const isTieResolvedByDirection = distance === nearestDistance && target > value;
+    if (isCloser || isTieResolvedByDirection) {
+      nearestDistance = distance;
+      nearestIndex = index;
+    }
+  });
+  return nearestIndex;
+}
+
+function getPercent(value, bounds) {
+  const { min, max } = bounds;
+  if (max <= min) {
+    return 0;
+  }
+  return Math.min(Math.max((value - min) / (max - min) * 100, 0), 100);
+}
+
+function getFractionLength(value) {
+  return String(value).split(".")[1]?.length ?? 0;
+}
+function snapToStep(value, bounds) {
+  const { min, max, step } = bounds;
+  const clamped = Math.min(Math.max(value, min), max);
+  if (step <= 0) {
+    return clamped;
+  }
+  const snapped = min + Math.round((clamped - min) / step) * step;
+  const precision = Math.max(getFractionLength(step), getFractionLength(min));
+  return Number(Math.min(Math.max(snapped, min), max).toFixed(precision));
+}
+
+function getValueFromPointer(params) {
+  const { clientX, trackStart, trackWidth, min, max, step } = params;
+  if (trackWidth <= 0) {
+    return min;
+  }
+  const ratio = (clientX - trackStart) / trackWidth;
+  return snapToStep(min + ratio * (max - min), { min, max, step });
+}
+
+function normalizeMark(mark) {
+  if (typeof mark === "number") {
+    return { value: mark, label: mark };
+  }
+  return { value: mark.value, label: mark.label };
+}
+
+function updateHandleValue(params) {
+  const { values, index, next, min, max, step } = params;
+  const lowerBound = values[index - 1] ?? min;
+  const upperBound = values[index + 1] ?? max;
+  const snapped = snapToStep(next, { min, max, step });
+  const nextValues = [...values];
+  nextValues[index] = Math.min(Math.max(snapped, lowerBound), upperBound);
+  return nextValues;
+}
+
+const slider = "_slider_vuele_2";
+const fill = "_fill_vuele_20";
+const rail = "_rail_vuele_26";
+const handle = "_handle_vuele_34";
+const mark = "_mark_vuele_39";
+const markDot = "_markDot_vuele_43";
+const track = "_track_vuele_56";
+const marks = "_marks_vuele_106";
+const styles$6 = {
+	slider: slider,
+	fill: fill,
+	rail: rail,
+	handle: handle,
+	mark: mark,
+	markDot: markDot,
+	track: track,
+	marks: marks
+};
+
+function SliderMarks({ marks, min, max, activeFrom, activeTo }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$6.marks, children: marks.map(({ value, label }) => {
+    const isActive = value >= activeFrom && value <= activeTo;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-state": isActive ? "active" : "default",
+        className: styles$6.mark,
+        style: { insetInlineStart: `${getPercent(value, { min, max })}%` },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$6.markDot }),
+          label
+        ]
+      },
+      value
+    );
+  }) });
+}
+
+function SliderBase({
+  values,
+  onValuesChange,
+  min = SLIDER_DEFAULT_MIN,
+  max = SLIDER_DEFAULT_MAX,
+  step = SLIDER_DEFAULT_STEP,
+  marks,
+  disabled,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const railRef = React.useRef(null);
+  const handleRefs = React.useRef([]);
+  const dragRef = React.useRef(null);
+  const normalizedMarks = React.useMemo(() => marks?.map(normalizeMark) ?? [], [marks]);
+  const fillFrom = values.length > 1 ? values[0] ?? min : min;
+  const fillTo = values.at(-1) ?? min;
+  const toPercent = (value) => getPercent(value, { min, max });
+  const resolveKeyValue = (key, current) => {
+    const multiplier = SLIDER_STEP_MULTIPLIER_BY_KEY[key];
+    if (multiplier !== void 0) {
+      return current + step * multiplier;
+    }
+    if (key === "Home") {
+      return min;
+    }
+    return key === "End" ? max : null;
+  };
+  const resolveValueText = (value) => {
+    const { label } = normalizedMarks.find((mark) => mark.value === value) ?? {};
+    const text = typeof label === "string" || typeof label === "number" ? String(label) : void 0;
+    return text === String(value) ? void 0 : text;
+  };
+  const commit = (index, next) => {
+    const nextValues = updateHandleValue({ values, index, next, min, max, step });
+    if (nextValues[index] === values[index]) {
+      return;
+    }
+    onValuesChange(nextValues);
+  };
+  const readPointerValue = (clientX) => {
+    if (!railRef.current) {
+      return null;
+    }
+    const rect = railRef.current.getBoundingClientRect();
+    return getValueFromPointer({ clientX, trackStart: rect.left, trackWidth: rect.width, min, max, step });
+  };
+  const handleKeyDown = (event, index) => {
+    const current = values[index];
+    if (disabled || current === void 0) {
+      return;
+    }
+    const next = resolveKeyValue(event.key, current);
+    if (next === null) {
+      return;
+    }
+    event.preventDefault();
+    commit(index, next);
+  };
+  const handlePointerDown = (event) => {
+    if (disabled || event.button !== 0 || !event.isPrimary) {
+      return;
+    }
+    const grabbedIndex = handleRefs.current.findIndex((handle) => handle === event.target);
+    if (grabbedIndex >= 0) {
+      const isAmbiguousGrab = values.filter((value) => value === values[grabbedIndex]).length > 1;
+      dragRef.current = { pointerId: event.pointerId, index: isAmbiguousGrab ? null : grabbedIndex };
+      event.currentTarget.setPointerCapture(event.pointerId);
+      return;
+    }
+    const pointerValue = readPointerValue(event.clientX);
+    if (pointerValue === null) {
+      return;
+    }
+    const nearestIndex = getNearestHandleIndex(pointerValue, values);
+    dragRef.current = { pointerId: event.pointerId, index: nearestIndex };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    handleRefs.current[nearestIndex]?.focus();
+    commit(nearestIndex, pointerValue);
+  };
+  const handlePointerMove = (event) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId || disabled) {
+      return;
+    }
+    const pointerValue = readPointerValue(event.clientX);
+    if (pointerValue === null) {
+      return;
+    }
+    const index = drag.index ?? getNearestHandleIndex(pointerValue, values);
+    dragRef.current = { pointerId: drag.pointerId, index };
+    handleRefs.current[index]?.focus();
+    commit(index, pointerValue);
+  };
+  const stopDragging = (event) => {
+    if (dragRef.current?.pointerId !== event.pointerId) {
+      return;
+    }
+    dragRef.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  const handleLostPointerCapture = (event) => {
+    if (dragRef.current?.pointerId === event.pointerId) {
+      dragRef.current = null;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames(styles$6.slider, className),
+      "data-disabled": disabled,
+      "data-marks": Boolean(marks?.length),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: railRef,
+          className: styles$6.rail,
+          onPointerDown: handlePointerDown,
+          onPointerMove: handlePointerMove,
+          onPointerUp: stopDragging,
+          onPointerCancel: stopDragging,
+          onLostPointerCapture: handleLostPointerCapture,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$6.track }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: styles$6.fill,
+                style: { insetInlineStart: `${toPercent(fillFrom)}%`, insetInlineEnd: `${100 - toPercent(fillTo)}%` }
+              }
+            ),
+            normalizedMarks.length ? /* @__PURE__ */ jsxRuntime.jsx(SliderMarks, { marks: normalizedMarks, min, max, activeFrom: fillFrom, activeTo: fillTo }) : null,
+            values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: (element) => {
+                  handleRefs.current[index] = element;
+                },
+                role: "slider",
+                tabIndex: disabled ? -1 : 0,
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": value,
+                "aria-valuetext": resolveValueText(value),
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                "aria-describedby": ariaDescribedBy,
+                "aria-disabled": disabled,
+                "aria-orientation": "horizontal",
+                className: styles$6.handle,
+                style: { insetInlineStart: `${toPercent(value)}%` },
+                onKeyDown: (event) => handleKeyDown(event, index)
+              },
+              index
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+
+function SliderRange({ value, onChange, ...props }) {
+  const handleValuesChange = (nextValues) => {
+    const [from = value[0], to = value[1]] = nextValues;
+    onChange([from, to]);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(SliderBase, { values: value, onValuesChange: handleValuesChange, ...props });
+}
+
+function Slider({ value, onChange, ...props }) {
+  const handleValuesChange = ([next = value]) => onChange(next);
+  return /* @__PURE__ */ jsxRuntime.jsx(SliderBase, { values: [value], onValuesChange: handleValuesChange, ...props });
+}
+Slider.Range = SliderRange;
+
 const stepper = "_stepper_103n3_2";
 const sm$1 = "_sm_103n3_10";
 const md$1 = "_md_103n3_17";
@@ -3118,6 +3414,7 @@ exports.ProgressBar = ProgressBar;
 exports.RadioButton = RadioButton;
 exports.Search = Search;
 exports.SegmentControl = SegmentControl;
+exports.Slider = Slider;
 exports.Stepper = Stepper;
 exports.Switch = Switch;
 exports.Tabs = Tabs;