@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.0.0-rc.3",
+  "version": "18.0.0-rc.30",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -19,7 +19,7 @@
   "scripts": {
     "prepare": "husky",
     "start": "storybook dev -p 4400 -c .storybook",
-    "build": "rm -rf dist && vite build --config vite.config.ts && replace-in-file //fonts//g \"./fonts/\" dist/index.css --isRegex",
+    "build": "rm -rf dist && vite build --config vite.lib.config.ts && replace-in-file //fonts//g \"./fonts/\" dist/index.css --isRegex",
     "build:sb": "storybook build -c .storybook -o dist/storybook-static --stats-json",
     "lint": "npx stylelint \"src/**/*.scss\" --fix && eslint \"src/**/*.{ts,tsx}\" --no-ignore --fix",
     "lint:ci": "npx stylelint \"src/**/*.scss\" --quiet && npx eslint . --quiet",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@floating-ui/react": "^0.26.9",
+    "@floating-ui/react": "^0.27.19",
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-table": "^8.13.2",
@@ -48,7 +48,7 @@
     "draft-js": "^0.11.7",
     "draftjs-md-converter": "^1.5.2",
     "formik": "^2.4.5",
-    "lodash-es": "^4.17.22",
+    "lodash-es": "^4.18.1",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "^9.13.2",
     "react-dropzone": "^14.3.5",
@@ -64,11 +64,11 @@
     "react-dom": "18.3.1 || ^19.0.0"
   },
   "devDependencies": {
-    "@avalane/storybook-addon-status": "^5.0.1",
+    "@etchteam/storybook-addon-status": "^8.1.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@chromatic-com/storybook": "^3.2.7",
+    "@chromatic-com/storybook": "^5.2.1",
     "@commitlint/cli": "^20.5.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@dnd-kit/core": "^6.3.1",
@@ -79,14 +79,12 @@
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^13.1.5",
-    "@storybook/addon-a11y": "8.4.2",
-    "@storybook/addon-designs": "^8.2.1",
-    "@storybook/addon-essentials": "8.4.2",
-    "@storybook/blocks": "8.4.2",
-    "@storybook/builder-vite": "8.4.2",
-    "@storybook/react": "8.4.2",
-    "@storybook/react-vite": "8.4.2",
-    "@storybook/theming": "8.6.14",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-designs": "^11.1.3",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/builder-vite": "^10.4.6",
+    "@storybook/react": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "15.0.6",
@@ -114,7 +112,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-plugin-storybook": "^10.4.6",
     "eslint-plugin-unused-imports": "^4.1.4",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
@@ -124,16 +122,18 @@
     "lint-staged": "^16.1.6",
     "next": "^16.2.2",
     "prettier": "^2.8.8",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "replace-in-file": "^8.4.0",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-visualizer": "^6.0.5",
     "sass": "^1.83.1",
     "semantic-release": "^25.0.3",
     "showdown": "^2.1.0",
-    "storybook": "8.4.2",
-    "storybook-addon-pseudo-states": "^4.0.2",
+    "storybook": "^10.4.6",
+    "storybook-addon-pseudo-states": "^10.4.6",
     "stylelint": "^16.13.2",
-    "stylelint-config-recess-order": "^4.2.0",
+    "stylelint-config-recess-order": "^7.7.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-declaration-strict-value": "^1.9.2",
     "ts-jest": "29.1.2",

package/src/community/components/accordion/accordion-item/accordion-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),c=require("react"),q=require("../../../../tedi/components/navigation/hash-trigger/hash-trigger.cjs.js"),C=require("../../card/card.cjs.js"),j=require("../accordion.cjs.js"),t=require("../accordion.module.scss.cjs.js"),d=c.createContext({id:"",disabled:!1}),i=n=>{const{children:a,className:s,id:e,disabled:r=!1,borderType:l,selected:u=!1,border:m="border-default",...f}=n,{onToggle:x,isOpen:b}=c.useContext(j.AccordionContext),_=h.default(t.default.accordion__item,s,{[t.default["accordion__item--disabled"]]:r,[t.default["accordion__item--open"]]:b(e)}),g=u||l==="primary"?"primary-main":m;return o.jsx(d.Provider,{value:{id:e,disabled:r},children:o.jsx(q.HashTrigger,{id:e,onMatch:p=>{r||x(p)},children:o.jsx(C.Card,{"data-name":"accordion-item",border:g,className:_,...f,children:a})})})};exports.AccordionItem=i;exports.AccordionItemContext=d;exports.default=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),c=require("react"),q=require("../../../../tedi/components/navigation/hash-trigger/hash-trigger.cjs.js"),_=require("../../card/card.cjs.js"),C=require("../accordion.cjs.js"),t=require("../accordion.module.scss.cjs.js"),i=c.createContext({id:"",disabled:!1}),j=n=>{const{children:d,className:a,id:e,disabled:r=!1,borderType:s,selected:l=!1,border:u="border-default",...m}=n,{onToggle:f,isOpen:x}=c.useContext(C.AccordionContext),b=h.default(t.default.accordion__item,a,{[t.default["accordion__item--disabled"]]:r,[t.default["accordion__item--open"]]:x(e)}),g=l||s==="primary"?"primary-main":u;return o.jsx(i.Provider,{value:{id:e,disabled:r},children:o.jsx(q.HashTrigger,{id:e,onMatch:p=>{r||f(p)},children:o.jsx(_.Card,{"data-name":"accordion-item",border:g,className:b,...m,children:d})})})};exports.AccordionItem=j;exports.AccordionItemContext=i;

package/src/community/components/accordion/accordion-item/accordion-item.d.ts

@@ -32,5 +32,8 @@ export interface IAccordionItemContext {
     id: string;
 }
 export declare const AccordionItemContext: React.Context<IAccordionItemContext>;
+/**
+ * @deprecated Use `<Accordion.Item>` from the TEDI-Ready Accordion (`@tedi-design-system/react/tedi`) instead.
+ */
 export declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
 export default AccordionItem;

package/src/community/components/accordion/accordion-item/accordion-item.es.js

@@ -1,40 +1,39 @@
 import { jsx as r } from "react/jsx-runtime";
-import x from "../../../../../external/classnames/index.es.js";
-import a from "react";
-import { HashTrigger as h } from "../../../../tedi/components/navigation/hash-trigger/hash-trigger.es.js";
+import h from "../../../../../external/classnames/index.es.js";
+import i from "react";
+import { HashTrigger as u } from "../../../../tedi/components/navigation/hash-trigger/hash-trigger.es.js";
 import { Card as C } from "../../card/card.es.js";
 import { AccordionContext as g } from "../accordion.es.js";
 import t from "../accordion.module.scss.es.js";
-const y = a.createContext({
+const y = i.createContext({
   id: "",
   disabled: !1
-}), j = (i) => {
+}), j = (a) => {
   const {
-    children: d,
-    className: c,
+    children: c,
+    className: d,
     id: e,
     disabled: o = !1,
     borderType: m,
-    selected: s = !1,
-    border: n = "border-default",
+    selected: n = !1,
+    border: s = "border-default",
     ...l
-  } = i, { onToggle: p, isOpen: f } = a.useContext(g), _ = x(t.accordion__item, c, {
+  } = a, { onToggle: p, isOpen: f } = i.useContext(g), _ = h(t.accordion__item, d, {
     [t["accordion__item--disabled"]]: o,
     [t["accordion__item--open"]]: f(e)
-  }), b = s || m === "primary" ? "primary-main" : n;
+  }), b = n || m === "primary" ? "primary-main" : s;
   return /* @__PURE__ */ r(y.Provider, { value: { id: e, disabled: o }, children: /* @__PURE__ */ r(
-    h,
+    u,
     {
       id: e,
-      onMatch: (u) => {
-        o || p(u);
+      onMatch: (x) => {
+        o || p(x);
       },
-      children: /* @__PURE__ */ r(C, { "data-name": "accordion-item", border: b, className: _, ...l, children: d })
+      children: /* @__PURE__ */ r(C, { "data-name": "accordion-item", border: b, className: _, ...l, children: c })
     }
   ) });
 };
 export {
   j as AccordionItem,
-  y as AccordionItemContext,
-  j as default
+  y as AccordionItemContext
 };

package/src/community/components/accordion/accordion-item-content/accordion-item-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),x=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),C=require("../accordion.cjs.js"),g=require("../accordion.module.scss.cjs.js"),b=require("../accordion-item/accordion-item.cjs.js"),f=require("../../../../tedi/providers/printing-provider/printing-provider.cjs.js"),_=require("../../card/card-content/card-content.cjs.js"),r=c=>{const{children:i,className:s,...d}=c,{isOpen:a}=o.useContext(C.AccordionContext),{id:e,disabled:u}=o.useContext(b.AccordionItemContext),l=f.usePrint(),m=q.default(g.default["accordion__item-content"],s),t=n.jsx(_.CardContent,{"data-name":"accordion-item-content",...d,className:m,children:i});return l&&!u?t:n.jsx(x.default,{duration:300,height:a(e)?"auto":0,role:"region","aria-labelledby":e,id:`${e}-content`,children:t})};exports.AccordionItemContent=r;exports.default=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),m=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),q=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),x=require("../accordion.cjs.js"),C=require("../accordion.module.scss.cjs.js"),g=require("../accordion-item/accordion-item.cjs.js"),b=require("../../../../tedi/providers/printing-provider/printing-provider.cjs.js"),f=require("../../card/card-content/card-content.cjs.js"),h=r=>{const{children:c,className:i,...s}=r,{isOpen:d}=o.useContext(x.AccordionContext),{id:e,disabled:a}=o.useContext(g.AccordionItemContext),u=b.usePrint(),l=m.default(C.default["accordion__item-content"],i),t=n.jsx(f.CardContent,{"data-name":"accordion-item-content",...s,className:l,children:c});return u&&!a?t:n.jsx(q.default,{duration:300,height:d(e)?"auto":0,role:"region","aria-labelledby":e,id:`${e}-content`,children:t})};exports.AccordionItemContent=h;

package/src/community/components/accordion/accordion-item-content/accordion-item-content.d.ts

@@ -1,4 +1,7 @@
 import { CardContentProps } from '../../card';
 export type AccordionItemContentProps = CardContentProps;
+/**
+ * @deprecated Use `<Accordion.Item.Content>` from the TEDI-Ready Accordion (`@tedi-design-system/react/tedi`) instead.
+ */
 export declare const AccordionItemContent: (props: AccordionItemContentProps) => JSX.Element;
 export default AccordionItemContent;

package/src/community/components/accordion/accordion-item-content/accordion-item-content.es.js

@@ -1,16 +1,16 @@
-import { jsx as e } from "react/jsx-runtime";
-import f from "../../../../../external/classnames/index.es.js";
-import n from "react";
-import p from "../../../../../external/react-animate-height/dist/esm/index.es.js";
+import { jsx as n } from "react/jsx-runtime";
+import p from "../../../../../external/classnames/index.es.js";
+import e from "react";
+import f from "../../../../../external/react-animate-height/dist/esm/index.es.js";
 import { AccordionContext as u } from "../accordion.es.js";
 import C from "../accordion.module.scss.es.js";
 import { AccordionItemContext as x } from "../accordion-item/accordion-item.es.js";
 import { usePrint as h } from "../../../../tedi/providers/printing-provider/printing-provider.es.js";
 import { CardContent as g } from "../../card/card-content/card-content.es.js";
 const E = (r) => {
-  const { children: i, className: c, ...m } = r, { isOpen: s } = n.useContext(u), { id: t, disabled: a } = n.useContext(x), d = h(), l = f(C["accordion__item-content"], c), o = /* @__PURE__ */ e(g, { "data-name": "accordion-item-content", ...m, className: l, children: i });
-  return d && !a ? o : /* @__PURE__ */ e(
-    p,
+  const { children: i, className: c, ...m } = r, { isOpen: s } = e.useContext(u), { id: t, disabled: a } = e.useContext(x), d = h(), l = p(C["accordion__item-content"], c), o = /* @__PURE__ */ n(g, { "data-name": "accordion-item-content", ...m, className: l, children: i });
+  return d && !a ? o : /* @__PURE__ */ n(
+    f,
     {
       duration: 300,
       height: s(t) ? "auto" : 0,
@@ -22,6 +22,5 @@ const E = (r) => {
   );
 };
 export {
-  E as AccordionItemContent,
-  E as default
+  E as AccordionItemContent
 };

package/src/community/components/accordion/accordion-item-header/accordion-item-header.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),O=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),x=require("../../../../tedi/components/base/typography/heading/heading.cjs.js"),y=require("../../../../tedi/components/base/typography/text/text.cjs.js"),E=require("../../toggle-open/toggle-open.cjs.js"),S=require("../accordion.cjs.js"),f=require("../accordion.module.scss.cjs.js"),N=require("../accordion-item/accordion-item.cjs.js"),R=require("../../card/card-header/card-header.cjs.js"),B=require("../../../../tedi/components/layout/grid/row.cjs.js"),v=require("../../../../tedi/components/layout/grid/col.cjs.js"),b=q=>{var g;const{children:c,className:C,background:s="white",openText:u,closeText:l,...w}=q,[I,j]=n.useState(!1),{onToggle:H,isOpen:o}=n.useContext(S.AccordionContext),{id:r,disabled:i}=n.useContext(N.AccordionItemContext),m=()=>{i||H(r)},T=e=>{(e.code==="Enter"||e.code==="Space")&&!e.repeat&&(e.preventDefault(),m())},p=e=>{i||j(e)},A=O.default(f.default["accordion__item-header"],C),a=((g=n.Children.toArray(c))==null?void 0:g.length)===1?n.Children.toArray(c).find(e=>n.isValidElement(e)&&(e.type===x.Heading||e.type===y.Text&&["h1","h2","h3","h4","h5","h6"].includes(e.props.element))):void 0,d=n.useMemo(()=>{switch(s){case"primary":return o(r)?"primary-active":"primary-main";case"white/primary":return o(r)?"primary-active":"white";case"muted/primary":return o(r)?"primary-active":"bg-muted";default:return s}},[s,r,o]),_=d==="white"||d==="bg-muted"?void 0:"inverted",h=e=>t.jsx(R.CardHeader,{"data-name":"accordion-item-header",role:"button",tabIndex:i?-1:0,"aria-disabled":i,className:A,onClick:m,onKeyDown:T,onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1),"aria-expanded":o(r),"aria-controls":`${r}-content`,background:d,...w,children:u&&l&&!i?t.jsxs(B.Row,{justifyContent:"between",alignItems:"center",children:[t.jsx(v.Col,{children:e}),t.jsx(v.Col,{width:"auto",children:t.jsx(E.ToggleOpen,{openText:u,closeText:l,isActive:I,isOpen:o(r),color:_,visualType:"link","aria-hidden":!0,tabIndex:-1})})]}):e});return a?(()=>{const{element:e,children:M,...k}=(a==null?void 0:a.props)??{};return t.jsx(x.Heading,{element:e,modifiers:"normal",className:f.default["accordion__item-wrapping-heading"],children:h(t.jsx(y.Text,{element:"span",...k,children:M}))})})():h(c)};exports.AccordionItemHeader=b;exports.default=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),O=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),x=require("../../../../tedi/components/base/typography/heading/heading.cjs.js"),y=require("../../../../tedi/components/base/typography/text/text.cjs.js"),_=require("../../toggle-open/toggle-open.cjs.js"),E=require("../accordion.cjs.js"),f=require("../accordion.module.scss.cjs.js"),S=require("../accordion-item/accordion-item.cjs.js"),N=require("../../card/card-header/card-header.cjs.js"),R=require("../../../../tedi/components/layout/grid/row.cjs.js"),v=require("../../../../tedi/components/layout/grid/col.cjs.js"),B=b=>{var g;const{children:c,className:q,background:s="white",openText:u,closeText:l,...C}=b,[w,I]=n.useState(!1),{onToggle:j,isOpen:o}=n.useContext(E.AccordionContext),{id:r,disabled:i}=n.useContext(S.AccordionItemContext),m=()=>{i||j(r)},H=e=>{(e.code==="Enter"||e.code==="Space")&&!e.repeat&&(e.preventDefault(),m())},p=e=>{i||I(e)},T=O.default(f.default["accordion__item-header"],q),a=((g=n.Children.toArray(c))==null?void 0:g.length)===1?n.Children.toArray(c).find(e=>n.isValidElement(e)&&(e.type===x.Heading||e.type===y.Text&&["h1","h2","h3","h4","h5","h6"].includes(e.props.element))):void 0,d=n.useMemo(()=>{switch(s){case"primary":return o(r)?"primary-active":"primary-main";case"white/primary":return o(r)?"primary-active":"white";case"muted/primary":return o(r)?"primary-active":"bg-muted";default:return s}},[s,r,o]),A=d==="white"||d==="bg-muted"?void 0:"inverted",h=e=>t.jsx(N.CardHeader,{"data-name":"accordion-item-header",role:"button",tabIndex:i?-1:0,"aria-disabled":i,className:T,onClick:m,onKeyDown:H,onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1),"aria-expanded":o(r),"aria-controls":`${r}-content`,background:d,...C,children:u&&l&&!i?t.jsxs(R.Row,{justifyContent:"between",alignItems:"center",children:[t.jsx(v.Col,{children:e}),t.jsx(v.Col,{width:"auto",children:t.jsx(_.ToggleOpen,{openText:u,closeText:l,isActive:w,isOpen:o(r),color:A,visualType:"link","aria-hidden":!0,tabIndex:-1})})]}):e});return a?(()=>{const{element:e,children:k,...M}=(a==null?void 0:a.props)??{};return t.jsx(x.Heading,{element:e,modifiers:"normal",className:f.default["accordion__item-wrapping-heading"],children:h(t.jsx(y.Text,{element:"span",...M,children:k}))})})():h(c)};exports.AccordionItemHeader=B;

package/src/community/components/accordion/accordion-item-header/accordion-item-header.d.ts

@@ -15,5 +15,8 @@ export interface AccordionItemHeaderProps extends Omit<CardHeaderProps, 'id' | '
      */
     background?: 'primary' | 'white/primary' | 'muted/primary' | CardHeaderBackground;
 }
+/**
+ * @deprecated Use `<Accordion.Item.Header>` from the TEDI-Ready Accordion (`@tedi-design-system/react/tedi`) instead.
+ */
 export declare const AccordionItemHeader: (props: AccordionItemHeaderProps) => JSX.Element;
 export default AccordionItemHeader;

package/src/community/components/accordion/accordion-item-header/accordion-item-header.es.js

@@ -73,6 +73,5 @@ const X = (b) => {
   })() : h(s);
 };
 export {
-  X as AccordionItemHeader,
-  X as default
+  X as AccordionItemHeader
 };

package/src/community/components/accordion/accordion.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),v=require("../../../../external/classnames/index.cjs.js"),i=require("react"),A=require("./accordion.module.scss.cjs.js"),C=require("../../../tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js"),s=i.createContext({isOpen:()=>!0,onToggle:()=>null}),u=c=>{const{children:l,className:a,openItem:t,gutter:d=.5,onToggleItem:n,defaultOpenItem:f=[],...m}=c,g=t||f,[p,x]=i.useState(g),I=(e=c.openItem)=>!!n&&typeof e<"u",O=e=>{if(n)return n(e);I(t)||x(o=>o.includes(e)?o.filter(S=>S!==e):[...o,e])},j=()=>n&&typeof t<"u"?t:p,q=e=>j().includes(e);return r.jsx(s.Provider,{value:{isOpen:q,onToggle:O},children:r.jsx("div",{"data-name":"accordion",...m,className:v.default(A.default.accordion,a),children:r.jsx(C.VerticalSpacing,{size:d,children:l})})})};exports.Accordion=u;exports.AccordionContext=s;exports.default=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),S=require("../../../../external/classnames/index.cjs.js"),i=require("react"),y=require("./accordion.module.scss.cjs.js"),A=require("../../../tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js"),s=i.createContext({isOpen:()=>!0,onToggle:()=>null}),C=c=>{const{children:u,className:l,openItem:n,gutter:a=.5,onToggleItem:t,defaultOpenItem:d=[],...m}=c,f=n||d,[g,p]=i.useState(f),x=(e=c.openItem)=>!!t&&typeof e<"u",I=e=>{if(t)return t(e);x(n)||p(o=>o.includes(e)?o.filter(q=>q!==e):[...o,e])},O=()=>t&&typeof n<"u"?n:g,j=e=>O().includes(e);return r.jsx(s.Provider,{value:{isOpen:j,onToggle:I},children:r.jsx("div",{"data-name":"accordion",...m,className:S.default(y.default.accordion,l),children:r.jsx(A.VerticalSpacing,{size:a,children:u})})})};exports.Accordion=C;exports.AccordionContext=s;

package/src/community/components/accordion/accordion.d.ts

@@ -34,5 +34,8 @@ export interface IAccordionContext {
     onToggle: (id: string) => void;
 }
 export declare const AccordionContext: React.Context<IAccordionContext>;
+/**
+ * @deprecated Use the TEDI-Ready `Accordion` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Accordion: (props: AccordionProps) => JSX.Element;
 export default Accordion;

package/src/community/components/accordion/accordion.es.js

@@ -7,15 +7,14 @@ const T = c.createContext({
   isOpen: () => !0,
   onToggle: () => null
 }), v = (s) => {
-  const { children: i, className: l, openItem: t, gutter: a = 0.5, onToggleItem: n, defaultOpenItem: m = [], ...u } = s, d = t || m, [f, p] = c.useState(d), g = (e = s.openItem) => !!n && typeof e < "u", I = (e) => {
+  const { children: i, className: l, openItem: t, gutter: m = 0.5, onToggleItem: n, defaultOpenItem: a = [], ...u } = s, d = t || a, [f, p] = c.useState(d), g = (e = s.openItem) => !!n && typeof e < "u", I = (e) => {
     if (n)
       return n(e);
     g(t) || p((o) => o.includes(e) ? o.filter((h) => h !== e) : [...o, e]);
   }, O = () => n && typeof t < "u" ? t : f, x = (e) => O().includes(e);
-  return /* @__PURE__ */ r(T.Provider, { value: { isOpen: x, onToggle: I }, children: /* @__PURE__ */ r("div", { "data-name": "accordion", ...u, className: y(C.accordion, l), children: /* @__PURE__ */ r(N, { size: a, children: i }) }) });
+  return /* @__PURE__ */ r(T.Provider, { value: { isOpen: x, onToggle: I }, children: /* @__PURE__ */ r("div", { "data-name": "accordion", ...u, className: y(C.accordion, l), children: /* @__PURE__ */ r(N, { size: m, children: i }) }) });
 };
 export {
   v as Accordion,
-  T as AccordionContext,
-  v as default
+  T as AccordionContext
 };

package/src/community/components/card/card-content/card-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),p=require("../card.module.scss.cjs.js"),k=require("../card-context.cjs.js"),m=require("../utility.cjs.js"),b=require("../../../helpers/background-colors/background-colors.cjs.js"),q=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),t=r=>{const{padding:o,background:a}=C.useContext(k.CardContext),{getCurrentBreakpointProps:d}=q.useBreakpointProps(r.defaultServerBreakpoint),{children:s,className:u,padding:e,background:n,...c}=d(r,{padding:o,background:a}),i=g.default(p.default.card__content,{[b.getBackgroundColorClass(n)]:n},u);return l.jsx("div",{"data-name":"card-content","data-padding":typeof e=="number"?`${e}rem`:void 0,style:m.getPaddingCssVariables(e),...c,className:i,children:s})};t.displayName="CardContent";exports.CardContent=t;exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),p=require("../card.module.scss.cjs.js"),k=require("../card-context.cjs.js"),m=require("../utility.cjs.js"),b=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),q=require("../../../helpers/background-colors/background-colors.cjs.js"),t=r=>{const{padding:o,background:a}=C.useContext(k.CardContext),{getCurrentBreakpointProps:d}=b.useBreakpointProps(r.defaultServerBreakpoint),{children:s,className:u,padding:e,background:n,...c}=d(r,{padding:o,background:a}),i=g.default(p.default.card__content,{[q.getBackgroundColorClass(n)]:n},u);return l.jsx("div",{"data-name":"card-content","data-padding":typeof e=="number"?`${e}rem`:void 0,style:m.getPaddingCssVariables(e),...c,className:i,children:s})};t.displayName="CardContent";exports.CardContent=t;exports.default=t;

package/src/community/components/card/card-content/card-content.es.js

@@ -4,13 +4,13 @@ import g from "react";
 import l from "../card.module.scss.es.js";
 import { CardContext as u } from "../card-context.es.js";
 import { getPaddingCssVariables as C } from "../utility.es.js";
-import { getBackgroundColorClass as f } from "../../../helpers/background-colors/background-colors.es.js";
-import { useBreakpointProps as k } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { getBackgroundColorClass as k } from "../../../helpers/background-colors/background-colors.es.js";
 const B = (o) => {
-  const { padding: a, background: e } = g.useContext(u), { getCurrentBreakpointProps: n } = k(o.defaultServerBreakpoint), { children: d, className: s, padding: t, background: r, ...m } = n(o, {
+  const { padding: a, background: e } = g.useContext(u), { getCurrentBreakpointProps: n } = f(o.defaultServerBreakpoint), { children: d, className: s, padding: t, background: r, ...m } = n(o, {
     padding: a,
     background: e
-  }), i = p(l.card__content, { [f(r)]: r }, s);
+  }), i = p(l.card__content, { [k(r)]: r }, s);
   return /* @__PURE__ */ c(
     "div",
     {

package/src/community/components/card/card-header/card-header.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),C=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),t=require("../card.module.scss.cjs.js"),m=require("../card-context.cjs.js"),q=require("../utility.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),e=r=>{const{variant:a,...d}=r,{getCurrentBreakpointProps:n}=P.useBreakpointProps(r.defaultServerBreakpoint),{padding:s}=f.useContext(m.CardContext),{children:o,className:i,background:u,padding:c,...l}=n(d,{background:a??"default",padding:s}),g=C.default(t.default.card__header,t.default[`card__header--${u}`],i);return p.jsx("div",{"data-name":"card-header",style:q.getPaddingCssVariables(c),...l,className:g,children:o})};e.displayName="CardHeader";exports.CardHeader=e;exports.default=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),C=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),r=require("../card.module.scss.cjs.js"),m=require("../card-context.cjs.js"),q=require("../utility.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),t=e=>{const{variant:a,...d}=e,{getCurrentBreakpointProps:n}=P.useBreakpointProps(e.defaultServerBreakpoint),{padding:s}=f.useContext(m.CardContext),{children:o,className:i,background:c,padding:u,...l}=n(d,{background:a??"default",padding:s}),g=C.default(r.default.card__header,r.default[`card__header--${c}`],i);return p.jsx("div",{"data-name":"card-header",style:q.getPaddingCssVariables(u),...l,className:g,children:o})};t.displayName="CardHeader";exports.CardHeader=t;

package/src/community/components/card/card-header/card-header.es.js

@@ -1,12 +1,12 @@
 import { jsx as f } from "react/jsx-runtime";
 import l from "../../../../../external/classnames/index.es.js";
-import u from "react";
+import g from "react";
 import a from "../card.module.scss.es.js";
-import { CardContext as g } from "../card-context.es.js";
+import { CardContext as u } from "../card-context.es.js";
 import { getPaddingCssVariables as C } from "../utility.es.js";
 import { useBreakpointProps as _ } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 const k = (r) => {
-  const { variant: e, ...t } = r, { getCurrentBreakpointProps: o } = _(r.defaultServerBreakpoint), { padding: d } = u.useContext(g), { children: s, className: n, background: i, padding: m, ...c } = o(
+  const { variant: e, ...t } = r, { getCurrentBreakpointProps: o } = _(r.defaultServerBreakpoint), { padding: d } = g.useContext(u), { children: s, className: n, background: i, padding: m, ...c } = o(
     t,
     {
       background: e ?? "default",
@@ -18,6 +18,5 @@ const k = (r) => {
 };
 k.displayName = "CardHeader";
 export {
-  k as CardHeader,
-  k as default
+  k as CardHeader
 };

package/src/community/components/card/card-notification/card-notification.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),u=require("../../../../tedi/components/notifications/alert/alert.cjs.js"),l=require("../card-content/card-content.cjs.js"),e=require("./card-notification.module.scss.cjs.js"),a=i=>{const{children:n,padding:r,className:o,...c}=i,d=s.default(e.default.card__notification,o);return t.jsx(l.CardContent,{"data-name":"card-notification",padding:r,className:e.default["card__notification-content"],children:t.jsx(u.Alert,{className:d,...c,children:n})})};exports.CardNotification=a;exports.default=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("../../../../../external/classnames/index.cjs.js"),s=require("../../../../tedi/components/notifications/alert/alert.cjs.js"),l=require("../card-content/card-content.cjs.js"),e=require("./card-notification.module.scss.cjs.js"),u=n=>{const{children:i,padding:a,className:r,...o}=n,c=d.default(e.default.card__notification,r);return t.jsx(l.CardContent,{"data-name":"card-notification",padding:a,className:e.default["card__notification-content"],children:t.jsx(s.Alert,{className:c,...o,children:i})})};exports.CardNotification=u;

package/src/community/components/card/card-notification/card-notification.es.js

@@ -1,13 +1,12 @@
 import { jsx as t } from "react/jsx-runtime";
-import e from "../../../../../external/classnames/index.es.js";
-import { Alert as m } from "../../../../tedi/components/notifications/alert/alert.es.js";
+import s from "../../../../../external/classnames/index.es.js";
+import { Alert as e } from "../../../../tedi/components/notifications/alert/alert.es.js";
 import { CardContent as d } from "../card-content/card-content.es.js";
 import o from "./card-notification.module.scss.es.js";
-const C = (a) => {
-  const { children: r, padding: i, className: n, ...c } = a, s = e(o.card__notification, n);
-  return /* @__PURE__ */ t(d, { "data-name": "card-notification", padding: i, className: o["card__notification-content"], children: /* @__PURE__ */ t(m, { className: s, ...c, children: r }) });
+const C = (r) => {
+  const { children: a, padding: i, className: n, ...c } = r, m = s(o.card__notification, n);
+  return /* @__PURE__ */ t(d, { "data-name": "card-notification", padding: i, className: o["card__notification-content"], children: /* @__PURE__ */ t(e, { className: m, ...c, children: a }) });
 };
 export {
-  C as CardNotification,
-  C as default
+  C as CardNotification
 };

package/src/community/components/dropdown/dropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),o=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),K=require("../../../../external/classnames/index.cjs.js"),d=require("react"),T=require("../button/button.cjs.js"),a=require("./dropdown.module.scss.cjs.js"),H=require("../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),D=require("../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),$=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),_=c=>{const{getLabel:v}=$.useLabels(),{button:F,items:u,onItemClick:l,closeMenuOnClick:h=!0,...q}=c,{initialFocus:j=-1,modal:f=!1,...p}=c.focusManager??{},{visuallyHiddenDismiss:M=f?v("close"):!1}=p??{},R=o.useFloatingNodeId(),g=d.useRef([]),[b,i]=d.useState(!1),[x,y]=d.useState(null),{x:C,y:N,strategy:O,refs:w,placement:P,context:r}=o.useFloating({placement:"bottom-start",nodeId:R,open:b,onOpenChange:i,middleware:[D.flip(),D.shift()],whileElementsMounted:H.autoUpdate}),S=u.findIndex(e=>e.isActive),{getReferenceProps:L,getFloatingProps:U,getItemProps:A}=o.useInteractions([o.useClick(r),o.useListNavigation(r,{listRef:g,activeIndex:x,selectedIndex:S,onNavigate:y,loop:!0}),o.useRole(r,{role:"listbox"}),o.useDismiss(r)]),E=()=>{const e=s.jsx(o.FloatingFocusManager,{context:r,initialFocus:j,visuallyHiddenDismiss:M,modal:f,...p,children:s.jsx("div",{...U({ref:w.setFloating,style:{position:O,left:C??0,top:N??0},className:a.default.dropdown,onKeyDown(t){t.key==="Tab"&&i(!1)}}),"data-placement":P,children:u.map((t,n)=>B(t,n))})});return b?e:null},k=e=>K.default(a.default.dropdown__item,{[a.default["dropdown__item--active"]]:e.isActive,[a.default["dropdown__item--disabled"]]:e.isDisabled}),I=(e,t,n)=>{var m;l==null||l(e,t,n),(m=e==null?void 0:e.onClick)==null||m.call(e,n),h&&i(!1)},B=(e,t)=>s.jsx("button",{...A({disabled:e.isDisabled,tabIndex:x===t?0:-1,role:"option",className:k(e),onClick:n=>I(e,t,n),onKeyDown(n){n.key==="Enter"&&I(e,t,n)},ref(n){g.current[t]=n}}),children:e.children},t);return s.jsxs(s.Fragment,{children:[s.jsx(T.Button,{"data-name":"dropdown",...q,...F,...L({ref:w.setReference,tabIndex:0})}),s.jsx(o.FloatingPortal,{children:E()})]})};exports.Dropdown=_;exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),o=require("../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),K=require("../../../../external/classnames/index.cjs.js"),d=require("react"),T=require("../button/button.cjs.js"),a=require("./dropdown.module.scss.cjs.js"),H=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),$=require("../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),D=require("../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),_=c=>{const{getLabel:v}=H.useLabels(),{button:F,items:u,onItemClick:l,closeMenuOnClick:h=!0,...q}=c,{initialFocus:j=-1,modal:f=!1,...p}=c.focusManager??{},{visuallyHiddenDismiss:M=f?v("close"):!1}=p??{},R=o.useFloatingNodeId(),g=d.useRef([]),[b,i]=d.useState(!1),[x,y]=d.useState(null),{x:C,y:N,strategy:O,refs:w,placement:P,context:r}=o.useFloating({placement:"bottom-start",nodeId:R,open:b,onOpenChange:i,middleware:[D.flip(),D.shift()],whileElementsMounted:$.autoUpdate}),S=u.findIndex(e=>e.isActive),{getReferenceProps:L,getFloatingProps:U,getItemProps:A}=o.useInteractions([o.useClick(r),o.useListNavigation(r,{listRef:g,activeIndex:x,selectedIndex:S,onNavigate:y,loop:!0}),o.useRole(r,{role:"listbox"}),o.useDismiss(r)]),E=()=>{const e=s.jsx(o.FloatingFocusManager,{context:r,initialFocus:j,visuallyHiddenDismiss:M,modal:f,...p,children:s.jsx("div",{...U({ref:w.setFloating,style:{position:O,left:C??0,top:N??0},className:a.default.dropdown,onKeyDown(t){t.key==="Tab"&&i(!1)}}),"data-placement":P,children:u.map((t,n)=>B(t,n))})});return b?e:null},k=e=>K.default(a.default.dropdown__item,{[a.default["dropdown__item--active"]]:e.isActive,[a.default["dropdown__item--disabled"]]:e.isDisabled}),I=(e,t,n)=>{var m;l==null||l(e,t,n),(m=e==null?void 0:e.onClick)==null||m.call(e,n),h&&i(!1)},B=(e,t)=>s.jsx("button",{...A({disabled:e.isDisabled,tabIndex:x===t?0:-1,role:"option",className:k(e),onClick:n=>I(e,t,n),onKeyDown(n){n.key==="Enter"&&I(e,t,n)},ref(n){g.current[t]=n}}),children:e.children},t);return s.jsxs(s.Fragment,{children:[s.jsx(T.Button,{"data-name":"dropdown",...q,...F,...L({ref:w.setReference,tabIndex:0})}),s.jsx(o.FloatingPortal,{children:E()})]})};exports.Dropdown=_;exports.default=_;

package/src/community/components/dropdown/dropdown.es.js

@@ -4,17 +4,17 @@ import W from "../../../../external/classnames/index.es.js";
 import i from "react";
 import { Button as X } from "../button/button.es.js";
 import r from "./dropdown.module.scss.es.js";
-import { autoUpdate as Y } from "../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { flip as Z, shift as $ } from "../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-import { useLabels as ee } from "../../../tedi/providers/label-provider/use-labels.es.js";
+import { useLabels as Y } from "../../../tedi/providers/label-provider/use-labels.es.js";
+import { autoUpdate as Z } from "../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { flip as $, shift as ee } from "../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
 const ce = (d) => {
-  const { getLabel: x } = ee(), { button: D, items: c, onItemClick: a, closeMenuOnClick: F = !0, ...h } = d, { initialFocus: v = -1, modal: p = !1, ...f } = d.focusManager ?? {}, { visuallyHiddenDismiss: _ = p ? x("close") : !1 } = f ?? {}, R = H(), u = i.useRef([]), [m, l] = i.useState(!1), [g, M] = i.useState(null), { x: N, y, strategy: C, refs: I, placement: O, context: n } = T({
+  const { getLabel: x } = Y(), { button: D, items: c, onItemClick: a, closeMenuOnClick: F = !0, ...h } = d, { initialFocus: v = -1, modal: p = !1, ...f } = d.focusManager ?? {}, { visuallyHiddenDismiss: _ = p ? x("close") : !1 } = f ?? {}, R = H(), u = i.useRef([]), [m, l] = i.useState(!1), [g, M] = i.useState(null), { x: N, y, strategy: C, refs: I, placement: O, context: n } = T({
     placement: "bottom-start",
     nodeId: R,
     open: m,
     onOpenChange: l,
-    middleware: [Z(), $()],
-    whileElementsMounted: Y
+    middleware: [$(), ee()],
+    whileElementsMounted: Z
   }), P = c.findIndex((e) => e.isActive), { getReferenceProps: A, getFloatingProps: E, getItemProps: L } = U([
     q(n),
     z(n, {

package/src/community/components/feedback/feedback.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("../../../../external/classnames/index.cjs.js"),v=require("../button/button.cjs.js"),M=require("../modal/modal-provider.cjs.js"),_=require("../modal/modal-trigger.cjs.js"),d=require("./feedback.module.scss.cjs.js"),y=require("../modal/modal.cjs.js"),t=({children:i,triggerProps:l,providerProps:s,modalProps:o,fixedTrigger:c="desktop",className:n,...u})=>{const{iconLeft:g={name:"star",filled:!0},size:b,id:r="feedback-trigger",className:f,children:m,...k}=l??{},{...h}=s??{},{position:j="right","aria-labelledby":q=r,...x}=o??{};return e.jsx("div",{className:a.default(n,d.default[`feedback--${c}`]),...u,children:e.jsxs(M.ModalProvider,{...h,children:[e.jsx(_.ModalTrigger,{children:e.jsx(v.Button,{"data-name":"feedback-trigger",...k,id:r,className:a.default(d.default.feedback__trigger,f),size:b,iconLeft:g,children:m})}),e.jsx(y.Modal,{"data-name":"feedback-modal",...x,"aria-labelledby":q,position:j,children:i})]})})};exports.Feedback=t;exports.default=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../../external/classnames/index.cjs.js"),x=require("../button/button.cjs.js"),v=require("../modal/modal-provider.cjs.js"),y=require("../modal/modal-trigger.cjs.js"),d=require("./feedback.module.scss.cjs.js"),M=require("../modal/modal.cjs.js"),N=({children:t,triggerProps:i,providerProps:l,modalProps:s,fixedTrigger:o="desktop",className:c,...n})=>{const{iconLeft:u={name:"star",filled:!0},size:g,id:r="feedback-trigger",className:b,children:f,...m}=i??{},{...k}=l??{},{position:h="right","aria-labelledby":j=r,...q}=s??{};return e.jsx("div",{className:a.default(c,d.default[`feedback--${o}`]),...n,children:e.jsxs(v.ModalProvider,{...k,children:[e.jsx(y.ModalTrigger,{children:e.jsx(x.Button,{"data-name":"feedback-trigger",...m,id:r,className:a.default(d.default.feedback__trigger,b),size:g,iconLeft:u,children:f})}),e.jsx(M.Modal,{"data-name":"feedback-modal",...q,"aria-labelledby":j,position:h,children:t})]})})};exports.Feedback=N;

package/src/community/components/feedback/feedback.es.js

@@ -1,6 +1,6 @@
-import { jsx as e, jsxs as y } from "react/jsx-runtime";
+import { jsx as e, jsxs as M } from "react/jsx-runtime";
 import a from "../../../../external/classnames/index.es.js";
-import { Button as M } from "../button/button.es.js";
+import { Button as u } from "../button/button.es.js";
 import { ModalProvider as v } from "../modal/modal-provider.es.js";
 import { ModalTrigger as x } from "../modal/modal-trigger.es.js";
 import i from "./feedback.module.scss.es.js";
@@ -21,10 +21,10 @@ const I = ({
     className: g,
     children: b,
     ...p
-  } = d ?? {}, { ...k } = o ?? {}, { position: h = "right", "aria-labelledby": N = r, ...u } = l ?? {};
-  return /* @__PURE__ */ e("div", { className: a(m, i[`feedback--${s}`]), ...c, children: /* @__PURE__ */ y(v, { ...k, children: [
+  } = d ?? {}, { ...k } = o ?? {}, { position: h = "right", "aria-labelledby": N = r, ...y } = l ?? {};
+  return /* @__PURE__ */ e("div", { className: a(m, i[`feedback--${s}`]), ...c, children: /* @__PURE__ */ M(v, { ...k, children: [
     /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(
-      M,
+      u,
       {
         "data-name": "feedback-trigger",
         ...p,
@@ -35,10 +35,9 @@ const I = ({
         children: b
       }
     ) }),
-    /* @__PURE__ */ e(j, { "data-name": "feedback-modal", ...u, "aria-labelledby": N, position: h, children: t })
+    /* @__PURE__ */ e(j, { "data-name": "feedback-modal", ...y, "aria-labelledby": N, position: h, children: t })
   ] }) });
 };
 export {
-  I as Feedback,
-  I as default
+  I as Feedback
 };

package/src/community/components/form/choice-group/choice-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),u=require("react"),G=require("../../../../../external/classnames/index.cjs.js"),Q=require("../../../../tedi/components/form/feedback-text/feedback-text.cjs.js"),U=require("../../../../tedi/components/form/form-label/form-label.cjs.js"),V=require("../check/check.cjs.js"),q=require("./choice-group.module.scss.cjs.js"),Z=require("./choice-group-context.cjs.js"),ee=require("./components/choice-group-check/choice-group-check.cjs.js"),te=require("./components/choice-group-radio/choice-group-radio.cjs.js"),ne=require("./components/filter-item/filter-item.cjs.js"),R=require("./components/light-item/light-item.cjs.js"),re=require("./components/selector-item/selector-item.cjs.js"),oe=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),ie=require("../../../../tedi/components/layout/grid/row.cjs.js"),w=L=>{const{getLabel:g}=oe.useLabels(),{id:p,className:E,label:T,required:H,helper:a,items:r,type:I="default",direction:S=I==="default"?"column":"row",rowProps:x,name:_,inputType:h="radio",value:M,defaultValue:v,onChange:i,hideLabel:B,indeterminateCheck:l,indeterminateCheckProps:k={},...$}=L,{indented:le,...O}=k,W=(k==null?void 0:k.indented)??!0,N=a?(a==null?void 0:a.id)??`${p}-helper`:void 0,A=l&&I==="default"&&h==="checkbox",[X,F]=u.useState(()=>v||(h==="checkbox"?[]:null)),y=(e=L.value)=>!!i&&typeof e<"u",n=y(M)?M:X,C=u.useMemo(()=>(n==null?void 0:n.length)===0,[n==null?void 0:n.length]),s=u.useMemo(()=>{var e;return(n==null?void 0:n.length)===((e=r==null?void 0:r.filter(c=>!c.disabled))==null?void 0:e.length)},[n==null?void 0:n.length,r]),Y=u.useMemo(()=>!C&&!s,[s,C]),z=u.useMemo(()=>{const e=s?"all":C?"none":"some";return typeof l=="string"?l:typeof l=="function"?l(e):l?g(e==="all"?"table.filter.remove-all":"table.filter.select-all"):""},[g,l,s,C]),D={name:_,inputType:h,onChange:(e,c)=>{let t=n;h==="checkbox"&&t?Array.isArray(t)?t=c?[...t,e]:t.filter(d=>d!==e):t=c?[t,e]:[t].filter(d=>d!==e):t=e,y()||F(Array.isArray(t)?[...t]:t),i==null||i(t)},currentValue:n};let f,m,b=R.LightItem;switch(I){case"default":f=2,m=1,b=h==="checkbox"?ee.ChoiceGroupCheck:te.ChoiceGroupRadio;break;case"selector":f=0,m=0,b=re.SelectorItem;break;case"filter":f=2,m=2,b=ne.FilterItem;break;case"light":f=1,m=1,b=R.LightItem;break}const J=G.default(q.default["choice-group"],E),K=G.default(q.default["choice-group__inner"],x==null?void 0:x.className,{[q.default["choice-group__inner--indented"]]:A&&W}),P=(e,c)=>{var d;const t=s?[]:(d=r==null?void 0:r.filter(j=>!j.disabled))==null?void 0:d.map(j=>j.value);y()||F([...t]),i==null||i(t)};return o.jsx(Z.ChoiceGroupContext.Provider,{value:D,children:o.jsxs("fieldset",{"data-name":"choice-group",...$,className:J,id:p,name:_,"aria-describedby":N,children:[o.jsx("legend",{children:o.jsx(U.FormLabel,{id:p,label:T,required:H,hideLabel:B,renderWithoutLabel:!0})}),r!=null&&r.length?o.jsxs(o.Fragment,{children:[A&&o.jsx(V.Check,{id:`${p}-indeterminate`,value:"indeterminate",name:"indeterminate",...O,label:z,indeterminate:Y,checked:s,onChange:P}),o.jsx(ie.Row,{direction:S,gutterX:f,gutterY:m,...x,className:K,children:r.map((e,c)=>u.createElement(b,{...e,className:G.default(e.className,{[q.default["choice-group__item--extra-padding"]]:e.extraContent&&c!==r.length-1}),direction:S,key:e.id}))})]}):o.jsx("p",{children:g("table.filter.no-options")}),a&&o.jsx(Q.FeedbackText,{...a,id:N})]})})};exports.ChoiceGroup=w;exports.default=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("react"),G=require("../../../../../external/classnames/index.cjs.js"),P=require("../../../../tedi/components/form/feedback-text/feedback-text.cjs.js"),Q=require("../../../../tedi/components/form/form-label/form-label.cjs.js"),U=require("../check/check.cjs.js"),q=require("./choice-group.module.scss.cjs.js"),V=require("./choice-group-context.cjs.js"),Z=require("./components/choice-group-check/choice-group-check.cjs.js"),ee=require("./components/choice-group-radio/choice-group-radio.cjs.js"),te=require("./components/filter-item/filter-item.cjs.js"),R=require("./components/light-item/light-item.cjs.js"),ne=require("./components/selector-item/selector-item.cjs.js"),re=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),oe=require("../../../../tedi/components/layout/grid/row.cjs.js"),ie=L=>{const{getLabel:g}=re.useLabels(),{id:p,className:w,label:E,required:T,helper:a,items:r,type:I="default",direction:S=I==="default"?"column":"row",rowProps:x,name:M,inputType:h="radio",value:N,defaultValue:_,onChange:i,hideLabel:H,indeterminateCheck:l,indeterminateCheckProps:k={},...B}=L,{indented:le,...$}=k,O=(k==null?void 0:k.indented)??!0,v=a?(a==null?void 0:a.id)??`${p}-helper`:void 0,A=l&&I==="default"&&h==="checkbox",[W,F]=u.useState(()=>_||(h==="checkbox"?[]:null)),y=(e=L.value)=>!!i&&typeof e<"u",n=y(N)?N:W,C=u.useMemo(()=>(n==null?void 0:n.length)===0,[n==null?void 0:n.length]),s=u.useMemo(()=>{var e;return(n==null?void 0:n.length)===((e=r==null?void 0:r.filter(c=>!c.disabled))==null?void 0:e.length)},[n==null?void 0:n.length,r]),X=u.useMemo(()=>!C&&!s,[s,C]),Y=u.useMemo(()=>{const e=s?"all":C?"none":"some";return typeof l=="string"?l:typeof l=="function"?l(e):l?g(e==="all"?"table.filter.remove-all":"table.filter.select-all"):""},[g,l,s,C]),z={name:M,inputType:h,onChange:(e,c)=>{let t=n;h==="checkbox"&&t?Array.isArray(t)?t=c?[...t,e]:t.filter(d=>d!==e):t=c?[t,e]:[t].filter(d=>d!==e):t=e,y()||F(Array.isArray(t)?[...t]:t),i==null||i(t)},currentValue:n};let f,m,b=R.LightItem;switch(I){case"default":f=2,m=1,b=h==="checkbox"?Z.ChoiceGroupCheck:ee.ChoiceGroupRadio;break;case"selector":f=0,m=0,b=ne.SelectorItem;break;case"filter":f=2,m=2,b=te.FilterItem;break;case"light":f=1,m=1,b=R.LightItem;break}const D=G.default(q.default["choice-group"],w),J=G.default(q.default["choice-group__inner"],x==null?void 0:x.className,{[q.default["choice-group__inner--indented"]]:A&&O}),K=(e,c)=>{var d;const t=s?[]:(d=r==null?void 0:r.filter(j=>!j.disabled))==null?void 0:d.map(j=>j.value);y()||F([...t]),i==null||i(t)};return o.jsx(V.ChoiceGroupContext.Provider,{value:z,children:o.jsxs("fieldset",{"data-name":"choice-group",...B,className:D,id:p,name:M,"aria-describedby":v,children:[o.jsx("legend",{children:o.jsx(Q.FormLabel,{id:p,label:E,required:T,hideLabel:H,renderWithoutLabel:!0})}),r!=null&&r.length?o.jsxs(o.Fragment,{children:[A&&o.jsx(U.Check,{id:`${p}-indeterminate`,value:"indeterminate",name:"indeterminate",...$,label:Y,indeterminate:X,checked:s,onChange:K}),o.jsx(oe.Row,{direction:S,gutterX:f,gutterY:m,...x,className:J,children:r.map((e,c)=>u.createElement(b,{...e,className:G.default(e.className,{[q.default["choice-group__item--extra-padding"]]:e.extraContent&&c!==r.length-1}),direction:S,key:e.id}))})]}):o.jsx("p",{children:g("table.filter.no-options")}),a&&o.jsx(P.FeedbackText,{...a,id:v})]})})};exports.ChoiceGroup=ie;

package/src/community/components/form/choice-group/choice-group.es.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as H, Fragment as U } from "react/jsx-runtime";
-import p, { createElement as V } from "react";
+import u, { createElement as V } from "react";
 import L from "../../../../../external/classnames/index.es.js";
 import { FeedbackText as Z } from "../../../../tedi/components/form/feedback-text/feedback-text.es.js";
 import { FormLabel as P } from "../../../../tedi/components/form/form-label/form-label.es.js";
@@ -33,13 +33,13 @@ const Le = (S) => {
     indeterminateCheck: i,
     indeterminateCheckProps: x = {},
     ...q
-  } = S, { indented: ce, ...W } = x, X = (x == null ? void 0 : x.indented) ?? !0, F = c ? (c == null ? void 0 : c.id) ?? `${g}-helper` : void 0, E = i && I === "default" && m === "checkbox", [Y, w] = p.useState(() => A || (m === "checkbox" ? [] : null)), N = (e = S.value) => !!n && typeof e < "u", o = N(v) ? v : Y, C = p.useMemo(() => (o == null ? void 0 : o.length) === 0, [o == null ? void 0 : o.length]), s = p.useMemo(
+  } = S, { indented: ce, ...W } = x, X = (x == null ? void 0 : x.indented) ?? !0, F = c ? (c == null ? void 0 : c.id) ?? `${g}-helper` : void 0, E = i && I === "default" && m === "checkbox", [Y, w] = u.useState(() => A || (m === "checkbox" ? [] : null)), N = (e = S.value) => !!n && typeof e < "u", o = N(v) ? v : Y, C = u.useMemo(() => (o == null ? void 0 : o.length) === 0, [o == null ? void 0 : o.length]), s = u.useMemo(
     () => {
       var e;
       return (o == null ? void 0 : o.length) === ((e = r == null ? void 0 : r.filter((l) => !l.disabled)) == null ? void 0 : e.length);
     },
     [o == null ? void 0 : o.length, r]
-  ), z = p.useMemo(() => !C && !s, [s, C]), D = p.useMemo(() => {
+  ), z = u.useMemo(() => !C && !s, [s, C]), D = u.useMemo(() => {
     const e = s ? "all" : C ? "none" : "some";
     return typeof i == "string" ? i : typeof i == "function" ? i(e) : i ? b(e === "all" ? "table.filter.remove-all" : "table.filter.select-all") : "";
   }, [b, i, s, C]), J = {
@@ -51,19 +51,19 @@ const Le = (S) => {
     },
     currentValue: o
   };
-  let f, h, u = R;
+  let f, h, p = R;
   switch (I) {
     case "default":
-      f = 2, h = 1, u = m === "checkbox" ? oe : re;
+      f = 2, h = 1, p = m === "checkbox" ? oe : re;
       break;
     case "selector":
-      f = 0, h = 0, u = ie;
+      f = 0, h = 0, p = ie;
       break;
     case "filter":
-      f = 2, h = 2, u = ne;
+      f = 2, h = 2, p = ne;
       break;
     case "light":
-      f = 1, h = 1, u = R;
+      f = 1, h = 1, p = R;
       break;
   }
   const K = L(y["choice-group"], j), O = L(y["choice-group__inner"], k == null ? void 0 : k.className, {
@@ -99,7 +99,7 @@ const Le = (S) => {
             }
           ),
           /* @__PURE__ */ a(ae, { direction: G, gutterX: f, gutterY: h, ...k, className: O, children: r.map((e, l) => /* @__PURE__ */ V(
-            u,
+            p,
             {
               ...e,
               className: L(e.className, {
@@ -116,6 +116,5 @@ const Le = (S) => {
   ) });
 };
 export {
-  Le as ChoiceGroup,
-  Le as default
+  Le as ChoiceGroup
 };

package/src/community/components/form/file-upload/examples/multiple-handled.d.ts

@@ -1,3 +1,3 @@
-import { StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react-vite';
 import { default as FileUpload } from '../file-upload';
 export declare const MultipleHandledTemplate: StoryFn<typeof FileUpload>;