@tedi-design-system/react 18.0.0-rc.1 → 18.0.0-rc.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.0.0-rc.1",
+  "version": "18.0.0-rc.11",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -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",
@@ -133,7 +133,7 @@
     "storybook": "8.4.2",
     "storybook-addon-pseudo-states": "^4.0.2",
     "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/form/pickers/calendar/calendar.d.ts

@@ -1,6 +1,9 @@
 import { Dayjs } from 'dayjs';
 export type CalendarValue = Dayjs | null;
 export type CalendarStatus = 'error' | 'success' | 'inactive';
+/**
+ * @deprecated Use `Calendar` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface CalendarProps {
     /**
      * Currently selected value. Accepts a dayjs date object.
@@ -86,5 +89,8 @@ export interface CalendarProps {
      */
     shouldShowStatusOnDate?: (day: CalendarValue) => CalendarStatus | undefined;
 }
+/**
+ * @deprecated Use `Calendar` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Calendar: (props: CalendarProps) => JSX.Element;
 export default Calendar;

package/src/community/components/form/pickers/datepicker/datepicker.d.ts

@@ -2,6 +2,9 @@ import { DateValidationError } from '@mui/x-date-pickers/internals';
 import { Dayjs } from 'dayjs';
 import { TextFieldProps } from '../../../../../tedi/components/form/textfield/textfield';
 export type DatepickerValue = Dayjs | null;
+/**
+ * @deprecated Use `DateField` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface DatePickerProps extends Omit<TextFieldProps, 'defaultValue' | 'value' | 'onChange'> {
     /**
      * Datepicker initial value. Accepts a dayjs date object.
@@ -85,5 +88,8 @@ export interface DatePickerProps extends Omit<TextFieldProps, 'defaultValue' | '
      */
     onClose?: () => void;
 }
+/**
+ * @deprecated Use `DateField` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const DatePicker: (props: DatePickerProps) => JSX.Element;
 export default DatePicker;

package/src/community/components/form/pickers/datetimepicker/datetimepicker.d.ts

@@ -3,6 +3,9 @@ import { DateTimeValidationError } from '@mui/x-date-pickers/internals/hooks/val
 import { Dayjs } from 'dayjs';
 import { TextFieldProps } from '../../../../../tedi/components/form/textfield/textfield';
 export type DateTimepickerValue = Dayjs | null;
+/**
+ * @deprecated Use `DateTimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface DateTimePickerProps extends Omit<TextFieldProps, 'defaultValue' | 'value' | 'onChange'> {
     /**
      * DateTimepicker initial value. Accepts a dayjs date object.
@@ -125,5 +128,8 @@ export interface DateTimePickerProps extends Omit<TextFieldProps, 'defaultValue'
      */
     onClose?: () => void;
 }
+/**
+ * @deprecated Use `DateTimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const DateTimePicker: (props: DateTimePickerProps) => JSX.Element;
 export default DateTimePicker;

package/src/community/components/form/pickers/timepicker/timepicker.d.ts

@@ -3,6 +3,9 @@ import { TimeValidationError } from '@mui/x-date-pickers/internals/hooks/validat
 import { Dayjs } from 'dayjs';
 import { TextFieldProps } from '../../../../../tedi/components/form/textfield/textfield';
 export type TimePickerValue = Dayjs | null;
+/**
+ * @deprecated Use `TimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export interface TimePickerProps extends Omit<TextFieldProps, 'defaultValue' | 'value' | 'onChange'> {
     /**
      * TimePicker initial value. Accepts a dayjs date object.
@@ -69,5 +72,8 @@ export interface TimePickerProps extends Omit<TextFieldProps, 'defaultValue' | '
      */
     onClose?: () => void;
 }
+/**
+ * @deprecated Use `TimeField` from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const TimePicker: (props: TimePickerProps) => JSX.Element;
 export default TimePicker;

package/src/community/components/modal/modal-closer.d.ts

@@ -1,9 +1,15 @@
 import { default as React } from 'react';
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalCloserProps {
     /**
      * The element that closes the modal.
      */
     children: React.ReactElement;
 }
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const ModalCloser: (props: ModalCloserProps) => JSX.Element;
 export default ModalCloser;

package/src/community/components/modal/modal-provider.d.ts

@@ -1,5 +1,8 @@
 import { FloatingContext, ReferenceType } from '@floating-ui/react';
 import { default as React } from 'react';
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalProviderProps {
     /**
      * ModalTrigger and Modal components
@@ -51,5 +54,8 @@ export interface IModalContext {
     outsidePress: boolean;
 }
 export declare const ModalContext: React.Context<IModalContext>;
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const ModalProvider: (props: ModalProviderProps) => JSX.Element;
 export default ModalProvider;

package/src/community/components/modal/modal-trigger.d.ts

@@ -1,8 +1,14 @@
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalTriggerProps {
     /**
      * The element that opens the modal.
      */
     children: JSX.Element;
 }
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const ModalTrigger: (props: ModalTriggerProps) => JSX.Element;
 export default ModalTrigger;

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

@@ -1,5 +1,8 @@
 import { default as React } from 'react';
 import { CardProps } from '../card/card';
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalProps {
     /**
      * Content of the modal
@@ -58,5 +61,8 @@ export interface ModalProps {
      */
     overlay?: 'none';
 }
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Modal: (props: ModalProps) => JSX.Element | null;
 export default Modal;

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

@@ -2,6 +2,9 @@ import { default as React } from 'react';
 import { IconProps } from '../../../tedi/components/base/icon/icon';
 import { RowProps } from '../../../tedi/components/layout/grid';
 import { CardProps } from '../card';
+/**
+ * @deprecated Use EmptyState from `@tedi-design-system/react/tedi` instead.
+ */
 export interface PlaceholderProps {
     /**
      * Placeholder block content
@@ -31,6 +34,8 @@ export interface PlaceholderProps {
     rowProps?: RowProps;
 }
 /**
+ * @deprecated Use EmptyState from `@tedi-design-system/react/tedi` instead.
+ *
  * Placeholder is used to indicate, that there is no data to show. It can be used on its own or inside other components, like a `<CardContent>`.
  * Other components also use it internally for displaying empty state. (E.g. `<Table>`)
  */

package/src/tedi/components/buttons/button-group/button-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),n=require("../../base/icon/icon.cjs.js"),x=require("../button/button.cjs.js"),r=require("./button-group.module.scss.cjs.js"),L=require("../../../helpers/hooks/use-breakpoint.cjs.js"),C=require("../../../providers/label-provider/use-labels.cjs.js"),l=require("../../overlays/dropdown/dropdown.cjs.js"),b=k=>{const{getLabel:j}=C.useLabels(),{children:q,className:w,type:c="primary",onSelectionChange:i,stretch:v=!1,ariaLabel:I,size:f="default",enableMobileDropdown:A=!1,mobileBreakpoint:N="md",dropdownLabel:y=j("sidenav.submenu"),dropdownLabelMode:R="static"}=k,B=L.useBreakpoint(),D=L.isBreakpointBelow(B,N),m=_.Children.toArray(q).filter(e=>_.isValidElement(e)&&e.type===x.Button),s=m.find(e=>e.props.isActive),M=R==="static"?y:(s==null?void 0:s.props.children)??y,a=s==null?void 0:s.props.iconLeft,d=s==null?void 0:s.props.icon;return D&&A?o.jsxs(l.Dropdown,{width:"trigger",children:[o.jsx(l.Dropdown.Trigger,{children:o.jsxs(x.Button,{visualType:c,className:g.default(r.default["tedi-button-group__dropdown-trigger"],r.default[`tedi-button-group__dropdown-trigger--${c}`],w),noStyle:!0,fullWidth:!0,children:[a?o.jsx(n.Icon,{name:typeof a=="string"?a:a.name,color:"inherit"}):d?o.jsx(n.Icon,{name:typeof d=="string"?d:d.name,color:"inherit"}):o.jsx(n.Icon,{name:"menu",color:"inherit"}),M]})}),o.jsx(l.Dropdown.Content,{children:m.map((e,u)=>o.jsxs(l.Dropdown.Item,{index:u,active:e==null?void 0:e.props.isActive,disabled:e==null?void 0:e.props.disabled,onClick:t=>{var p,h;e.props.disabled||(t.type==="click"&&((h=(p=e.props).onClick)==null||h.call(p,t)),e.props.id&&(i==null||i(e.props.id)))},className:r.default["tedi-button-group__dropdown-item"],children:[e.props.iconLeft&&o.jsx(n.Icon,{name:typeof e.props.iconLeft=="string"?e.props.iconLeft:e.props.iconLeft.name,color:"inherit"}),e.props.children,e.props.iconRight&&o.jsx(n.Icon,{name:typeof e.props.iconRight=="string"?e.props.iconRight:e.props.iconRight.name,color:"inherit"}),e.props.isActive&&o.jsx("span",{className:"sr-only",children:j("button-group.selected")})]},e.props.id||u))})]}):o.jsx("div",{className:g.default(r.default["tedi-button-group"],r.default[`tedi-button-group--${c}`],{[r.default["tedi-button-group--stretch"]]:v},w),role:"group","aria-label":I,children:m.map(e=>_.cloneElement(e,{className:g.default(r.default["tedi-button-group__item"],{[r.default["tedi-button-group__item--active"]]:e.props.isActive,[r.default["tedi-button-group__item--disabled"]]:e.props.disabled,[r.default[`tedi-button-group__item--size-${f}`]]:f},e.props.className),size:f,"aria-pressed":!!e.props.isActive,onClick:u=>{var t,p;(p=(t=e.props).onClick)==null||p.call(t,u),e.props.id&&(i==null||i(e.props.id))}}))})};exports.ButtonGroup=b;exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),n=require("../../base/icon/icon.cjs.js"),x=require("../button/button.cjs.js"),r=require("./button-group.module.scss.cjs.js"),C=require("../../../providers/label-provider/use-labels.cjs.js"),L=require("../../../helpers/hooks/use-breakpoint.cjs.js"),l=require("../../overlays/dropdown/dropdown.cjs.js"),b=k=>{const{getLabel:j}=C.useLabels(),{children:q,className:w,type:c="primary",onSelectionChange:i,stretch:v=!1,ariaLabel:I,size:f="default",enableMobileDropdown:A=!1,mobileBreakpoint:N="md",dropdownLabel:y=j("sidenav.submenu"),dropdownLabelMode:R="static"}=k,B=L.useBreakpoint(),D=L.isBreakpointBelow(B,N),m=_.Children.toArray(q).filter(e=>_.isValidElement(e)&&e.type===x.Button),s=m.find(e=>e.props.isActive),M=R==="static"?y:(s==null?void 0:s.props.children)??y,a=s==null?void 0:s.props.iconLeft,d=s==null?void 0:s.props.icon;return D&&A?o.jsxs(l.Dropdown,{width:"trigger",children:[o.jsx(l.Dropdown.Trigger,{children:o.jsxs(x.Button,{visualType:c,className:g.default(r.default["tedi-button-group__dropdown-trigger"],r.default[`tedi-button-group__dropdown-trigger--${c}`],w),noStyle:!0,fullWidth:!0,children:[a?o.jsx(n.Icon,{name:typeof a=="string"?a:a.name,color:"inherit"}):d?o.jsx(n.Icon,{name:typeof d=="string"?d:d.name,color:"inherit"}):o.jsx(n.Icon,{name:"menu",color:"inherit"}),M]})}),o.jsx(l.Dropdown.Content,{children:m.map((e,u)=>o.jsxs(l.Dropdown.Item,{index:u,active:e==null?void 0:e.props.isActive,disabled:e==null?void 0:e.props.disabled,onClick:t=>{var p,h;e.props.disabled||(t.type==="click"&&((h=(p=e.props).onClick)==null||h.call(p,t)),e.props.id&&(i==null||i(e.props.id)))},className:r.default["tedi-button-group__dropdown-item"],children:[e.props.iconLeft&&o.jsx(n.Icon,{name:typeof e.props.iconLeft=="string"?e.props.iconLeft:e.props.iconLeft.name,color:"inherit"}),e.props.children,e.props.iconRight&&o.jsx(n.Icon,{name:typeof e.props.iconRight=="string"?e.props.iconRight:e.props.iconRight.name,color:"inherit"}),e.props.isActive&&o.jsx("span",{className:"sr-only",children:j("button-group.selected")})]},e.props.id||u))})]}):o.jsx("div",{className:g.default(r.default["tedi-button-group"],r.default[`tedi-button-group--${c}`],{[r.default["tedi-button-group--stretch"]]:v},w),role:"group","aria-label":I,children:m.map(e=>_.cloneElement(e,{className:g.default(r.default["tedi-button-group__item"],{[r.default["tedi-button-group__item--active"]]:e.props.isActive,[r.default["tedi-button-group__item--disabled"]]:e.props.disabled,[r.default[`tedi-button-group__item--size-${f}`]]:f},e.props.className),size:f,"aria-pressed":!!e.props.isActive,onClick:u=>{var t,p;(p=(t=e.props).onClick)==null||p.call(t,u),e.props.id&&(i==null||i(e.props.id))}}))})};exports.ButtonGroup=b;exports.default=b;

package/src/tedi/components/buttons/button-group/button-group.es.js

@@ -4,11 +4,11 @@ import { Children as x, isValidElement as z, cloneElement as B } from "react";
 import { Icon as a } from "../../base/icon/icon.es.js";
 import { Button as k } from "../button/button.es.js";
 import r from "./button-group.module.scss.es.js";
-import { useBreakpoint as D, isBreakpointBelow as E } from "../../../helpers/hooks/use-breakpoint.es.js";
-import { useLabels as T } from "../../../providers/label-provider/use-labels.es.js";
+import { useLabels as D } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpoint as E, isBreakpointBelow as T } from "../../../helpers/hooks/use-breakpoint.es.js";
 import { Dropdown as d } from "../../overlays/dropdown/dropdown.es.js";
 const P = (N) => {
-  const { getLabel: _ } = T(), {
+  const { getLabel: _ } = D(), {
     children: v,
     className: h,
     type: m = "primary",
@@ -20,7 +20,7 @@ const P = (N) => {
     mobileBreakpoint: R = "md",
     dropdownLabel: L = _("sidenav.submenu"),
     dropdownLabelMode: C = "static"
-  } = N, M = D(), $ = E(M, R), f = x.toArray(v).filter(
+  } = N, M = E(), $ = T(M, R), f = x.toArray(v).filter(
     (o) => z(o) && o.type === k
   ), e = f.find((o) => o.props.isActive), j = C === "static" ? L : (e == null ? void 0 : e.props.children) ?? L, n = e == null ? void 0 : e.props.iconLeft, l = e == null ? void 0 : e.props.icon;
   return $ && I ? /* @__PURE__ */ g(d, { width: "trigger", children: [

package/src/tedi/components/buttons/collapse/collapse.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"),_=require("react"),K=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),A=require("../../../providers/printing-provider/printing-provider.cjs.js"),F=require("../../base/icon/icon.cjs.js"),G=require("../../base/typography/text/text.cjs.js"),H=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),J=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Q=require("../../../providers/label-provider/use-labels.cjs.js"),v=require("../../layout/grid/row.cjs.js"),o=require("../../layout/grid/col.cjs.js"),N=x=>{const{getCurrentBreakpointProps:P}=J.useBreakpointProps(x.defaultServerBreakpoint),{getLabel:h}=Q.useLabels(),{id:r,children:w,className:k,openText:j=h("open"),closeText:g=h("close"),hideCollapseText:I=!1,title:c,titleRowProps:O,defaultOpen:$,open:d,onToggle:u,arrowType:n="default",size:i="default",underline:S=!0,toggleLabel:y,iconOnly:B=!1,...M}=P(x),p=`${r}__trigger`,f=`${r}__content`,R=`${r}__animate`,[b,T]=_.useState(()=>$),m=A.usePrint(),a=_.useMemo(()=>m||(d!==void 0?d:b),[m,d,b]),L=B===!0&&!c,D=s.default(e.default["tedi-collapse"],i==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],L&&e.default["tedi-collapse--icon-only"],e.default[`tedi-collapse--arrow-${n}`],k),q=()=>{const l=!a;T(l),u==null||u(l)},z=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),q())},E=y||(a?g:j),C=_.useMemo(()=>t.jsx("div",{id:f,role:"region","aria-labelledby":p,className:e.default["tedi-collapse__content"],children:w}),[w,f,p]);return t.jsxs("div",{"data-name":"collapse",...M,className:D,children:[t.jsx("button",{id:p,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":E,"aria-expanded":a,"aria-controls":f,onKeyDown:z,onClick:q,children:t.jsxs(v.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...O,element:"span",children:[c&&t.jsx(o.Col,{"aria-hidden":"true",children:c}),t.jsx(o.Col,{width:"auto",children:t.jsxs(v.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(H.Print,{visibility:"hide",children:t.jsx(o.Col,{width:"auto",className:s.default({"visually-hidden":I}),children:t.jsx(G.Text,{element:"span",className:s.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:S}),children:a?g:j})})}),t.jsx(o.Col,{width:"auto",children:t.jsx("div",{className:s.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${n}`],i==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(F.Icon,{className:s.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${n}`],i==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:i==="small"||n==="secondary"?18:24})})})]})})]})}),m?C:t.jsx(K.default,{id:R,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:C})]})};exports.Collapse=N;exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),H=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),J=require("../../../providers/printing-provider/printing-provider.cjs.js"),Q=require("../../base/icon/icon.cjs.js"),U=require("../../base/typography/text/text.cjs.js"),V=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),W=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),X=require("../../../providers/label-provider/use-labels.cjs.js"),N=require("../../layout/grid/row.cjs.js"),i=require("../../layout/grid/col.cjs.js"),P=x=>{const{getCurrentBreakpointProps:k}=W.useBreakpointProps(x.defaultServerBreakpoint),{getLabel:h}=X.useLabels(),{id:r,children:w,className:O,openText:j=h("open"),closeText:y=h("close"),hideCollapseText:$=!1,title:d,titleRowProps:S,defaultOpen:B,open:c,onToggle:u,arrowType:s="default",size:o="default",underline:M=!0,toggleLabel:g,iconOnly:R=!1,controlsId:v,inverted:T=!1,...L}=k(x),b=v!==void 0,p=`${r}__trigger`,f=`${r}__content`,D=`${r}__animate`,[C,E]=_.useState(()=>B),m=J.usePrint(),a=_.useMemo(()=>m||(c!==void 0?c:C),[m,c,C]),z=R===!0&&!d,K=T&&s!=="secondary",A=n.default(e.default["tedi-collapse"],o==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],z&&e.default["tedi-collapse--icon-only"],K&&e.default["tedi-collapse--inverted"],e.default[`tedi-collapse--arrow-${s}`],O),q=()=>{const l=!a;E(l),u==null||u(l)},F=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),q())},G=g||(a?y:j),I=_.useMemo(()=>t.jsx("div",{id:f,role:"region","aria-labelledby":p,className:e.default["tedi-collapse__content"],children:w}),[w,f,p]);return t.jsxs("div",{"data-name":"collapse",...L,className:A,children:[t.jsx("button",{id:p,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":G,"aria-expanded":a,"aria-controls":b?v:f,onKeyDown:F,onClick:q,children:t.jsxs(N.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...S,element:"span",children:[d&&t.jsx(i.Col,{"aria-hidden":"true",children:d}),t.jsx(i.Col,{width:"auto",children:t.jsxs(N.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(V.Print,{visibility:"hide",children:t.jsx(i.Col,{width:"auto",className:n.default({"visually-hidden":$}),children:t.jsx(U.Text,{element:"span",className:n.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:M}),children:a?y:j})})}),t.jsx(i.Col,{width:"auto",children:t.jsx("div",{className:n.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${s}`],o==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(Q.Icon,{className:n.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${s}`],o==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:o==="small"||s==="secondary"?18:24})})})]})})]})}),!b&&(m?I:t.jsx(H.default,{id:D,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:I}))]})};exports.Collapse=P;exports.default=P;

package/src/tedi/components/buttons/collapse/collapse.d.ts

@@ -40,6 +40,14 @@ type CollapseBreakpointProps = {
      * @default false
      */
     iconOnly?: boolean;
+    /**
+     * Inverted color palette — flips the link / icon colors to their
+     * inverted-surface equivalents (white text + icon), for use on top of dark
+     * backgrounds. Pairs with both the with-text and icon-only variants; the
+     * secondary-arrow style has no inverted form in the design.
+     * @default false
+     */
+    inverted?: boolean;
 };
 export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps> {
     /**
@@ -76,6 +84,21 @@ export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps
      * If provided, overrides the default open/close text for the accessible name.
      */
     toggleLabel?: string;
+    /**
+     * Use Collapse purely as a toggle trigger for content rendered elsewhere.
+     *
+     * When set, the toggle button's `aria-controls` points at the supplied id
+     * instead of Collapse's internal content panel, and the internal panel is
+     * **not rendered**. Useful when the disclosed region must live outside
+     * Collapse's DOM subtree (e.g. a table row whose details live in a
+     * sibling `<tr>`). The consumer is responsible for rendering the target
+     * element with the matching `id` and an appropriate `role` (typically
+     * `region`).
+     *
+     * When omitted (default), Collapse renders its own `children` inside a
+     * built-in `role="region"` panel.
+     */
+    controlsId?: string;
 }
 export declare const Collapse: (props: CollapseProps) => JSX.Element;
 export default Collapse;

package/src/tedi/components/buttons/collapse/collapse.es.js

@@ -1,55 +1,58 @@
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
-import o from "../../../../../external/classnames/index.es.js";
-import f from "react";
-import A from "../../../../../external/react-animate-height/dist/esm/index.es.js";
-import { usePrint as H } from "../../../providers/printing-provider/printing-provider.es.js";
-import { Icon as q } from "../../base/icon/icon.es.js";
-import { Text as F } from "../../base/typography/text/text.es.js";
-import { Print as G } from "../../misc/print/print.es.js";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import n from "../../../../../external/classnames/index.es.js";
+import h from "react";
+import G from "../../../../../external/react-animate-height/dist/esm/index.es.js";
+import { usePrint as J } from "../../../providers/printing-provider/printing-provider.es.js";
+import { Icon as Q } from "../../base/icon/icon.es.js";
+import { Text as U } from "../../base/typography/text/text.es.js";
+import { Print as V } from "../../misc/print/print.es.js";
 import e from "./collapse.module.scss.es.js";
-import { useBreakpointProps as J } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
-import { Row as k } from "../../layout/grid/row.es.js";
+import { useBreakpointProps as W } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as X } from "../../../providers/label-provider/use-labels.es.js";
+import { Row as P } from "../../layout/grid/row.es.js";
 import { Col as s } from "../../layout/grid/col.es.js";
-const se = (w) => {
-  const { getCurrentBreakpointProps: O } = J(w.defaultServerBreakpoint), { getLabel: y } = Q(), {
+const pe = (w) => {
+  const { getCurrentBreakpointProps: $ } = W(w.defaultServerBreakpoint), { getLabel: y } = X(), {
     id: r,
     children: g,
-    className: P,
-    openText: b = y("open"),
+    className: B,
+    openText: v = y("open"),
     closeText: x = y("close"),
-    hideCollapseText: $ = !1,
+    hideCollapseText: S = !1,
     title: c,
-    titleRowProps: B,
-    defaultOpen: S,
+    titleRowProps: T,
+    defaultOpen: j,
     open: d,
     onToggle: p,
-    arrowType: n = "default",
+    arrowType: a = "default",
     size: i = "default",
-    underline: T = !0,
-    toggleLabel: N,
-    iconOnly: j = !1,
-    ...D
-  } = O(w), m = `${r}__trigger`, u = `${r}__content`, L = `${r}__animate`, [C, M] = f.useState(() => S), _ = H(), a = f.useMemo(
-    () => _ || (d !== void 0 ? d : C),
-    [_, d, C]
-  ), R = j === !0 && !c, z = o(
+    underline: D = !0,
+    toggleLabel: b,
+    iconOnly: E = !1,
+    controlsId: C,
+    inverted: L = !1,
+    ...M
+  } = $(w), I = C !== void 0, m = `${r}__trigger`, u = `${r}__content`, R = `${r}__animate`, [N, z] = h.useState(() => j), _ = J(), o = h.useMemo(
+    () => _ || (d !== void 0 ? d : N),
+    [_, d, N]
+  ), K = E === !0 && !c, A = L && a !== "secondary", H = n(
     e["tedi-collapse"],
     i === "small" && e["tedi-collapse--small"],
-    a && e["tedi-collapse--is-open"],
-    R && e["tedi-collapse--icon-only"],
-    e[`tedi-collapse--arrow-${n}`],
-    P
-  ), v = () => {
-    const l = !a;
-    M(l), p == null || p(l);
-  }, E = (l) => {
-    (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), v());
-  }, K = N || (a ? x : b), I = f.useMemo(
+    o && e["tedi-collapse--is-open"],
+    K && e["tedi-collapse--icon-only"],
+    A && e["tedi-collapse--inverted"],
+    e[`tedi-collapse--arrow-${a}`],
+    B
+  ), k = () => {
+    const l = !o;
+    z(l), p == null || p(l);
+  }, q = (l) => {
+    (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), k());
+  }, F = b || (o ? x : v), O = h.useMemo(
     () => /* @__PURE__ */ t("div", { id: u, role: "region", "aria-labelledby": m, className: e["tedi-collapse__content"], children: g }),
     [g, u, m]
   );
-  return /* @__PURE__ */ h("div", { "data-name": "collapse", ...D, className: z, children: [
+  return /* @__PURE__ */ f("div", { "data-name": "collapse", ...M, className: H, children: [
     /* @__PURE__ */ t(
       "button",
       {
@@ -57,42 +60,42 @@ const se = (w) => {
         type: "button",
         "data-name": "collapse-trigger",
         className: e["tedi-collapse__title"],
-        "aria-label": K,
-        "aria-expanded": a,
-        "aria-controls": u,
-        onKeyDown: E,
-        onClick: v,
-        children: /* @__PURE__ */ h(k, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
+        "aria-label": F,
+        "aria-expanded": o,
+        "aria-controls": I ? C : u,
+        onKeyDown: q,
+        onClick: k,
+        children: /* @__PURE__ */ f(P, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...T, element: "span", children: [
           c && /* @__PURE__ */ t(s, { "aria-hidden": "true", children: c }),
-          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ h(k, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
-            /* @__PURE__ */ t(G, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: o({ "visually-hidden": $ }), children: /* @__PURE__ */ t(
-              F,
+          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ f(P, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
+            /* @__PURE__ */ t(V, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: n({ "visually-hidden": S }), children: /* @__PURE__ */ t(
+              U,
               {
                 element: "span",
-                className: o(e["tedi-collapse__text"], {
-                  [e["tedi-collapse__text--underline"]]: T
+                className: n(e["tedi-collapse__text"], {
+                  [e["tedi-collapse__text--underline"]]: D
                 }),
-                children: a ? x : b
+                children: o ? x : v
               }
             ) }) }),
             /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ t(
               "div",
               {
-                className: o(
+                className: n(
                   e["tedi-collapse__icon-wrapper"],
-                  e[`tedi-collapse__icon-wrapper--${n}`],
+                  e[`tedi-collapse__icon-wrapper--${a}`],
                   i === "small" && e["tedi-collapse__icon-wrapper--small"]
                 ),
                 children: /* @__PURE__ */ t(
-                  q,
+                  Q,
                   {
-                    className: o(
+                    className: n(
                       e["tedi-collapse__icon"],
-                      e[`tedi-collapse__icon--${n}`],
+                      e[`tedi-collapse__icon--${a}`],
                       i === "small" && e["tedi-collapse__icon--small"]
                     ),
                     name: "expand_more",
-                    size: i === "small" || n === "secondary" ? 18 : 24
+                    size: i === "small" || a === "secondary" ? 18 : 24
                   }
                 )
               }
@@ -101,10 +104,10 @@ const se = (w) => {
         ] })
       }
     ),
-    _ ? I : /* @__PURE__ */ t(A, { id: L, duration: 300, height: a ? "auto" : 0, "data-testid": "collapse-inner", children: I })
+    !I && (_ ? O : /* @__PURE__ */ t(G, { id: R, duration: 300, height: o ? "auto" : 0, "data-testid": "collapse-inner", children: O }))
   ] });
 };
 export {
-  se as Collapse,
-  se as default
+  pe as Collapse,
+  pe as default
 };

package/src/tedi/components/buttons/collapse/collapse.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text":"tedi-collapse__text-d150fea1","tedi-collapse__text--underline":"tedi-collapse__text--underline-73ca86bd","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse__icon-wrapper--secondary":"tedi-collapse__icon-wrapper--secondary-3321348a","tedi-collapse__icon--secondary":"tedi-collapse__icon--secondary-f0f3125f","tedi-collapse__icon--default":"tedi-collapse__icon--default-9c7e19e4","tedi-collapse__icon-wrapper--default":"tedi-collapse__icon-wrapper--default-450808b2","tedi-collapse__icon-wrapper--small":"tedi-collapse__icon-wrapper--small-65e6d09a","tedi-collapse--icon-only":"tedi-collapse--icon-only-335962f8","tedi-collapse__content":"tedi-collapse__content-350b91f8","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text":"tedi-collapse__text-d150fea1","tedi-collapse__text--underline":"tedi-collapse__text--underline-73ca86bd","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse__icon-wrapper--secondary":"tedi-collapse__icon-wrapper--secondary-3321348a","tedi-collapse__icon--secondary":"tedi-collapse__icon--secondary-f0f3125f","tedi-collapse__icon--default":"tedi-collapse__icon--default-9c7e19e4","tedi-collapse__icon-wrapper--default":"tedi-collapse__icon-wrapper--default-450808b2","tedi-collapse__icon-wrapper--small":"tedi-collapse__icon-wrapper--small-65e6d09a","tedi-collapse--icon-only":"tedi-collapse--icon-only-335962f8","tedi-collapse__content":"tedi-collapse__content-350b91f8","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3","tedi-collapse--inverted":"tedi-collapse--inverted-bd2d0e21"};exports.default=e;

package/src/tedi/components/buttons/collapse/collapse.module.scss.es.js

@@ -11,7 +11,8 @@ const e = {
   "tedi-collapse__icon-wrapper--small": "tedi-collapse__icon-wrapper--small-65e6d09a",
   "tedi-collapse--icon-only": "tedi-collapse--icon-only-335962f8",
   "tedi-collapse__content": "tedi-collapse__content-350b91f8",
-  "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3"
+  "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3",
+  "tedi-collapse--inverted": "tedi-collapse--inverted-bd2d0e21"
 };
 export {
   e as default

package/src/tedi/components/content/calendar/calendar-grid.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../../../external/classnames/index.cjs.js"),a=require("../../base/typography/text/text.cjs.js"),l=require("../../buttons/button/button.cjs.js"),r=require("./calendar.module.scss.cjs.js"),j=require("../../layout/grid/row.cjs.js"),h=require("../../layout/grid/col.cjs.js"),s=({headerLabel:u,prevAriaLabel:n,nextAriaLabel:c,onPrev:o,onNext:f,items:x,onSelect:p,showNavigation:d,className:_})=>e.jsxs("div",{className:t.default(r.default["tedi-calendar__picker-grid-container"],_),"data-testid":"tedi-picker-grid-container",children:[e.jsxs("div",{className:t.default(r.default["tedi-calendar__picker-grid-header"],{[r.default["tedi-calendar__picker--no-navigation"]]:!d}),children:[d&&e.jsx(l.Button,{type:"button",onClick:o,"aria-label":n,icon:"arrow_back",visualType:"neutral",children:e.jsx(a.Text,{modifiers:"capitalize-first",children:n})}),e.jsx(a.Text,{modifiers:"capitalize-first",children:u}),d&&e.jsx(l.Button,{type:"button",onClick:f,"aria-label":c,icon:"arrow_forward",visualType:"neutral",children:e.jsx(a.Text,{modifiers:"capitalize-first",children:c})})]}),e.jsx("div",{className:t.default(r.default["tedi-calendar__picker-grid"]),children:e.jsx(j.Row,{gutter:2,children:x.map(i=>e.jsx(h.Col,{width:4,children:e.jsx(l.Button,{onClick:()=>p(i.value),className:t.default(r.default["tedi-calendar__grid-button"],{[r.default["tedi-calendar__grid-button--selected"]]:i.isSelected}),"aria-pressed":i.isSelected,noStyle:!0,children:i.label})},i.key))})})]});s.displayName="CalendarGrid";exports.CalendarGrid=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),a=require("../../base/typography/text/text.cjs.js"),l=require("../../buttons/button/button.cjs.js"),r=require("./calendar.module.scss.cjs.js"),j=require("../../layout/grid/row.cjs.js"),h=require("../../layout/grid/col.cjs.js"),s=({headerLabel:u,prevAriaLabel:n,nextAriaLabel:c,onPrev:o,onNext:f,items:x,onSelect:p,showNavigation:d,className:_})=>e.jsxs("div",{className:i.default(r.default["tedi-calendar__picker-grid-container"],_),"data-testid":"tedi-picker-grid-container",children:[e.jsxs("div",{className:i.default(r.default["tedi-calendar__picker-grid-header"],{[r.default["tedi-calendar__picker--no-navigation"]]:!d}),children:[d&&e.jsx(l.Button,{type:"button",onClick:o,"aria-label":n,icon:"arrow_back",visualType:"neutral",children:e.jsx(a.Text,{modifiers:"capitalize-first",children:n})}),e.jsx(a.Text,{modifiers:"capitalize-first",children:u}),d&&e.jsx(l.Button,{type:"button",onClick:f,"aria-label":c,icon:"arrow_forward",visualType:"neutral",children:e.jsx(a.Text,{modifiers:"capitalize-first",children:c})})]}),e.jsx("div",{className:i.default(r.default["tedi-calendar__picker-grid"]),children:e.jsx(j.Row,{gutter:2,children:x.map(t=>e.jsx(h.Col,{width:4,children:e.jsx(l.Button,{onClick:()=>p(t.value),className:i.default(r.default["tedi-calendar__grid-button"],{[r.default["tedi-calendar__grid-button--selected"]]:t.isSelected}),"aria-pressed":t.isSelected,"data-testid":"tedi-calendar-grid-cell",noStyle:!0,children:t.label})},t.key))})})]});s.displayName="CalendarGrid";exports.CalendarGrid=s;

package/src/tedi/components/content/calendar/calendar-grid.es.js

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import a from "../../../../../external/classnames/index.es.js";
-import { Text as l } from "../../base/typography/text/text.es.js";
-import { Button as t } from "../../buttons/button/button.es.js";
+import { Text as t } from "../../base/typography/text/text.es.js";
+import { Button as l } from "../../buttons/button/button.es.js";
 import r from "./calendar.module.scss.es.js";
 import { Row as h } from "../../layout/grid/row.es.js";
 import { Col as k } from "../../layout/grid/col.es.js";
@@ -28,20 +28,21 @@ const y = ({
             [r["tedi-calendar__picker--no-navigation"]]: !d
           }),
           children: [
-            d && /* @__PURE__ */ e(t, { type: "button", onClick: p, "aria-label": c, icon: "arrow_back", visualType: "neutral", children: /* @__PURE__ */ e(l, { modifiers: "capitalize-first", children: c }) }),
-            /* @__PURE__ */ e(l, { modifiers: "capitalize-first", children: s }),
-            d && /* @__PURE__ */ e(t, { type: "button", onClick: m, "aria-label": n, icon: "arrow_forward", visualType: "neutral", children: /* @__PURE__ */ e(l, { modifiers: "capitalize-first", children: n }) })
+            d && /* @__PURE__ */ e(l, { type: "button", onClick: p, "aria-label": c, icon: "arrow_back", visualType: "neutral", children: /* @__PURE__ */ e(t, { modifiers: "capitalize-first", children: c }) }),
+            /* @__PURE__ */ e(t, { modifiers: "capitalize-first", children: s }),
+            d && /* @__PURE__ */ e(l, { type: "button", onClick: m, "aria-label": n, icon: "arrow_forward", visualType: "neutral", children: /* @__PURE__ */ e(t, { modifiers: "capitalize-first", children: n }) })
           ]
         }
       ),
       /* @__PURE__ */ e("div", { className: a(r["tedi-calendar__picker-grid"]), children: /* @__PURE__ */ e(h, { gutter: 2, children: f.map((i) => /* @__PURE__ */ e(k, { width: 4, children: /* @__PURE__ */ e(
-        t,
+        l,
         {
           onClick: () => _(i.value),
           className: a(r["tedi-calendar__grid-button"], {
             [r["tedi-calendar__grid-button--selected"]]: i.isSelected
           }),
           "aria-pressed": i.isSelected,
+          "data-testid": "tedi-calendar-grid-cell",
           noStyle: !0,
           children: i.label
         }

package/src/tedi/components/content/calendar/calendar.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),O=require("../../../../../external/classnames/index.cjs.js"),d=require("./calendar.module.scss.cjs.js"),w=require("./components/calendar-header/calendar-header.cjs.js"),C=require("./components/calendar-month-grid/calendar-month-grid.cjs.js"),E=require("./components/calendar-year-grid/calendar-year-grid.cjs.js"),F=require("../../../../../external/react-day-picker/dist/esm/DayPicker.cjs.js"),H=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),A=({view:s="days",selectionLevel:m="days",currentMonth:c,setCurrentMonth:i,setView:l=()=>"days",mode:S="single",value:a,locale:j=H.et,localeCode:g="et-EE",showOutsideDays:q=!0,disabledMatchers:x,required:b,availableDays:t,unavailableDays:n,footer:k,monthYearSelectType:G,handleSelect:Y,applyValue:y,showNavigation:_=!0,className:u,...P})=>{const h=e=>t?Array.isArray(t)?t.some(f=>f.toDateString()===e.toDateString()):t(e):!0,p=e=>n?Array.isArray(n)?n.some(f=>f.toDateString()===e.toDateString()):n(e):!1,o=[...x??[],...t?[e=>!h(e)]:[],...n?[e=>p(e)]:[]],N=(()=>{switch(S){case"multiple":return{mode:"multiple",selected:Array.isArray(a)?a:void 0};case"range":return{mode:"range",selected:a&&!Array.isArray(a)&&!(a instanceof Date)?a:void 0};default:return{mode:"single",selected:a instanceof Date?a:void 0}}})();return r.jsxs("div",{className:d.default["tedi-calendar__wrapper"],children:[s==="years"&&r.jsx(E.YearGrid,{currentMonth:c,onNavigate:i,showNavigation:_,onSelectYear:e=>{i(e),m==="years"?y(new Date(e.getFullYear(),0,1)):l("months")},className:u}),s==="months"&&r.jsx(C.MonthGrid,{currentMonth:c,onNavigate:i,showNavigation:_,localeCode:g,onSelectMonth:e=>{i(e),m==="months"?y(e):l("days")},className:u}),s==="days"&&r.jsx(F.DayPicker,{...P,...N,locale:j,month:c,onMonthChange:i,showOutsideDays:q,disabled:o.length?o:void 0,required:b,components:{MonthCaption:e=>r.jsx(w.CalendarHeader,{...e,monthYearSelectType:G,onOpenMonthGrid:()=>l("months"),onOpenYearGrid:()=>l("years"),showNavigation:_,localeCode:g,disabledMatchers:o.length?o:void 0}),Nav:()=>r.jsx(r.Fragment,{})},footer:k,classNames:{root:O.default(d.default["tedi-calendar"],u),month_caption:d.default["tedi-calendar__caption"],head:d.default["tedi-calendar__head"],row:d.default["tedi-calendar__row"],day:d.default["tedi-calendar__day"],selected:d.default["tedi-calendar__day--selected"],weekday:d.default["tedi-calendar__weekday"],outside:d.default["tedi-calendar__outside-days"],range_start:d.default["tedi-calendar__range-start"],range_middle:d.default["tedi-calendar__range-middle"],range_end:d.default["tedi-calendar__range-end"],today:d.default["tedi-calendar__today"],disabled:d.default["tedi-calendar__disabled"],month:d.default["tedi-calendar__month"],months:d.default["tedi-calendar__months-container"],footer:d.default["tedi-calendar__footer"],week_number:d.default["tedi-calendar__week-number"]},modifiers:{available:e=>t?h(e):!1,unavailable:e=>n?p(e):!1},modifiersClassNames:{available:d.default["tedi-calendar__available-day"],unavailable:d.default["tedi-calendar__unavailable-day"]},onSelect:Y})]})};A.displayName="Calendar";exports.Calendar=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),S=require("../../../../../external/classnames/index.cjs.js"),a=require("./calendar.module.scss.cjs.js"),F=require("./components/calendar-header/calendar-header.cjs.js"),H=require("./components/calendar-month-grid/calendar-month-grid.cjs.js"),M=require("./components/calendar-year-grid/calendar-year-grid.cjs.js"),R=require("../../../../../external/react-day-picker/dist/esm/DayPicker.cjs.js"),T=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),j=({view:o="days",selectionLevel:f="days",currentMonth:c,setCurrentMonth:i,setView:l=()=>"days",mode:q="single",value:d,locale:x=T.et,localeCode:m="et-EE",showOutsideDays:N=!0,disabledMatchers:k,required:G,availableDays:t,unavailableDays:n,footer:Y,monthYearSelectType:C,handleSelect:P,applyValue:g,showNavigation:_=!0,className:y,bordered:O=!0,...w})=>{const h=O?void 0:a.default["tedi-calendar--borderless"],p=S.default(h,y),b=e=>t?Array.isArray(t)?t.some(u=>u.toDateString()===e.toDateString()):t(e):!0,A=e=>n?Array.isArray(n)?n.some(u=>u.toDateString()===e.toDateString()):n(e):!1,s=[...k??[],...t?[e=>!b(e)]:[],...n?[e=>A(e)]:[]],E=(()=>{switch(q){case"multiple":return{mode:"multiple",selected:Array.isArray(d)?d:void 0};case"range":return{mode:"range",selected:d&&!Array.isArray(d)&&!(d instanceof Date)?d:void 0};default:return{mode:"single",selected:d instanceof Date?d:void 0}}})();return r.jsxs("div",{className:a.default["tedi-calendar__wrapper"],children:[o==="years"&&r.jsx(M.YearGrid,{currentMonth:c,onNavigate:i,showNavigation:_,onSelectYear:e=>{i(e),f==="years"?g(new Date(e.getFullYear(),0,1)):l("months")},className:p}),o==="months"&&r.jsx(H.MonthGrid,{currentMonth:c,onNavigate:i,showNavigation:_,localeCode:m,onSelectMonth:e=>{i(e),f==="months"?g(e):l("days")},className:p}),o==="days"&&r.jsx(R.DayPicker,{...w,...E,locale:x,month:c,onMonthChange:i,showOutsideDays:N,disabled:s.length?s:void 0,required:G,components:{MonthCaption:e=>r.jsx(F.CalendarHeader,{...e,monthYearSelectType:C,onOpenMonthGrid:()=>l("months"),onOpenYearGrid:()=>l("years"),showNavigation:_,localeCode:m,disabledMatchers:s.length?s:void 0}),Nav:()=>r.jsx(r.Fragment,{})},footer:Y,classNames:{root:S.default(a.default["tedi-calendar"],h,y),month_caption:a.default["tedi-calendar__caption"],head:a.default["tedi-calendar__head"],row:a.default["tedi-calendar__row"],day:a.default["tedi-calendar__day"],selected:a.default["tedi-calendar__day--selected"],weekday:a.default["tedi-calendar__weekday"],outside:a.default["tedi-calendar__outside-days"],range_start:a.default["tedi-calendar__range-start"],range_middle:a.default["tedi-calendar__range-middle"],range_end:a.default["tedi-calendar__range-end"],today:a.default["tedi-calendar__today"],disabled:a.default["tedi-calendar__disabled"],month:a.default["tedi-calendar__month"],months:a.default["tedi-calendar__months-container"],footer:a.default["tedi-calendar__footer"],week_number:a.default["tedi-calendar__week-number"]},modifiers:{available:e=>t?b(e):!1,unavailable:e=>n?A(e):!1},modifiersClassNames:{available:a.default["tedi-calendar__available-day"],unavailable:a.default["tedi-calendar__unavailable-day"]},onSelect:P})]})};j.displayName="Calendar";exports.Calendar=j;

package/src/tedi/components/content/calendar/calendar.d.ts

@@ -107,8 +107,16 @@ export interface CalendarProps extends Omit<DayPickerProps, 'mode' | 'selected'
      * Optional additional CSS class for the calendar container.
      */
     className?: string;
+    /**
+     * Whether to render the surrounding card (border, background, radius).
+     * Set to `false` when embedding inside a parent that already provides
+     * its own surface — e.g. alongside a calendar inside `DateTimeField`.
+     * The inner gradient masks and column separators are preserved either way.
+     * @default true
+     */
+    bordered?: boolean;
 }
 export declare const Calendar: {
-    ({ view, selectionLevel, currentMonth, setCurrentMonth, setView, mode, value, locale, localeCode, showOutsideDays, disabledMatchers, required, availableDays, unavailableDays, footer, monthYearSelectType, handleSelect, applyValue, showNavigation, className, ...dayPickerProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+    ({ view, selectionLevel, currentMonth, setCurrentMonth, setView, mode, value, locale, localeCode, showOutsideDays, disabledMatchers, required, availableDays, unavailableDays, footer, monthYearSelectType, handleSelect, applyValue, showNavigation, className, bordered, ...dayPickerProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };