@eightshift/ui-components 4.0.0 → 5.0.0

package/dist/components/notice/notice.js

@@ -1,123 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { icons } from "../../icons/icons.js";
-/**
- * A simple notice component.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - Icon to display within the notice.
- * @param {string} [props.label] - The label of the notice.
- * @param {string} [props.subtitle] - The subtitle of the notice.
- * @param {string} [props.className] - Classes to pass to the notice.
- * @param {NoticeType} [props.type='default'] - The type of the notice.
- * @param {boolean} [props.alignIconToTitle=false] - If `true`, the icon will be aligned to the first row of title, instead of vertically centered.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The Notice component.
- *
- * @typedef {'info' | 'success' | 'warning' | 'error' | 'placeholder' | 'default'} NoticeType
- *
- * @example
- * <Notice label='This is a notice' />
- *
- * @preserve
- */
-const Notice = (props) => {
-  const { icon, label, subtitle, className, type = "default", alignIconToTitle = false, hidden } = props;
-  if (hidden) {
-    return null;
-  }
-  const styles = {
-    info: {
-      icon: icons.infoCircle,
-      className: "es:border-blue-400 es:shadow-blue-500/15 es:bg-blue-100/5",
-      iconColor: "es:text-blue-400",
-      textColor: "es:text-blue-900",
-      subtitleColor: "es:text-blue-950/60"
-    },
-    success: {
-      icon: icons.checkSquare,
-      className: "es:border-green-500 es:shadow-green-500/15 es:bg-green-100/5",
-      iconColor: "es:text-green-500",
-      textColor: "es:text-green-900",
-      subtitleColor: "es:text-green-950/60"
-    },
-    warning: {
-      icon: icons.warning,
-      className: "es:border-amber-500 es:shadow-amber-500/15 es:bg-amber-100/5",
-      iconColor: "es:text-amber-500",
-      textColor: "es:text-amber-900",
-      subtitleColor: "es:text-amber-950/60"
-    },
-    error: {
-      icon: icons.errorCircle,
-      className: "es:border-red-400 es:shadow-red-500/15 es:bg-red-100/5",
-      iconColor: "es:text-red-400",
-      textColor: "es:text-red-900",
-      subtitleColor: "es:text-red-950/60"
-    },
-    placeholder: {
-      icon: icons.componentGeneric,
-      className: "es:border-secondary-400 es:shadow-secondary-300/25 es:border-dashed es:bg-secondary-200/5",
-      iconColor: "es:text-secondary-400",
-      textColor: "es:text-secondary-900",
-      subtitleColor: "es:text-secondary-500"
-    },
-    default: {
-      className: "es:border-secondary-300 es:shadow-secondary-300/25 es:bg-secondary-200/5",
-      iconColor: "es:text-secondary-400",
-      textColor: "es:text-secondary-900",
-      subtitleColor: "es:text-secondary-500"
-    }
-  };
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        "es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto] es:rounded-md es:border es:bg-linear-to-tr es:shadow-sm",
-        styles[type].className,
-        icon || styles[type].icon ? "es:gap-x-1.5 es:p-1.5" : "es:px-2 es:py-1.5",
-        className
-      ),
-      children: [
-        (icon || styles[type].icon) && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              "es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:icon:size-7",
-              alignIconToTitle ? "es:self-baseline" : "es:self-center",
-              styles[type].iconColor
-            ),
-            children: icon ?? styles[type].icon
-          }
-        ),
-        label && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              "es:col-span-2 es:col-start-2 es:text-balance es:text-sm es:leading-tight",
-              subtitle ? "es:self-end" : "es:row-span-2 es:self-center",
-              styles[type].textColor
-            ),
-            children: label
-          }
-        ),
-        subtitle && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              "es:col-span-2 es:col-start-2 es:text-balance es:text-xs es:leading-tight",
-              styles[type].subtitleColor,
-              label ? "es:self-start" : "es:row-span-2 es:self-center"
-            ),
-            children: subtitle
-          }
-        )
-      ]
-    }
-  ) });
-};
-export {
-  Notice
-};

package/dist/components/number-picker/number-picker.js

@@ -1,292 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React__default, { forwardRef, createContext, useRef, useState, cloneElement } from "react";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
-import { a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-_emcIVxI.js";
-import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BxpFEIXV.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-icmbmNdI.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-CvzGKGCo.js";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-DkCSC521.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-52GVSGgC.js";
-import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-DVSAPY-K.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-D2KUdwNL.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-CEAj7Mrj.js";
-import { Button } from "../button/button.js";
-import { icons } from "../../icons/icons.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { BaseControl } from "../base-control/base-control.js";
-const $b91743d66a0ed188$export$b414a48cf5dcbc11 = /* @__PURE__ */ createContext(null);
-const $b91743d66a0ed188$export$6cc906c6cff9bec5 = /* @__PURE__ */ createContext(null);
-const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef(function NumberField(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $b91743d66a0ed188$export$b414a48cf5dcbc11);
-  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
-  var _props_validationBehavior, _ref;
-  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
-  let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
-  let state = $de67e98908f0c6ee$export$7f629e9dc1ecf37c({
-    ...props,
-    locale,
-    validationBehavior
-  });
-  let inputRef = useRef(null);
-  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
-  let { labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps, descriptionProps, errorMessageProps, ...validation } = $81397a9303501bda$export$23f548e970bdf099({
-    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
-    label,
-    validationBehavior
-  }, state, inputRef);
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    values: {
-      state,
-      isDisabled: props.isDisabled || false,
-      isInvalid: validation.isInvalid || false,
-      isRequired: props.isRequired || false
-    },
-    defaultClassName: "react-aria-NumberField"
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
-  delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $b91743d66a0ed188$export$6cc906c6cff9bec5,
-        state
-      ],
-      [
-        $a049562f99e7db0e$export$f9c6924e160136d1,
-        groupProps
-      ],
-      [
-        $3985021b0ad6602f$export$37fb8590cf2c088c,
-        {
-          ...inputProps,
-          ref: inputRef
-        }
-      ],
-      [
-        $01b77f81d0f07f68$export$75b6ee27786ba447,
-        {
-          ...labelProps,
-          ref: labelRef
-        }
-      ],
-      [
-        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
-        {
-          slots: {
-            increment: incrementButtonProps,
-            decrement: decrementButtonProps
-          }
-        }
-      ],
-      [
-        $514c0188e459b4c0$export$9afb8bc826b033ea,
-        {
-          slots: {
-            description: descriptionProps,
-            errorMessage: errorMessageProps
-          }
-        }
-      ],
-      [
-        $ee014567cb39d3f0$export$ff05c3ac10437e03,
-        validation
-      ]
-    ]
-  }, /* @__PURE__ */ React__default.createElement("div", {
-    ...DOMProps,
-    ...renderProps,
-    ref,
-    slot: props.slot || void 0,
-    "data-disabled": props.isDisabled || void 0,
-    "data-required": props.isRequired || void 0,
-    "data-invalid": validation.isInvalid || void 0
-  }), props.name && /* @__PURE__ */ React__default.createElement("input", {
-    type: "hidden",
-    name: props.name,
-    value: isNaN(state.numberValue) ? "" : state.numberValue
-  }));
-});
-/**
- * A number picker component.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {number} props.value - The current value of the number picker.
- * @param {Function} props.onChange - Function to run when the value changes.
- * @param {number} [props.min=0] - The minimum value of the number picker.
- * @param {number} [props.max] - The maximum value of the number picker.
- * @param {number} [props.step=1] - The step value of the number picker.
- * @param {string} [props.label] - The label of the number picker.
- * @param {JSX.Element} [props.icon] - Icon to display within the number picker.
- * @param {string} [props.subtitle] - The subtitle of the number picker.
- * @param {string} [props.help] - The help text shown below the number picker.
- * @param {boolean} [props.readOnly] - If `true`, the number picker is read-only.
- * @param {boolean} [props.disabled] - If `true`, the number picker is disabled.
- * @param {string} [props.placeholder] - Placeholder text to display in the number picker.
- * @param {JSX.Element} [props.prefix] - Element to display to the left of the number picker.
- * @param {JSX.Element} [props.suffix] - Element to display to the right of the number picker.
- * @param {number} [props.fixedWidth] - If passed, sets the width of the input field to the provided number of characters. Useful if you have e.g. value from 1 to 1000, but you don't want the input field to change size when on lower values.
- * @param {boolean} [props.inline] - If `true`, the number picker is displayed inline.
- * @param {boolean} [props.noScrollToChange=false] - If `true`, the number picker does not change value when scrolling.
- * @param {NumberPickerSize} [props.size='default'] - Determines the input field size.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The NumberPicker component.
- *
- * @typedef {'compact' | 'small' | 'default'} NumberPickerSize
- *
- * @example
- * <NumberPicker
- * 	value={value}
- * 	onChange={setValue}
- * />
- *
- * @preserve
- */
-const NumberPicker = ({
-  value,
-  onChange,
-  min = 0,
-  max,
-  step = 1,
-  label,
-  icon,
-  subtitle,
-  help,
-  readOnly,
-  disabled,
-  placeholder,
-  prefix,
-  fixedWidth = null,
-  suffix,
-  children,
-  inline,
-  noScrollToChange = false,
-  size = "default",
-  "aria-label": ariaLabel,
-  hidden,
-  ...props
-}) => {
-  var _a, _b, _c, _d, _e;
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  if (hidden) {
-    return null;
-  }
-  const sizes = {
-    compact: {
-      field: "es:min-h-5",
-      noPrefixPadding: "es:pl-1.5",
-      extraContentSeparator: "es:h-[1.875rem]"
-    },
-    small: {
-      field: "es:min-h-9",
-      noPrefixPadding: "es:pl-2",
-      extraContentSeparator: "es:h-[2.125rem]"
-    },
-    default: {
-      field: "es:min-h-10",
-      noPrefixPadding: "es:pl-2",
-      extraContentSeparator: "es:h-[2.375rem]"
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    $b91743d66a0ed188$export$63c5fa0b2fdccd2e,
-    {
-      value,
-      onChange,
-      isDisabled: disabled,
-      isReadOnly: readOnly,
-      minValue: min,
-      maxValue: max,
-      step,
-      isWheelDisabled: noScrollToChange,
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        BaseControl,
-        {
-          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-          icon,
-          label,
-          subtitle,
-          help,
-          inline,
-          className: "es:text-sm",
-          children: /* @__PURE__ */ jsxs(
-            $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
-            {
-              className: clsx(
-                "es:group es:flex es:w-fit es:items-center es:rounded-lg es:border es:border-secondary-300 es:pl-1 es:pr-0.5 es:shadow-xs es:transition",
-                "es:inset-ring es:inset-ring-secondary-100",
-                isInputFocused && "es:outline-hidden es:focus-visible:border-accent-500 es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                !prefix && (((_a = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _a.noPrefixPadding) ?? sizes.default.noPrefixPadding),
-                ((_b = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _b.field) ?? sizes.default.field,
-                "es:disabled:shadow-none es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50"
-              ),
-              children: [
-                prefix && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    slot: "prefix",
-                    className: "es:col-start-1 es:row-span-2 es:mr-0.5 es:select-none es:self-center es:text-sm es:text-secondary-400",
-                    children: prefix
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  $3985021b0ad6602f$export$f5b8910cec6cf069,
-                  {
-                    onFocus: () => setIsInputFocused(true),
-                    onBlur: () => setIsInputFocused(false),
-                    className: "es:col-start-2 es:row-span-2 es:border-none! es:bg-transparent es:px-0! es:py-1! es:text-sm es:tabular-nums es:shadow-none! es:outline-hidden! es:selection:bg-accent-500/20 es:selection:text-accent-950 es:focus:shadow-none! es:any-focus:outline-hidden",
-                    placeholder,
-                    style: {
-                      width: fixedWidth ? `${fixedWidth}ch` : `calc(${min < 0 ? "0.75ch + " : ""}${(_d = (_c = max ?? 1e3) == null ? void 0 : _c.toString()) == null ? void 0 : _d.length} * 1ch)`
-                    },
-                    "aria-label": ariaLabel ?? __("Enter a number", "eightshift-ui-components")
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: clsx("es:opacity-0 es:group-hover:opacity-100 es:group-focus-visible:opacity-100 es:transition-opacity", disabled && "es:invisible"), children: [
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "ghost",
-                      className: "es:col-start-4 es:h-3 es:w-4 es:text-secondary-500! es:disabled:text-secondary-300! es:icon:size-[0.8rem]",
-                      slot: "increment",
-                      icon: icons.caretUpFill
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "ghost",
-                      className: "es:col-start-4 es:h-3 es:w-4 es:text-secondary-500! es:disabled:text-secondary-300! es:icon:size-[0.8rem]",
-                      slot: "decrement",
-                      icon: icons.caretDownFill
-                    }
-                  )
-                ] }),
-                suffix && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    slot: "suffix",
-                    className: "es:col-start-3 es:row-span-2 es:select-none es:self-center es:text-sm es:text-secondary-400 es:mr-0.5",
-                    children: suffix
-                  }
-                ),
-                children && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("div", { className: clsx("es:w-px es:bg-secondary-300", ((_e = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _e.extraContentSeparator) ?? sizes.default.extraContentSeparator) }),
-                  /* @__PURE__ */ jsx("div", { className: "es:p-0.5 es:pr-0", children: Array.isArray(children) ? children.map((child) => cloneElement(child, { slot: null })) : cloneElement(children, { slot: null }) })
-                ] })
-              ]
-            }
-          )
-        }
-      )
-    }
-  );
-};
-export {
-  NumberPicker
-};

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

@@ -1,264 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
-import { icons } from "../../icons/icons.js";
-import { BaseControl } from "../base-control/base-control.js";
-import { ButtonGroup } from "../button/button.js";
-import { Menu, MenuSeparator, MenuItem } from "../menu/menu.js";
-import { RadioButtonGroup, RadioButton } from "../radio/radio.js";
-import { RichLabel } from "../rich-label/rich-label.js";
-import { ToggleButton } from "../toggle-button/toggle-button.js";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
-/**
- * A component that allows the user to select an option from a list of options.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - Icon to display in the label.
- * @param {string} props.label - Label to display.
- * @param {string} [props.subtitle] - Subtitle to display below the label.
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
- * @param {string} [props.help] - Help text to show below the component.
- * @param {boolean} [props.inline] - If `true`, the component is displayed inline - icon/label/subtitle are on the left, the passed content is on the right. **Note:** not compatible with `actions`.
- * @param {string} props.value - The currently selected value.
- * @param {Function} props.onChange - Function to run when the selected value changes.
- * @param {{label: string, value: any, tooltip: string|JSX.Element, icon: JSX.Element|string, ariaLabel: string, subtitle:string|JSX.Element }[]} props.options - The list of options to choose from.
- * @param {string} [props.disabled] - If `true`, the option select component is disabled.
- * @param {boolean} [props.vertical] - If `true`, the options are displayed vertically. Not applicable to the `menu` type.
- * @param {OptionSelectType} [props.type='toggleButton'] - The type of the option select component.
- * @param {string} [props.className] - Classes to pass to the main element wrapper.
- * @param {string} [props.itemClassName] - Classes to pass to each item.
- * @param {Object} [props.wrapperProps] - Props to pass to the wrapper.
- * @param {Object} [props.itemProps] - Props to pass to each item.
- * @param {boolean} [props.noTriggerLabel] - Whether the trigger label should be hidden. Applies only to the `menu` type.
- * @param {boolean} [props.noTriggerIcon] - Whether the trigger icon should be hidden. Applies only to the `menu` type.
- * @param {string|boolean} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip. Applies only to the `menu` type. If `true` is set and an `aria-label` is provided, the tooltip will show the same text as the `aria-label`.
- * @param {boolean} [props.noItemLabel] - Whether the option label should be hidden.
- * @param {boolean} [props.noItemIcon] - Whether the option icon should be hidden.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The OptionSelect component.
- *
- * @typedef {'toggleButtons' | 'toggleButtonsSplit' | 'radios' | 'radiosSegmented' | 'menu'} OptionSelectType
- *
- * @example
- * <OptionSelect
- * 	label='My component'
- * 	icon={icons.myIcon}
- * 	value={value}
- * 	onChange={setValue}
- * 	options={[
- * 		{ label: 'Option 1', value: 'option1' },
- * 		{ label: 'Option 2', value: 'option2' },
- * 	]}
- * />
- *
- * @preserve
- */
-const OptionSelect = (props) => {
-  var _a;
-  const {
-    icon,
-    label,
-    subtitle,
-    actions,
-    help,
-    inline,
-    value,
-    onChange,
-    options,
-    disabled,
-    vertical,
-    type = "toggleButtons",
-    className,
-    itemClassName,
-    wrapperProps,
-    itemProps,
-    noTriggerLabel,
-    noTriggerIcon,
-    tooltip: rawTooltip,
-    noItemLabel,
-    noItemIcon,
-    children,
-    hidden,
-    "aria-label": ariaLabel,
-    ...rest
-  } = props;
-  if (hidden) {
-    return null;
-  }
-  let tooltip = rawTooltip;
-  if (rawTooltip === true && (ariaLabel == null ? void 0 : ariaLabel.length) > 0) {
-    tooltip = ariaLabel;
-  }
-  const currentItem = options == null ? void 0 : options.find(({ value: optionValue }) => optionValue === value);
-  const notSetLabel = /* @__PURE__ */ jsx("span", { className: "es:leading-3 es:opacity-50", children: __("Not set", "eightshift-ui-components") });
-  let radioDesign = "default";
-  if (type === "radiosSegmented") {
-    radioDesign = "segmented";
-  }
-  return /* @__PURE__ */ jsxs(
-    BaseControl,
-    {
-      icon,
-      label,
-      subtitle,
-      actions,
-      help,
-      inline,
-      className,
-      ...rest,
-      children: [
-        ["toggleButtons", "toggleButtonsSplit"].includes(type) && /* @__PURE__ */ jsx(
-          ButtonGroup,
-          {
-            vertical,
-            "aria-label": typeof label !== "undefined" ? null : ariaLabel,
-            type: type === "toggleButtonsSplit" ? "split" : "segmented",
-            ...wrapperProps,
-            children: options.map(
-              ({
-                label: optionLabel,
-                value: optionValue,
-                icon: optionIcon,
-                tooltip: optionTooltip,
-                ariaLabel: optionAriaLabel,
-                subtitle: optionSubtitle,
-                disabled: optionDisabled
-              }) => {
-                var _a2;
-                return /* @__PURE__ */ jsxs(
-                  ToggleButton,
-                  {
-                    selected: optionValue === value,
-                    onChange: () => onChange(optionValue),
-                    disabled: optionDisabled || disabled,
-                    className: itemClassName,
-                    icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
-                    tooltip: optionTooltip ?? optionAriaLabel ?? (noItemLabel && optionLabel),
-                    "aria-label": optionAriaLabel ?? optionLabel ?? optionTooltip,
-                    ...itemProps,
-                    children: [
-                      !noItemLabel && !optionSubtitle && optionLabel,
-                      !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
-                        RichLabel,
-                        {
-                          label: optionLabel,
-                          subtitle: optionSubtitle,
-                          noColor: true
-                        }
-                      )
-                    ]
-                  },
-                  optionValue
-                );
-              }
-            )
-          }
-        ),
-        (type === "radios" || type === "radiosSegmented") && /* @__PURE__ */ jsx(
-          RadioButtonGroup,
-          {
-            orientation: vertical ? "vertical" : "horizontal",
-            onChange: (v) => onChange(v),
-            design: radioDesign,
-            "aria-label": typeof label !== "undefined" ? null : ariaLabel,
-            value,
-            ...wrapperProps,
-            children: options.map(({ label: optionLabel, value: optionValue, icon: optionIcon, ariaLabel: optionAriaLabel, subtitle: optionSubtitle, disabled: optionDisabled }) => {
-              var _a2;
-              return /* @__PURE__ */ jsx(
-                RadioButton,
-                {
-                  value: optionValue,
-                  disabled: optionDisabled || disabled,
-                  className: itemClassName,
-                  subtitle: !noItemLabel && optionSubtitle,
-                  icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
-                  "aria-label": optionAriaLabel ?? optionLabel,
-                  label: !noItemLabel && optionLabel,
-                  ...itemProps
-                },
-                optionValue
-              );
-            })
-          }
-        ),
-        type === "menu" && /* @__PURE__ */ jsxs(
-          Menu,
-          {
-            triggerLabel: noTriggerLabel ? null : (currentItem == null ? void 0 : currentItem.label) ?? notSetLabel,
-            triggerIcon: !noTriggerIcon && // eslint-disable-next-line no-nested-ternary
-            (currentItem ? typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_a = icons) == null ? void 0 : _a[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon : (noTriggerLabel || noTriggerIcon) && notSetLabel),
-            tooltip: noTriggerLabel ? /* @__PURE__ */ jsx(
-              RichLabel,
-              {
-                label: tooltip ? tooltip : (currentItem == null ? void 0 : currentItem.tooltip) ?? (currentItem == null ? void 0 : currentItem.label),
-                subtitle: tooltip && ((currentItem == null ? void 0 : currentItem.tooltip) ?? (currentItem == null ? void 0 : currentItem.label)),
-                noColor: true
-              }
-            ) : tooltip,
-            triggerProps: {
-              ...wrapperProps == null ? void 0 : wrapperProps.triggerProps,
-              "aria-label": typeof label !== "undefined" ? null : ariaLabel ?? label ?? tooltip
-            },
-            keepOpen: true,
-            "aria-label": ariaLabel ?? label ?? tooltip ?? __("Menu", "eightshift-ui-components"),
-            ...wrapperProps,
-            children: [
-              options.map(
-                ({
-                  label: optionLabel,
-                  value: optionValue,
-                  icon: optionIcon,
-                  endIcon: optionEndIcon,
-                  ariaLabel: optionAriaLabel,
-                  subtitle: optionSubtitle,
-                  separator: optionHasSeparator,
-                  sectionTitle: optionSectionTitle,
-                  shortcut: optionShortcut,
-                  disabled: optionDisabled
-                }) => {
-                  var _a2, _b;
-                  return /* @__PURE__ */ jsxs(Fragment, { children: [
-                    (optionHasSeparator === true || optionHasSeparator === "above") && /* @__PURE__ */ jsx(MenuSeparator, {}),
-                    optionSectionTitle && /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: optionSectionTitle }),
-                    /* @__PURE__ */ jsxs(
-                      MenuItem,
-                      {
-                        selected: value === optionValue,
-                        disabled: optionDisabled || disabled,
-                        className: itemClassName,
-                        icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
-                        endIcon: !noItemIcon && (typeof optionEndIcon === "string" ? (_b = icons) == null ? void 0 : _b[optionEndIcon] : optionEndIcon),
-                        "aria-label": optionAriaLabel ?? optionLabel,
-                        onClick: () => onChange(optionValue),
-                        shortcut: optionShortcut,
-                        ...itemProps,
-                        children: [
-                          !noItemLabel && !optionSubtitle && optionLabel,
-                          !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
-                            RichLabel,
-                            {
-                              label: optionLabel,
-                              subtitle: optionSubtitle,
-                              noColor: true
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    optionHasSeparator === "below" && /* @__PURE__ */ jsx(MenuSeparator, {})
-                  ] }, optionValue);
-                }
-              ),
-              children
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  OptionSelect
-};