@eightshift/ui-components 0.0.1 → 0.0.3

package/dist/components/rich-label/rich-label.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { classnames } from "../../utilities/classnames.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 /**
  * Component that displays a label, with an optional icon and subtitle.
  *
@@ -12,6 +12,7 @@ import { classnames } from "../../utilities/classnames.js";
  * @param {string} [props.className] - Classes to pass to the label.
  * @param {boolean} [props.fullWidth=false] - If `true`, the component will take up as much space as it can.
  * @param {boolean} [props.contentsOnly] - If `true`, only the label (/icon/subtitle) will be rendered, without any wrapping elements. Useful if you want to provide your own layout.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The RichLabel component.
  *
@@ -24,28 +25,31 @@ import { classnames } from "../../utilities/classnames.js";
  * @preserve
  */
 const RichLabel = (props) => {
-  const { icon, label, subtitle, as, className, fullWidth = false, contentsOnly } = props;
+  const { icon, label, subtitle, as, className, fullWidth = false, contentsOnly, hidden } = props;
+  if (hidden) {
+    return null;
+  }
   const ComponentToRender = as ?? "div";
   if (contentsOnly) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       icon && /* @__PURE__ */ jsx("span", { className: "es-uic-text-slate-500 [&>svg]:es-uic-size-5.5", children: icon }),
       label && /* @__PURE__ */ jsx("span", { className: "es-uic-text-balance", children: label }),
-      subtitle && /* @__PURE__ */ jsx("span", { className: "es-uic-text-xs es-uic-text-gray-500 es-uic-text-balance", children: subtitle })
+      subtitle && /* @__PURE__ */ jsx("span", { className: "es-uic-text-balance es-uic-text-xs es-uic-text-gray-500 es-uic-opacity-60", children: subtitle })
     ] });
   }
   return /* @__PURE__ */ jsxs(
     ComponentToRender,
     {
-      className: classnames(
-        "es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-sm es-uic-leading-tight es-uic-text-gray-800",
+      className: clsx(
+        "es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-sm es-uic-text-gray-800 [&>span>svg]:es-uic-text-slate-500",
         fullWidth && "es-uic-grow",
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "es-uic-text-slate-500 [&>svg]:es-uic-size-5.5", children: icon }),
-        (label || subtitle) && /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-flex-col es-uic-items-start es-uic-text-start es-uic-text-balance", children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "[&>svg]:es-uic-size-5.5", children: icon }),
+        (label || subtitle) && /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-flex-col es-uic-items-start es-uic-text-balance es-uic-text-start", children: [
           label && /* @__PURE__ */ jsx("span", { children: label }),
-          subtitle && /* @__PURE__ */ jsx("span", { className: "es-uic-text-xs es-uic-text-gray-500", children: subtitle })
+          subtitle && /* @__PURE__ */ jsx("span", { className: "es-uic-text-xs es-uic-opacity-60", children: subtitle })
         ] })
       ]
     }

package/dist/components/select/async-multi-select.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { A as AsyncSelect$1 } from "../../react-select-async.esm-TFb_ZX6C.js";
-import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-CjVpCNko.js";
+import { A as AsyncSelect$1 } from "../../react-select-async.esm-CLj9uZTq.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-nORKdJ-2.js";
 import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
 import { CustomSelectDefaultMultiValueRemove, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { eightshiftSelectClasses } from "./styles.js";
-import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
+import { c as components } from "../../index-a301f526.esm-BzTuHLdr.js";
 /**
  * Multi-select menu with async loading and re-ordering.
  *
@@ -34,6 +34,7 @@ import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
  * @param {JSX.Element} [props.customValueContainer] - If provided, replaces the default items container component (react-select's `components.MultiValueContainer`).
  * @param {Function} [props.processLoadedOptions] - Allows modifying (filtering, grouping, ...) options output after the items have been dynamically fetched. Must include `label`, `value`, and `id` keys in the output, additional fields can be added as required.
  * @param {string} [props.className] - Classes to pass to the select menu.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The AsyncMultiSelect component.
  *
@@ -84,8 +85,12 @@ const AsyncMultiSelect = (props) => {
     customValueContainer,
     customClearIndicator,
     processLoadedOptions = (options) => options,
+    hidden,
     ...additionalProps
   } = props;
+  if (hidden) {
+    return null;
+  }
   const customLoadOptions = async (searchText) => {
     const results = await loadOptions(searchText);
     return processLoadedOptions((results == null ? void 0 : results.map((item) => ({ id: item.value, ...item }))) ?? []);
@@ -123,9 +128,7 @@ const AsyncMultiSelect = (props) => {
               components: {
                 MultiValue: getMultiValue(customValueDisplay ?? components.MultiValue),
                 MultiValueContainer: customValueContainer ?? components.MultiValueContainer,
-                MultiValueRemove: getMultiValueRemove(
-                  customValueRemove ?? CustomSelectDefaultMultiValueRemove
-                ),
+                MultiValueRemove: getMultiValueRemove(customValueRemove ?? CustomSelectDefaultMultiValueRemove),
                 Option: customMenuOption ?? components.Option,
                 IndicatorSeparator: null,
                 DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,

package/dist/components/select/async-single-select.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { A as AsyncSelect$1 } from "../../react-select-async.esm-TFb_ZX6C.js";
+import { A as AsyncSelect$1 } from "../../react-select-async.esm-CLj9uZTq.js";
 import { CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { eightshiftSelectClasses } from "./styles.js";
-import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
+import { c as components } from "../../index-a301f526.esm-BzTuHLdr.js";
 /**
  * Select menu with async loading.
  *
@@ -30,6 +30,7 @@ import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
  * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.SingleValue`).
  * @param {Function} [props.processLoadedOptions] - Allows modifying (filtering, grouping, ...) options output after the items have been dynamically fetched. Must include `label`, `value`, and `id` keys in the output, additional fields can be added as required.
  * @param {string} props.className - Classes to pass to the select menu.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The AsyncSelect component.
  *
@@ -78,8 +79,12 @@ const AsyncSelect = (props) => {
     customDropdownArrow,
     customClearIndicator,
     processLoadedOptions = (options) => options,
+    hidden,
     ...additionalProps
   } = props;
+  if (hidden) {
+    return null;
+  }
   const customLoadOptions = async (searchText) => {
     const results = await loadOptions(searchText);
     return processLoadedOptions((results == null ? void 0 : results.map((item) => ({ id: item.value, ...item }))) ?? []);

package/dist/components/select/custom-select-default-components.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { icons } from "../../icons/icons.js";
-import { classnames } from "../../utilities/classnames.js";
-import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as components } from "../../index-a301f526.esm-BzTuHLdr.js";
 /**
  * Default dropdown indicator for CustomSelect.
  *
@@ -12,7 +12,7 @@ import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
  */
 const CustomSelectDefaultDropdownIndicator = (props) => {
   return /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: React__default.cloneElement(icons.dropdownCaretAlt, {
-    className: classnames(props.selectProps.menuIsOpen && "-es-uic-scale-y-100 ")
+    className: clsx(props.selectProps.menuIsOpen && "-es-uic-scale-y-100 ")
   }) });
 };
 /**

package/dist/components/select/multi-select-components.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
-import { g, a, b } from "../../multi-select-components-CjVpCNko.js";
-import "../../utilities/classnames.js";
+import { g, a, b } from "../../multi-select-components-nORKdJ-2.js";
+import "../../lite-pbIeT7tm.js";
 export {
   g as getDragEndHandler,
   a as getMultiValue,

package/dist/components/select/multi-select.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { S as StateManagedSelect$1 } from "../../react-select.esm-BjRWqf0E.js";
-import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-CjVpCNko.js";
+import { S as StateManagedSelect$1 } from "../../react-select.esm-3tyTZmrx.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-nORKdJ-2.js";
 import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
 import { CustomSelectDefaultMultiValueRemove, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
 import { getValue, customOnChange } from "./shared.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { eightshiftSelectClasses } from "./styles.js";
-import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
+import { c as components } from "../../index-a301f526.esm-BzTuHLdr.js";
 /**
  * Multi-select menu with re-orderable items.
  *
@@ -34,6 +34,7 @@ import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
  * @param {JSX.Element} [props.customValueRemove] - If provided, replaces the default item remove button (react-select's `components.MultiValueRemove`.
  * @param {JSX.Element} [props.customValueContainer] - If provided, replaces the default items container component (react-select's `components.MultiValueContainer`).
  * @param {string} [props.className] - Classes to pass to the select menu.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The MultiSelect component.
  *
@@ -79,8 +80,12 @@ const MultiSelect = (props) => {
     customValueRemove,
     customValueContainer,
     className,
+    hidden,
     ...additionalProps
   } = props;
+  if (hidden) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     BaseControl,
     {
@@ -113,9 +118,7 @@ const MultiSelect = (props) => {
               components: {
                 MultiValue: getMultiValue(customValueDisplay ?? components.MultiValue),
                 MultiValueContainer: customValueContainer ?? components.MultiValueContainer,
-                MultiValueRemove: getMultiValueRemove(
-                  customValueRemove ?? CustomSelectDefaultMultiValueRemove
-                ),
+                MultiValueRemove: getMultiValueRemove(customValueRemove ?? CustomSelectDefaultMultiValueRemove),
                 Option: customMenuOption ?? components.Option,
                 IndicatorSeparator: null,
                 DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,

package/dist/components/select/react-select-component-wrappers.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
+import { c as components } from "../../index-a301f526.esm-BzTuHLdr.js";
 /**
  * Custom dropdown indicator for CustomSelect.
  *

package/dist/components/select/single-select.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { S as StateManagedSelect$1 } from "../../react-select.esm-BjRWqf0E.js";
+import { S as StateManagedSelect$1 } from "../../react-select.esm-3tyTZmrx.js";
 import { CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
 import { getValue, customOnChange } from "./shared.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { eightshiftSelectClasses } from "./styles.js";
-import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
+import { c as components } from "../../index-a301f526.esm-BzTuHLdr.js";
 /**
  * Select menu.
  *
@@ -30,6 +30,7 @@ import { c as components } from "../../index-a301f526.esm-Bioi4cGX.js";
  * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
  * @param {JSX.Element} [props.customClearIndicator] - If provided, replaces the default 'Clear all' button.
  * @param {string} [props.className] - Classes to pass to the select menu.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Select component.
  *
@@ -73,8 +74,12 @@ const Select = (props) => {
     customDropdownArrow,
     customClearIndicator,
     className,
+    hidden,
     ...additionalProps
   } = props;
+  if (hidden) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     BaseControl,
     {

package/dist/components/select/styles.js

@@ -1,4 +1,4 @@
-import { classnames } from "../../utilities/classnames.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 const controlStyles = {
   base: "es-uic-border es-uic-rounded-md es-uic-bg-white es-uic-text-sm es-uic-transition es-uic-group es-uic-shadow-sm !es-uic-min-h-10",
   focus: "es-uic-ring es-uic-ring-teal-500 es-uic-ring-opacity-50",
@@ -8,7 +8,7 @@ const placeholderStyles = "es-uic-text-gray-400 es-uic-ml-0.5";
 const selectInputStyles = "focus:es-uic-outline-none [&_input]:!es-uic-shadow-none [&_input:focus]:!es-uic-shadow-none";
 const valueContainerStyles = "es-uic-gap-1 es-uic-ml-1 !es-uic-overflow-visible";
 const singleValueStyles = "es-uic-ml-0.5";
-const multiValueStyles = classnames(
+const multiValueStyles = clsx(
   "es-uic-bg-gray-100 es-uic-rounded es-uic-p-1 es-uic-border es-uic-border-gray-100 es-uic-hover:border-gray-300 es-uic-items-center es-uic-gap-1.5 es-uic-transition es-uic-overflow-visible",
   "[:focus-visible_&]:es-uic-outline-none [:focus-visible_&]:es-uic-ring",
   "[:focus-visible_&]:es-uic-ring-teal-500 [:focus-visible_&]:es-uic-ring-opacity-50"
@@ -28,7 +28,7 @@ const groupHeadingStyles = "es-uic-ml-3 es-uic-mt-2 es-uic-text-gray-500 es-uic-
 const groupStyles = "es-uic-border-b last:es-uic-border-b-0";
 const eightshiftSelectClasses = {
   clearIndicator: () => clearIndicatorStyles,
-  control: ({ isFocused }) => classnames(
+  control: ({ isFocused }) => clsx(
     isFocused ? controlStyles.focus : controlStyles.nonFocus,
     controlStyles.base
   ),
@@ -41,7 +41,7 @@ const eightshiftSelectClasses = {
   multiValueLabel: () => multiValueLabelStyles,
   multiValueRemove: () => multiValueRemoveStyles,
   noOptionsMessage: () => noOptionsMessageStyles,
-  option: ({ isFocused, isSelected }) => classnames(
+  option: ({ isFocused, isSelected }) => clsx(
     isFocused && optionStyles.focus,
     isSelected && optionStyles.selected,
     optionStyles.base

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

@@ -1,10 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BPzS-sR7.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-Pyh2V4bY.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-9x5iLJ-Y.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-C5U5N7uM.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { classnames } from "../../utilities/classnames.js";
-import { _ as __, s as sprintf, a as _n } from "../../default-i18n-BhE-OUmt.js";
 import { icons } from "../../icons/icons.js";
+import { getColumnConfigOutputText } from "./utils.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 /**
  * A two-thumb slider for selecting a range of columns.
  *
@@ -24,6 +25,7 @@ import { icons } from "../../icons/icons.js";
  * @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.
  *
@@ -52,8 +54,12 @@ const ColumnConfigSlider = (props) => {
     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(
@@ -66,7 +72,7 @@ const ColumnConfigSlider = (props) => {
       step: 1,
       isDisabled: disabled,
       orientation: "horizontal",
-      className: "es-uic-w-full es-uic-pb-3.5",
+      className: "es-uic-w-full",
       onChangeEnd,
       ...other,
       children: /* @__PURE__ */ jsx(
@@ -93,7 +99,7 @@ const ColumnConfigSlider = (props) => {
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: classnames(
+                      className: clsx(
                         "es-uic-col-span-full es-uic-row-span-1 es-uic-row-start-1 es-uic-h-full es-uic-w-full es-uic-grow es-uic-rounded-md es-uic-border",
                         disabled ? "es-uic-border-gray-200 es-uic-bg-white" : "es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-shadow-sm"
                       )
@@ -102,7 +108,7 @@ const ColumnConfigSlider = (props) => {
                   markerData.slice(0, -1).map((marker) => /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: classnames(
+                      className: clsx(
                         "es-uic-row-span-1 es-uic-row-start-1 es-uic-h-full es-uic-w-px es-uic-justify-self-center",
                         marker >= value[0] - 1 && marker < value[1] ? "es-uic-bg-teal-700/25" : "es-uic-bg-gray-300",
                         (marker === value[0] - 2 || marker === value[1] - 1) && "es-uic-hidden"
@@ -114,7 +120,7 @@ const ColumnConfigSlider = (props) => {
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: classnames(
+                      className: clsx(
                         "es-uic-pointer-events-none es-uic-col-start-1 es-uic-row-start-1 es-uic-border",
                         "es-uic-h-full es-uic-w-full es-uic-self-center es-uic-rounded-md",
                         disabled ? "es-uic-border-gray-200 es-uic-bg-gray-50" : "es-uic-border-teal-500 es-uic-bg-teal-500/30"
@@ -128,7 +134,7 @@ const ColumnConfigSlider = (props) => {
                     return /* @__PURE__ */ jsxs(
                       "span",
                       {
-                        className: classnames(
+                        className: clsx(
                           "es-uic-row-span-1 es-uic-row-start-1 es-uic-select-none es-uic-place-self-center es-uic-text-xs es-uic-transition-colors",
                           "es-uic-inset-y-0 es-uic-my-auto es-uic-h-fit es-uic-pl-px es-uic-text-center",
                           "[&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-[1.5]",
@@ -151,7 +157,7 @@ const ColumnConfigSlider = (props) => {
                       index: i,
                       "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
                       isDisabled: i === 0 && disableOffset || i === 1 && disableWidth,
-                      className: classnames(
+                      className: clsx(
                         "!es-uic-static es-uic-row-span-1 es-uic-row-start-1 es-uic-h-6 es-uic-w-1.5 es-uic-rounded-full es-uic-border es-uic-transition es-uic-duration-300",
                         i === 0 && "!-es-uic-translate-x-1/2 !es-uic-translate-y-0 es-uic-self-center es-uic-justify-self-start",
                         i === 1 && "!es-uic-translate-x-1/2 !es-uic-translate-y-0 es-uic-self-center es-uic-justify-self-end",
@@ -190,34 +196,12 @@ const ColumnConfigSlider = (props) => {
  *
  * @preserve
  */
-const ColumnConfigSliderOutput = ({ showOuterAsGutter }) => /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: classnames("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-600"), children: ({ state }) => {
+const ColumnConfigSliderOutput = ({ showOuterAsGutter }) => /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-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;
-  if (offset === 1 && endOffset === columns) {
-    return __("Full-width", "eightshift-ui-components");
-  }
-  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);
-  }
-  if (showOuterAsGutter && width === 1 && offset === 1) {
-    return __("Start gutter", "eightshift-ui-components");
-  }
-  if (showOuterAsGutter && endOffset === columns) {
-    return __("Start gutter", "eightshift-ui-components");
-  }
-  if (width === 1) {
-    return sprintf(__("Col %d", "eightshift-ui-components"), offset);
-  }
-  return sprintf(
-    _n("%s col from %s", "%s cols from %s", width, "eightshift-ui-components"),
-    width,
-    showOuterAsGutter ? offset - 1 : offset
-  );
+  return getColumnConfigOutputText(columns, offset, width, showOuterAsGutter);
 } });
 export {
   ColumnConfigSlider,

package/dist/components/slider/slider.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-BsiH7-5Y.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-BPzS-sR7.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, c as $6f909507e6374d18$export$a590f758a961cb5b, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-Pyh2V4bY.js";
+import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-DIBzm1e4.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-9x5iLJ-Y.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, c as $6f909507e6374d18$export$a590f758a961cb5b, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-C5U5N7uM.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { classnames } from "../../utilities/classnames.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
 import { useState, useContext } from "react";
 import { generateMarkers } from "./utils.js";
@@ -35,6 +35,7 @@ import { generateMarkers } from "./utils.js";
  * @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.
  *
@@ -74,9 +75,13 @@ const Slider = (props) => {
     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;
@@ -108,13 +113,7 @@ const Slider = (props) => {
           help,
           actions: /* @__PURE__ */ jsxs(Fragment, { children: [
             actions,
-            !inputField && /* @__PURE__ */ jsx(
-              $6f909507e6374d18$export$a590f758a961cb5b,
-              {
-                className: classnames("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-600"),
-                children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ")
-              }
-            ),
+            !inputField && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-600"), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ") }),
             inputField && /* @__PURE__ */ jsx(
               NumberInputField,
               {
@@ -129,7 +128,7 @@ const Slider = (props) => {
           ] }),
           labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
           className: labelClassName,
-          controlContainerClassName: classnames(
+          controlContainerClassName: clsx(
             "es-uic-flex es-uic-items-center es-uic-gap-2.5 !es-uic-space-y-0",
             vertical && "es-uic-flex-col"
           ),
@@ -138,7 +137,7 @@ const Slider = (props) => {
             /* @__PURE__ */ jsx(
               $6f909507e6374d18$export$105594979f116971,
               {
-                className: classnames(
+                className: clsx(
                   "es-uic-isolate es-uic-grid es-uic-grid-cols-1 es-uic-grid-rows-1",
                   vertical ? "es-uic-mx-auto es-uic-h-40 es-uic-w-4" : "es-uic-h-4 es-uic-w-full es-uic-grow"
                 ),
@@ -200,7 +199,7 @@ const Slider = (props) => {
                     /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: classnames(
+                        className: clsx(
                           "es-uic-relative es-uic-col-start-1 es-uic-row-start-1 es-uic-rounded-full es-uic-border",
                           !vertical && "es-uic-h-1.5 es-uic-w-full es-uic-self-center",
                           vertical && "es-uic-h-full es-uic-w-1.5 es-uic-flex-col es-uic-justify-self-center",
@@ -212,7 +211,7 @@ const Slider = (props) => {
                     !noActiveHighlight && /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: classnames(
+                        className: clsx(
                           "es-uic-absolute es-uic-col-start-1 es-uic-row-start-1 es-uic-border",
                           !vertical && "es-uic-h-1.5 es-uic-w-full es-uic-self-center",
                           vertical && "es-uic-h-full es-uic-w-1.5 es-uic-flex-col es-uic-justify-self-center",
@@ -235,7 +234,7 @@ const Slider = (props) => {
                     markers && /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: classnames(
+                        className: clsx(
                           "es-uic-relative es-uic-col-start-1 es-uic-row-start-1",
                           !vertical && "es-uic-h-1 es-uic-w-full es-uic-self-center",
                           vertical && "es-uic-h-full es-uic-w-1 es-uic-flex-col es-uic-justify-self-center"
@@ -259,7 +258,7 @@ const Slider = (props) => {
                           return /* @__PURE__ */ jsx(
                             "div",
                             {
-                              className: classnames(
+                              className: clsx(
                                 "es-uic-absolute",
                                 vertical ? "es-uic-h-px es-uic-w-1" : "es-uic-h-1 es-uic-w-px es-uic-translate-x-1/2",
                                 !(dotValue === min || dotValue === max || dotValue === startPoint && !noActiveHighlight || min < 0 && dotValue === 0 && !noActiveHighlight || isWithinActiveBar) && "es-uic-bg-gray-300",
@@ -272,7 +271,7 @@ const Slider = (props) => {
                               children: /* @__PURE__ */ jsx(
                                 "span",
                                 {
-                                  className: classnames(
+                                  className: clsx(
                                     "es-uic-absolute es-uic-select-none es-uic-text-xs es-uic-transition-colors",
                                     vertical ? "es-uic-left-3.5 es-uic-top-0 -es-uic-translate-y-1/2" : "es-uic-left-0 es-uic-top-2.5 -es-uic-translate-x-1/2",
                                     (Array.isArray(value) ? value.includes(Number(dotValue)) : value === Number(dotValue) && !disabled) ? "es-uic-text-teal-700" : "es-uic-text-gray-300"
@@ -291,7 +290,7 @@ const Slider = (props) => {
                       {
                         index: i,
                         "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
-                        className: classnames(
+                        className: clsx(
                           "es-uic-absolute es-uic-size-3.5 es-uic-rounded-full es-uic-border es-uic-transition es-uic-duration-300",
                           vertical ? "!-es-uic-translate-y-1/2 !es-uic-translate-x-0" : "!-es-uic-translate-x-1/2 !es-uic-translate-y-0",
                           "es-uic-shadow dragging:es-uic-bg-teal-600 disabled:es-uic-border-gray-200 disabled:es-uic-bg-gray-100 disabled:es-uic-shadow-none",
@@ -348,13 +347,7 @@ const NumberInputField = (props) => {
         ...other
       }
     ),
-    fieldIndex === -1 && !isSingleValue && /* @__PURE__ */ jsx(
-      $6f909507e6374d18$export$a590f758a961cb5b,
-      {
-        className: classnames("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-600"),
-        children: ({ state: state2 }) => state2.values.map((_, i) => state2.getThumbValueLabel(i)).join(" – ")
-      }
-    )
+    fieldIndex === -1 && !isSingleValue && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-600"), children: ({ state: state2 }) => state2.values.map((_, i) => state2.getThumbValueLabel(i)).join(" – ") })
   ] });
 };
 export {

package/dist/components/slider/utils.js

@@ -1,3 +1,4 @@
+import { _ as __, s as sprintf, a as _n } from "../../default-i18n-Bk1GxDHz.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.
@@ -40,6 +41,48 @@ const generateMarkers = (min, max, step = 10) => {
     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 (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);
+  }
+  if (showOuterAsGutter && width === 1 && offset === 1) {
+    return __("Start gutter", "eightshift-ui-components");
+  }
+  if (showOuterAsGutter && endOffset === columns) {
+    return __("End gutter", "eightshift-ui-components");
+  }
+  if (width === 1) {
+    return sprintf(__("Col %d", "eightshift-ui-components"), offset);
+  }
+  return sprintf(
+    _n("%s col from %s", "%s cols from %s", width, "eightshift-ui-components"),
+    width,
+    showOuterAsGutter ? offset - 1 : offset
+  );
+};
 export {
-  generateMarkers
+  generateMarkers,
+  getColumnConfigOutputText
 };