@eightshift/ui-components 4.0.0 → 5.0.0

package/dist/components/slider/column-config-slider.js

@@ -1,210 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-icmbmNdI.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-rz2XRMGm.js";
-import { BaseControl } from "../base-control/base-control.js";
-import { icons } from "../../icons/icons.js";
-import { getColumnConfigOutputText } from "./utils.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-/**
- * A two-thumb slider for selecting a range of columns.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - Icon to display within the slider.
- * @param {string} [props.help] - The help text shown below the slider.
- * @param {string} [props.label] - The label of the slider.
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display next to the label.
- * @param {string} [props.subtitle] - The subtitle of the slider.
- * @param {Number} [props.columns=12] - Number of columns.
- * @param {boolean} [props.disableWidth] - If `true`, the width thumb is disabled.
- * @param {boolean} [props.disableOffset] - If `true`, the offset thumb is disabled.
- * @param {boolean} [props.showOuterAsGutter] - If `true`, the outer columns are displayed with a special icons instead of the column numbers. Other numbers are offset by 1.
- * @param {Number | Number[]} props.value - The current value of the slider.
- * @param {Function} props.onChange - Function to run when the value changes.
- * @param {Function} props.onChangeEnd - Function to run when the value change ends.
- * @param {boolean} [props.disabled] - If `true`, the slider is disabled.
- * @param {string} [props.labelClassName] - Additional classes to pass to the label.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The ColumnConfigSlider component.
- *
- * @example
- * <ColumnConfigSlider
- * 	label='My slider'
- * 	value={sliderValue}
- * 	onChange={setSliderValue}
- * />
- *
- * @preserve
- */
-const ColumnConfigSlider = (props) => {
-  const {
-    icon,
-    help,
-    label,
-    actions,
-    subtitle,
-    columns = 12,
-    disableWidth,
-    disableOffset,
-    showOuterAsGutter,
-    value,
-    onChange,
-    onChangeEnd,
-    disabled,
-    labelClassName,
-    hidden,
-    ...other
-  } = props;
-  if (hidden) {
-    return null;
-  }
-  const markerData = [...Array(columns).keys()];
-  const thumbLabels = [__("Offset", "eightshift-ui-components"), __("Width", "eightshift-ui-components")];
-  return /* @__PURE__ */ jsx(
-    $6f909507e6374d18$export$472062a354075cee,
-    {
-      value,
-      onChange,
-      minValue: 1,
-      maxValue: columns,
-      step: 1,
-      isDisabled: disabled,
-      orientation: "horizontal",
-      className: "es:w-full",
-      onChangeEnd,
-      ...other,
-      children: /* @__PURE__ */ jsx(
-        BaseControl,
-        {
-          icon,
-          label,
-          subtitle,
-          help,
-          actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-            actions,
-            /* @__PURE__ */ jsx(ColumnConfigSliderOutput, { showOuterAsGutter })
-          ] }),
-          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-          className: labelClassName,
-          controlContainerClassName: "es:flex es:items-center es:gap-2.5 es:space-y-0!",
-          children: /* @__PURE__ */ jsx(
-            $6f909507e6374d18$export$105594979f116971,
-            {
-              className: "es:isolate es:grid es:h-10 es:w-full es:grid-rows-1",
-              style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
-              children: ({ state }) => {
-                return /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(
-                        "es:col-span-full es:row-span-1 es:row-start-1 es:h-full es:w-full es:grow es:rounded-lg es:border",
-                        disabled ? "es:border-secondary-200 es:bg-white" : "es:border-secondary-300 es:bg-secondary-50 es:shadow-xs"
-                      )
-                    }
-                  ),
-                  markerData.slice(0, -1).map((marker) => /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(
-                        "es:row-span-1 es:row-start-1 es:h-full es:w-px es:justify-self-center",
-                        marker >= value[0] - 1 && marker < value[1] ? "es:bg-accent-700/25" : "es:bg-secondary-300",
-                        (marker === value[0] - 2 || marker === value[1] - 1) && "es:hidden"
-                      ),
-                      style: { gridColumn: `${marker + 1} / span 2` }
-                    },
-                    marker
-                  )),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(
-                        "es:pointer-events-none es:col-start-1 es:row-start-1 es:border",
-                        "es:h-full es:w-full es:self-center es:rounded-lg",
-                        disabled ? "es:border-secondary-200 es:bg-secondary-50" : "es:border-accent-500 es:bg-accent-500/30"
-                      ),
-                      style: {
-                        gridColumn: `${value[0]} / span ${value[1] - value[0] + 1}`
-                      }
-                    }
-                  ),
-                  markerData.map((marker, index) => {
-                    return /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        className: clsx(
-                          "es:row-span-1 es:row-start-1 es:select-none es:place-self-center es:text-xs es:transition-colors",
-                          "es:inset-y-0 es:my-auto es:h-fit es:pl-px es:text-center",
-                          "es:icon:size-3 es:icon:stroke-[1.5]",
-                          marker >= value[0] - 1 && marker < value[1] ? "es:text-accent-700" : "es:text-secondary-400"
-                        ),
-                        style: { gridColumn: `${index + 1} / span 1` },
-                        children: [
-                          showOuterAsGutter && marker === 0 && icons.chevronLeft,
-                          showOuterAsGutter && marker === columns - 1 && icons.chevronRight,
-                          showOuterAsGutter && marker > 0 && marker < columns - 1 && marker,
-                          !showOuterAsGutter && marker + 1
-                        ]
-                      },
-                      marker
-                    );
-                  }),
-                  state.values.map((_, i) => /* @__PURE__ */ jsx(
-                    $6f909507e6374d18$export$2c1b491743890dec,
-                    {
-                      index: i,
-                      "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
-                      isDisabled: i === 0 && disableOffset || i === 1 && disableWidth,
-                      className: clsx(
-                        "es:static! es:row-span-1 es:row-start-1 es:h-6 es:w-1.5 es:rounded-full es:border es:transition es:duration-300",
-                        i === 0 && "es:translate-y-1/2! es:self-center es:justify-self-start",
-                        i === 1 && "es:translate-x-full! es:translate-y-1/2! es:self-center es:justify-self-end",
-                        "es:shadow dragging:es:bg-accent-600 es:disabled:opacity-0",
-                        "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                        "es:border-accent-600 es:bg-accent-500 es:shadow-accent-600/50",
-                        "es:hover:cursor-grab dragging:es:cursor-grabbing"
-                      ),
-                      style: {
-                        gridColumn: `${state.values[i]} / span 1`
-                      }
-                    },
-                    i
-                  ))
-                ] });
-              }
-            }
-          )
-        }
-      )
-    }
-  );
-};
-/**
- * The output for the ColumnConfigSlider component.
- *
- * Meant to be used within the ColumnConfigSlider component, e.g in help or actions.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {boolean} [props.showOuterAsGutter] - If `true`, the outer columns are displayed with a special icons instead of the column numbers. Other numbers are offset by 1.
- *
- * @returns {JSX.Element} The ColumnConfigSliderOutput component.
- *
- * @example
- * <ColumnConfigSliderOutput />
- *
- * @preserve
- */
-const ColumnConfigSliderOutput = ({ showOuterAsGutter }) => /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es:text-xs es:tabular-nums es:text-secondary-600"), children: ({ state }) => {
-  const columns = state.getThumbMaxValue(1);
-  const offset = parseInt(state.getThumbValueLabel(0));
-  const endOffset = parseInt(state.getThumbValueLabel(1));
-  const width = endOffset - offset + 1;
-  return getColumnConfigOutputText(columns, offset, width, showOuterAsGutter);
-} });
-export {
-  ColumnConfigSlider,
-  ColumnConfigSliderOutput
-};

package/dist/components/slider/slider.js

@@ -1,343 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-DkCSC521.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-icmbmNdI.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-rz2XRMGm.js";
-import { BaseControl } from "../base-control/base-control.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { NumberPicker } from "../number-picker/number-picker.js";
-import { useState, useContext } from "react";
-import { generateMarkers } from "./utils.js";
-/**
- * A single/multi-thumb slider component.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - Icon to display within the slider.
- * @param {string} [props.label] - The label of the slider.
- * @param {string} [props.subtitle] - The subtitle of the slider.
- * @param {string} [props.help] - The help text shown below the slider.
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display next to the label.
- * @param {Number} [props.min=0] - The minimum value of the slider.
- * @param {Number} [props.max=100] - The maximum value of the slider.
- * @param {Number} [props.step=1] - The step value of the slider.
- * @param {Number} [props.startPoint] - The starting point of the slider.
- * @param {SliderMarkerType} [props.markers] - The markers to display on the slider. If `true`, markers are auto-generated, with labels. If set to `dots`, markers are auto-generated, but do not show labels next to dots. If an object is provided, the keys are the values of the markers, and the values are the labels.
- * @param {boolean} [props.noActiveHighlight=false] - If `true`, the highlight of the active value will not be displayed.
- * @param {Number | Number[]} props.value - The current value of the slider.
- * @param {Function} props.onChange - Function to run when the value changes.
- * @param {Function} props.onChangeEnd - Function to run when the value change ends.
- * @param {boolean} [props.disabled] - If `true`, the slider is disabled.
- * @param {boolean} [props.inputField=false] - If `true`, the slider will display an input field for the value. For multi-thumb sliders, the input field will be displayed for the focused thumb.
- * @param {boolean} [props.vertical=false] - If `true`, the slider will be displayed vertically.
- * @param {JSX.Element} [props.before] - Element to display before the slider.
- * @param {JSX.Element} [props.after] - Element to display after the slider.
- * @param {string[]} [props.thumbLabels] - ARIA labels for the thumbs.
- * @param {Function} [props.thumbContent] - If provided, the function will be called with the current value of the thumb, and the return value will be displayed within the thumb. `(currentIndex: number) => JSX.Element`.
- * @param {string} [props.labelClassName] - Additional classes to pass to the label.
- * @param {Object<string, any>} [props.trackStyle] - Additional style for the track.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The Slider component.
- *
- * @typedef {'dots' | 'lines' | 'true' | Object<Number, string>} SliderMarkerType
- *
- * @example
- * <Slider
- * 	label='My slider'
- * 	value={sliderValue}
- * 	onChange={setSliderValue}
- * />
- *
- * @preserve
- */
-const Slider = (props) => {
-  const {
-    icon,
-    label,
-    subtitle,
-    help,
-    actions,
-    min = 0,
-    max = 100,
-    step = 1,
-    startPoint,
-    markers,
-    noActiveHighlight = false,
-    value,
-    onChange,
-    onChangeEnd,
-    disabled,
-    inputField = false,
-    vertical = false,
-    before,
-    after,
-    thumbLabels,
-    thumbContent,
-    labelClassName,
-    trackStyle,
-    hidden,
-    ...other
-  } = props;
-  const [currentThumbIndex, setCurrentThumbIndex] = useState(-1);
-  if (hidden) {
-    return null;
-  }
-  let generatedMarkers = {};
-  if (typeof markers === "object" && Object.keys(markers).length > 0) {
-    generatedMarkers = markers;
-  }
-  if (markers === true || markers === "dots") {
-    generatedMarkers = generateMarkers(min, max, step);
-  }
-  const markerEntries = Object.entries(generatedMarkers);
-  const markerData = vertical ? markerEntries.toReversed() : markerEntries;
-  return /* @__PURE__ */ jsx(
-    $6f909507e6374d18$export$472062a354075cee,
-    {
-      value,
-      onChange,
-      minValue: min,
-      maxValue: max,
-      step,
-      isDisabled: disabled,
-      orientation: vertical ? "vertical" : "horizontal",
-      className: clsx("es:w-full", (markerEntries == null ? void 0 : markerEntries.some(([_, value2]) => (value2 == null ? void 0 : value2.length) > 0)) && "es:pb-3.5"),
-      onChangeEnd,
-      ...other,
-      children: /* @__PURE__ */ jsx(
-        BaseControl,
-        {
-          icon,
-          label,
-          subtitle,
-          help,
-          actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-            actions,
-            !inputField && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es:text-xs es:tabular-nums es:text-secondary-600"), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ") }),
-            inputField && /* @__PURE__ */ jsx(
-              NumberInputField,
-              {
-                fieldIndex: Array.isArray(value) ? currentThumbIndex : 0,
-                min,
-                max,
-                step,
-                focusedThumb: currentThumbIndex,
-                setFocusedThumb: setCurrentThumbIndex
-              }
-            )
-          ] }),
-          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-          className: labelClassName,
-          children: /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-center es:gap-2.5 es:space-y-0!", vertical && "es:flex-col"), children: [
-            before && /* @__PURE__ */ jsx("div", { className: "es:flex es:shrink-0 es:items-center es:gap-1", children: before }),
-            /* @__PURE__ */ jsx($6f909507e6374d18$export$105594979f116971, { className: clsx("es:isolate es:grid es:grid-cols-1 es:grid-rows-1", vertical ? "es:mx-auto es:h-40 es:w-4" : "es:h-4 es:w-full es:grow"), children: ({ state }) => {
-              let activeBarLeft;
-              let activeBarBottom;
-              let activeBarWidth;
-              let activeBarHeight;
-              let activeBarOffset = false;
-              let shouldRoundStart = false;
-              let shouldRoundEnd = false;
-              const currValue = state.getThumbValue(0);
-              if (vertical && !noActiveHighlight) {
-                if (Array.isArray(value)) {
-                  activeBarBottom = state.getThumbPercent(0) * 100;
-                  activeBarHeight = state.getThumbPercent(value.length - 1) * 100 - activeBarBottom;
-                } else if (startPoint && currValue >= startPoint) {
-                  activeBarBottom = state.getValuePercent(startPoint) * 100;
-                  activeBarHeight = state.getThumbPercent(0) * 100 - activeBarBottom;
-                  activeBarOffset = true;
-                } else if (startPoint && currValue < startPoint) {
-                  activeBarBottom = state.getThumbPercent(0) * 100;
-                  activeBarHeight = state.getValuePercent(startPoint) * 100 - activeBarBottom;
-                } else if (min < 0 && currValue >= 0) {
-                  activeBarBottom = state.getValuePercent(0) * 100;
-                  activeBarHeight = state.getThumbPercent(0) * 100 - activeBarBottom;
-                } else if (min < 0 && currValue < 0) {
-                  activeBarBottom = state.getThumbPercent(0) * 100;
-                  activeBarHeight = state.getValuePercent(0) * 100 - activeBarBottom;
-                } else {
-                  activeBarBottom = state.getValuePercent(min) * 100;
-                  activeBarHeight = state.getThumbPercent(0) * 100;
-                  shouldRoundEnd = true;
-                }
-              } else if (!noActiveHighlight) {
-                if (Array.isArray(value)) {
-                  activeBarLeft = state.getThumbPercent(0) * 100;
-                  activeBarWidth = state.getThumbPercent(value.length - 1) * 100 - activeBarLeft;
-                } else if (startPoint && currValue >= startPoint) {
-                  activeBarLeft = state.getValuePercent(startPoint) * 100;
-                  activeBarWidth = state.getThumbPercent(0) * 100 - activeBarLeft;
-                } else if (startPoint && currValue < startPoint) {
-                  activeBarLeft = state.getThumbPercent(0) * 100;
-                  activeBarWidth = state.getValuePercent(startPoint) * 100 - activeBarLeft;
-                } else if (min < 0 && currValue >= 0) {
-                  activeBarLeft = state.getValuePercent(0) * 100;
-                  activeBarWidth = state.getThumbPercent(0) * 100 - activeBarLeft;
-                  activeBarOffset = true;
-                } else if (min < 0 && currValue < 0) {
-                  activeBarLeft = state.getThumbPercent(0) * 100;
-                  activeBarWidth = state.getValuePercent(0) * 100 - activeBarLeft;
-                } else {
-                  activeBarLeft = state.getValuePercent(min) * 100;
-                  activeBarWidth = state.getThumbPercent(0) * 100;
-                  shouldRoundStart = true;
-                }
-              }
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "es:relative es:col-start-1 es:row-start-1 es:rounded-full es:border",
-                      !vertical && "es:h-1.5 es:w-full es:self-center",
-                      vertical && "es:h-full es:w-1.5 es:flex-col es:justify-self-center",
-                      disabled ? "es:border-secondary-200 es:bg-white" : "es:border-secondary-300 es:bg-secondary-50 es:shadow-xs"
-                    ),
-                    style: trackStyle
-                  }
-                ),
-                !noActiveHighlight && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "es:absolute es:col-start-1 es:row-start-1 es:border",
-                      !vertical && "es:h-1.5 es:w-full es:self-center",
-                      vertical && "es:h-full es:w-1.5 es:flex-col es:justify-self-center",
-                      !vertical && shouldRoundStart && "es:rounded-l-full",
-                      !vertical && shouldRoundEnd && "es:rounded-r-full",
-                      vertical && shouldRoundStart && "es:rounded-t-full",
-                      vertical && shouldRoundEnd && "es:rounded-b-full",
-                      !vertical && activeBarOffset && "es:-translate-x-px",
-                      vertical && activeBarOffset && "es:translate-y-px",
-                      disabled ? "es:border-secondary-200 es:bg-secondary-50" : "es:border-accent-500 es:bg-accent-500/30"
-                    ),
-                    style: {
-                      bottom: vertical ? `${activeBarBottom}%` : null,
-                      height: vertical ? `${activeBarHeight}%` : null,
-                      width: vertical ? null : `${activeBarWidth}%`,
-                      left: vertical ? null : `${activeBarLeft}%`
-                    }
-                  }
-                ),
-                markers && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "es:relative es:col-start-1 es:row-start-1",
-                      !vertical && "es:h-1 es:w-full es:self-center",
-                      vertical && "es:h-full es:w-1 es:flex-col es:justify-self-center"
-                    ),
-                    children: markerData.map(([rawDotValue, labelData], index) => {
-                      const dotValue = parseFloat(rawDotValue);
-                      let isWithinActiveBar = false;
-                      if (Array.isArray(value)) {
-                        isWithinActiveBar = value[0] <= dotValue && dotValue <= value[value.length - 1];
-                      } else if (startPoint && dotValue >= startPoint) {
-                        isWithinActiveBar = dotValue >= startPoint && dotValue <= currValue && dotValue !== startPoint;
-                      } else if (startPoint && dotValue < startPoint) {
-                        isWithinActiveBar = dotValue <= startPoint && dotValue >= currValue && dotValue !== startPoint;
-                      } else if (min < 0 && dotValue >= 0) {
-                        isWithinActiveBar = dotValue >= 0 && dotValue <= currValue && dotValue !== 0;
-                      } else if (min < 0 && dotValue < 0) {
-                        isWithinActiveBar = dotValue <= 0 && dotValue >= currValue && dotValue !== 0;
-                      } else {
-                        isWithinActiveBar = dotValue <= currValue && dotValue > min && dotValue < max;
-                      }
-                      return /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: clsx(
-                            "es:absolute",
-                            vertical ? "es:h-px es:w-1" : "es:h-1 es:w-px es:translate-x-1/2",
-                            !(dotValue === min || dotValue === max || dotValue === startPoint && !noActiveHighlight || min < 0 && dotValue === 0 && !noActiveHighlight || isWithinActiveBar) && "es:bg-secondary-300",
-                            !noActiveHighlight && isWithinActiveBar && "es:bg-accent-500/75"
-                          ),
-                          style: {
-                            left: vertical ? null : `${state.getValuePercent(dotValue) * 100}%`,
-                            top: vertical ? `calc(${state.getValuePercent(dotValue) * 100}%)` : null
-                          },
-                          children: /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              className: clsx(
-                                "es:absolute es:select-none es:text-xs es:transition-colors",
-                                vertical ? "es:left-3.5 es:top-0 es:-translate-y-1/2" : "es:left-0 es:top-2.5 es:-translate-x-1/2",
-                                (Array.isArray(value) ? value.includes(Number(dotValue)) : value === Number(dotValue) && !disabled) ? "es:text-accent-700" : "es:text-secondary-300"
-                              ),
-                              children: markers && markers !== "dots" && labelData
-                            }
-                          )
-                        },
-                        index
-                      );
-                    })
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "es:relative es:col-start-1 es:row-start-1 es:p-px", children: state.values.map((_, i) => /* @__PURE__ */ jsxs(
-                  $6f909507e6374d18$export$2c1b491743890dec,
-                  {
-                    index: i,
-                    "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
-                    className: clsx(
-                      "es:absolute es:size-3.5 es:rounded-full es:border es:transition es:duration-300",
-                      vertical ? "es:translate-x-1/2!" : "es:translate-y-1/2!",
-                      "es:shadow dragging:es:bg-accent-600 es:disabled:border-secondary-200 es:disabled:bg-secondary-100 es:disabled:shadow-none",
-                      "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                      "es:border-accent-600 es:bg-accent-500 es:shadow-accent-600/50",
-                      "es:hover:cursor-grab dragging:es:cursor-grabbing"
-                    ),
-                    onFocus: () => {
-                      if (state.values.length < 2) {
-                        return;
-                      }
-                      setCurrentThumbIndex(i);
-                    },
-                    children: [
-                      inputField && state.values.length > 1 && currentThumbIndex === i && /* @__PURE__ */ jsx("div", { className: "es:m-0.5 es:size-2 es:rounded-full es:bg-accent-100" }),
-                      thumbContent && thumbContent(i)
-                    ]
-                  },
-                  i
-                )) })
-              ] });
-            } }),
-            after && /* @__PURE__ */ jsx("div", { className: "es:flex es:shrink-0 es:items-center es:gap-1", children: after })
-          ] })
-        }
-      )
-    }
-  );
-};
-const NumberInputField = (props) => {
-  const { ...other } = props;
-  const state = useContext($6f909507e6374d18$export$1e7083018727fa60);
-  const labelProps = $64fa3d84918910a7$export$fabf2dc03a41866e($01b77f81d0f07f68$export$75b6ee27786ba447);
-  const isSingleValue = state.values.length === 1;
-  const fieldIndex = isSingleValue ? 0 : props.focusedThumb ?? 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      NumberPicker,
-      {
-        "aria-labelledby": labelProps.id,
-        value: state.values[fieldIndex] ?? null,
-        onChange: (v) => state.setThumbValue(fieldIndex, v),
-        size: "compact",
-        min: state.getThumbMinValue(fieldIndex),
-        max: state.getThumbMaxValue(fieldIndex),
-        onBlur: () => {
-          if (isSingleValue) {
-            return;
-          }
-          props.setFocusedThumb(-1);
-        },
-        className: fieldIndex === -1 && !isSingleValue ? "es:invisible" : "",
-        ...other
-      }
-    ),
-    fieldIndex === -1 && !isSingleValue && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es:text-xs es:tabular-nums es:text-secondary-600"), children: ({ state: state2 }) => state2.values.map((_, i) => state2.getThumbValueLabel(i)).join(" – ") })
-  ] });
-};
-export {
-  Slider
-};

package/dist/components/slider/utils.js

@@ -1,84 +0,0 @@
-import { _ as __, s as sprintf, a as _n } from "../../default-i18n-CT_oS1Fy.js";
-/**
- * Generates an array of markers based on the provided minimum and maximum values and step.
- * If the step is less than 10, only markers divisible by 5 and 10 are included.
- *
- * @param {number} min - The minimum value for the markers.
- * @param {number} max - The maximum value for the markers.
- * @param {number} [step=10] - The step between each marker. Default is 10.
- *
- * @returns {Object} An object where the keys are the marker values and the values are either the marker value (if divisible by 10) or an empty string.
- *
- * @example
- * generateMarkers(-20, 50, 10); // { '-20': '-20', '-10': '-10', '0': '0', '10': '10', '20': '20', '30': '30', '40': '40', '50': '50' }
- *
- * @preserve
- */
-const generateMarkers = (min, max, step = 10) => {
-  const smallStep = step < 10 && Math.abs(max - min) > 20;
-  const markers = [];
-  if (min < 0) {
-    for (let i = min; i < 0; i += step) {
-      markers.push(i.toString());
-    }
-    for (let i = 0; i <= max; i += step) {
-      markers.push(i.toString());
-    }
-  } else {
-    for (let i = min; i <= max; i += step) {
-      markers.push(i.toString());
-    }
-  }
-  return markers.reduce((acc, marker) => {
-    if (smallStep && marker % 5 !== 0) {
-      return acc;
-    }
-    if (smallStep && marker % 10 !== 0) {
-      acc[marker] = "";
-    } else {
-      acc[marker] = marker;
-    }
-    return acc;
-  }, {});
-};
-/**
- * Returns a human-readable string representing the column configuration.
- *
- * @param {Number} columns - Number of columns.
- * @param {Number} offset - Offset of the column.
- * @param {Number} width - Width of the column.
- * @param {boolean} [showOuterAsGutter=false] - If `true`, the outer columns are skipped when counting.
- *
- * @returns {string} Configuration info in a human-readable format.
- *
- * @example
- * const output = getColumnConfigOutputText(12, 1, 6); // => '6 cols from 1'
- *
- * @preserve
- */
-const getColumnConfigOutputText = (columns, offset, width, showOuterAsGutter = false) => {
-  const endOffset = offset + width - 1;
-  if (offset === 1 && endOffset === columns) {
-    return __("Full-width", "eightshift-ui-components");
-  }
-  if (showOuterAsGutter && width === 1 && offset === 1) {
-    return __("Start gutter", "eightshift-ui-components");
-  }
-  if (showOuterAsGutter && width === 1 && endOffset === columns) {
-    return __("End gutter", "eightshift-ui-components");
-  }
-  if (width === 1) {
-    return sprintf(__("Col %d", "eightshift-ui-components"), offset);
-  }
-  if (offset === 1 && endOffset < columns) {
-    return sprintf(__("To col %d", "eightshift-ui-components"), showOuterAsGutter ? endOffset - 1 : endOffset);
-  }
-  if (offset > 1 && endOffset === columns) {
-    return sprintf(__("From col %d", "eightshift-ui-components"), showOuterAsGutter ? offset - 1 : offset);
-  }
-  return sprintf(_n("%s col from %s", "%s cols from %s", width, "eightshift-ui-components"), width, showOuterAsGutter ? offset - 1 : offset);
-};
-export {
-  generateMarkers,
-  getColumnConfigOutputText
-};