@grandbazar/ui-baza 1.2.20 → 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) {
@@ -957,6 +957,34 @@ function IconStop(props) {
   ) });
 }
 
+function IconStore(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M22 10.3334C22 10.2726 21.993 10.2119 21.98 10.1526L20.897 5.2626C20.695 4.3344 20.181 3.5037 19.44 2.9097C18.699 2.3157 17.776 1.9946 16.827 2.0001H7.173C6.224 1.9953 5.302 2.3168 4.562 2.9108C3.822 3.5047 3.308 4.335 3.107 5.2626L2.02 10.1526C2.007 10.2119 2 10.2726 2 10.3334V11.1667C1.999 11.9781 2.296 12.7616 2.833 13.3692V17.8334C2.835 18.9381 3.274 19.9971 4.055 20.7782C4.836 21.5593 5.895 21.9987 7 22.0001H17C18.105 21.9987 19.164 21.5593 19.945 20.7782C20.726 19.9971 21.165 18.9381 21.167 17.8334V13.3692C21.704 12.7616 22.001 11.9781 22 11.1667V10.3334ZM3.667 10.4242L4.733 5.6242C4.854 5.0678 5.163 4.5697 5.607 4.2134C6.051 3.8571 6.604 3.6641 7.173 3.6667H7.833V6.1667C7.833 6.3878 7.921 6.5997 8.077 6.756C8.234 6.9123 8.446 7.0001 8.667 7.0001C8.888 7.0001 9.1 6.9123 9.256 6.756C9.412 6.5997 9.5 6.3878 9.5 6.1667V3.6667H14.5V6.1667C14.5 6.3878 14.588 6.5997 14.744 6.756C14.9 6.9123 15.112 7.0001 15.333 7.0001C15.554 7.0001 15.766 6.9123 15.923 6.756C16.079 6.5997 16.167 6.3878 16.167 6.1667V3.6667H16.827C17.396 3.6641 17.949 3.8571 18.393 4.2134C18.837 4.5697 19.146 5.0678 19.267 5.6242L20.333 10.4242V11.1667C20.333 11.6088 20.158 12.0327 19.845 12.3452C19.533 12.6578 19.109 12.8334 18.667 12.8334H17.833C17.391 12.8334 16.967 12.6578 16.655 12.3452C16.342 12.0327 16.167 11.6088 16.167 11.1667C16.167 10.9457 16.079 10.7338 15.923 10.5775C15.766 10.4212 15.554 10.3334 15.333 10.3334C15.112 10.3334 14.9 10.4212 14.744 10.5775C14.588 10.7338 14.5 10.9457 14.5 11.1667C14.5 11.6088 14.324 12.0327 14.012 12.3452C13.699 12.6578 13.275 12.8334 12.833 12.8334H11.167C10.725 12.8334 10.301 12.6578 9.988 12.3452C9.676 12.0327 9.5 11.6088 9.5 11.1667C9.5 10.9457 9.412 10.7338 9.256 10.5775C9.1 10.4212 8.888 10.3334 8.667 10.3334C8.446 10.3334 8.234 10.4212 8.077 10.5775C7.921 10.7338 7.833 10.9457 7.833 11.1667C7.833 11.6088 7.658 12.0327 7.345 12.3452C7.033 12.6578 6.609 12.8334 6.167 12.8334H5.333C4.891 12.8334 4.467 12.6578 4.155 12.3452C3.842 12.0327 3.667 11.6088 3.667 11.1667V10.4242ZM17 20.3334H7C6.337 20.3334 5.701 20.07 5.232 19.6012C4.763 19.1323 4.5 18.4964 4.5 17.8334V14.3942C4.772 14.4647 5.052 14.5003 5.333 14.5001H6.167C6.64 14.5003 7.108 14.3996 7.539 14.2046C7.97 14.0095 8.354 13.7248 8.667 13.3692C8.979 13.7248 9.363 14.0095 9.795 14.2046C10.226 14.3996 10.693 14.5003 11.167 14.5001H12.833C13.307 14.5003 13.774 14.3996 14.205 14.2046C14.637 14.0095 15.021 13.7248 15.333 13.3692C15.646 13.7248 16.03 14.0095 16.461 14.2046C16.892 14.3996 17.36 14.5003 17.833 14.5001H18.667C18.948 14.5003 19.228 14.4647 19.5 14.3942V17.8334C19.5 18.4964 19.237 19.1323 18.768 19.6012C18.299 20.07 17.663 20.3334 17 20.3334Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+IconStore.Filled = function IconStoreFilled(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M17.833 16.1667C16.956 16.1663 16.093 15.9347 15.333 15.495C14.574 15.9347 13.711 16.1663 12.833 16.1667H11.167C10.288 16.1655 9.425 15.9302 8.667 15.485C7.909 15.9303 7.046 16.1656 6.167 16.1667H5.333C4.455 16.1664 3.592 15.9325 2.833 15.4892V19.5C2.833 20.163 3.097 20.7989 3.566 21.2678C4.035 21.7366 4.67 22 5.333 22H18.667C19.33 22 19.966 21.7366 20.435 21.2678C20.903 20.7989 21.167 20.163 21.167 19.5V15.49C20.408 15.9327 19.545 16.1662 18.667 16.1667H17.833Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M16.167 2V7H14.5V2H9.5V7H7.833V2H3.833L2.02 10.1525L2 11.1667C2 12.0507 2.351 12.8986 2.976 13.5237C3.601 14.1488 4.449 14.5 5.333 14.5H6.167C6.642 14.4985 7.111 14.3948 7.542 14.1961C7.973 13.9974 8.357 13.7083 8.667 13.3483C8.976 13.7083 9.36 13.9974 9.791 14.1961C10.223 14.3948 10.692 14.4985 11.167 14.5H12.833C13.307 14.5002 13.774 14.3995 14.205 14.2045C14.637 14.0095 15.021 13.7247 15.333 13.3692C15.646 13.7247 16.03 14.0095 16.461 14.2045C16.892 14.3995 17.36 14.5002 17.833 14.5H18.667C19.551 14.5 20.399 14.1488 21.024 13.5237C21.649 12.8986 22 12.0507 22 11.1667V10.3333L20.167 2H16.167Z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+};
+
 function IconSwitch(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "none", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1040,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
@@ -1089,7 +1117,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$s = {
+const styles$t = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -1100,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,
@@ -1112,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;
@@ -1133,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,
@@ -1151,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,
@@ -1171,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,
@@ -1193,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
@@ -1205,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
@@ -1218,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
       ]
     }
@@ -1230,7 +1258,7 @@ function Checkbox({ className, label, indeterminate, ...props }) {
 }
 
 const chip = "_chip_dj4kw_2";
-const styles$o = {
+const styles$p = {
 	chip: chip
 };
 
@@ -1238,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,
@@ -1256,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,
@@ -1268,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 = {
@@ -1278,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",
@@ -1288,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",
@@ -1361,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
@@ -1376,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)) })
   ] });
 }
 
@@ -1419,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() {
@@ -1661,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";
@@ -2103,7 +2131,7 @@ function useTriggerHandlersByEventTrigger() {
 }
 
 const dropdownPortal = "_dropdownPortal_p3tdk_2";
-const styles$h = {
+const styles$i = {
 	dropdownPortal: dropdownPortal
 };
 
@@ -2143,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
@@ -2196,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
@@ -2208,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
     }
@@ -2245,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
@@ -2272,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,
           {
@@ -2282,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(
@@ -2318,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
@@ -2343,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,
@@ -2355,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" })
       ]
     }
   );
@@ -2382,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
@@ -2391,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,
@@ -2411,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
   ] });
 }
@@ -2429,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,
@@ -2450,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;
 }
@@ -2465,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
@@ -2484,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() {
@@ -2529,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,
@@ -2555,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: () => {
@@ -2569,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",
         {
@@ -2583,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" })
         }
       )
     ] })
@@ -2613,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
@@ -2629,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
     }
@@ -2666,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,
@@ -2681,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 })
       ]
     }
   ) });
@@ -2696,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";
@@ -3079,6 +3403,7 @@ exports.IconSort = IconSort;
 exports.IconStar = IconStar;
 exports.IconSticker = IconSticker;
 exports.IconStop = IconStop;
+exports.IconStore = IconStore;
 exports.IconSwitch = IconSwitch;
 exports.IconTrash = IconTrash;
 exports.IconXMark = IconXMark;
@@ -3089,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;