@tedi-design-system/react 18.1.0-rc.8 → 18.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.1.0-rc.8",
+  "version": "18.1.0",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -25,6 +25,8 @@
     "lint:ci": "npx stylelint \"src/**/*.scss\" --quiet && npx eslint . --quiet",
     "test": "jest --config ./jest.config.ts --passWithNoTests",
     "test:coverage": "jest --config ./jest.config.ts --coverage",
+    "test-storybook": "test-storybook",
+    "test-storybook:ci": "concurrently -k -s first -n \"SB,A11Y\" -c \"magenta,blue\" \"http-server dist/storybook-static --port 6006 --silent\" \"wait-on tcp:127.0.0.1:6006 && test-storybook --index-json --url http://127.0.0.1:6006 --junit\"",
     "release": "npx semantic-release",
     "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
   },
@@ -64,7 +66,6 @@
     "react-dom": "18.3.1 || ^19.0.0"
   },
   "devDependencies": {
-    "@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",
@@ -74,6 +75,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@etchteam/storybook-addon-status": "^8.1.0",
     "@faker-js/faker": "^10.3.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.1",
@@ -85,6 +87,7 @@
     "@storybook/builder-vite": "^10.4.6",
     "@storybook/react": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
+    "@storybook/test-runner": "^0.24.4",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "15.0.6",
@@ -102,7 +105,8 @@
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.3.4",
     "chromatic": "^13.3.4",
-    "dompurify": "^3.3.0",
+    "concurrently": "^10.0.3",
+    "dompurify": "^3.4.12",
     "eslint": "8.48.0",
     "eslint-config-next": "^13.4.6",
     "eslint-config-prettier": "10.1.8",
@@ -111,9 +115,10 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-simple-import-sort": "^14.0.0",
     "eslint-plugin-storybook": "^10.4.6",
     "eslint-plugin-unused-imports": "^4.1.4",
+    "http-server": "^14.1.1",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.7.0",
@@ -130,7 +135,7 @@
     "sass": "^1.83.1",
     "semantic-release": "^25.0.3",
     "showdown": "^2.1.0",
-    "storybook": "^10.4.6",
+    "storybook": "^10.5.5",
     "storybook-addon-pseudo-states": "^10.4.6",
     "stylelint": "^16.13.2",
     "stylelint-config-recess-order": "^7.7.0",
@@ -143,7 +148,8 @@
     "vite": "^5.4.11",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-static-copy": "^2.2.0"
+    "vite-plugin-static-copy": "^2.2.0",
+    "wait-on": "^9.0.10"
   },
   "commitlint": {
     "extends": "@commitlint/config-conventional",

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

@@ -18,6 +18,7 @@ export type AnchorComponent = <C extends React.ElementType = 'a'>(props: AnchorP
  * 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>
+ * @deprecated Use `Link` from `@tedi-design-system/react/tedi` instead.
  */
 export declare const Anchor: AnchorComponent;
 export default Anchor;

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

@@ -19,6 +19,7 @@ export type ButtonProps<C extends React.ElementType = 'button'> = ButtonContentP
 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.
+ * @deprecated Use `Button` from `@tedi-design-system/react/tedi` instead.
  */
 export declare const Button: ButtonComponent;
 export default Button;

package/src/community/components/card/card-content/card-content.d.ts

@@ -37,6 +37,9 @@ export interface CardContentProps extends BreakpointSupport<CardContentBreakpoin
      */
     children?: React.ReactNode;
 }
+/**
+ * @deprecated Use `CardContent` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const CardContent: {
     (props: CardContentProps): JSX.Element;
     displayName: string;

package/src/community/components/card/card-header/card-header.d.ts

@@ -38,6 +38,9 @@ export type CardHeaderProps = BreakpointSupport<CardHeaderBreakpointProps> & {
 export interface CardHeaderAsButton extends Partial<React.ButtonHTMLAttributes<HTMLButtonElement>> {
     role: 'button';
 }
+/**
+ * @deprecated Use `CardHeader` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const CardHeader: {
     (props: CardHeaderProps): JSX.Element;
     displayName: string;

package/src/community/components/card/card-notification/card-notification.d.ts

@@ -1,5 +1,8 @@
 import { AlertProps } from '../../../../tedi/components/notifications/alert/alert';
 import { CardContentProps } from '../card-content/card-content';
 export type CardNotificationProps = AlertProps & Pick<CardContentProps, 'padding'>;
+/**
+ * @deprecated Use `CardNotification` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const CardNotification: (props: CardNotificationProps) => JSX.Element;
 export default CardNotification;

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

@@ -36,5 +36,8 @@ export interface CardProps extends BreakpointSupport<CardBreakpointProps> {
      */
     children?: React.ReactElement<CardContentProps | CardHeaderProps> | React.ReactElement<CardContentProps | CardHeaderProps>[] | React.ReactNode;
 }
+/**
+ * @deprecated Use `Card` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 export default Card;

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

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

@@ -42,5 +42,8 @@ export type DropdownProps = {
      */
     focusManager?: Omit<React.ComponentProps<typeof FloatingFocusManager>, 'context' | 'children'>;
 };
+/**
+ * @deprecated Use `Dropdown` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Dropdown: (props: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

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

@@ -7,15 +7,15 @@ import r from "./dropdown.module.scss.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 } = 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({
+const de = (c) => {
+  const { getLabel: x } = Y(), { button: D, items: d, onItemClick: a, closeMenuOnClick: F = !0, ...h } = c, { initialFocus: v = -1, modal: p = !1, ...f } = c.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: [$(), ee()],
     whileElementsMounted: Z
-  }), P = c.findIndex((e) => e.isActive), { getReferenceProps: A, getFloatingProps: E, getItemProps: L } = U([
+  }), P = d.findIndex((e) => e.isActive), { getReferenceProps: A, getFloatingProps: E, getItemProps: L } = U([
     q(n),
     z(n, {
       listRef: u,
@@ -51,7 +51,7 @@ const ce = (d) => {
               }
             }),
             "data-placement": O,
-            children: c.map((o, t) => k(o, t))
+            children: d.map((o, t) => k(o, t))
           }
         )
       }
@@ -100,6 +100,5 @@ const ce = (d) => {
   ] });
 };
 export {
-  ce as Dropdown,
-  ce as default
+  de as Dropdown
 };

package/src/community/components/form/choice-group/choice-group.d.ts

@@ -78,5 +78,8 @@ export interface ChoiceGroupProps extends FormLabelProps {
         indented?: boolean;
     } & Partial<Omit<CheckProps, 'indeterminate' | 'checked' | 'onChange' | 'defaultChecked' | 'label'>>;
 }
+/**
+ * @deprecated Use `ChoiceGroup` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const ChoiceGroup: (props: ChoiceGroupProps) => React.ReactElement;
 export default ChoiceGroup;

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

@@ -12,6 +12,9 @@ export interface RejectedFile {
     type: FileRejectionType;
     file: File;
 }
+/**
+ * @deprecated Use FileUpload from `@tedi-design-system/react/tedi` instead.
+ */
 export interface FileUploadProps extends FormLabelProps {
     /**
      * Additional classes.
@@ -65,5 +68,8 @@ export interface FileUploadProps extends FormLabelProps {
      */
     maxSize?: number;
 }
+/**
+ * @deprecated Use `FileUpload` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const FileUpload: (props: FileUploadProps) => JSX.Element;
 export default FileUpload;

package/src/community/components/form/radio/radio.d.ts

@@ -1,4 +1,7 @@
 import { ChoiceInputProps } from '../choice-input.types';
 export type RadioProps = ChoiceInputProps;
+/**
+ * @deprecated Use `Radio` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Radio: (props: RadioProps) => JSX.Element;
 export default Radio;

package/src/community/components/form/select/select.d.ts

@@ -233,5 +233,8 @@ export interface IGroupedOptions<CustomOption = unknown> extends GroupBase<Custo
     backgroundColor?: TColorsBackground;
 }
 export type TSelectValue<CustomData = unknown> = ISelectOption<CustomData> | ReadonlyArray<ISelectOption<CustomData>> | null;
+/**
+ * @deprecated Use `Select` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<SelectInstance<ISelectOption<unknown>, boolean, IGroupedOptions<ISelectOption<unknown>>>>>;
 export default Select;

package/src/community/components/form/toggle/toggle.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),k=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),$=require("../../../../tedi/components/base/icon/icon.cjs.js"),w=require("../../../../tedi/components/loaders/spinner/spinner.cjs.js"),j=require("../../button/button.cjs.js"),e=require("./toggle.module.scss.cjs.js"),c=i.forwardRef((r,C)=>{const{ariaLabel:N,className:q,checked:n,defaultChecked:y,onChange:a,size:u=r.icon?"large":"medium",color:v="default",type:g,icon:S,disabled:f=!1,isLoading:d=!1,extraContent:m,label:_,...l}=r,[h,T]=i.useState(y||!1),o=i.useMemo(()=>a&&typeof n<"u"?n:h,[a,h,n]),M=k.default(e.default.toggle,e.default[`toggle--${u}`],e.default[`toggle--${v}`],{[e.default["toggle--active"]]:o,[e.default["toggle--disabled"]]:f,[e.default[`toggle--${g}`]]:g},q),b=()=>{if(d)return;const s=!o;typeof n>"u"&&T(s),a==null||a(s)},p={noStyle:!0,type:"button","aria-label":N,"aria-pressed":o,disabled:f,"aria-disabled":d,...l,onClick:b};return t.jsxs("div",{className:e.default["toggle-wrapper"],children:[t.jsx(j.Button,{...p,onClick:s=>{var x;(x=l==null?void 0:l.onClick)==null||x.call(l,s),b()},ref:C,"data-name":"toggle",className:M,children:t.jsx("span",{className:e.default.toggle__dot,children:d?t.jsx(w.Spinner,{size:u==="large"?16:10,className:k.default(e.default.toggle__icon,e.default.toggle__spinner)}):S?t.jsx($.Icon,{className:e.default.toggle__icon,name:o?"lock_open_right":"lock",size:16}):null})}),_&&t.jsx(j.Button,{...p,className:e.default.toggle__label,"aria-hidden":!0,tabIndex:-1,children:_}),m&&t.jsx("div",{className:e.default["toggle__extra-content"],children:m})]})});c.displayName="Toggle";exports.Toggle=c;exports.default=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),w=require("../../../../tedi/components/base/icon/icon.cjs.js"),z=require("../../../../tedi/components/loaders/spinner/spinner.cjs.js"),k=require("../../button/button.cjs.js"),e=require("./toggle.module.scss.cjs.js"),j=i.forwardRef((c,C)=>{const{ariaLabel:N,className:y,checked:n,defaultChecked:q,onChange:a,size:r=c.icon?"large":"medium",color:S="default",type:g,icon:T,disabled:u=!1,isLoading:d=!1,extraContent:f,label:m,...l}=c,[_,v]=i.useState(q||!1),o=i.useMemo(()=>a&&typeof n<"u"?n:_,[a,_,n]),$=x.default(e.default.toggle,e.default[`toggle--${r}`],e.default[`toggle--${S}`],{[e.default["toggle--active"]]:o,[e.default["toggle--disabled"]]:u,[e.default[`toggle--${g}`]]:g},y),h=()=>{if(d)return;const s=!o;typeof n>"u"&&v(s),a==null||a(s)},b={noStyle:!0,type:"button","aria-label":N,"aria-pressed":o,disabled:u,"aria-disabled":d,...l,onClick:h};return t.jsxs("div",{className:e.default["toggle-wrapper"],children:[t.jsx(k.Button,{...b,onClick:s=>{var p;(p=l==null?void 0:l.onClick)==null||p.call(l,s),h()},ref:C,"data-name":"toggle",className:$,children:t.jsx("span",{className:e.default.toggle__dot,children:d?t.jsx(z.Spinner,{size:r==="large"?16:10,className:x.default(e.default.toggle__icon,e.default.toggle__spinner)}):T?t.jsx(w.Icon,{className:e.default.toggle__icon,name:o?"lock_open_right":"lock",size:16}):null})}),m&&t.jsx(k.Button,{...b,className:e.default.toggle__label,"aria-hidden":!0,tabIndex:-1,children:m}),f&&t.jsx("div",{className:e.default["toggle__extra-content"],children:f})]})});j.displayName="Toggle";exports.Toggle=j;

package/src/community/components/form/toggle/toggle.d.ts

@@ -62,5 +62,8 @@ export interface ToggleProps {
      */
     isLoading?: boolean;
 }
+/**
+ * @deprecated Use `Toggle` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
 export default Toggle;

package/src/community/components/form/toggle/toggle.es.js

@@ -9,9 +9,9 @@ const L = $((r, C) => {
   const {
     ariaLabel: y,
     className: x,
-    checked: l,
+    checked: a,
     defaultChecked: v,
-    onChange: a,
+    onChange: l,
     size: c = r.icon ? "large" : "medium",
     color: w = "default",
     type: g,
@@ -21,7 +21,7 @@ const L = $((r, C) => {
     extraContent: m,
     label: f,
     ...o
-  } = r, [p, I] = b.useState(v || !1), n = b.useMemo(() => a && typeof l < "u" ? l : p, [a, p, l]), S = k(
+  } = r, [p, I] = b.useState(v || !1), n = b.useMemo(() => l && typeof a < "u" ? a : p, [l, p, a]), S = k(
     e.toggle,
     e[`toggle--${c}`],
     e[`toggle--${w}`],
@@ -35,7 +35,7 @@ const L = $((r, C) => {
     if (i)
       return;
     const s = !n;
-    typeof l > "u" && I(s), a == null || a(s);
+    typeof a > "u" && I(s), l == null || l(s);
   }, _ = {
     noStyle: !0,
     type: "button",
@@ -73,6 +73,5 @@ const L = $((r, C) => {
 });
 L.displayName = "Toggle";
 export {
-  L as Toggle,
-  L as default
+  L as Toggle
 };

package/src/community/components/layout/header/components/header-language/header-language.d.ts

@@ -13,5 +13,8 @@ export interface HeaderLanguageProps {
      */
     languages?: Language[];
 }
+/**
+ * @deprecated Use `HeaderLanguage` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const HeaderLanguage: React.FC<HeaderLanguageProps>;
 export default HeaderLanguage;

package/src/community/components/layout/header/components/header-role/header-role.d.ts

@@ -25,5 +25,8 @@ export interface HeaderRoleProps {
      */
     renderModal?: boolean;
 }
+/**
+ * @deprecated Use `HeaderRole` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const HeaderRole: React.FC<HeaderRoleProps>;
 export default HeaderRole;

package/src/community/components/layout/header/components/sidenav-toggle/sidenav-toggle.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @deprecated Use `SidenavToggle` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const SidenavToggle: () => import("react/jsx-runtime").JSX.Element | null;
 export default SidenavToggle;

package/src/community/components/layout/header/header/header.d.ts

@@ -49,5 +49,8 @@ export interface HeaderProps<H extends React.ElementType> {
      */
     notification?: HeaderNotificationProps;
 }
+/**
+ * @deprecated Use `Header` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Header: <H extends React.ElementType = "a">(props: HeaderProps<H>) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/src/community/components/layout/sidenav/sidenav.d.ts

@@ -62,5 +62,8 @@ export type SideNavItem<C extends React.ElementType = 'a'> = AnchorProps<C> & {
      */
     subItems?: SideNavItem<C>[];
 };
+/**
+ * @deprecated Use `SideNav` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const SideNav: <C extends React.ElementType = "a">(props: SideNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
 export default SideNav;

package/src/community/components/map-components/button-group/button-group.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-button-group":"tedi-button-group-edc8779d","tedi-button-group--horizontal":"tedi-button-group--horizontal-fb80a2c6","tedi-button-group__item":"tedi-button-group__item-da4d0318","tedi-button-group__suffix":"tedi-button-group__suffix-e19ecebe","tedi-button-group__prefix":"tedi-button-group__prefix-c267ac4b","tedi-button-group--vertical":"tedi-button-group--vertical-eef4c53c","tedi-button-group--stretch":"tedi-button-group--stretch-b9680682"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-button-group":"tedi-button-group-edc8779d","tedi-button-group--horizontal":"tedi-button-group--horizontal-fb80a2c6","tedi-button-group__item":"tedi-button-group__item-da4d0318","tedi-button-group__suffix":"tedi-button-group__suffix-e19ecebe","tedi-button-group__prefix":"tedi-button-group__prefix-c267ac4b","tedi-button-group--vertical":"tedi-button-group--vertical-eef4c53c","tedi-button-group__item--active":"tedi-button-group__item--active-d02494ae","tedi-button-group--stretch":"tedi-button-group--stretch-b9680682"};exports.default=t;

package/src/community/components/map-components/button-group/button-group.module.scss.es.js

@@ -5,6 +5,7 @@ const t = {
   "tedi-button-group__suffix": "tedi-button-group__suffix-e19ecebe",
   "tedi-button-group__prefix": "tedi-button-group__prefix-c267ac4b",
   "tedi-button-group--vertical": "tedi-button-group--vertical-eef4c53c",
+  "tedi-button-group__item--active": "tedi-button-group__item--active-d02494ae",
   "tedi-button-group--stretch": "tedi-button-group--stretch-b9680682"
 };
 export {

package/src/community/components/map-components/left-panel/left-panel-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),s=require("../../../../tedi/components/buttons/button/button.cjs.js"),n=require("../../../../tedi/components/buttons/button-group/button-group.cjs.js"),u=require("../../../../tedi/components/notifications/alert/alert.cjs.js"),t=require("./left-panel.module.scss.cjs.js"),c=require("../../../../tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js"),a=({showAlert:i=!0,show2D3DButtons:r=!0,children:l})=>e.jsxs("div",{className:t.default["tedi-left-panel__content-wrapper"],children:[i||r&&e.jsxs("div",{className:t.default["tedi-left-panel__content"],children:[i&&e.jsx(u.Alert,{className:t.default["tedi-left-panel__alert"],children:"Kõikide sisselülitatud kihtide kuvamiseks tuleb sisse suumida."}),e.jsx(c.VerticalSpacing,{size:.5,children:r&&e.jsxs(n.ButtonGroup,{type:"primary",stretch:!0,children:[e.jsx(s.Button,{id:"1",isActive:!0,iconLeft:"checked",children:"2D"}),e.jsx(s.Button,{id:"2",children:"3D"})]})})]}),l]});exports.default=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),a=require("../../../../../external/classnames/index.cjs.js"),o=require("./left-panel.module.scss.cjs.js"),e=({className:t,children:n})=>l.jsx("div",{className:a.default(o.default["tedi-left-panel__content-wrapper"],t),children:n});e.displayName="LeftPanel.Content";exports.LeftPanelContent=e;exports.default=e;

package/src/community/components/map-components/left-panel/left-panel-content.d.ts

@@ -1,7 +1,12 @@
-import { JSX } from 'react';
-import { LeftPanelProps } from './left-panel';
-type LeftPanelContentProps = LeftPanelProps & {
-    children?: React.ReactNode;
+import { JSX, ReactNode } from 'react';
+export interface LeftPanelContentProps {
+    /** Additional class name applied to the content region. */
+    className?: string;
+    /** Main scrollable content of the panel. */
+    children?: ReactNode;
+}
+export declare const LeftPanelContent: {
+    ({ className, children }: LeftPanelContentProps): JSX.Element;
+    displayName: string;
 };
-declare const LeftPanelContent: ({ showAlert, show2D3DButtons, children, }: LeftPanelContentProps) => JSX.Element;
 export default LeftPanelContent;

package/src/community/components/map-components/left-panel/left-panel-content.es.js

@@ -1,23 +1,9 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { Button as n } from "../../../../tedi/components/buttons/button/button.es.js";
-import { ButtonGroup as a } from "../../../../tedi/components/buttons/button-group/button-group.es.js";
-import { Alert as c } from "../../../../tedi/components/notifications/alert/alert.es.js";
-import i from "./left-panel.module.scss.es.js";
-import { VerticalSpacing as d } from "../../../../tedi/components/layout/vertical-spacing/vertical-spacing.es.js";
-const _ = ({
-  showAlert: r = !0,
-  show2D3DButtons: l = !0,
-  children: s
-}) => /* @__PURE__ */ t("div", { className: i["tedi-left-panel__content-wrapper"], children: [
-  r || l && /* @__PURE__ */ t("div", { className: i["tedi-left-panel__content"], children: [
-    r && /* @__PURE__ */ e(c, { className: i["tedi-left-panel__alert"], children: "Kõikide sisselülitatud kihtide kuvamiseks tuleb sisse suumida." }),
-    /* @__PURE__ */ e(d, { size: 0.5, children: l && /* @__PURE__ */ t(a, { type: "primary", stretch: !0, children: [
-      /* @__PURE__ */ e(n, { id: "1", isActive: !0, iconLeft: "checked", children: "2D" }),
-      /* @__PURE__ */ e(n, { id: "2", children: "3D" })
-    ] }) })
-  ] }),
-  s
-] });
+import { jsx as a } from "react/jsx-runtime";
+import o from "../../../../../external/classnames/index.es.js";
+import s from "./left-panel.module.scss.es.js";
+const n = ({ className: e, children: t }) => /* @__PURE__ */ a("div", { className: o(s["tedi-left-panel__content-wrapper"], e), children: t });
+n.displayName = "LeftPanel.Content";
 export {
-  _ as default
+  n as LeftPanelContent,
+  n as default
 };

package/src/community/components/map-components/left-panel/left-panel-footer.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("../../../../tedi/components/base/typography/text/text.cjs.js"),s=require("../../../../tedi/components/navigation/link/link.cjs.js"),t=require("../../../../tedi/components/misc/separator/separator.cjs.js"),a=require("../../form/toggle/toggle.cjs.js"),o=require("./left-panel.module.scss.cjs.js"),i=require("../../../../tedi/components/layout/grid/row.cjs.js"),r=require("../../../../tedi/components/layout/grid/col.cjs.js"),n=()=>e.jsxs("div",{className:o.default["tedi-left-panel__footer"],children:[e.jsxs("div",{className:o.default["tedi-left-panel__footer__theme-switch"],children:[e.jsx(a.Toggle,{ariaLabel:"Toggle dark mode",label:e.jsx(l.Text,{children:"Tume režiim"})}),e.jsx(t.Separator,{color:"primary",spacing:1})]}),e.jsxs(i.Row,{children:[e.jsx(r.Col,{width:"auto",children:e.jsx(l.Text,{color:"secondary",modifiers:"small",children:"Tehniline tugi"})}),e.jsx(r.Col,{children:e.jsx(s.Link,{href:"#",size:"small",children:"kaardirakendus@maaruum.ee"})})]}),e.jsxs(i.Row,{children:[e.jsx(r.Col,{width:"auto",children:e.jsx(l.Text,{color:"secondary",modifiers:"small",children:"Telefon"})}),e.jsx(r.Col,{children:e.jsx(s.Link,{href:"#",size:"small",children:"6 650 600"})})]}),e.jsx(i.Row,{children:e.jsx(r.Col,{children:e.jsx(l.Text,{color:"secondary",modifiers:"small",children:"Maa- ja Ruumiamet. Kõik õigused kaitstud."})})})]});exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),a=require("../../../../../external/classnames/index.cjs.js"),r=require("./left-panel.module.scss.cjs.js"),e=({className:t,children:l})=>o.jsx("div",{className:a.default(r.default["tedi-left-panel__footer"],t),children:l});e.displayName="LeftPanel.Footer";exports.LeftPanelFooter=e;exports.default=e;

package/src/community/components/map-components/left-panel/left-panel-footer.d.ts

@@ -1,2 +1,12 @@
-declare const LeftPanelFooter: () => import("react/jsx-runtime").JSX.Element;
+import { JSX, ReactNode } from 'react';
+export interface LeftPanelFooterProps {
+    /** Additional class name applied to the footer region. */
+    className?: string;
+    /** Content placed in the gray footer area. */
+    children?: ReactNode;
+}
+export declare const LeftPanelFooter: {
+    ({ className, children }: LeftPanelFooterProps): JSX.Element;
+    displayName: string;
+};
 export default LeftPanelFooter;

package/src/community/components/map-components/left-panel/left-panel-footer.es.js

@@ -1,26 +1,9 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Text as l } from "../../../../tedi/components/base/typography/text/text.es.js";
-import { Link as a } from "../../../../tedi/components/navigation/link/link.es.js";
-import { Separator as m } from "../../../../tedi/components/misc/separator/separator.es.js";
-import { Toggle as t } from "../../form/toggle/toggle.es.js";
-import d from "./left-panel.module.scss.es.js";
-import { Row as o } from "../../../../tedi/components/layout/grid/row.es.js";
-import { Col as r } from "../../../../tedi/components/layout/grid/col.es.js";
-const k = () => /* @__PURE__ */ i("div", { className: d["tedi-left-panel__footer"], children: [
-  /* @__PURE__ */ i("div", { className: d["tedi-left-panel__footer__theme-switch"], children: [
-    /* @__PURE__ */ e(t, { ariaLabel: "Toggle dark mode", label: /* @__PURE__ */ e(l, { children: "Tume režiim" }) }),
-    /* @__PURE__ */ e(m, { color: "primary", spacing: 1 })
-  ] }),
-  /* @__PURE__ */ i(o, { children: [
-    /* @__PURE__ */ e(r, { width: "auto", children: /* @__PURE__ */ e(l, { color: "secondary", modifiers: "small", children: "Tehniline tugi" }) }),
-    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(a, { href: "#", size: "small", children: "kaardirakendus@maaruum.ee" }) })
-  ] }),
-  /* @__PURE__ */ i(o, { children: [
-    /* @__PURE__ */ e(r, { width: "auto", children: /* @__PURE__ */ e(l, { color: "secondary", modifiers: "small", children: "Telefon" }) }),
-    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(a, { href: "#", size: "small", children: "6 650 600" }) })
-  ] }),
-  /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { color: "secondary", modifiers: "small", children: "Maa- ja Ruumiamet. Kõik õigused kaitstud." }) }) })
-] });
+import { jsx as t } from "react/jsx-runtime";
+import a from "../../../../../external/classnames/index.es.js";
+import s from "./left-panel.module.scss.es.js";
+const r = ({ className: e, children: o }) => /* @__PURE__ */ t("div", { className: a(s["tedi-left-panel__footer"], e), children: o });
+r.displayName = "LeftPanel.Footer";
 export {
-  k as default
+  r as LeftPanelFooter,
+  r as default
 };

package/src/community/components/map-components/left-panel/left-panel-header.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../../../../tedi/components/base/icon/icon.cjs.js"),o=require("../../../../tedi/components/buttons/button/button.cjs.js"),l=require("../../dropdown/dropdown.cjs.js"),n=require("./left-panel.module.scss.cjs.js"),r=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:n.default["tedi-left-panel__header"],children:[e.jsx("img",{src:"logo.svg",alt:"logo",style:{filter:"brightness(0) saturate(100%) invert(100%)",height:"40px"}}),e.jsx(t.Icon,{name:"close",color:"white"})]}),e.jsxs("div",{className:n.default["tedi-left-panel__header-controls"],children:[e.jsx(o.Button,{onClick:()=>{console.log("Log in")},color:"inverted",iconLeft:"logout",visualType:"neutral",children:"Logi sisse"}),e.jsx(l.Dropdown,{button:{children:"EST",iconRight:"expand_more",visualType:"link",color:"inverted"},items:[{children:"EST",onClick:function(){}},{children:"ENG",isActive:!0,onClick:function(){}},{children:"RUS",onClick:function(){}}]})]})]});exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),d=require("./left-panel.module.scss.cjs.js"),e=({className:t,children:a})=>l.jsx("div",{className:r.default(d.default["tedi-left-panel__header-controls"],t),children:a});e.displayName="LeftPanel.Header";exports.LeftPanelHeader=e;exports.default=e;

package/src/community/components/map-components/left-panel/left-panel-header.d.ts

@@ -1,2 +1,12 @@
-declare const LeftPanelHeader: () => import("react/jsx-runtime").JSX.Element;
+import { JSX, ReactNode } from 'react';
+export interface LeftPanelHeaderProps {
+    /** Additional class name applied to the header region. */
+    className?: string;
+    /** Content placed in the blue header area, under the icon. */
+    children?: ReactNode;
+}
+export declare const LeftPanelHeader: {
+    ({ className, children }: LeftPanelHeaderProps): JSX.Element;
+    displayName: string;
+};
 export default LeftPanelHeader;

package/src/community/components/map-components/left-panel/left-panel-header.es.js

@@ -1,64 +1,9 @@
-import { jsxs as i, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { Icon as r } from "../../../../tedi/components/base/icon/icon.es.js";
-import { Button as l } from "../../../../tedi/components/buttons/button/button.es.js";
-import { Dropdown as c } from "../../dropdown/dropdown.es.js";
-import t from "./left-panel.module.scss.es.js";
-const f = () => /* @__PURE__ */ i(n, { children: [
-  /* @__PURE__ */ i("div", { className: t["tedi-left-panel__header"], children: [
-    /* @__PURE__ */ e(
-      "img",
-      {
-        src: "logo.svg",
-        alt: "logo",
-        style: { filter: "brightness(0) saturate(100%) invert(100%)", height: "40px" }
-      }
-    ),
-    /* @__PURE__ */ e(r, { name: "close", color: "white" })
-  ] }),
-  /* @__PURE__ */ i("div", { className: t["tedi-left-panel__header-controls"], children: [
-    /* @__PURE__ */ e(
-      l,
-      {
-        onClick: () => {
-          console.log("Log in");
-        },
-        color: "inverted",
-        iconLeft: "logout",
-        visualType: "neutral",
-        children: "Logi sisse"
-      }
-    ),
-    /* @__PURE__ */ e(
-      c,
-      {
-        button: {
-          children: "EST",
-          iconRight: "expand_more",
-          visualType: "link",
-          color: "inverted"
-        },
-        items: [
-          {
-            children: "EST",
-            onClick: function() {
-            }
-          },
-          {
-            children: "ENG",
-            isActive: !0,
-            onClick: function() {
-            }
-          },
-          {
-            children: "RUS",
-            onClick: function() {
-            }
-          }
-        ]
-      }
-    )
-  ] })
-] });
+import { jsx as s } from "react/jsx-runtime";
+import t from "../../../../../external/classnames/index.es.js";
+import r from "./left-panel.module.scss.es.js";
+const l = ({ className: e, children: a }) => /* @__PURE__ */ s("div", { className: t(r["tedi-left-panel__header-controls"], e), children: a });
+l.displayName = "LeftPanel.Header";
 export {
-  f as default
+  l as LeftPanelHeader,
+  l as default
 };

package/src/community/components/map-components/left-panel/left-panel.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../resizer/resizer.cjs.js"),l=require("./left-panel.module.scss.cjs.js"),n=require("./left-panel-content.cjs.js"),r=require("./left-panel-footer.cjs.js"),s=require("./left-panel-header.cjs.js"),a=t=>e.jsx(i.Resizer,{minWidth:350,initialWidth:350,maxWidth:600,children:e.jsxs("div",{className:l.default["tedi-left-panel"],children:[e.jsxs("div",{className:l.default["tedi-left-panel__actions"],children:[e.jsx(s.default,{}),e.jsx(n.default,{...t,children:t.children})]}),e.jsx(r.default,{})]})});exports.LeftPanel=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),B=require("../../../../tedi/components/base/icon/icon.cjs.js"),M=require("../../../../tedi/components/buttons/closing-button/closing-button.cjs.js"),O=require("../../../../tedi/components/buttons/button/button.cjs.js"),V=require("../resizer/resizer.cjs.js"),n=require("./left-panel.module.scss.cjs.js"),y=require("./left-panel-content.cjs.js"),N=require("./left-panel-footer.cjs.js"),R=require("./left-panel-header.cjs.js"),W=require("../../../../tedi/providers/label-provider/use-labels.cjs.js"),m=(o,i)=>{let a=null;return l.Children.forEach(o,e=>{l.isValidElement(e)&&e.type===i&&(a=e)}),a},g=({className:o,icon:i,hideCloseButton:a=!1,hideOpenButton:e=!1,defaultOpen:v=!0,open:p,onOpenChange:c,resizable:_=!0,children:u,width:L=350,minWidth:F=350,maxWidth:H=600})=>{const{getLabel:f}=W.useLabels(),d=l.useId(),b=p!==void 0,[I,h]=l.useState(v),s=b?p:I,P=l.useRef(!1),q=l.useRef(null),x=r=>{P.current=!0,b||h(r),c==null||c(r)};if(l.useEffect(()=>{var r;P.current&&(P.current=!1,!s&&!e&&((r=q.current)==null||r.focus()))},[s,e]),!s&&e)return null;if(!s)return t.jsx(O.Button,{ref:q,"aria-label":f("leftPanelOpen"),"aria-controls":d,"aria-expanded":!1,noStyle:!0,onClick:()=>x(!0),className:n.default["tedi-left-panel__expander-button"],children:t.jsx(B.Icon,{name:"keyboard_double_arrow_right",color:"brand"})});const k=S.default(n.default["tedi-left-panel"],o),E=_?void 0:{width:L},j=m(u,R.LeftPanelHeader),T=m(u,y.LeftPanelContent),w=m(u,N.LeftPanelFooter),z=S.default(n.default["tedi-left-panel__header"],{[n.default["tedi-left-panel__header--rounded"]]:!j}),C=t.jsxs("aside",{id:d,"aria-label":f("leftPanel"),className:k,style:E,children:[t.jsxs("div",{className:n.default["tedi-left-panel__actions"],children:[t.jsxs("div",{className:z,children:[i,!a&&t.jsx(M.ClosingButton,{className:n.default["tedi-left-panel__close"],color:"white",onClick:()=>x(!1),title:f("leftPanelClose"),"aria-controls":d,"aria-expanded":!0})]}),j,T]}),w]});return _?t.jsx(V.Resizer,{minWidth:F,initialWidth:L,maxWidth:H,children:C}):C};g.displayName="LeftPanel";const A=Object.assign(g,{Header:R.LeftPanelHeader,Content:y.LeftPanelContent,Footer:N.LeftPanelFooter});exports.LeftPanel=A;