@tedi-design-system/react 14.0.0-rc.1

package/package.json

@@ -0,0 +1,191 @@
+{
+  "name": "@tedi-design-system/react",
+  "version": "14.0.0-rc.1",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "./tedi": {
+      "types": "./src/tedi/index.d.ts",
+      "import": "./tedi.es.js",
+      "require": "./tedi.cjs.js"
+    },
+    "./community": {
+      "types": "./src/community/index.d.ts",
+      "import": "./community.es.js",
+      "require": "./community.cjs.js"
+    },
+    "./index.css": "./index.css"
+  },
+  "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:sb": "storybook build -c .storybook -o dist/storybook-static",
+    "lint": "npx stylelint \"src/**/*.scss\" --fix && eslint \"src/**/*.{ts,tsx}\" --no-ignore --fix",
+    "lint:ci": "npx stylelint \"src/**/*.scss\" && eslint --quiet",
+    "test": "jest --config ./jest.config.ts --passWithNoTests",
+    "test:coverage": "jest --config ./jest.config.ts --coverage",
+    "release": "npx semantic-release",
+    "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=build:sb --baseline-branch=rc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TEDI-Design-System/react.git"
+  },
+  "engines": {
+    "npm": ">=8.0.0",
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@floating-ui/react": "^0.26.9",
+    "@mui/material": "^5.15.13",
+    "@mui/x-date-pickers": "^5.0.20",
+    "@tanstack/react-table": "^8.13.2",
+    "@tedi-design-system/core": "^2.0.0",
+    "classnames": "^2.5.1",
+    "draft-js": "^0.11.7",
+    "draftjs-md-converter": "^1.5.2",
+    "formik": "^2.4.5",
+    "lodash-es": "^4.17.21",
+    "react-animate-height": "^3.2.3",
+    "react-dropzone": "^14.3.5",
+    "react-select": "^5.10.1",
+    "react-sticky-box": "2.0.5",
+    "react-toastify": "^9.1.3",
+    "what-input": "^5.2.12",
+    "yup": "^1.4.0",
+    "dayjs": "^1.11.10"
+  },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.0",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.1",
+    "husky": "^9.0.11",
+    "lint-staged": "^16.1.6",
+    "semantic-release": "^24.2.7",
+    "typescript": "5.9.2",
+    "@avalane/storybook-addon-status": "^5.0.1",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@faker-js/faker": "^8.4.1",
+    "@storybook/addon-a11y": "8.4.2",
+    "@storybook/addon-designs": "^8.2.1",
+    "@storybook/addon-essentials": "8.4.2",
+    "@storybook/addon-mdx-gfm": "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.4.2",
+    "@svgr/webpack": "8.1.0",
+    "@swc-node/register": "~1.9.1",
+    "@swc/core": "~1.5.7",
+    "@swc/helpers": "~0.5.11",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "15.0.6",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/css-modules": "^1.0.5",
+    "@types/dompurify": "^3.0.5",
+    "@types/draft-js": "^0.11.18",
+    "@types/jest": "29.5.14",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "20.11.28",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
+    "@types/react-test-renderer": "^18.0.7",
+    "@types/showdown": "^2.0.6",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "chromatic": "^11.25.2",
+    "cross-env": "^7.0.3",
+    "dompurify": "^3.0.9",
+    "eslint": "8.48.0",
+    "eslint-config-next": "^13.4.6",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "linkify-string": "^4.1.3",
+    "next": "^14.1.3",
+    "prettier": "^2.8.8",
+    "replace-in-file": "^7.1.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.83.1",
+    "showdown": "^2.1.0",
+    "storybook": "8.4.2",
+    "storybook-addon-pseudo-states": "^4.0.2",
+    "stylelint": "^16.13.2",
+    "stylelint-config-recess-order": "^4.2.0",
+    "stylelint-config-standard-scss": "^14.0.0",
+    "stylelint-declaration-strict-value": "^1.9.2",
+    "to-string-loader": "^1.2.0",
+    "ts-jest": "29.1.2",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.3.0",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "vite": "^5.4.11",
+    "vite-plugin-checker": "^0.6.4",
+    "vite-plugin-dts": "3.7.3",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-static-copy": "^2.2.0",
+    "vite-tsconfig-paths": "4.3.2"
+  },
+  "commitlint": {
+    "extends": "@commitlint/config-conventional",
+    "rules": {
+      "subject-case": [
+        1,
+        "always",
+        "start-case"
+      ],
+      "subject-min-length": [
+        2,
+        "always",
+        10
+      ],
+      "references-empty": [
+        2,
+        "never"
+      ]
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{css,scss}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "overrides": {
+    "dayjs": "$dayjs"
+  }
+}

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

@@ -0,0 +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;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { CardProps } from '../../card';
+import { AccordionItemContentProps } from '../accordion-item-content/accordion-item-content';
+import { AccordionItemHeaderProps } from '../accordion-item-header/accordion-item-header';
+export interface AccordionItemProps extends CardProps {
+    /**
+     * ID of the item
+     */
+    id: string;
+    /**
+     * AccordionItemHeader and AccordionItemContent.
+     */
+    children?: React.ReactElement<AccordionItemContentProps | AccordionItemHeaderProps> | React.ReactElement<AccordionItemContentProps | AccordionItemHeaderProps>[] | React.ReactNode;
+    /**
+     * Is the item disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The element border type attribute specifies the color of accordion item border.
+     * @deprecated use selected or border instead
+     */
+    borderType?: 'primary' | 'secondary';
+    /**
+     * Adds visual styles and correct arias to show the item is selected.
+     * @default false
+     */
+    selected?: boolean;
+}
+export interface IAccordionItemContext {
+    disabled: boolean;
+    id: string;
+}
+export declare const AccordionItemContext: React.Context<IAccordionItemContext>;
+export declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
+export default AccordionItem;

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

@@ -0,0 +1,40 @@
+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 { 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({
+  id: "",
+  disabled: !1
+}), j = (i) => {
+  const {
+    children: d,
+    className: c,
+    id: e,
+    disabled: o = !1,
+    borderType: m,
+    selected: s = !1,
+    border: n = "border-default",
+    ...l
+  } = i, { onToggle: p, isOpen: f } = a.useContext(g), _ = x(t.accordion__item, c, {
+    [t["accordion__item--disabled"]]: o,
+    [t["accordion__item--open"]]: f(e)
+  }), b = s || m === "primary" ? "primary-main" : n;
+  return /* @__PURE__ */ r(y.Provider, { value: { id: e, disabled: o }, children: /* @__PURE__ */ r(
+    h,
+    {
+      id: e,
+      onMatch: (u) => {
+        o || p(u);
+      },
+      children: /* @__PURE__ */ r(C, { "data-name": "accordion-item", border: b, className: _, ...l, children: d })
+    }
+  ) });
+};
+export {
+  j as AccordionItem,
+  y as AccordionItemContext,
+  j as default
+};

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

@@ -0,0 +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"),b=require("../accordion.module.scss.cjs.js"),f=require("../accordion-item/accordion-item.cjs.js"),g=require("../../../../tedi/helpers/hooks/use-print.cjs.js"),_=require("../../card/card-content/card-content.cjs.js"),c=r=>{const{children:i,className:s,...d}=r,{isOpen:a}=o.useContext(C.AccordionContext),{id:e,disabled:u}=o.useContext(f.AccordionItemContext),l=g.usePrint(),m=q.default(b.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=c;exports.default=c;

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

@@ -0,0 +1,4 @@
+import { CardContentProps } from '../../card';
+export type AccordionItemContentProps = CardContentProps;
+export declare const AccordionItemContent: (props: AccordionItemContentProps) => JSX.Element;
+export default AccordionItemContent;

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

@@ -0,0 +1,27 @@
+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 { 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/helpers/hooks/use-print.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,
+    {
+      duration: 300,
+      height: s(t) ? "auto" : 0,
+      role: "region",
+      "aria-labelledby": t,
+      id: `${t}-content`,
+      children: o
+    }
+  );
+};
+export {
+  E as AccordionItemContent,
+  E as default
+};

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

@@ -0,0 +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"),E=require("../../toggle-open/toggle-open.cjs.js"),x=require("../../typography/heading/heading.cjs.js"),y=require("../../typography/text/text.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;

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

@@ -0,0 +1,19 @@
+import { CardHeaderBackground, CardHeaderProps } from '../../card';
+export interface AccordionItemHeaderProps extends Omit<CardHeaderProps, 'id' | 'role' | 'background' | 'variant'> {
+    /**
+     * Name on the button to open the item
+     */
+    openText?: string;
+    /**
+     * Name on the button to close the item
+     */
+    closeText?: string;
+    /**
+     * Background color of accordion header.
+     * In addition to the values supported by CardHeader, we also support some dynamic values that have different colors for open/close states.
+     * @default white
+     */
+    background?: 'primary' | 'white/primary' | 'muted/primary' | CardHeaderBackground;
+}
+export declare const AccordionItemHeader: (props: AccordionItemHeaderProps) => JSX.Element;
+export default AccordionItemHeader;

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

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

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

@@ -0,0 +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;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { VerticalSpacingSize } from '../../../tedi/components/layout/vertical-spacing';
+export interface AccordionProps {
+    /**
+     * Accordion children
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class.
+     */
+    className?: string;
+    /**
+     * Open item's property. Used to control the openItems outside the components.
+     * Should be used with onToggle function
+     */
+    openItem?: string[];
+    /**
+     * onToggle handler.
+     */
+    onToggleItem?: (id: string) => void;
+    /**
+     * The list of IDs items that should be open by default
+     * @default []
+     */
+    defaultOpenItem?: string[];
+    /**
+     * Vertical spacing between AccordionItems
+     * @default 0.5
+     */
+    gutter?: VerticalSpacingSize;
+}
+export interface IAccordionContext {
+    isOpen: (id: string) => boolean;
+    onToggle: (id: string) => void;
+}
+export declare const AccordionContext: React.Context<IAccordionContext>;
+export declare const Accordion: (props: AccordionProps) => JSX.Element;
+export default Accordion;

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

@@ -0,0 +1,21 @@
+import { jsx as r } from "react/jsx-runtime";
+import y from "../../../../external/classnames/index.es.js";
+import c from "react";
+import C from "./accordion.module.scss.es.js";
+import { VerticalSpacing as N } from "../../../tedi/components/layout/vertical-spacing/vertical-spacing.es.js";
+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) => {
+    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 }) }) });
+};
+export {
+  v as Accordion,
+  T as AccordionContext,
+  v as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="accordion__item-c7a360bc",c={"accordion__item-wrapping-heading":"accordion__item-wrapping-heading-45345260","accordion__item-header":"accordion__item-header-26962561","accordion__item--open":"accordion__item--open-52bf4ec2",accordion__item:e,"accordion__item--disabled":"accordion__item--disabled-ca60e759","accordion__item-content":"accordion__item-content-4c915498"};exports.accordion__item=e;exports.default=c;

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

@@ -0,0 +1,12 @@
+const c = "accordion__item-c7a360bc", o = {
+  "accordion__item-wrapping-heading": "accordion__item-wrapping-heading-45345260",
+  "accordion__item-header": "accordion__item-header-26962561",
+  "accordion__item--open": "accordion__item--open-52bf4ec2",
+  accordion__item: c,
+  "accordion__item--disabled": "accordion__item--disabled-ca60e759",
+  "accordion__item-content": "accordion__item-content-4c915498"
+};
+export {
+  c as accordion__item,
+  o as default
+};

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

@@ -0,0 +1,4 @@
+export * from './accordion';
+export * from './accordion-item/accordion-item';
+export * from './accordion-item-content/accordion-item-content';
+export * from './accordion-item-header/accordion-item-header';

package/src/community/components/anchor/anchor-helpers.d.ts

@@ -0,0 +1,37 @@
+/**
+ * This file contains only Anchor helper components that are shared between different stories. These are not exported in the component library
+ */
+import Link from 'next/link';
+import React from 'react';
+import { AnchorProps } from './anchor';
+declare const LinkBehaviour: React.ForwardRefExoticComponent<Omit<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof {
+    href: string | import("url").UrlObject;
+    as?: string | import("url").UrlObject;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean | null;
+    locale?: string | false;
+    legacyBehavior?: boolean;
+    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}> & {
+    href: string | import("url").UrlObject;
+    as?: string | import("url").UrlObject;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean | null;
+    locale?: string | false;
+    legacyBehavior?: boolean;
+    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const CustomAnchor: (props: AnchorProps<typeof Link>) => import("react/jsx-runtime").JSX.Element;
+export { LinkBehaviour, CustomAnchor };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),b=require("../../../../external/classnames/index.cjs.js"),h=require("react"),m=require("../button-content/button-content.cjs.js"),f=require("../button-content/button-content.module.scss.cjs.js"),q=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),t=h.forwardRef((a,o)=>{const{getLabel:r}=q.useLabels(),{visualType:l="link",as:c,iconStandalone:u=!1,children:i,...e}=a,d=c||"a";return n.jsxs(m.default,{"data-name":"anchor",...e,ref:o,as:d,visualType:l,className:b.default(e.className,{[f.default["btn__icon-standalone--link"]]:u}),children:[i,e.target==="_blank"&&n.jsxs("span",{className:"sr-only",children:["(",r("anchor.new-tab"),")"]})]})});t.displayName="Anchor";const s=t;exports.Anchor=s;exports.default=s;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IntentionalAny } from '../../types';
+import { ButtonContentProps } from '../button-content/button-content';
+export type InternalAnchorProps = {
+    /**
+     * If true, the icon will be placed in a separate column
+     */
+    iconStandalone?: boolean;
+};
+type AllowedTags = 'a' | React.ComponentType<IntentionalAny>;
+export type AnchorProps<C extends React.ElementType = 'a'> = ButtonContentProps<C, InternalAnchorProps, AllowedTags>;
+export type AnchorComponent = <C extends React.ElementType = 'a'>(props: AnchorProps<C>) => React.ReactElement | null;
+/**
+ * Anchor component that should be always used when href is passed and a element should be rendered. If u need to use visually button, but still redirect as link use `visualType` prop. <br/>
+ * __NB! U can not use disabled button visuals with anchor.__
+ *
+ * By default, the navigation is performed with a native `<a>` element. You can customize it to use your own router. For instance, using Next.js's Link or react-router.<br />
+ * Inherits all props from the component passed into `as`. If `as` is omitted, then the default is native `<a>` tag
+ *
+ * To allow Customized Anchor usage as direct children of Header you need to add displayName to it. <a href="/docs/components-layout-header-header-overview--header-overview#settings">See more.</a>
+ */
+export declare const Anchor: AnchorComponent;
+export default Anchor;

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

@@ -0,0 +1,36 @@
+import { jsxs as o } from "react/jsx-runtime";
+import i from "../../../../external/classnames/index.es.js";
+import { forwardRef as p } from "react";
+import f from "../button-content/button-content.es.js";
+import d from "../button-content/button-content.module.scss.es.js";
+import { useLabels as h } from "../../../tedi/providers/label-provider/use-labels.es.js";
+const a = p(
+  (s, t) => {
+    const { getLabel: e } = h(), { visualType: r = "link", as: l, iconStandalone: m = !1, children: c, ...n } = s;
+    return /* @__PURE__ */ o(
+      f,
+      {
+        "data-name": "anchor",
+        ...n,
+        ref: t,
+        as: l || "a",
+        visualType: r,
+        className: i(n.className, { [d["btn__icon-standalone--link"]]: m }),
+        children: [
+          c,
+          n.target === "_blank" && /* @__PURE__ */ o("span", { className: "sr-only", children: [
+            "(",
+            e("anchor.new-tab"),
+            ")"
+          ] })
+        ]
+      }
+    );
+  }
+);
+a.displayName = "Anchor";
+const _ = a;
+export {
+  _ as Anchor,
+  _ as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),j=require("react"),q=require("../button-content/button-content.cjs.js"),e=j.forwardRef((n,u)=>{const{children:i,as:r,type:t,formNoValidate:s,visualType:a,color:c,size:l,icon:d,iconLeft:f,iconRight:m,underline:b,isHovered:p,isActive:v,noStyle:y,...B}=n,R=r||"button";return g.jsx(q.default,{"data-name":"button",...B,type:t||"button",formNoValidate:s??t==="submit"?!0:void 0,ref:u,as:R,visualType:a,color:c,size:l,icon:d,iconLeft:f,iconRight:m,underline:b,isHovered:p,isActive:v,noStyle:y,children:i})});e.displayName="Button";const o=e;exports.Button=o;exports.default=o;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ButtonContentProps } from '../button-content/button-content';
+export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'link';
+export type ButtonColor = 'default' | 'important' | 'positive' | 'inverted' | 'text-color';
+export interface IInternalButtonProps {
+    /**
+     * Button type
+     * @default button
+     */
+    type?: 'submit' | 'button' | 'reset';
+    /**
+     * Skips forms browser validation
+     * @default true when type="submit"
+     */
+    formNoValidate?: boolean;
+}
+type AllowedTags = 'button';
+export type ButtonProps<C extends React.ElementType = 'button'> = ButtonContentProps<C, IInternalButtonProps, AllowedTags>;
+export type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonProps<C>) => React.ReactElement | null;
+/**
+ * Renders a `<button>` tag and has all of its props plus our own defined props. For more info about usage of buttons see [Button](/docs/documentation-buttons-buttons--buttons) & [ButtonGroups](/docs/documentation-buttons-buttongroups--buttongroups) documentation.
+ */
+export declare const Button: ButtonComponent;
+export default Button;