@tedi-design-system/react 18.1.0-rc.21 → 18.1.0-rc.23

package/src/tedi/components/form/select/select.es.js

@@ -1,306 +1,313 @@
-import { jsx as C, jsxs as q } from "react/jsx-runtime";
-import W from "../../../../../external/classnames/index.es.js";
-import r, { forwardRef as Qe } from "react";
-import Ye from "../../../../../external/react-select/dist/react-select.esm.es.js";
-import Ze from "../../../../../external/react-select/async/dist/react-select-async.esm.es.js";
-import { FeedbackText as et } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as tt } from "../form-label/form-label.es.js";
-import { useOptionalInputGroup as ot } from "../input-group/input-group.es.js";
-import lt from "../input-group/input-group.module.scss.es.js";
-import { SELECT_ALL_VALUE as v, GROUP_OPTION_PREFIX as nt, areAllSelected as X, getEnabledOptions as J, isGroupSentinel as Q } from "./components/select-bulk-helpers.es.js";
-import { SelectClearIndicator as st } from "./components/select-clear-indicator.es.js";
-import { SelectControl as rt } from "./components/select-control.es.js";
-import { SelectDropDownIndicator as at } from "./components/select-dropdown-indicator.es.js";
-import { SelectGroup as it } from "./components/select-group.es.js";
-import { SelectGroupHeading as ct } from "./components/select-group-heading.es.js";
-import { SelectIndicatorsContainer as ut } from "./components/select-indicators-container.es.js";
-import { SelectInput as dt } from "./components/select-input.es.js";
-import { SelectLoadingIndicator as pt } from "./components/select-loading-indicator.es.js";
-import { SelectMenu as mt } from "./components/select-menu.es.js";
-import { SelectMenuList as ft } from "./components/select-menu-list.es.js";
-import { SelectMenuPortal as gt } from "./components/select-menu-portal.es.js";
-import { SelectMultiValue as bt } from "./components/select-multi-value.es.js";
-import { SelectMultiValueRemove as St } from "./components/select-multi-value-remove.es.js";
-import { SelectOption as vt } from "./components/select-option.es.js";
-import { SelectSingleValue as yt } from "./components/select-single-value.es.js";
-import { SelectValueContainer as Mt } from "./components/select-value-container.es.js";
-import p from "./select.module.scss.es.js";
-import { useLabels as ht } from "../../../providers/label-provider/use-labels.es.js";
-const It = Qe(
-  (k, Y) => {
-    var z;
+import { jsx as L, jsxs as J } from "react/jsx-runtime";
+import Q from "../../../../../external/classnames/index.es.js";
+import r, { forwardRef as nt } from "react";
+import lt from "../../../../../external/react-select/dist/react-select.esm.es.js";
+import st from "../../../../../external/react-select/async/dist/react-select-async.esm.es.js";
+import { FeedbackText as rt } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as at } from "../form-label/form-label.es.js";
+import { useOptionalInputGroup as it } from "../input-group/input-group.es.js";
+import ct from "../input-group/input-group.module.scss.es.js";
+import { SELECT_ALL_VALUE as M, GROUP_OPTION_PREFIX as ut, areAllSelected as Y, getEnabledOptions as Z, isGroupSentinel as ee } from "./components/select-bulk-helpers.es.js";
+import { SelectClearIndicator as dt } from "./components/select-clear-indicator.es.js";
+import { SelectControl as pt } from "./components/select-control.es.js";
+import { SelectDropDownIndicator as mt } from "./components/select-dropdown-indicator.es.js";
+import { SelectGroup as ft } from "./components/select-group.es.js";
+import { SelectGroupHeading as gt } from "./components/select-group-heading.es.js";
+import { SelectIndicatorsContainer as St } from "./components/select-indicators-container.es.js";
+import { SelectInput as bt } from "./components/select-input.es.js";
+import { SelectLoadingIndicator as yt } from "./components/select-loading-indicator.es.js";
+import { SelectMenu as Mt } from "./components/select-menu.es.js";
+import { SelectMenuList as vt } from "./components/select-menu-list.es.js";
+import { SelectMenuPortal as ht } from "./components/select-menu-portal.es.js";
+import { SelectMultiValue as It } from "./components/select-multi-value.es.js";
+import { SelectMultiValueRemove as Ot } from "./components/select-multi-value-remove.es.js";
+import { SelectOption as Ct } from "./components/select-option.es.js";
+import { SelectSingleValue as wt } from "./components/select-single-value.es.js";
+import { SelectValueContainer as Lt } from "./components/select-value-container.es.js";
+import d from "./select.module.scss.es.js";
+import { useLabels as Vt } from "../../../providers/label-provider/use-labels.es.js";
+const At = nt(
+  (D, te) => {
+    var X;
     const {
       options: c,
-      defaultOptions: Z,
-      id: _,
-      name: ee,
-      iconName: te = "arrow_drop_down",
-      label: oe,
-      required: R,
-      value: D,
-      defaultValue: N,
-      tagsDirection: L = "stack",
-      onChange: V,
-      onInputChange: le,
-      inputValue: ne,
-      loadOptions: se,
-      isLoading: re,
-      openMenuOnFocus: ae = !1,
-      openMenuOnClick: ie = !0,
-      tabSelectsValue: ce = !1,
+      defaultOptions: oe,
+      name: ne,
+      iconName: le = "arrow_drop_down",
+      label: se,
+      required: N,
+      value: P,
+      defaultValue: T,
+      tagsDirection: V = "stack",
+      onChange: A,
+      onInputChange: re,
+      inputValue: ae,
+      loadOptions: ie,
+      isLoading: ce,
+      openMenuOnFocus: ue = !1,
+      openMenuOnClick: de = !0,
+      tabSelectsValue: pe = !1,
       disabled: F = !1,
-      className: ue,
-      hideLabel: de = !1,
+      className: me,
+      hideLabel: fe = !1,
       helper: a,
-      placeholder: pe,
-      invalid: me,
-      valid: fe,
-      size: w,
-      async: ge = !1,
-      renderOption: be,
-      renderMessageListFooter: x,
-      noOptionsMessage: Se,
-      loadingMessage: ve,
-      multiple: y = !1,
-      showSelectAll: G = !1,
-      selectableGroups: P = !1,
-      dropdownType: ye = "menu",
-      renderValue: Me,
-      closeMenuOnSelect: he = !y,
-      blurInputOnSelect: E = !1,
-      autoFocus: Ie = !1,
-      isClearable: Oe = !0,
-      isClearIndicatorVisible: Ce = !1,
-      isSearchable: T = !0,
-      menuIsOpen: Le,
-      onMenuClose: Ve,
-      onMenuOpen: we,
-      onBlur: Ae,
-      inputIsHidden: ke,
-      isTagRemovable: _e = !1,
-      tagsEllipsis: Re = !1,
-      backspaceRemovesValue: De = !1,
-      optionGroupHeadingText: Ne = { modifiers: "small", color: "tertiary" },
+      placeholder: ge,
+      invalid: Se,
+      valid: be,
+      size: _,
+      async: ye = !1,
+      renderOption: Me,
+      renderMessageListFooter: $,
+      noOptionsMessage: ve,
+      loadingMessage: he,
+      multiple: v = !1,
+      showSelectAll: x = !1,
+      selectableGroups: E = !1,
+      dropdownType: Ie = "menu",
+      renderValue: Oe,
+      closeMenuOnSelect: Ce = !v,
+      blurInputOnSelect: G = !1,
+      autoFocus: we = !1,
+      isClearable: Le = !0,
+      isClearIndicatorVisible: Ve = !1,
+      isSearchable: O = !0,
+      openKeyboardOnTouch: H = !0,
+      menuIsOpen: Ae,
+      onMenuClose: _e,
+      onMenuOpen: ke,
+      onBlur: k,
+      inputIsHidden: Re,
+      isTagRemovable: De = !1,
+      tagsEllipsis: Ne = !1,
+      backspaceRemovesValue: Pe = !1,
+      optionGroupHeadingText: Te = { modifiers: "small", color: "tertiary" },
       cacheOptions: Fe = !0,
-      showRadioButtons: xe = !1,
-      renderWithoutLabel: Ge,
-      tooltip: Pe,
-      classNames: $
-    } = k, m = (z = ot) == null ? void 0 : z(), Ee = r.useId(), Te = m == null ? void 0 : m.hasExternalLabel, A = k.id ?? (m == null ? void 0 : m.inputId) ?? Ee, H = a ? (a == null ? void 0 : a.id) ?? `${A}-helper` : void 0, h = r.useRef(null), { getLabel: I } = ht();
+      showRadioButtons: $e = !1,
+      renderWithoutLabel: xe,
+      tooltip: Ee,
+      classNames: K
+    } = D, u = (X = it) == null ? void 0 : X(), Ge = r.useId(), R = u == null ? void 0 : u.hasExternalLabel, f = D.id ?? (u == null ? void 0 : u.inputId) ?? Ge, He = R ? (u == null ? void 0 : u.inputId) ?? f : `${f}-input`, Ke = R ? `${f}-container` : f, j = a ? (a == null ? void 0 : a.id) ?? `${f}-helper` : void 0, h = r.useRef(null), { getLabel: C } = Vt();
     r.useImperativeHandle(
-      Y,
+      te,
       () => h.current
     );
-    const g = !!G && y, [$e, He] = r.useState(N ?? null), j = D !== void 0, f = j ? D : $e, u = r.useMemo(() => Array.isArray(f) ? f : f ? [f] : [], [f]), O = r.useMemo(
-      () => ({ value: v, label: I("select.select-all") }),
-      [I]
-    ), b = !!P && !!y, { groupFlattenedOptions: K, groupSentinelMap: M } = r.useMemo(() => {
+    const [je, U] = r.useState(!1), Ue = (t) => {
+      var e, o;
+      if (H || !O || t.pointerType !== "touch" && t.pointerType !== "pen") return;
+      const l = t.target;
+      if (!((e = l.closest) != null && e.call(l, `.${d["tedi-select__control"]}`))) return;
+      const n = (o = h.current) == null ? void 0 : o.inputRef, i = !!n && (t.target === n || n.contains(l));
+      U(!i);
+    }, Be = () => {
+      U(!1), k == null || k();
+    }, S = !!x && v, [ze, qe] = r.useState(T ?? null), B = P !== void 0, g = B ? P : ze, p = r.useMemo(() => Array.isArray(g) ? g : g ? [g] : [], [g]), w = r.useMemo(
+      () => ({ value: M, label: C("select.select-all") }),
+      [C]
+    ), b = !!E && !!v, { groupFlattenedOptions: z, groupSentinelMap: I } = r.useMemo(() => {
       const t = /* @__PURE__ */ new Map();
       if (!b || !c || c.length === 0)
         return { groupFlattenedOptions: null, groupSentinelMap: t };
       if (!c.some((e) => e && Array.isArray(e.options))) return { groupFlattenedOptions: null, groupSentinelMap: t };
-      const l = [], i = /* @__PURE__ */ new Map();
+      const n = [], i = /* @__PURE__ */ new Map();
       for (const e of c)
         if (e && Array.isArray(e.options)) {
-          const o = e, n = `${nt}${o.label ?? ""}`, d = o.options.filter((S) => !S.isDisabled);
-          i.set(n, { enabled: d }), l.push({ value: n, label: o.label ?? "" });
-          for (const S of o.options)
-            l.push({
-              ...S,
-              customData: { ...S.customData ?? {}, __tediInGroup: !0 }
+          const o = e, s = `${ut}${o.label ?? ""}`, m = o.options.filter((y) => !y.isDisabled);
+          i.set(s, { enabled: m }), n.push({ value: s, label: o.label ?? "" });
+          for (const y of o.options)
+            n.push({
+              ...y,
+              customData: { ...y.customData ?? {}, __tediInGroup: !0 }
             });
         } else
-          l.push(e);
-      return { groupFlattenedOptions: l, groupSentinelMap: i };
-    }, [c, b]), je = r.useMemo(() => {
-      let t = K ?? c;
-      return g && t && t.length > 0 && (t = [O, ...t]), t;
-    }, [c, K, g, O]), Ke = r.useMemo(() => {
+          n.push(e);
+      return { groupFlattenedOptions: n, groupSentinelMap: i };
+    }, [c, b]), We = r.useMemo(() => {
+      let t = z ?? c;
+      return S && t && t.length > 0 && (t = [w, ...t]), t;
+    }, [c, z, S, w]), Xe = r.useMemo(() => {
       const t = [];
-      if (b && M.size > 0)
-        for (const [s, l] of M)
-          l.enabled.length > 0 && X(u, l.enabled) && t.push({ value: s, label: "" });
-      if (g) {
-        const s = J(c ?? []);
-        s.length > 0 && X(u, s) && t.push(O);
+      if (b && I.size > 0)
+        for (const [l, n] of I)
+          n.enabled.length > 0 && Y(p, n.enabled) && t.push({ value: l, label: "" });
+      if (S) {
+        const l = Z(c ?? []);
+        l.length > 0 && Y(p, l) && t.push(w);
       }
-      return t.length === 0 ? f : [...u, ...t];
+      return t.length === 0 ? g : [...p, ...t];
     }, [
-      f,
-      u,
+      g,
+      p,
       c,
       b,
-      M,
-      g,
-      O
-    ]), Ue = (t, s) => {
-      let l = t;
-      const i = s.option;
-      if (b && i && M.has(i.value)) {
-        const e = M.get(i.value).enabled;
-        if (s.action === "select-option") {
-          const o = [...u];
-          for (const n of e)
-            o.some((d) => d.value === n.value) || o.push(n);
-          l = o;
-        } else s.action === "deselect-option" && (l = u.filter((o) => !e.some((n) => n.value === o.value)));
-      } else if (g) {
-        const e = J(c ?? []), o = (i == null ? void 0 : i.value) === v;
-        o && s.action === "select-option" ? l = [...u.filter(
-          (d) => d.value !== v && !e.some((S) => S.value === d.value)
-        ), ...e] : o && s.action === "deselect-option" && (l = u.filter(
-          (n) => n.value !== v && !e.some((d) => d.value === n.value)
+      I,
+      S,
+      w
+    ]), Je = (t, l) => {
+      let n = t;
+      const i = l.option;
+      if (b && i && I.has(i.value)) {
+        const e = I.get(i.value).enabled;
+        if (l.action === "select-option") {
+          const o = [...p];
+          for (const s of e)
+            o.some((m) => m.value === s.value) || o.push(s);
+          n = o;
+        } else l.action === "deselect-option" && (n = p.filter((o) => !e.some((s) => s.value === o.value)));
+      } else if (S) {
+        const e = Z(c ?? []), o = (i == null ? void 0 : i.value) === M;
+        o && l.action === "select-option" ? n = [...p.filter(
+          (m) => m.value !== M && !e.some((y) => y.value === m.value)
+        ), ...e] : o && l.action === "deselect-option" && (n = p.filter(
+          (s) => s.value !== M && !e.some((m) => m.value === s.value)
         ));
       }
-      Array.isArray(l) && (l = l.filter((e) => e.value !== v && !Q(e))), j || He(l), V == null || V(l), !E && h.current && setTimeout(() => {
+      Array.isArray(n) && (n = n.filter((e) => e.value !== M && !ee(e))), B || qe(n), A == null || A(n), !G && h.current && setTimeout(() => {
         var e, o;
         return (o = (e = h.current) == null ? void 0 : e.inputRef) == null ? void 0 : o.focus();
       }, 0);
-    }, Be = r.useCallback(
-      (t, s) => t.data.value === v || Q(t.data) || !s ? !0 : String(t.label).toLowerCase().includes(s.toLowerCase()),
+    }, Qe = r.useCallback(
+      (t, l) => t.data.value === M || ee(t.data) || !l ? !0 : String(t.label).toLowerCase().includes(l.toLowerCase()),
       []
-    ), [U, B] = r.useState(!1), ze = (t) => {
-      (t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "Home" || t.key === "End" || t.key === "PageUp" || t.key === "PageDown" || t.key === "Tab") && (U || B(!0));
-    }, qe = r.useCallback(() => {
-      B((t) => t && !1);
-    }, []), We = r.useCallback(
-      (t) => /* @__PURE__ */ C(ft, { ...t, renderMessageListFooter: x }),
-      [x]
-    ), Xe = () => {
-      const t = {
-        ClearIndicator: (e) => st({ isClearIndicatorVisible: Ce, ...e }),
-        DropdownIndicator: () => at({ iconName: te }),
-        IndicatorSeparator: () => null,
-        MenuPortal: gt,
-        Menu: mt,
-        MenuList: We,
-        Option: (e) => vt({ renderOption: be, multiple: y, showRadioButtons: xe, ...e }),
-        Control: rt,
-        Input: dt,
-        MultiValue: (e) => bt({ isTagRemovable: _e, tagsEllipsis: Re, ...e }),
-        MultiValueRemove: St,
-        SingleValue: yt,
-        Group: it,
-        GroupHeading: (e) => ct({ optionGroupHeadingText: Ne, ...e }),
-        IndicatorsContainer: ut,
-        ValueContainer: Mt,
-        LoadingIndicator: pt
-      }, s = ge ? Ze : Ye, l = () => I("select.no-options"), i = () => I("select.loading");
-      return /* @__PURE__ */ C(
-        s,
-        {
-          tagsDirection: L,
-          showSelectAll: G,
-          selectableGroups: P,
-          dropdownType: ye,
-          renderValue: Me,
-          keyboardMode: U,
-          exitKeyboardMode: qe,
-          onKeyDown: ze,
-          id: A,
-          "aria-describedby": H,
-          autoFocus: Ie,
-          ref: h,
-          instanceId: _,
-          className: "tedi-select__wrapper",
-          name: ee,
-          options: je,
-          defaultOptions: Z,
-          value: Ke,
-          defaultValue: N,
-          cacheOptions: Fe,
-          onChange: Ue,
-          filterOption: g || b ? Be : void 0,
-          onInputChange: le,
-          onBlur: Ae,
-          inputValue: ne,
-          inputId: `${_}-input`,
-          loadOptions: se,
-          isLoading: re,
-          noOptionsMessage: Se || l,
-          loadingMessage: ve || i,
-          classNamePrefix: "select",
-          components: t,
-          isDisabled: F,
-          isSearchable: T,
-          menuIsOpen: Le,
-          openMenuOnFocus: ae,
-          openMenuOnClick: ie,
-          tabSelectsValue: ce,
-          onMenuClose: Ve,
-          onMenuOpen: we,
-          placeholder: pe || "",
-          isClearable: Oe,
-          backspaceRemovesValue: De,
-          menuShouldScrollIntoView: !0,
-          isMulti: y,
-          hideSelectedOptions: !1,
-          closeMenuOnSelect: he,
-          blurInputOnSelect: E,
-          menuPlacement: "auto",
-          inputIsHidden: ke,
-          required: R,
-          menuPortalTarget: document.body,
-          menuPosition: "absolute",
-          classNames: (() => {
-            const e = {};
-            if ($)
-              for (const [o, n] of Object.entries($))
-                e[o] = typeof n == "string" ? () => n : n;
-            if (m) {
-              const o = e.control;
-              e.control = (n) => W(o == null ? void 0 : o(n), lt["tedi-input-group__input"]);
-            }
-            return Object.keys(e).length > 0 ? e : void 0;
-          })(),
-          theme: (e) => ({
-            ...e,
-            colors: {
-              ...e.colors,
-              primary: "var(--tedi-blue-600)",
-              danger: "var(--tedi-red-600)",
-              dangerLight: "var(--tedi-red-200)"
-            }
-          }),
-          styles: {
-            input: (e) => ({
-              ...e,
-              gridTemplateColumns: "0fr"
-            })
+    ), [q, W] = r.useState(!1), Ye = (t) => {
+      (t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "Home" || t.key === "End" || t.key === "PageUp" || t.key === "PageDown" || t.key === "Tab") && (q || W(!0));
+    }, Ze = r.useCallback(() => {
+      W((t) => t && !1);
+    }, []), et = r.useCallback(
+      (t) => /* @__PURE__ */ L(vt, { ...t, renderMessageListFooter: $ }),
+      [$]
+    ), tt = () => /* @__PURE__ */ L(
+      ye ? st : lt,
+      {
+        tagsDirection: V,
+        showSelectAll: x,
+        selectableGroups: E,
+        dropdownType: Ie,
+        renderValue: Oe,
+        keyboardMode: q,
+        exitKeyboardMode: Ze,
+        onKeyDown: Ye,
+        id: Ke,
+        "aria-describedby": j,
+        autoFocus: we,
+        ref: h,
+        instanceId: f,
+        className: "tedi-select__wrapper",
+        name: ne,
+        options: We,
+        defaultOptions: oe,
+        value: Xe,
+        defaultValue: T,
+        cacheOptions: Fe,
+        onChange: Je,
+        filterOption: S || b ? Qe : void 0,
+        onInputChange: re,
+        onBlur: Be,
+        softKeyboardSuppressed: !H && O && je,
+        inputValue: ae,
+        inputId: He,
+        loadOptions: ie,
+        isLoading: ce,
+        noOptionsMessage: ve || (() => C("select.no-options")),
+        loadingMessage: he || (() => C("select.loading")),
+        classNamePrefix: "select",
+        components: {
+          ClearIndicator: (e) => dt({ isClearIndicatorVisible: Ve, ...e }),
+          DropdownIndicator: () => mt({ iconName: le }),
+          IndicatorSeparator: () => null,
+          MenuPortal: ht,
+          Menu: Mt,
+          MenuList: et,
+          Option: (e) => Ct({ renderOption: Me, multiple: v, showRadioButtons: $e, ...e }),
+          Control: pt,
+          Input: bt,
+          MultiValue: (e) => It({ isTagRemovable: De, tagsEllipsis: Ne, ...e }),
+          MultiValueRemove: Ot,
+          SingleValue: wt,
+          Group: ft,
+          GroupHeading: (e) => gt({ optionGroupHeadingText: Te, ...e }),
+          IndicatorsContainer: St,
+          ValueContainer: Lt,
+          LoadingIndicator: yt
+        },
+        isDisabled: F,
+        isSearchable: O,
+        menuIsOpen: Ae,
+        openMenuOnFocus: ue,
+        openMenuOnClick: de,
+        tabSelectsValue: pe,
+        onMenuClose: _e,
+        onMenuOpen: ke,
+        placeholder: ge || "",
+        isClearable: Le,
+        backspaceRemovesValue: Pe,
+        menuShouldScrollIntoView: !0,
+        isMulti: v,
+        hideSelectedOptions: !1,
+        closeMenuOnSelect: Ce,
+        blurInputOnSelect: G,
+        menuPlacement: "auto",
+        inputIsHidden: Re,
+        required: N,
+        menuPortalTarget: document.body,
+        menuPosition: "absolute",
+        classNames: (() => {
+          const e = {};
+          if (K)
+            for (const [o, s] of Object.entries(K))
+              e[o] = typeof s == "string" ? () => s : s;
+          if (u) {
+            const o = e.control;
+            e.control = (s) => Q(o == null ? void 0 : o(s), ct["tedi-input-group__input"]);
           }
+          return Object.keys(e).length > 0 ? e : void 0;
+        })(),
+        theme: (e) => ({
+          ...e,
+          colors: {
+            ...e.colors,
+            primary: "var(--tedi-blue-600)",
+            danger: "var(--tedi-red-600)",
+            dangerLight: "var(--tedi-red-200)"
+          }
+        }),
+        styles: {
+          input: (e) => ({
+            ...e,
+            gridTemplateColumns: "0fr"
+          })
         }
-      );
-    }, Je = W(
-      p["tedi-select"],
-      ue,
-      { [p["tedi-select--invalid"]]: me || (a == null ? void 0 : a.type) === "error" },
-      { [p["tedi-select--valid"]]: fe || (a == null ? void 0 : a.type) === "valid" },
-      { [p[`tedi-select--${w}`]]: w },
-      { [p[`tedi-select--tags-${L}`]]: L },
-      { [p["tedi-select--searchable"]]: T },
-      { [p["tedi-select--disabled"]]: F }
+      }
+    ), ot = Q(
+      d["tedi-select"],
+      me,
+      { [d["tedi-select--invalid"]]: Se || (a == null ? void 0 : a.type) === "error" },
+      { [d["tedi-select--valid"]]: be || (a == null ? void 0 : a.type) === "valid" },
+      { [d[`tedi-select--${_}`]]: _ },
+      { [d[`tedi-select--tags-${V}`]]: V },
+      { [d["tedi-select--searchable"]]: O },
+      { [d["tedi-select--disabled"]]: F }
     );
-    return /* @__PURE__ */ q("div", { "data-name": "select", className: Je, children: [
-      /* @__PURE__ */ q("div", { className: p["tedi-select__inner"], children: [
-        !Te && /* @__PURE__ */ C(
-          tt,
+    return /* @__PURE__ */ J("div", { "data-name": "select", className: ot, onPointerDownCapture: Ue, children: [
+      /* @__PURE__ */ J("div", { className: d["tedi-select__inner"], children: [
+        !R && /* @__PURE__ */ L(
+          at,
           {
-            id: `${A}-input`,
-            label: oe,
-            required: R,
-            hideLabel: de,
-            size: w,
-            renderWithoutLabel: Ge,
-            tooltip: Pe
+            id: `${f}-input`,
+            label: se,
+            required: N,
+            hideLabel: fe,
+            size: _,
+            renderWithoutLabel: xe,
+            tooltip: Ee
           }
         ),
-        Xe()
+        tt()
       ] }),
-      a && /* @__PURE__ */ C(et, { ...a, id: H })
+      a && /* @__PURE__ */ L(rt, { ...a, id: j })
     ] });
   }
 );
-It.displayName = "Select";
+At.displayName = "Select";
 export {
-  It as Select
+  At as Select
 };

package/src/tedi/components/loaders/spinner/spinner.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),e=require("./spinner.module.scss.cjs.js"),p=require("../../../providers/label-provider/use-labels.cjs.js"),f=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=s=>{const{getLabel:a}=p.useLabels(),{getCurrentBreakpointProps:l}=f.useBreakpointProps(s.defaultServerBreakpoint),{className:o,size:r=16,color:i="primary",label:c=a("spinner.loading"),position:t}=l(s),d=u.default(e.default["tedi-spinner"],o,t&&e.default[`tedi-spinner--${t}`],r&&e.default[`tedi-spinner--size-${r}`],i&&e.default[`tedi-spinner--color-${i}`]);return n.jsxs("span",{className:d,role:"status","aria-live":"polite","data-testid":"tedi-spinner",children:[n.jsx("svg",{viewBox:"22 22 44 44","aria-hidden":"true",children:n.jsx("circle",{className:e.default["tedi-spinner__inner"],cx:"44",cy:"44",r:"20",fill:"none"})}),n.jsx("span",{className:"sr-only",children:c})]})};exports.Spinner=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),e=require("./spinner.module.scss.cjs.js"),f=require("../../../providers/label-provider/use-labels.cjs.js"),v=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=r=>{const{getLabel:o}=f.useLabels(),{getCurrentBreakpointProps:l}=v.useBreakpointProps(r.defaultServerBreakpoint),{className:d,size:s=16,color:t="primary",label:c=o("spinner.loading"),position:a,decorative:i=!1}=l(r),u=p.default(e.default["tedi-spinner"],d,a&&e.default[`tedi-spinner--${a}`],s&&e.default[`tedi-spinner--size-${s}`],t&&e.default[`tedi-spinner--color-${t}`]);return n.jsxs("span",{className:u,role:i?void 0:"status","aria-live":i?void 0:"polite","aria-hidden":i||void 0,"data-testid":"tedi-spinner",children:[n.jsx("svg",{viewBox:"22 22 44 44","aria-hidden":"true",children:n.jsx("circle",{className:e.default["tedi-spinner__inner"],cx:"44",cy:"44",r:"20",fill:"none"})}),!i&&n.jsx("span",{className:"sr-only",children:c})]})};exports.Spinner=m;

package/src/tedi/components/loaders/spinner/spinner.d.ts

@@ -33,6 +33,13 @@ export interface SpinnerProps extends BreakpointSupport<SpinnerBreakpointProps>
      * Provides a text label for screen readers to announce the spinner's purpose or status.
      */
     label?: string;
+    /**
+     * Renders the spinner as purely decorative — no `role="status"` live region and
+     * no screen-reader label. Use when the loading state is already announced by an
+     * ancestor (e.g. a button's `aria-busy`), so it isn't announced twice.
+     * @default false
+     */
+    decorative?: boolean;
 }
 export declare const Spinner: (props: SpinnerProps) => JSX.Element;
 export {};