@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/components/select/styles.js

@@ -0,0 +1,84 @@
+import { t as cva } from "../../dist-DIK9pFxO.js";
+//#region lib/components/select/styles.js
+var selectButtonClass = cva("es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", {
+	variants: { size: {
+		small: ["es:min-h-8", "es:px-2.5"],
+		medium: ["es:min-h-9", "es:px-3"],
+		default: ["es:min-h-10", "es:px-3"],
+		large: ["es:min-h-12", "es:px-4"]
+	} },
+	defaultVariants: { size: "default" }
+});
+var selectControlClass = cva([
+	"es:relative",
+	"es:flex es:items-center es:gap-px",
+	"es:leading-none",
+	"es:rounded-lg es:hover:rounded-xl es:has-focus-visible:rounded-2xl es:group-open:rounded-2xl",
+	"es:transition-plus",
+	"es:any-focus:outline-hidden",
+	"es:inset-ring",
+	"es:has-focus-visible:ring-2 es:has-focus-visible:ring-accent-500/30",
+	"es:has-focus-visible:text-accent-950 es:has-focus-visible:inset-ring-accent-500",
+	"es:focus:placeholder:text-surface-400"
+], {
+	variants: {
+		disabled: {
+			false: "es:selection:bg-surface-100 es:selection:text-accent-800",
+			true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
+		},
+		clearable: { true: "es:pr-8" },
+		hasMinWidth: { true: "es:min-w-48" },
+		inline: { false: "es:w-fill" }
+	},
+	compoundVariants: [
+		{
+			flat: false,
+			disabled: false,
+			class: [
+				"es:bg-white",
+				"es:bg-linear-to-b es:from-secondary-100/0 es:to-secondary-100/50 es:from-25%",
+				"es:hover:from-surface-100/0 es:hover:to-surface-100/50",
+				"es:inset-ring-secondary-400/50 es:hover:inset-ring-surface-300 es:focus:inset-ring-surface-400",
+				"es:inset-shadow-sm es:inset-shadow-secondary-100/50",
+				"es:hover:placeholder:text-surface-400",
+				"es:placeholder:text-secondary-400",
+				"es:shadow-xs es:shadow-black/5"
+			]
+		},
+		{
+			flat: true,
+			disabled: false,
+			class: [
+				"es:inset-ring-secondary-100",
+				"es:focus:text-accent-950",
+				"es:placeholder:text-secondary-500/80",
+				"es:bg-secondary-100 es:focus:bg-surface-50",
+				"es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus:inset-ring-surface-200"
+			]
+		},
+		{
+			disabled: true,
+			class: ["es:bg-secondary-50 es:inset-ring-secondary-200 es:text-secondary-400"]
+		},
+		{
+			readOnly: true,
+			flat: false,
+			class: ["es:bg-secondary-50 es:inset-ring-secondary-300 es:text-secondary-400"]
+		},
+		{
+			readOnly: true,
+			flat: true,
+			class: ["es:bg-secondary-50 es:inset-ring-secondary-300/60 es:text-secondary-400"]
+		}
+	],
+	defaultVariants: {
+		disabled: false,
+		flat: false,
+		size: "default",
+		clearable: false,
+		hasMinWidth: true,
+		inline: false
+	}
+});
+//#endregion
+export { selectButtonClass, selectControlClass };

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

@@ -1,306 +1,175 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-_aSf9-8u.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-bR3fAmim.js";
+import { n as AnimatePresence, t as motion } from "../../proxy-BG7-_Ou3.js";
+import { t as clsx } from "../../clsx-BUU5J41u.js";
+import { i as $6f909507e6374d18$export$472062a354075cee, o as $6f909507e6374d18$export$a590f758a961cb5b, r as $6f909507e6374d18$export$2c1b491743890dec, t as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-DW1RuMVp.js";
+import { n as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DFXXxMKY.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { icons } from "../../icons/icons.js";
+import { r as sprintf, t as __ } from "../../build-module-sxK3nxOK.js";
+import { chevronLeft } from "../../icons/ui-icons/chevron-left.js";
+import { chevronRight } from "../../icons/ui-icons/chevron-right.js";
 import { getColumnConfigOutputText } from "./utils.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { A as AnimatePresence, m as motion } from "../../proxy-CNEXmkdK.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/slider/column-config-slider.jsx
 /**
- * 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.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
- * @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,
-    flat,
-    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 es:has-dragging:cursor-grabbing",
-              style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
-              children: ({ state }) => {
-                return /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(
-                        "es:row-span-1 es:row-start-1 es:w-fill es:h-6 es:self-center es:my-0.5",
-                        "es:rounded-l-xl es:rounded-r-sm",
-                        "es:transition-plus-m es:duration-300 es:ease-spring-smooth",
-                        !flat && !disabled && "es:shadow-xs es:shadow-black/5",
-                        !disabled && ["es:bg-surface-200", "es:bg-linear-to-b es:from-surface-700/0 es:to-surface-700/5 es:from-25%", "es:inset-ring es:inset-ring-surface-300/20"],
-                        disabled && "es:bg-secondary-200",
-                        !disableOffset && "es:mr-1.25",
-                        value[0] < 2 && "es:hidden"
-                      ),
-                      style: { gridColumn: `1 / span ${Math.max(0, value[0] - 1)}` }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(
-                        "es:row-span-1 es:row-start-1 es:w-fill es:h-6 es:self-center es:my-0.5",
-                        "es:rounded-l-sm es:rounded-r-xl",
-                        "es:transition-plus-m es:duration-300 es:ease-spring-smooth",
-                        !flat && !disabled && "es:shadow-xs es:shadow-black/5",
-                        !disabled && ["es:bg-surface-200", "es:bg-linear-to-b es:from-surface-700/0 es:to-surface-700/5 es:from-25%", "es:inset-ring es:inset-ring-surface-300/20"],
-                        disabled && "es:bg-secondary-200",
-                        !disableWidth && "es:ml-1.25",
-                        value[1] === columns && "es:hidden"
-                      ),
-                      style: { gridColumn: `${value[1] + 1} / span ${columns - value[1]}` }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(
-                        "es:pointer-events-none es:col-start-1 es:row-start-1",
-                        "es:h-6 es:w-fill es:self-center es:rounded-sm es:my-0.5",
-                        "es:transition es:duration-300",
-                        !flat && !disabled && "es:shadow-xs es:shadow-black/5",
-                        "es:mx-1.25",
-                        value[0] === 1 && "es:ml-1.75",
-                        value[1] === columns && "es:mr-1.75",
-                        !disabled && [
-                          "es:bg-accent-500 es:bg-linear-to-b es:from-accent-100/15 es:to-accent-100/0 es:from-25%",
-                          "es:inset-ring es:inset-ring-accent-700/10",
-                          "es:inset-shadow-sm es:inset-shadow-accent-50/30"
-                        ],
-                        disabled && "es:bg-secondary-400"
-                      ),
-                      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:icon:size-2 es:icon:stroke-3",
-                          "es:transition es:duration-300 es:ease-spring-smooth",
-                          marker >= value[0] - 1 && marker < value[1] ? "es:text-accent-900" : "es:text-surface-400",
-                          disabled && "es:opacity-0",
-                          !disableOffset && index === 0 && value[0] === 2 && "es:-translate-x-px",
-                          !disableWidth && index === columns - 1 && value[1] === columns - 1 && "es:translate-x-px",
-                          !disableOffset && index === 0 && value[0] === 1 && "es:opacity-0 es:scale-50",
-                          !disableWidth && index === columns - 1 && value[1] === columns && "es:opacity-0 es:scale-50"
-                        ),
-                        style: { gridColumn: index + 1 },
-                        children: [
-                          showOuterAsGutter && index === 0 && icons.chevronLeft,
-                          showOuterAsGutter && index === columns - 1 && icons.chevronRight
-                        ]
-                      },
-                      marker
-                    );
-                  }),
-                  markerData.map((marker, i) => /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(
-                        "es:row-span-1 es:row-start-1 es:size-0.75 es:place-self-center es:rounded-2xl",
-                        !disabled && marker >= value[0] - 1 && marker < value[1] && "es:bg-accent-50",
-                        !disabled && !(marker >= value[0] - 1 && marker < value[1]) && "es:bg-surface-500",
-                        disabled && marker >= value[0] - 1 && marker < value[1] && "es:bg-secondary-300",
-                        disabled && !(marker >= value[0] - 1 && marker < value[1]) && "es:bg-secondary-400",
-                        showOuterAsGutter && (i === 0 || i === columns - 1) && "es:hidden"
-                      ),
-                      style: { gridColumn: i + 1 }
-                    },
-                    marker
-                  )),
-                  state.values.map((_, i) => {
-                    let gridCol = `${state.values[i] - (i === 0 ? 1 : 0)} / span 2`;
-                    if (i === 0 && state.values[0] === 1) {
-                      gridCol = "1";
-                    }
-                    if (i === 1 && state.values[1] === columns) {
-                      gridCol = `${columns}`;
-                    }
-                    return /* @__PURE__ */ jsx(
-                      $6f909507e6374d18$export$2c1b491743890dec,
-                      {
-                        index: i,
-                        "aria-label": thumbLabels?.[i],
-                        isDisabled: i === 0 && disableOffset || i === 1 && disableWidth,
-                        className: clsx(
-                          "es:static! es:row-span-1 es:row-start-1 es:h-full es:w-1 es:rounded-md es:transition es:duration-300",
-                          "es:origin-center",
-                          "es:hover:ring-[0.25px] es:focus-visible:ring-[0.5px] es:dragging:ring-[1px] es:ring-accent-500",
-                          "es:transform-none!",
-                          "es:dragging:es:bg-accent-600 es:disabled:bg-secondary-400",
-                          "es:focus-visible:outline-2 es:outline-offset-2 es:outline-accent-500/40",
-                          "es:bg-accent-500",
-                          "es:hover:ring-accent-600",
-                          "es:dragging:bg-accent-600 es:dragging:ring-accent-600",
-                          !disabled && "es:hover:not-dragging:cursor-grab",
-                          i === 0 && disableOffset && "es:hidden",
-                          i === 1 && disableWidth && "es:hidden",
-                          i === 0 && state.values[0] === 1 && "es:justify-self-start",
-                          i === 0 && state.values[0] > 1 && "es:justify-self-center",
-                          i === 1 && state.values[1] < columns && "es:justify-self-center",
-                          i === 1 && state.values[1] === columns && "es:justify-self-end",
-                          !flat && !disabled && "es:shadow-xs es:shadow-black/5"
-                        ),
-                        style: {
-                          gridColumn: gridCol
-                        },
-                        children: /* @__PURE__ */ jsx(AnimatePresence, { children: i === state.focusedThumb && /* @__PURE__ */ jsxs(
-                          motion.div,
-                          {
-                            className: clsx(
-                              "es:absolute es:bottom-12 es:w-fit es:min-w-5 es:h-6 es:text-nowrap es:-translate-x-1/2",
-                              "es:bg-surface-50/80 es:text-surface-700",
-                              "es:backdrop-blur-xs",
-                              "es:text-12 es:leading-none",
-                              "es:py-1 es:px-2 es:rounded-lg",
-                              "es:text-center",
-                              "es:line-clamp-1",
-                              "es:flex es:items-center es:justify-center es:gap-1",
-                              "es:shadow",
-                              showOuterAsGutter && "es:icon:size-2 es:icon:stroke-3"
-                            ),
-                            initial: { y: 2, opacity: 0, scale: 0.85 },
-                            animate: { y: 0, opacity: 1, scale: 1 },
-                            exit: { y: 2, opacity: 0, scale: 0.85 },
-                            children: [
-                              i === 0 && showOuterAsGutter && state.values[0] > 1 && sprintf(__("From %d", "eightshfit-ui-components"), state.values[i] - 1),
-                              i === 0 && showOuterAsGutter && state.values[0] === 1 && __("From start gutter", "eightshfit-ui-components"),
-                              i === 1 && showOuterAsGutter && state.values[1] < columns && sprintf(__("To %d", "eightshfit-ui-components"), state.values[i]),
-                              i === 1 && showOuterAsGutter && state.values[1] === columns && __("To end gutter", "eightshfit-ui-components"),
-                              !showOuterAsGutter && i === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                                state.values[0] > 1 && sprintf(__("From %d", "eightshfit-ui-components"), state.values[i]),
-                                state.values[0] === 1 && __("From start", "eightshfit-ui-components")
-                              ] }),
-                              !showOuterAsGutter && i === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                                state.values[1] < columns && sprintf(__("To %d", "eightshfit-ui-components"), state.values[i]),
-                                state.values[1] === columns && __("To end", "eightshfit-ui-components")
-                              ] })
-                            ]
-                          }
-                        ) })
-                      },
-                      i
-                    );
-                  })
-                ] });
-              }
-            }
-          )
-        }
-      )
-    }
-  );
+* 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.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+* @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}
+* />
+*/
+var ColumnConfigSlider = (props) => {
+	const { icon, help, label, actions, subtitle, columns = 12, disableWidth, disableOffset, showOuterAsGutter, value, onChange, onChangeEnd, disabled, labelClassName, flat, hidden, ...other } = props;
+	if (hidden) return null;
+	const markerData = [...Array(columns).keys()];
+	const thumbLabels = [__("Offset", "eightshift-ui-components"), __("Width", "eightshift-ui-components")];
+	return jsx($6f909507e6374d18$export$472062a354075cee, {
+		value,
+		onChange,
+		minValue: 1,
+		maxValue: columns,
+		step: 1,
+		isDisabled: disabled,
+		orientation: "horizontal",
+		className: "es:w-full",
+		onChangeEnd,
+		...other,
+		children: jsx(BaseControl, {
+			icon,
+			label,
+			subtitle,
+			help,
+			actions: jsxs(Fragment, { children: [actions, jsx(ColumnConfigSliderOutput, { showOuterAsGutter })] }),
+			labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+			className: labelClassName,
+			controlContainerClassName: "es:flex es:items-center es:gap-2.5 es:space-y-0!",
+			children: jsx($6f909507e6374d18$export$105594979f116971, {
+				className: "es:isolate es:grid es:h-10 es:w-full es:grid-rows-1 es:has-dragging:cursor-grabbing",
+				style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+				children: ({ state }) => {
+					return jsxs(Fragment, { children: [
+						jsx("div", {
+							className: clsx("es:row-span-1 es:row-start-1 es:w-fill es:h-6 es:self-center es:my-0.5", "es:rounded-l-xl es:rounded-r-sm", "es:transition-plus-m es:duration-300 es:ease-spring-smooth", !flat && !disabled && "es:shadow-xs es:shadow-black/5", !disabled && [
+								"es:bg-surface-200",
+								"es:bg-linear-to-b es:from-surface-700/0 es:to-surface-700/5 es:from-25%",
+								"es:inset-ring es:inset-ring-surface-300/20"
+							], disabled && "es:bg-secondary-200", !disableOffset && "es:mr-1.25", value[0] < 2 && "es:hidden"),
+							style: { gridColumn: `1 / span ${Math.max(0, value[0] - 1)}` }
+						}),
+						jsx("div", {
+							className: clsx("es:row-span-1 es:row-start-1 es:w-fill es:h-6 es:self-center es:my-0.5", "es:rounded-l-sm es:rounded-r-xl", "es:transition-plus-m es:duration-300 es:ease-spring-smooth", !flat && !disabled && "es:shadow-xs es:shadow-black/5", !disabled && [
+								"es:bg-surface-200",
+								"es:bg-linear-to-b es:from-surface-700/0 es:to-surface-700/5 es:from-25%",
+								"es:inset-ring es:inset-ring-surface-300/20"
+							], disabled && "es:bg-secondary-200", !disableWidth && "es:ml-1.25", value[1] === columns && "es:hidden"),
+							style: { gridColumn: `${value[1] + 1} / span ${columns - value[1]}` }
+						}),
+						jsx("div", {
+							className: clsx("es:pointer-events-none es:col-start-1 es:row-start-1", "es:h-6 es:w-fill es:self-center es:rounded-sm es:my-0.5", "es:transition es:duration-300", !flat && !disabled && "es:shadow-xs es:shadow-black/5", "es:mx-1.25", value[0] === 1 && "es:ml-1.75", value[1] === columns && "es:mr-1.75", !disabled && [
+								"es:bg-accent-500 es:bg-linear-to-b es:from-accent-100/15 es:to-accent-100/0 es:from-25%",
+								"es:inset-ring es:inset-ring-accent-700/10",
+								"es:inset-shadow-sm es:inset-shadow-accent-50/30"
+							], disabled && "es:bg-secondary-400"),
+							style: { gridColumn: `${value[0]} / span ${value[1] - value[0] + 1}` }
+						}),
+						markerData.map((marker, index) => {
+							return jsxs("span", {
+								className: clsx("es:row-span-1 es:row-start-1 es:select-none es:place-self-center", "es:icon:size-2 es:icon:stroke-3", "es:transition es:duration-300 es:ease-spring-smooth", marker >= value[0] - 1 && marker < value[1] ? "es:text-accent-900" : "es:text-surface-400", disabled && "es:opacity-0", !disableOffset && index === 0 && value[0] === 2 && "es:-translate-x-px", !disableWidth && index === columns - 1 && value[1] === columns - 1 && "es:translate-x-px", !disableOffset && index === 0 && value[0] === 1 && "es:opacity-0 es:scale-50", !disableWidth && index === columns - 1 && value[1] === columns && "es:opacity-0 es:scale-50"),
+								style: { gridColumn: index + 1 },
+								children: [showOuterAsGutter && index === 0 && chevronLeft, showOuterAsGutter && index === columns - 1 && chevronRight]
+							}, marker);
+						}),
+						markerData.map((marker, i) => jsx("div", {
+							className: clsx("es:row-span-1 es:row-start-1 es:size-0.75 es:place-self-center es:rounded-2xl", !disabled && marker >= value[0] - 1 && marker < value[1] && "es:bg-accent-50", !disabled && !(marker >= value[0] - 1 && marker < value[1]) && "es:bg-surface-500", disabled && marker >= value[0] - 1 && marker < value[1] && "es:bg-secondary-300", disabled && !(marker >= value[0] - 1 && marker < value[1]) && "es:bg-secondary-400", showOuterAsGutter && (i === 0 || i === columns - 1) && "es:hidden"),
+							style: { gridColumn: i + 1 }
+						}, marker)),
+						state.values.map((_, i) => {
+							let gridCol = `${state.values[i] - (i === 0 ? 1 : 0)} / span 2`;
+							if (i === 0 && state.values[0] === 1) gridCol = "1";
+							if (i === 1 && state.values[1] === columns) gridCol = `${columns}`;
+							return jsx($6f909507e6374d18$export$2c1b491743890dec, {
+								index: i,
+								"aria-label": thumbLabels?.[i],
+								isDisabled: i === 0 && disableOffset || i === 1 && disableWidth,
+								className: clsx("es:static! es:row-span-1 es:row-start-1 es:h-full es:w-1 es:rounded-md es:transition es:duration-300", "es:origin-center", "es:hover:ring-[0.25px] es:focus-visible:ring-[0.5px] es:dragging:ring-[1px] es:ring-accent-500", "es:transform-none!", "es:dragging:es:bg-accent-600 es:disabled:bg-secondary-400", "es:focus-visible:outline-2 es:outline-offset-2 es:outline-accent-500/40", "es:bg-accent-500", "es:hover:ring-accent-600", "es:dragging:bg-accent-600 es:dragging:ring-accent-600", !disabled && "es:hover:not-dragging:cursor-grab", i === 0 && disableOffset && "es:hidden", i === 1 && disableWidth && "es:hidden", i === 0 && state.values[0] === 1 && "es:justify-self-start", i === 0 && state.values[0] > 1 && "es:justify-self-center", i === 1 && state.values[1] < columns && "es:justify-self-center", i === 1 && state.values[1] === columns && "es:justify-self-end", !flat && !disabled && "es:shadow-xs es:shadow-black/5"),
+								style: { gridColumn: gridCol },
+								children: jsx(AnimatePresence, { children: i === state.focusedThumb && jsxs(motion.div, {
+									className: clsx("es:absolute es:bottom-12 es:w-fit es:min-w-5 es:h-6 es:text-nowrap es:-translate-x-1/2", "es:bg-surface-50/80 es:text-surface-700", "es:backdrop-blur-xs", "es:text-12 es:leading-none", "es:py-1 es:px-2 es:rounded-lg", "es:text-center", "es:line-clamp-1", "es:flex es:items-center es:justify-center es:gap-1", "es:shadow", showOuterAsGutter && "es:icon:size-2 es:icon:stroke-3"),
+									initial: {
+										y: 2,
+										opacity: 0,
+										scale: .85
+									},
+									animate: {
+										y: 0,
+										opacity: 1,
+										scale: 1
+									},
+									exit: {
+										y: 2,
+										opacity: 0,
+										scale: .85
+									},
+									children: [
+										i === 0 && showOuterAsGutter && state.values[0] > 1 && sprintf(__("From %d", "eightshfit-ui-components"), state.values[i] - 1),
+										i === 0 && showOuterAsGutter && state.values[0] === 1 && __("From start gutter", "eightshfit-ui-components"),
+										i === 1 && showOuterAsGutter && state.values[1] < columns && sprintf(__("To %d", "eightshfit-ui-components"), state.values[i]),
+										i === 1 && showOuterAsGutter && state.values[1] === columns && __("To end gutter", "eightshfit-ui-components"),
+										!showOuterAsGutter && i === 0 && jsxs(Fragment, { children: [state.values[0] > 1 && sprintf(__("From %d", "eightshfit-ui-components"), state.values[i]), state.values[0] === 1 && __("From start", "eightshfit-ui-components")] }),
+										!showOuterAsGutter && i === 1 && jsxs(Fragment, { children: [state.values[1] < columns && sprintf(__("To %d", "eightshfit-ui-components"), state.values[i]), state.values[1] === columns && __("To end", "eightshfit-ui-components")] })
+									]
+								}) })
+							}, 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
-};
+* 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 />
+*/
+var ColumnConfigSliderOutput = ({ showOuterAsGutter }) => 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));
+		return getColumnConfigOutputText(columns, offset, parseInt(state.getThumbValueLabel(1)) - offset + 1, showOuterAsGutter);
+	}
+});
+//#endregion
+export { ColumnConfigSlider, ColumnConfigSliderOutput };