@tedi-design-system/react 18.0.0-rc.2 → 18.0.0-rc.20

package/src/tedi/components/form/input-group/components/prefix/prefix.es.js

@@ -1,26 +1,26 @@
 import { jsx as u } from "react/jsx-runtime";
-import m from "../../../../../../../external/classnames/index.es.js";
-import { useEffect as n } from "react";
-import { useInputGroup as a } from "../../input-group.es.js";
-import i from "../../input-group.module.scss.es.js";
-const b = ({ children: r, className: o, ...p }) => {
-  const { registerPrefix: e, unregisterPrefix: t, disabled: s } = a();
-  n(() => (e(), () => t()), [e, t]);
-  const f = typeof r == "string" || typeof r == "number";
+import f from "../../../../../../../external/classnames/index.es.js";
+import { useEffect as a, isValidElement as d, cloneElement as x } from "react";
+import { useInputGroup as l } from "../../input-group.es.js";
+import o from "../../input-group.module.scss.es.js";
+const E = ({ children: e, className: s, ...n }) => {
+  const { registerPrefix: t, unregisterPrefix: r, disabled: i } = l();
+  a(() => (t(), () => r()), [t, r]);
+  const p = typeof e == "string" || typeof e == "number", m = i && d(e) ? x(e, { disabled: !0 }) : e;
   return /* @__PURE__ */ u(
     "div",
     {
-      ...p,
-      className: m(
-        i["tedi-input-group__prefix"],
-        { [i["tedi-input-group__prefix--no-inner-div"]]: f },
-        o
+      ...n,
+      className: f(
+        o["tedi-input-group__prefix"],
+        { [o["tedi-input-group__prefix--no-inner-div"]]: p },
+        s
       ),
-      "aria-disabled": s,
-      children: r
+      "aria-disabled": i,
+      children: m
     }
   );
 };
 export {
-  b as Prefix
+  E as Prefix
 };

package/src/tedi/components/form/input-group/components/suffix/suffix.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),d=require("../../../../../../../external/classnames/index.cjs.js"),p=require("react"),a=require("../../input-group.cjs.js"),i=require("../../input-group.module.scss.cjs.js"),c=({children:e,className:r,...s})=>{const{registerSuffix:t,unregisterSuffix:u,disabled:n}=a.useInputGroup();p.useEffect(()=>(t(),()=>u()),[t,u]);const o=typeof e=="string"||typeof e=="number";return f.jsx("div",{...s,className:d.default(i.default["tedi-input-group__suffix"],{[i.default["tedi-input-group__suffix--no-inner-div"]]:o},r),"aria-disabled":n,children:e})};exports.Suffix=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("../../../../../../../external/classnames/index.cjs.js"),t=require("react"),p=require("../../input-group.cjs.js"),n=require("../../input-group.module.scss.cjs.js"),l=({children:e,className:s,...o})=>{const{registerSuffix:u,unregisterSuffix:i,disabled:r}=p.useInputGroup();t.useEffect(()=>(u(),()=>i()),[u,i]);const f=typeof e=="string"||typeof e=="number",d=r&&t.isValidElement(e)?t.cloneElement(e,{disabled:!0}):e;return a.jsx("div",{...o,className:c.default(n.default["tedi-input-group__suffix"],{[n.default["tedi-input-group__suffix--no-inner-div"]]:f},s),"aria-disabled":r,children:d})};exports.Suffix=l;

package/src/tedi/components/form/input-group/components/suffix/suffix.es.js

@@ -1,26 +1,26 @@
 import { jsx as p } from "react/jsx-runtime";
 import m from "../../../../../../../external/classnames/index.es.js";
-import { useEffect as n } from "react";
-import { useInputGroup as a } from "../../input-group.es.js";
+import { useEffect as a, isValidElement as d, cloneElement as x } from "react";
+import { useInputGroup as l } from "../../input-group.es.js";
 import o from "../../input-group.module.scss.es.js";
-const _ = ({ children: r, className: e, ...s }) => {
-  const { registerSuffix: t, unregisterSuffix: i, disabled: f } = a();
-  n(() => (t(), () => i()), [t, i]);
-  const u = typeof r == "string" || typeof r == "number";
+const y = ({ children: t, className: s, ...u }) => {
+  const { registerSuffix: e, unregisterSuffix: i, disabled: r } = l();
+  a(() => (e(), () => i()), [e, i]);
+  const f = typeof t == "string" || typeof t == "number", n = r && d(t) ? x(t, { disabled: !0 }) : t;
   return /* @__PURE__ */ p(
     "div",
     {
-      ...s,
+      ...u,
       className: m(
         o["tedi-input-group__suffix"],
-        { [o["tedi-input-group__suffix--no-inner-div"]]: u },
-        e
+        { [o["tedi-input-group__suffix--no-inner-div"]]: f },
+        s
       ),
-      "aria-disabled": f,
-      children: r
+      "aria-disabled": r,
+      children: n
     }
   );
 };
 export {
-  _ as Suffix
+  y as Suffix
 };

package/src/tedi/components/form/input-group/input-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),k=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),m=require("../feedback-text/feedback-text.cjs.js"),R=require("../form-label/form-label.cjs.js"),_=require("./components/input/input.cjs.js"),w=require("./components/prefix/prefix.cjs.js"),A=require("./components/suffix/suffix.cjs.js"),u=require("./input-group.module.scss.cjs.js"),d=e.createContext(null),F=()=>{const s=e.useContext(d);if(!s)throw new Error("InputGroupContext missing");return s},N=()=>e.useContext(d),c=e.forwardRef(({className:s,addons:G=!0,helper:t,label:n,children:S,disabled:i,id:q,...j},P)=>{const x=e.useRef(null),v=e.useId(),a=q??v,[p,l]=e.useState(!1),[f,g]=e.useState(!1);e.useImperativeHandle(P,()=>({get root(){return x.current}}));const b=e.useMemo(()=>({hasPrefix:p,hasSuffix:f,disabled:i,hasExternalLabel:!!n,inputId:a,registerPrefix:()=>l(!0),unregisterPrefix:()=>l(!1),registerSuffix:()=>g(!0),unregisterSuffix:()=>g(!1)}),[a,p,f,i,n]),h=k.default(u.default["tedi-input-group"],{[u.default["tedi-input-group--addons"]]:G,[u.default["tedi-input-group--has-prefix"]]:p,[u.default["tedi-input-group--has-suffix"]]:f,[u.default["tedi-input-group--disabled"]]:i},s),y=()=>!t||Array.isArray(t)&&t.length===0?null:r.jsx("div",{className:u.default["tedi-input-group__feedback-wrapper"],children:Array.isArray(t)?t.map((C,I)=>r.jsx(m.FeedbackText,{...C,id:`group-helper-${I}`},I)):r.jsx(m.FeedbackText,{...t,id:"group-helper"})});return r.jsxs(d.Provider,{value:b,children:[n&&r.jsx(R.FormLabel,{...j,label:n,id:a}),r.jsx("div",{ref:x,className:h,"data-name":"tedi-input-group","aria-disabled":i,children:S}),y()]})});c.displayName="InputGroup";const o=c;o.Prefix=w.Prefix;o.Suffix=A.Suffix;o.Input=_.Input;exports.InputGroupBase=c;exports.default=o;exports.useInputGroup=F;exports.useOptionalInputGroup=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),k=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),G=require("../feedback-text/feedback-text.cjs.js"),w=require("../form-label/form-label.cjs.js"),N=require("./components/input/input.cjs.js"),R=require("./components/prefix/prefix.cjs.js"),A=require("./components/suffix/suffix.cjs.js"),t=require("./input-group.module.scss.cjs.js"),c=e.createContext(null),F=()=>{const s=e.useContext(c);if(!s)throw new Error("InputGroupContext missing");return s},T=()=>e.useContext(c),x=e.forwardRef(({className:s,addons:S=!0,helper:r,label:n,children:j,disabled:i,invalid:a,id:q,...P},h)=>{const l=e.useRef(null),v=e.useId(),p=q??v,[f,g]=e.useState(!1),[d,I]=e.useState(!1);e.useImperativeHandle(h,()=>({get root(){return l.current}}));const _=e.useMemo(()=>({hasPrefix:f,hasSuffix:d,disabled:i,invalid:a,hasExternalLabel:!!n,inputId:p,registerPrefix:()=>g(!0),unregisterPrefix:()=>g(!1),registerSuffix:()=>I(!0),unregisterSuffix:()=>I(!1)}),[p,f,d,i,a,n]),b=k.default(t.default["tedi-input-group"],{[t.default["tedi-input-group--addons"]]:S,[t.default["tedi-input-group--has-prefix"]]:f,[t.default["tedi-input-group--has-suffix"]]:d,[t.default["tedi-input-group--disabled"]]:i,[t.default["tedi-input-group--invalid"]]:a},s),y=()=>!r||Array.isArray(r)&&r.length===0?null:u.jsx("div",{className:t.default["tedi-input-group__feedback-wrapper"],children:Array.isArray(r)?r.map((C,m)=>u.jsx(G.FeedbackText,{...C,id:`group-helper-${m}`},m)):u.jsx(G.FeedbackText,{...r,id:"group-helper"})});return u.jsx(c.Provider,{value:_,children:u.jsxs("div",{ref:l,className:b,"data-name":"tedi-input-group","aria-disabled":i,children:[n&&u.jsx(w.FormLabel,{...P,label:n,id:p}),u.jsx("div",{className:t.default["tedi-input-group__row"],children:j}),y()]})})});x.displayName="InputGroup";const o=x;o.Prefix=R.Prefix;o.Suffix=A.Suffix;o.Input=N.Input;exports.InputGroupBase=x;exports.default=o;exports.useInputGroup=F;exports.useOptionalInputGroup=T;

package/src/tedi/components/form/input-group/input-group.d.ts

@@ -36,6 +36,13 @@ export interface InputGroupProps extends FormLabelProps {
      * to the input and any interactive prefix/suffix elements.
      */
     disabled?: boolean;
+    /**
+     * Marks the whole group as invalid. Applies the error border to the
+     * prefix/suffix addons and propagates `invalid` down to the inner form
+     * control, so you don't have to set it on the child as well. Pair with an
+     * error `helper` message.
+     */
+    invalid?: boolean;
 }
 export interface InputGroupForwardRef {
     root: HTMLDivElement | null;
@@ -73,6 +80,12 @@ export type InputGroupContextValue = {
      * behavior and styling.
      */
     disabled?: boolean;
+    /**
+     * Invalid state inherited from InputGroup.
+     * Consumed by Input to propagate `invalid` (or `aria-invalid`) to the
+     * wrapped form control.
+     */
+    invalid?: boolean;
     hasExternalLabel?: boolean;
     inputId?: string;
 };

package/src/tedi/components/form/input-group/input-group.es.js

@@ -1,62 +1,64 @@
-import { jsxs as k, jsx as e } from "react/jsx-runtime";
-import F from "../../../../../external/classnames/index.es.js";
-import g, { forwardRef as H, useContext as G, createContext as j, useState as l, useImperativeHandle as E, useMemo as L } from "react";
-import { FeedbackText as I } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as b } from "../form-label/form-label.es.js";
-import { Input as B } from "./components/input/input.es.js";
-import { Prefix as M } from "./components/prefix/prefix.es.js";
-import { Suffix as O } from "./components/suffix/suffix.es.js";
-import t from "./input-group.module.scss.es.js";
-const a = j(null), U = () => {
-  const u = G(a);
+import { jsx as e, jsxs as F } from "react/jsx-runtime";
+import H from "../../../../../external/classnames/index.es.js";
+import l, { forwardRef as j, useContext as S, createContext as E, useState as I, useImperativeHandle as L, useMemo as b } from "react";
+import { FeedbackText as G } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as B } from "../form-label/form-label.es.js";
+import { Input as M } from "./components/input/input.es.js";
+import { Prefix as O } from "./components/prefix/prefix.es.js";
+import { Suffix as T } from "./components/suffix/suffix.es.js";
+import r from "./input-group.module.scss.es.js";
+const f = E(null), W = () => {
+  const u = S(f);
   if (!u) throw new Error("InputGroupContext missing");
   return u;
-}, W = () => G(a), S = H(
-  ({ className: u, addons: P = !0, helper: r, label: o, children: h, disabled: s, id: y, ...v }, C) => {
-    const m = g.useRef(null), N = g.useId(), i = y ?? N, [n, d] = l(!1), [p, c] = l(!1);
-    E(C, () => ({
+}, X = () => S(f), h = j(
+  ({ className: u, addons: P = !0, helper: t, label: o, children: y, disabled: i, invalid: s, id: N, ..._ }, v) => {
+    const m = l.useRef(null), w = l.useId(), n = N ?? w, [p, c] = I(!1), [a, x] = I(!1);
+    L(v, () => ({
       get root() {
         return m.current;
       }
     }));
-    const w = L(
+    const C = b(
       () => ({
-        hasPrefix: n,
-        hasSuffix: p,
-        disabled: s,
+        hasPrefix: p,
+        hasSuffix: a,
+        disabled: i,
+        invalid: s,
         hasExternalLabel: !!o,
-        inputId: i,
-        registerPrefix: () => d(!0),
-        unregisterPrefix: () => d(!1),
-        registerSuffix: () => c(!0),
-        unregisterSuffix: () => c(!1)
+        inputId: n,
+        registerPrefix: () => c(!0),
+        unregisterPrefix: () => c(!1),
+        registerSuffix: () => x(!0),
+        unregisterSuffix: () => x(!1)
       }),
-      [i, n, p, s, o]
-    ), A = F(
-      t["tedi-input-group"],
+      [n, p, a, i, s, o]
+    ), A = H(
+      r["tedi-input-group"],
       {
-        [t["tedi-input-group--addons"]]: P,
-        [t["tedi-input-group--has-prefix"]]: n,
-        [t["tedi-input-group--has-suffix"]]: p,
-        [t["tedi-input-group--disabled"]]: s
+        [r["tedi-input-group--addons"]]: P,
+        [r["tedi-input-group--has-prefix"]]: p,
+        [r["tedi-input-group--has-suffix"]]: a,
+        [r["tedi-input-group--disabled"]]: i,
+        [r["tedi-input-group--invalid"]]: s
       },
       u
-    ), R = () => !r || Array.isArray(r) && r.length === 0 ? null : /* @__PURE__ */ e("div", { className: t["tedi-input-group__feedback-wrapper"], children: Array.isArray(r) ? r.map((_, x) => /* @__PURE__ */ e(I, { ..._, id: `group-helper-${x}` }, x)) : /* @__PURE__ */ e(I, { ...r, id: "group-helper" }) });
-    return /* @__PURE__ */ k(a.Provider, { value: w, children: [
-      o && /* @__PURE__ */ e(b, { ...v, label: o, id: i }),
-      /* @__PURE__ */ e("div", { ref: m, className: A, "data-name": "tedi-input-group", "aria-disabled": s, children: h }),
+    ), R = () => !t || Array.isArray(t) && t.length === 0 ? null : /* @__PURE__ */ e("div", { className: r["tedi-input-group__feedback-wrapper"], children: Array.isArray(t) ? t.map((k, g) => /* @__PURE__ */ e(G, { ...k, id: `group-helper-${g}` }, g)) : /* @__PURE__ */ e(G, { ...t, id: "group-helper" }) });
+    return /* @__PURE__ */ e(f.Provider, { value: C, children: /* @__PURE__ */ F("div", { ref: m, className: A, "data-name": "tedi-input-group", "aria-disabled": i, children: [
+      o && /* @__PURE__ */ e(B, { ..._, label: o, id: n }),
+      /* @__PURE__ */ e("div", { className: r["tedi-input-group__row"], children: y }),
       R()
-    ] });
+    ] }) });
   }
 );
-S.displayName = "InputGroup";
-const f = S;
-f.Prefix = M;
-f.Suffix = O;
-f.Input = B;
+h.displayName = "InputGroup";
+const d = h;
+d.Prefix = O;
+d.Suffix = T;
+d.Input = M;
 export {
-  S as InputGroupBase,
-  f as default,
-  U as useInputGroup,
-  W as useOptionalInputGroup
+  h as InputGroupBase,
+  d as default,
+  W as useInputGroup,
+  X as useOptionalInputGroup
 };

package/src/tedi/components/form/input-group/input-group.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-input-group":"tedi-input-group-3de08ee1","tedi-input-group__prefix":"tedi-input-group__prefix-056c2ccf","tedi-input-group__suffix":"tedi-input-group__suffix-9c330042","tedi-input-group__input":"tedi-input-group__input-5454624d","tedi-input-group__prefix--no-inner-div":"tedi-input-group__prefix--no-inner-div-4bc9b815","tedi-input-group__suffix--no-inner-div":"tedi-input-group__suffix--no-inner-div-283ea370","tedi-input-group--addons":"tedi-input-group--addons-7bd99e72","tedi-input-group--disabled":"tedi-input-group--disabled-f5db06aa","tedi-input-group--has-prefix":"tedi-input-group--has-prefix-e845fcb0","tedi-input-group--has-suffix":"tedi-input-group--has-suffix-994ab888","tedi-input-group__feedback-wrapper":"tedi-input-group__feedback-wrapper-bfbe3cb2"};exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-input-group":"tedi-input-group-3de08ee1","tedi-input-group__row":"tedi-input-group__row-60941c6f","tedi-input-group__prefix":"tedi-input-group__prefix-056c2ccf","tedi-input-group__suffix":"tedi-input-group__suffix-9c330042","tedi-input-group__input":"tedi-input-group__input-5454624d","tedi-input-group__prefix--no-inner-div":"tedi-input-group__prefix--no-inner-div-4bc9b815","tedi-input-group__suffix--no-inner-div":"tedi-input-group__suffix--no-inner-div-283ea370","tedi-input-group--addons":"tedi-input-group--addons-7bd99e72","tedi-input-group--invalid":"tedi-input-group--invalid-de02528b","tedi-input-group--disabled":"tedi-input-group--disabled-f5db06aa","tedi-input-group--has-prefix":"tedi-input-group--has-prefix-e845fcb0","tedi-input-group--has-suffix":"tedi-input-group--has-suffix-994ab888","tedi-input-group__feedback-wrapper":"tedi-input-group__feedback-wrapper-bfbe3cb2"};exports.default=i;

package/src/tedi/components/form/input-group/input-group.module.scss.es.js

@@ -1,11 +1,13 @@
 const i = {
   "tedi-input-group": "tedi-input-group-3de08ee1",
+  "tedi-input-group__row": "tedi-input-group__row-60941c6f",
   "tedi-input-group__prefix": "tedi-input-group__prefix-056c2ccf",
   "tedi-input-group__suffix": "tedi-input-group__suffix-9c330042",
   "tedi-input-group__input": "tedi-input-group__input-5454624d",
   "tedi-input-group__prefix--no-inner-div": "tedi-input-group__prefix--no-inner-div-4bc9b815",
   "tedi-input-group__suffix--no-inner-div": "tedi-input-group__suffix--no-inner-div-283ea370",
   "tedi-input-group--addons": "tedi-input-group--addons-7bd99e72",
+  "tedi-input-group--invalid": "tedi-input-group--invalid-de02528b",
   "tedi-input-group--disabled": "tedi-input-group--disabled-f5db06aa",
   "tedi-input-group--has-prefix": "tedi-input-group--has-prefix-e845fcb0",
   "tedi-input-group--has-suffix": "tedi-input-group--has-suffix-994ab888",

package/src/tedi/components/form/search/search.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),j=require("react"),v=require("../../buttons/button/button.cjs.js"),L=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),N=require("../../../providers/label-provider/use-labels.cjs.js"),u=j.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,className:h,...t},_)=>{const{getLabel:l}=N.useLabels(),m=y=>{y.key==="Enter"&&(a==null||a(t.value))},x=()=>{a==null||a(t.value)},b={...t,ref:_,inputClassName:i.default(s.default["tedi-search__input"],e&&s.default["tedi-search__input--has-button"],h),placeholder:c,isClearable:d,onKeyDown:m,onChange:o,...e?{}:{icon:n}},p=c||l("search"),q=f??p;return r.jsxs("div",{className:i.default(s.default["tedi-search__wrapper"]),role:"search","aria-label":q,children:[r.jsx(L.TextField,{...b}),e&&r.jsx(v.Button,{...e,onClick:x,className:i.default(s.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:l("search"),children:e.children??l("search")})]})});u.displayName="Search";exports.Search=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),v=require("react"),L=require("../../buttons/button/button.cjs.js"),N=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),w=require("../../../providers/label-provider/use-labels.cjs.js"),u=v.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,className:h,input:x,...t},_)=>{const{getLabel:r}=w.useLabels(),b=j=>{j.key==="Enter"&&(a==null||a(t.value))},m=()=>{a==null||a(t.value)},p={...t,ref:_,inputClassName:i.default(s.default["tedi-search__input"],e&&s.default["tedi-search__input--has-button"],h),placeholder:c,isClearable:d,onKeyDown:b,onChange:o,input:{...x,role:"searchbox"},...e?{}:{icon:n}},q=c||r("search"),y=f??q;return l.jsxs("div",{className:i.default(s.default["tedi-search__wrapper"]),role:"search","aria-label":y,children:[l.jsx(N.TextField,{...p}),e&&l.jsx(L.Button,{...e,onClick:m,className:i.default(s.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:r("search"),children:e.children??r("search")})]})});u.displayName="Search";exports.Search=u;

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

@@ -1,40 +1,42 @@
-import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import { jsxs as w, jsx as c } from "react/jsx-runtime";
 import l from "../../../../../external/classnames/index.es.js";
-import { forwardRef as w } from "react";
-import { Button as L } from "../../buttons/button/button.es.js";
+import { forwardRef as L } from "react";
+import { Button as b } from "../../buttons/button/button.es.js";
 import { TextField as k } from "../textfield/textfield.es.js";
 import a from "./search.module.scss.es.js";
 import { useLabels as C } from "../../../providers/label-provider/use-labels.es.js";
-const b = w(
+const j = L(
   ({
     placeholder: t,
-    isClearable: m = !0,
-    searchIcon: o = "search",
+    isClearable: o = !0,
+    searchIcon: m = "search",
     onSearch: s,
     onChange: d,
     button: e,
     ariaLabel: p,
     className: n,
+    input: f,
     ...r
-  }, f) => {
-    const { getLabel: i } = C(), h = (y) => {
-      y.key === "Enter" && (s == null || s(r.value));
+  }, h) => {
+    const { getLabel: i } = C(), u = (v) => {
+      v.key === "Enter" && (s == null || s(r.value));
     }, _ = () => {
       s == null || s(r.value);
-    }, u = {
+    }, x = {
       ...r,
-      ref: f,
+      ref: h,
       inputClassName: l(a["tedi-search__input"], e && a["tedi-search__input--has-button"], n),
       placeholder: t,
-      isClearable: m,
-      onKeyDown: h,
+      isClearable: o,
+      onKeyDown: u,
       onChange: d,
-      ...e ? {} : { icon: o }
-    }, N = t || i("search"), x = p ?? N;
-    return /* @__PURE__ */ v("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": x, children: [
-      /* @__PURE__ */ c(k, { ...u }),
+      input: { ...f, role: "searchbox" },
+      ...e ? {} : { icon: m }
+    }, N = t || i("search"), y = p ?? N;
+    return /* @__PURE__ */ w("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": y, children: [
+      /* @__PURE__ */ c(k, { ...x }),
       e && /* @__PURE__ */ c(
-        L,
+        b,
         {
           ...e,
           onClick: _,
@@ -46,7 +48,7 @@ const b = w(
     ] });
   }
 );
-b.displayName = "Search";
+j.displayName = "Search";
 export {
-  b as Search
+  j as Search
 };

package/src/tedi/components/form/select/components/select-multi-option.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),S=require("../../../../../../external/classnames/index.cjs.js"),x=require("../../checkbox/checkbox.cjs.js"),l=require("../select.module.scss.cjs.js"),t=require("./select-bulk-helpers.cjs.js"),g=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),A=({renderOption:f,...e})=>{var b;const u=e.data.value===t.SELECT_ALL_VALUE,r=t.isGroupSentinel(e.data),E=!!((b=e.data.customData)!=null&&b.__tediInGroup);let o=e.isSelected,_=!1;if(u){const i=t.getEnabledOptions(e.options).filter(n=>n.value!==t.SELECT_ALL_VALUE),a=(e.getValue()??[]).filter(n=>n.value!==t.SELECT_ALL_VALUE);o=t.areAllSelected(a,i),_=t.isIndeterminate(a,i)}else if(r){const i=e.options,L=i.findIndex(d=>d.value===e.data.value),a=[];for(let d=L+1;d<i.length;d++){const s=i[d];if(!s||typeof s.value=="string"&&(s.value.startsWith(t.GROUP_OPTION_PREFIX)||s.value===t.SELECT_ALL_VALUE))break;s.isDisabled||a.push(s)}const n=e.getValue()??[];o=t.areAllSelected(n,a),_=t.isIndeterminate(n,a)}const h=S.default(l.default["tedi-select__option"],{[l.default["tedi-select__option--disabled"]]:e.isDisabled},{[l.default["tedi-select__option--focused"]]:e.isFocused},{[l.default["tedi-select__option--select-all"]]:u},{[l.default["tedi-select__option--group"]]:r},{[l.default["tedi-select__option--indented"]]:E}),{tabIndex:m,...v}=e.innerProps;return c.jsx(g.c.Option,{...e,innerProps:{...v,tabIndex:m,role:"option","aria-selected":o},className:h,children:f&&!u&&!r?f(e):c.jsxs(c.Fragment,{children:[c.jsx("span",{className:"sr-only",children:e.label}),c.jsx(x.Checkbox,{id:e.data.value,label:e.label,"aria-hidden":!0,className:l.default["tedi-select__checkbox"],value:e.data.value,name:e.data.value,checked:o,indeterminate:_,onChange:()=>null,disabled:e.isDisabled,hover:e.isFocused})]})})};exports.SelectMultiOption=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),I=require("../../../../../../external/classnames/index.cjs.js"),E=require("../../../misc/option-content/option-content.cjs.js"),a=require("../select.module.scss.cjs.js"),t=require("./select-bulk-helpers.cjs.js"),O=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),g=({renderOption:f,...e})=>{var L;const o=e.data.value===t.SELECT_ALL_VALUE,u=t.isGroupSentinel(e.data),S=!!((L=e.data.customData)!=null&&L.__tediInGroup);let c=e.isSelected,r=!1;if(o){const i=t.getEnabledOptions(e.options).filter(n=>n.value!==t.SELECT_ALL_VALUE),l=(e.getValue()??[]).filter(n=>n.value!==t.SELECT_ALL_VALUE);c=t.areAllSelected(l,i),r=t.isIndeterminate(l,i)}else if(u){const i=e.options,b=i.findIndex(d=>d.value===e.data.value),l=[];for(let d=b+1;d<i.length;d++){const s=i[d];if(!s||typeof s.value=="string"&&(s.value.startsWith(t.GROUP_OPTION_PREFIX)||s.value===t.SELECT_ALL_VALUE))break;s.isDisabled||l.push(s)}const n=e.getValue()??[];c=t.areAllSelected(n,l),r=t.isIndeterminate(n,l)}const m=I.default(a.default["tedi-select__option"],{[a.default["tedi-select__option--disabled"]]:e.isDisabled},{[a.default["tedi-select__option--focused"]]:e.isFocused},{[a.default["tedi-select__option--select-all"]]:o},{[a.default["tedi-select__option--group"]]:u},{[a.default["tedi-select__option--indented"]]:S}),{tabIndex:A,...x}=e.innerProps;return _.jsx(O.c.Option,{...e,innerProps:{...x,tabIndex:A,role:"option","aria-selected":c},className:m,children:f&&!o&&!u?f(e):_.jsx(E.OptionContent,{type:"checkbox",indicatorSemantics:"control",selected:c,indeterminate:r,disabled:e.isDisabled,children:_.jsx(E.OptionContent.Label,{children:e.children})})})};exports.SelectMultiOption=g;

package/src/tedi/components/form/select/components/select-multi-option.es.js

@@ -1,63 +1,55 @@
-import { jsx as m, jsxs as k, Fragment as E } from "react/jsx-runtime";
-import O from "../../../../../../external/classnames/index.es.js";
-import { Checkbox as P } from "../../checkbox/checkbox.es.js";
-import t from "../select.module.scss.es.js";
-import { SELECT_ALL_VALUE as o, isGroupSentinel as y, getEnabledOptions as G, areAllSelected as h, isIndeterminate as v, GROUP_OPTION_PREFIX as N } from "./select-bulk-helpers.es.js";
-import { c as A } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const M = ({ renderOption: _, ...e }) => {
-  var f;
-  const c = e.data.value === o, u = y(e.data), g = !!((f = e.data.customData) != null && f.__tediInGroup);
-  let d = e.isSelected, r = !1;
-  if (c) {
-    const l = G(e.options).filter((a) => a.value !== o), i = (e.getValue() ?? []).filter((a) => a.value !== o);
-    d = h(i, l), r = v(i, l);
-  } else if (u) {
-    const l = e.options, b = l.findIndex((s) => s.value === e.data.value), i = [];
-    for (let s = b + 1; s < l.length; s++) {
-      const n = l[s];
-      if (!n || typeof n.value == "string" && (n.value.startsWith(N) || n.value === o))
+import { jsx as m } from "react/jsx-runtime";
+import E from "../../../../../../external/classnames/index.es.js";
+import { OptionContent as h } from "../../../misc/option-content/option-content.es.js";
+import s from "../select.module.scss.es.js";
+import { SELECT_ALL_VALUE as c, isGroupSentinel as P, getEnabledOptions as y, areAllSelected as I, isIndeterminate as v, GROUP_OPTION_PREFIX as G } from "./select-bulk-helpers.es.js";
+import { c as L } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const V = ({ renderOption: f, ...e }) => {
+  var _;
+  const d = e.data.value === c, r = P(e.data), S = !!((_ = e.data.customData) != null && _.__tediInGroup);
+  let a = e.isSelected, u = !1;
+  if (d) {
+    const t = y(e.options).filter((l) => l.value !== c), i = (e.getValue() ?? []).filter((l) => l.value !== c);
+    a = I(i, t), u = v(i, t);
+  } else if (r) {
+    const t = e.options, b = t.findIndex((o) => o.value === e.data.value), i = [];
+    for (let o = b + 1; o < t.length; o++) {
+      const n = t[o];
+      if (!n || typeof n.value == "string" && (n.value.startsWith(G) || n.value === c))
         break;
       n.isDisabled || i.push(n);
     }
-    const a = e.getValue() ?? [];
-    d = h(a, i), r = v(a, i);
+    const l = e.getValue() ?? [];
+    a = I(l, i), u = v(l, i);
   }
-  const I = O(
-    t["tedi-select__option"],
-    { [t["tedi-select__option--disabled"]]: e.isDisabled },
-    { [t["tedi-select__option--focused"]]: e.isFocused },
-    { [t["tedi-select__option--select-all"]]: c },
-    { [t["tedi-select__option--group"]]: u },
-    { [t["tedi-select__option--indented"]]: g }
-  ), { tabIndex: x, ...S } = e.innerProps;
+  const g = E(
+    s["tedi-select__option"],
+    { [s["tedi-select__option--disabled"]]: e.isDisabled },
+    { [s["tedi-select__option--focused"]]: e.isFocused },
+    { [s["tedi-select__option--select-all"]]: d },
+    { [s["tedi-select__option--group"]]: r },
+    { [s["tedi-select__option--indented"]]: S }
+  ), { tabIndex: O, ...x } = e.innerProps;
   return /* @__PURE__ */ m(
-    A.Option,
+    L.Option,
     {
       ...e,
-      innerProps: { ...S, tabIndex: x, role: "option", "aria-selected": d },
-      className: I,
-      children: _ && !c && !u ? _(e) : /* @__PURE__ */ k(E, { children: [
-        /* @__PURE__ */ m("span", { className: "sr-only", children: e.label }),
-        /* @__PURE__ */ m(
-          P,
-          {
-            id: e.data.value,
-            label: e.label,
-            "aria-hidden": !0,
-            className: t["tedi-select__checkbox"],
-            value: e.data.value,
-            name: e.data.value,
-            checked: d,
-            indeterminate: r,
-            onChange: () => null,
-            disabled: e.isDisabled,
-            hover: e.isFocused
-          }
-        )
-      ] })
+      innerProps: { ...x, tabIndex: O, role: "option", "aria-selected": a },
+      className: g,
+      children: f && !d && !r ? f(e) : /* @__PURE__ */ m(
+        h,
+        {
+          type: "checkbox",
+          indicatorSemantics: "control",
+          selected: a,
+          indeterminate: u,
+          disabled: e.isDisabled,
+          children: /* @__PURE__ */ m(h.Label, { children: e.children })
+        }
+      )
     }
   );
 };
 export {
-  M as SelectMultiOption
+  V as SelectMultiOption
 };

package/src/tedi/components/form/select/components/select-single-option.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("../../../../../../external/classnames/index.cjs.js"),c=require("../../radio/radio.cjs.js"),i=require("../select.module.scss.cjs.js"),s=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),u=({showRadioButtons:t,renderOption:a,...e})=>{const d=n.default(i.default["tedi-select__option"],{[i.default["tedi-select__option--disabled"]]:e.isDisabled},{[i.default["tedi-select__option--selected"]]:e.isSelected&&!t},{[i.default["tedi-select__option--focused"]]:e.isFocused});return l.jsx(s.c.Option,{...e,innerProps:{role:"option","aria-selected":e.isSelected,"aria-disabled":e.isDisabled,...e.innerProps},className:d,children:t?l.jsxs(l.Fragment,{children:[l.jsx("span",{className:"sr-only",children:e.label}),l.jsx(c.Radio,{label:e.label,id:e.data.value,name:e.data.value,className:i.default["tedi-select__radio"],value:e.data.value,checked:e.isSelected,disabled:e.isDisabled,onChange:()=>null})]}):a?a(e):e.children})};exports.SelectSingleOption=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),s=require("../../../../../../external/classnames/index.cjs.js"),d=require("../../../misc/option-content/option-content.cjs.js"),t=require("../select.module.scss.cjs.js"),o=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),a=({showRadioButtons:n,renderOption:l,...e})=>{const c=s.default(t.default["tedi-select__option"],{[t.default["tedi-select__option--disabled"]]:e.isDisabled},{[t.default["tedi-select__option--selected"]]:e.isSelected&&!n},{[t.default["tedi-select__option--focused"]]:e.isFocused});return i.jsx(o.c.Option,{...e,innerProps:{role:"option","aria-selected":e.isSelected,"aria-disabled":e.isDisabled,...e.innerProps},className:c,children:n?i.jsx(d.OptionContent,{type:"radio",indicatorSemantics:"control",selected:e.isSelected,disabled:e.isDisabled,children:i.jsx(d.OptionContent.Label,{children:e.children})}):l?l(e):e.children})};exports.SelectSingleOption=a;

package/src/tedi/components/form/select/components/select-single-option.es.js

@@ -1,17 +1,17 @@
-import { jsx as l, jsxs as c, Fragment as s } from "react/jsx-runtime";
-import n from "../../../../../../external/classnames/index.es.js";
-import { Radio as o } from "../../radio/radio.es.js";
+import { jsx as t } from "react/jsx-runtime";
+import o from "../../../../../../external/classnames/index.es.js";
+import { OptionContent as d } from "../../../misc/option-content/option-content.es.js";
 import i from "../select.module.scss.es.js";
-import { c as m } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const h = ({ showRadioButtons: a, renderOption: t, ...e }) => {
-  const d = n(
+import { c as s } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const f = ({ showRadioButtons: l, renderOption: c, ...e }) => {
+  const n = o(
     i["tedi-select__option"],
     { [i["tedi-select__option--disabled"]]: e.isDisabled },
-    { [i["tedi-select__option--selected"]]: e.isSelected && !a },
+    { [i["tedi-select__option--selected"]]: e.isSelected && !l },
     { [i["tedi-select__option--focused"]]: e.isFocused }
   );
-  return /* @__PURE__ */ l(
-    m.Option,
+  return /* @__PURE__ */ t(
+    s.Option,
     {
       ...e,
       innerProps: {
@@ -20,26 +20,20 @@ const h = ({ showRadioButtons: a, renderOption: t, ...e }) => {
         "aria-disabled": e.isDisabled,
         ...e.innerProps
       },
-      className: d,
-      children: a ? /* @__PURE__ */ c(s, { children: [
-        /* @__PURE__ */ l("span", { className: "sr-only", children: e.label }),
-        /* @__PURE__ */ l(
-          o,
-          {
-            label: e.label,
-            id: e.data.value,
-            name: e.data.value,
-            className: i["tedi-select__radio"],
-            value: e.data.value,
-            checked: e.isSelected,
-            disabled: e.isDisabled,
-            onChange: () => null
-          }
-        )
-      ] }) : t ? t(e) : e.children
+      className: n,
+      children: l ? /* @__PURE__ */ t(
+        d,
+        {
+          type: "radio",
+          indicatorSemantics: "control",
+          selected: e.isSelected,
+          disabled: e.isDisabled,
+          children: /* @__PURE__ */ t(d.Label, { children: e.children })
+        }
+      ) : c ? c(e) : e.children
     }
   );
 };
 export {
-  h as SelectSingleOption
+  f as SelectSingleOption
 };

package/src/tedi/components/form/select/select.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-select__control":"tedi-select__control-dbce8bb7","tedi-select__value-container":"tedi-select__value-container-253d079a","tedi-select__indicators-container":"tedi-select__indicators-container-0fc8fa2a","tedi-select__input":"tedi-select__input-5525b622","tedi-select":"tedi-select-8b014852","tedi-select--disabled":"tedi-select--disabled-2d4b8ddd","tedi-select--invalid":"tedi-select--invalid-3901c89c","tedi-select--valid":"tedi-select--valid-969c0297","tedi-select__control--focused":"tedi-select__control--focused-0e632efe","tedi-select__arrow":"tedi-select__arrow-94b5ef4a","tedi-select__loading-indicator":"tedi-select__loading-indicator-a35a63ca","tedi-select__dropdown-indicator":"tedi-select__dropdown-indicator-5a948baa","tedi-select__clear-indicator":"tedi-select__clear-indicator-68b60b12","tedi-select__menu-portal":"tedi-select__menu-portal-d5349f37","tedi-select__menu":"tedi-select__menu-bf54b75b","tedi-select__menu-list--grid":"tedi-select__menu-list--grid-393f3232","tedi-select__menu-list":"tedi-select__menu-list-0aa06e24","tedi-select__menu-list-inner":"tedi-select__menu-list-inner-471e5cf8","tedi-select__menu-list-footer":"tedi-select__menu-list-footer-eb1d3bbc","tedi-select__option":"tedi-select__option-6f811381","tedi-select__option--disabled":"tedi-select__option--disabled-d3aff112","tedi-select__option--focused":"tedi-select__option--focused-1d972ff1","tedi-select__option--selected":"tedi-select__option--selected-a93e5fb0","tedi-select--small":"tedi-select--small-2659608b","tedi-select__multi-value-item":"tedi-select__multi-value-item-b8ec59ae","tedi-select__checkbox":"tedi-select__checkbox-e4f94b67","tedi-select__group":"tedi-select__group-b275e954","tedi-select__group-heading":"tedi-select__group-heading-02b3d9bc","tedi-select__group-heading--selectable":"tedi-select__group-heading--selectable-c84cd617","tedi-select__option--indented":"tedi-select__option--indented-bf4a1661","tedi-select__multi-value-clear":"tedi-select__multi-value-clear-d231f7de","tedi-select--tags-row":"tedi-select--tags-row-c9f33e4b","tedi-select__overflow-tag":"tedi-select__overflow-tag-c0391df2","tedi-select__menu-list--keyboard":"tedi-select__menu-list--keyboard-3d066942","tedi-select__select-all":"tedi-select__select-all-12c3e7f1","tedi-select__group-heading-toggle":"tedi-select__group-heading-toggle-34296a63","tedi-select--tags-stack":"tedi-select--tags-stack-ddb929a9","tedi-select__separator":"tedi-select__separator-b1045f3f","tedi-select--searchable":"tedi-select--searchable-d56eb325"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-select__control":"tedi-select__control-dbce8bb7","tedi-select__value-container":"tedi-select__value-container-253d079a","tedi-select__indicators-container":"tedi-select__indicators-container-0fc8fa2a","tedi-select__input":"tedi-select__input-5525b622","tedi-select":"tedi-select-8b014852","tedi-select--disabled":"tedi-select--disabled-2d4b8ddd","tedi-select--invalid":"tedi-select--invalid-3901c89c","tedi-select--valid":"tedi-select--valid-969c0297","tedi-select__control--focused":"tedi-select__control--focused-0e632efe","tedi-select__arrow":"tedi-select__arrow-94b5ef4a","tedi-select__loading-indicator":"tedi-select__loading-indicator-a35a63ca","tedi-select__dropdown-indicator":"tedi-select__dropdown-indicator-5a948baa","tedi-select__clear-indicator":"tedi-select__clear-indicator-68b60b12","tedi-select__menu-portal":"tedi-select__menu-portal-d5349f37","tedi-select__menu":"tedi-select__menu-bf54b75b","tedi-select__menu-list--grid":"tedi-select__menu-list--grid-393f3232","tedi-select__menu-list":"tedi-select__menu-list-0aa06e24","tedi-select__menu-list-inner":"tedi-select__menu-list-inner-471e5cf8","tedi-select__menu-list-footer":"tedi-select__menu-list-footer-eb1d3bbc","tedi-select__option":"tedi-select__option-6f811381","tedi-select__option--disabled":"tedi-select__option--disabled-d3aff112","tedi-select__option--focused":"tedi-select__option--focused-1d972ff1","tedi-select__option--selected":"tedi-select__option--selected-a93e5fb0","tedi-select--small":"tedi-select--small-2659608b","tedi-select__multi-value-item":"tedi-select__multi-value-item-b8ec59ae","tedi-select__group":"tedi-select__group-b275e954","tedi-select__group-heading":"tedi-select__group-heading-02b3d9bc","tedi-select__group-heading--selectable":"tedi-select__group-heading--selectable-c84cd617","tedi-select__option--indented":"tedi-select__option--indented-bf4a1661","tedi-select__multi-value-clear":"tedi-select__multi-value-clear-d231f7de","tedi-select--tags-row":"tedi-select--tags-row-c9f33e4b","tedi-select__overflow-tag":"tedi-select__overflow-tag-c0391df2","tedi-select__menu-list--keyboard":"tedi-select__menu-list--keyboard-3d066942","tedi-select__select-all":"tedi-select__select-all-12c3e7f1","tedi-select__group-heading-toggle":"tedi-select__group-heading-toggle-34296a63","tedi-select--tags-stack":"tedi-select--tags-stack-ddb929a9","tedi-select__separator":"tedi-select__separator-b1045f3f","tedi-select--searchable":"tedi-select--searchable-d56eb325"};exports.default=e;

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

@@ -24,7 +24,6 @@ const e = {
   "tedi-select__option--selected": "tedi-select__option--selected-a93e5fb0",
   "tedi-select--small": "tedi-select--small-2659608b",
   "tedi-select__multi-value-item": "tedi-select__multi-value-item-b8ec59ae",
-  "tedi-select__checkbox": "tedi-select__checkbox-e4f94b67",
   "tedi-select__group": "tedi-select__group-b275e954",
   "tedi-select__group-heading": "tedi-select__group-heading-02b3d9bc",
   "tedi-select__group-heading--selectable": "tedi-select__group-heading--selectable-c84cd617",