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

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

@@ -0,0 +1,52 @@
+import { jsx as B } from "react/jsx-runtime";
+import { forwardRef as A } from "react";
+import C from "../button-content/button-content.es.js";
+const o = A(
+  (n, e) => {
+    const {
+      children: r,
+      as: i,
+      type: t,
+      formNoValidate: s,
+      visualType: a,
+      color: m,
+      size: u,
+      icon: c,
+      iconLeft: d,
+      iconRight: l,
+      underline: p,
+      isHovered: f,
+      isActive: y,
+      noStyle: b,
+      ...v
+    } = n;
+    return /* @__PURE__ */ B(
+      C,
+      {
+        "data-name": "button",
+        ...v,
+        type: t || "button",
+        formNoValidate: s ?? t === "submit" ? !0 : void 0,
+        ref: e,
+        as: i || "button",
+        visualType: a,
+        color: m,
+        size: u,
+        icon: c,
+        iconLeft: d,
+        iconRight: l,
+        underline: p,
+        isHovered: f,
+        isActive: y,
+        noStyle: b,
+        children: r
+      }
+    );
+  }
+);
+o.displayName = "Button";
+const V = o;
+export {
+  V as Button,
+  V as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("../../../../external/classnames/index.cjs.js"),H=require("react"),q=require("../../../tedi/components/loaders/spinner/spinner.cjs.js"),O=require("../../../tedi/components/misc/print/print.cjs.js"),R=require("../icon/icon.cjs.js"),t=require("./button-content.module.scss.cjs.js"),C=H.forwardRef(({children:f,as:y,text:$,className:i,visualType:B="primary",color:h="default",size:b,icon:s,iconLeft:r,iconRight:u,underline:v=!1,isHovered:I,isActive:M,isLoading:n=!1,noStyle:m,renderWrapperElement:z,fullWidth:p,onClick:_,...x},E)=>{const P=y||"button",N=s||r||u,w=m?l.default(t.default["btn--no-style"],i,{[t.default["btn--full-width"]]:p}):l.default(t.default.btn,t.default[`btn--${B}`],t.default[`btn--${h}`],i,{[t.default[`btn--${b}`]]:b},{[t.default["btn--underline"]]:v},{[t.default["btn--is-hovered"]]:I},{[t.default["btn--is-active"]]:M},{[t.default["btn--is-loading"]]:n},{[t.default["btn--icon-only"]]:s},{[t.default["btn--icon"]]:N},{[t.default["btn--full-width"]]:p}),d=(o,a)=>{const c={size:16,className:l.default(t.default.btn__icon,t.default[`btn__icon--${o}`],{[t.default.btn__spinner]:n})},j=typeof a=="string"?{...c,name:a}:{...c,...a,className:l.default(c.className,a==null?void 0:a.className)};return n?e.jsx(q.Spinner,{className:j.className}):e.jsx(R.Icon,{...j})},S=()=>e.jsxs("span",{className:t.default.btn__inner,children:[s&&d("centre",s),r&&d("left",r),e.jsx("span",{className:t.default.btn__text,children:f}),n&&!N&&e.jsx(q.Spinner,{position:"absolute",className:t.default.btn__spinner}),u&&d("right",u)]}),k=o=>{_&&!n&&_(o)};return e.jsx(O.Print,{visibility:"hide",children:e.jsx(P,{"data-name":"button-content",...x,"aria-disabled":n||x["aria-disabled"],onClick:k,ref:E,className:w,children:m?f:S()})})});C.displayName="ButtonContent";const T=C;exports.default=T;

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { AllowedHTMLTags, PolymorphicComponentPropWithRef } from '../../helpers/polymorphic/types';
+import { IntentionalAny } from '../../types';
+import { ButtonColor, ButtonType } from '../button/button';
+import { IconProps } from '../icon/icon';
+export type ButtonContentProps<C extends React.ElementType, P extends Record<string, IntentionalAny>, A> = PolymorphicComponentPropWithRef<AllowedHTMLTags<C, A>, {
+    /**
+     * Button children
+     */
+    children: React.ReactNode;
+    /**
+     * Additional custom class name.
+     */
+    className?: string;
+    /**
+     * Button visual type
+     * @default primary
+     */
+    visualType?: ButtonType;
+    /**
+     * If button should take all the space it has
+     */
+    fullWidth?: boolean;
+    /**
+     * Color schema for button. PS text-color works only with link type links.
+     * @default default
+     */
+    color?: ButtonColor;
+    /**
+     * Button size
+     */
+    size?: 'small';
+    /**
+     * Name of the icon when button only has an icon in it.
+     */
+    icon?: string | IconProps;
+    /**
+     * Name of the icon we want to show on the left.
+     */
+    iconLeft?: string | IconProps;
+    /**
+     * Name of the icon we want to show on the right.
+     */
+    iconRight?: string | IconProps;
+    /**
+     * Underline the button text
+     */
+    underline?: boolean;
+    /**
+     * If button is active and should keep its hover state.
+     */
+    isHovered?: boolean;
+    /**
+     * If button is active and should keep it's active state.
+     */
+    isActive?: boolean;
+    /**
+     * If button is in loading state and should show spinner.
+     * When isLoading is true, button does not trigger onClick event.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Skip applying button/link styles
+     * Useful when you just want to use Button or Anchor logic without the styles
+     * In this case icon, iconLeft and iconRight are ignored
+     */
+    noStyle?: boolean;
+    /**
+     *
+     */
+    renderWrapperElement?: unknown;
+} & P>;
+export type ButtonContentComponent = <C extends React.ElementType, P extends Record<string, IntentionalAny>, A>(props: ButtonContentProps<C, P, A>) => React.ReactElement | null;
+/**
+ * Shares the rendering logic between `Anchor` and `Button`. We don't export it from the component library.
+ */
+declare const ButtonContent: ButtonContentComponent;
+export default ButtonContent;

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

@@ -0,0 +1,75 @@
+import { jsx as s, jsxs as q } from "react/jsx-runtime";
+import a from "../../../../external/classnames/index.es.js";
+import { forwardRef as z } from "react";
+import { Spinner as C } from "../../../tedi/components/loaders/spinner/spinner.es.js";
+import { Print as A } from "../../../tedi/components/misc/print/print.es.js";
+import { Icon as D } from "../icon/icon.es.js";
+import t from "./button-content.module.scss.es.js";
+const h = z(
+  ({
+    children: p,
+    as: x,
+    text: F,
+    className: i,
+    visualType: I = "primary",
+    color: E = "default",
+    size: f,
+    icon: r,
+    iconLeft: o,
+    iconRight: l,
+    underline: $ = !1,
+    isHovered: v,
+    isActive: w,
+    isLoading: n = !1,
+    noStyle: d,
+    renderWrapperElement: G,
+    fullWidth: u,
+    onClick: _,
+    ...N
+  }, M) => {
+    const P = x || "button", y = r || o || l, j = d ? a(t["btn--no-style"], i, { [t["btn--full-width"]]: u }) : a(
+      t.btn,
+      t[`btn--${I}`],
+      t[`btn--${E}`],
+      i,
+      { [t[`btn--${f}`]]: f },
+      { [t["btn--underline"]]: $ },
+      { [t["btn--is-hovered"]]: v },
+      { [t["btn--is-active"]]: w },
+      { [t["btn--is-loading"]]: n },
+      { [t["btn--icon-only"]]: r },
+      { [t["btn--icon"]]: y },
+      { [t["btn--full-width"]]: u }
+    ), m = (b, e) => {
+      const c = { size: 16, className: a(t.btn__icon, t[`btn__icon--${b}`], {
+        [t.btn__spinner]: n
+      }) }, B = typeof e == "string" ? { ...c, name: e } : { ...c, ...e, className: a(c.className, e == null ? void 0 : e.className) };
+      return n ? /* @__PURE__ */ s(C, { className: B.className }) : /* @__PURE__ */ s(D, { ...B });
+    }, k = () => /* @__PURE__ */ q("span", { className: t.btn__inner, children: [
+      r && m("centre", r),
+      o && m("left", o),
+      /* @__PURE__ */ s("span", { className: t.btn__text, children: p }),
+      n && !y && /* @__PURE__ */ s(C, { position: "absolute", className: t.btn__spinner }),
+      l && m("right", l)
+    ] }), H = (b) => {
+      _ && !n && _(b);
+    };
+    return /* @__PURE__ */ s(A, { visibility: "hide", children: /* @__PURE__ */ s(
+      P,
+      {
+        "data-name": "button-content",
+        ...N,
+        "aria-disabled": n || N["aria-disabled"],
+        onClick: H,
+        ref: M,
+        className: j,
+        children: d ? p : k()
+      }
+    ) });
+  }
+);
+h.displayName = "ButtonContent";
+const W = h;
+export {
+  W as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n="btn-a9ce955b",t="btn__text-7d9d1a13",b="btn__inner-804ab13a",e="btn__icon-738969c8",i="btn__spinner-5ad34e4e",_={btn:n,"btn--small":"btn--small-5daaaf3d","btn--icon-only":"btn--icon-only-375cfc7d","btn--tertiary":"btn--tertiary-c1cc08ad","btn--default":"btn--default-eca73b71","btn--primary":"btn--primary-22126c0a","btn--is-active":"btn--is-active-a0b6b950","btn--is-hovered":"btn--is-hovered-4a27da20","btn--secondary":"btn--secondary-a76a0864","btn--important":"btn--important-1a53be26","btn--positive":"btn--positive-46a2598e","btn--inverted":"btn--inverted-3fc5447d","btn--link":"btn--link-92dffb55","btn--text-color":"btn--text-color-2cc027f7",btn__text:t,"btn--is-loading":"btn--is-loading-00320401","btn--icon":"btn--icon-456b539f",btn__inner:b,"btn__icon-standalone--link":"btn__icon-standalone--link-03d2f699",btn__icon:e,"btn__icon--left":"btn__icon--left-50b31870","btn__icon--right":"btn__icon--right-9b9e8607",btn__spinner:i,"btn--underline":"btn--underline-e2d2c82b","btn--no-style":"btn--no-style-ed081476","btn--full-width":"btn--full-width-9809b856"};exports.btn=n;exports.btn__icon=e;exports.btn__inner=b;exports.btn__spinner=i;exports.btn__text=t;exports.default=_;

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

@@ -0,0 +1,36 @@
+const n = "btn-a9ce955b", t = "btn__text-7d9d1a13", b = "btn__inner-804ab13a", e = "btn__icon-738969c8", i = "btn__spinner-5ad34e4e", a = {
+  btn: n,
+  "btn--small": "btn--small-5daaaf3d",
+  "btn--icon-only": "btn--icon-only-375cfc7d",
+  "btn--tertiary": "btn--tertiary-c1cc08ad",
+  "btn--default": "btn--default-eca73b71",
+  "btn--primary": "btn--primary-22126c0a",
+  "btn--is-active": "btn--is-active-a0b6b950",
+  "btn--is-hovered": "btn--is-hovered-4a27da20",
+  "btn--secondary": "btn--secondary-a76a0864",
+  "btn--important": "btn--important-1a53be26",
+  "btn--positive": "btn--positive-46a2598e",
+  "btn--inverted": "btn--inverted-3fc5447d",
+  "btn--link": "btn--link-92dffb55",
+  "btn--text-color": "btn--text-color-2cc027f7",
+  btn__text: t,
+  "btn--is-loading": "btn--is-loading-00320401",
+  "btn--icon": "btn--icon-456b539f",
+  btn__inner: b,
+  "btn__icon-standalone--link": "btn__icon-standalone--link-03d2f699",
+  btn__icon: e,
+  "btn__icon--left": "btn__icon--left-50b31870",
+  "btn__icon--right": "btn__icon--right-9b9e8607",
+  btn__spinner: i,
+  "btn--underline": "btn--underline-e2d2c82b",
+  "btn--no-style": "btn--no-style-ed081476",
+  "btn--full-width": "btn--full-width-9809b856"
+};
+export {
+  n as btn,
+  e as btn__icon,
+  b as btn__inner,
+  i as btn__spinner,
+  t as btn__text,
+  a as default
+};

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

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

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { TColorsBackground } from '../../commonTypes';
+export type CardContentPaddingNumber = 0 | 0.5 | 0.75 | 1 | 1.5 | 2 | 2.5 | 3;
+export type CardContentPadding = CardContentPaddingNumber | {
+    vertical: CardContentPaddingNumber;
+    horizontal: CardContentPaddingNumber;
+} | {
+    top: CardContentPaddingNumber;
+    right: CardContentPaddingNumber;
+    bottom: CardContentPaddingNumber;
+    left: CardContentPaddingNumber;
+};
+interface CardContentBreakpointProps {
+    /**
+     * Additional class.
+     */
+    className?: string;
+    /**
+     * Card content padding
+     * Values can be:<br />
+     * - predefined number value in rems<br />
+     * - object of separated horizontal and vertical number values in rems
+     * - object of separated top, right, bottom, left number values in rems
+     * @default Padding of Card
+     */
+    padding?: CardContentPadding;
+    /**
+     * Background color of card content
+     * @default Background of Card
+     */
+    background?: TColorsBackground;
+}
+export interface CardContentProps extends BreakpointSupport<CardContentBreakpointProps> {
+    /**
+     * Card Content
+     */
+    children?: React.ReactNode;
+}
+export declare const CardContent: {
+    (props: CardContentProps): JSX.Element;
+    displayName: string;
+};
+export default CardContent;

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

@@ -0,0 +1,30 @@
+import { jsx as c } from "react/jsx-runtime";
+import p from "../../../../../external/classnames/index.es.js";
+import g from "react";
+import l from "../card.module.scss.es.js";
+import { CardContext as u } from "../card-context.es.js";
+import { getPaddingCssVariables as C } from "../utility.es.js";
+import { getBackgroundColorClass as f } from "../../../helpers/background-colors/background-colors.es.js";
+import { useBreakpointProps as k } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const B = (o) => {
+  const { padding: a, background: e } = g.useContext(u), { getCurrentBreakpointProps: n } = k(o.defaultServerBreakpoint), { children: d, className: s, padding: t, background: r, ...m } = n(o, {
+    padding: a,
+    background: e
+  }), i = p(l.card__content, { [f(r)]: r }, s);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-name": "card-content",
+      "data-padding": typeof t == "number" ? `${t}rem` : void 0,
+      style: C(t),
+      ...m,
+      className: i,
+      children: d
+    }
+  );
+};
+B.displayName = "CardContent";
+export {
+  B as CardContent,
+  B as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext({});exports.CardContext=e;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CardContentProps } from './card-content/card-content';
+type CardContext = Pick<CardContentProps, 'padding' | 'background'>;
+export declare const CardContext: React.Context<CardContext>;
+export {};

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

@@ -0,0 +1,5 @@
+import t from "react";
+const o = t.createContext({});
+export {
+  o as CardContext
+};

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

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

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { TColorsBackground } from '../../commonTypes';
+import { CardContentProps } from '../card-content/card-content';
+/**
+ * @deprecated use CardHeaderBackground
+ */
+export type CardHeaderVariant = 'default' | Extract<TColorsBackground, 'primary-main' | 'primary-active' | 'white' | 'bg-muted'>;
+export type CardHeaderBackground = CardHeaderVariant;
+type CardHeaderBreakpointProps = {
+    /**
+     * Additional class.
+     */
+    className?: string;
+    /**
+     * Variant of CardHeader.
+     * @deprecated use background
+     */
+    variant?: CardHeaderVariant;
+    /**
+     * Background color of card header.
+     * Primary-main and primary-active are mainly used inside AccordionItemHeader.
+     * @default default
+     */
+    background?: CardHeaderBackground;
+} & Pick<CardContentProps, 'padding'>;
+export type CardHeaderProps = BreakpointSupport<CardHeaderBreakpointProps> & {
+    /**
+     * Card header content
+     */
+    children?: React.ReactNode;
+} & ({
+    role?: never;
+} | CardHeaderAsButton);
+/**
+ * Allows the CardHeader to be used as a button. For example in the AccordionItemHeader.
+ */
+export interface CardHeaderAsButton extends Partial<React.ButtonHTMLAttributes<HTMLButtonElement>> {
+    role: 'button';
+}
+export declare const CardHeader: {
+    (props: CardHeaderProps): JSX.Element;
+    displayName: string;
+};
+export default CardHeader;

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

@@ -0,0 +1,23 @@
+import { jsx as f } from "react/jsx-runtime";
+import l from "../../../../../external/classnames/index.es.js";
+import u from "react";
+import a from "../card.module.scss.es.js";
+import { CardContext as g } from "../card-context.es.js";
+import { getPaddingCssVariables as C } from "../utility.es.js";
+import { useBreakpointProps as _ } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const k = (r) => {
+  const { variant: e, ...t } = r, { getCurrentBreakpointProps: o } = _(r.defaultServerBreakpoint), { padding: d } = u.useContext(g), { children: s, className: n, background: i, padding: m, ...c } = o(
+    t,
+    {
+      background: e ?? "default",
+      // map deprecated variant prop to background. TODO remove when variant prop is removed
+      padding: d
+    }
+  ), p = l(a.card__header, a[`card__header--${i}`], n);
+  return /* @__PURE__ */ f("div", { "data-name": "card-header", style: C(m), ...c, className: p, children: s });
+};
+k.displayName = "CardHeader";
+export {
+  k as CardHeader,
+  k as default
+};

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="card__notification-b07a1cfd",i={"card__notification-content":"card__notification-content-4c89a40e",card__notification:t};exports.card__notification=t;exports.default=i;

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

@@ -0,0 +1,8 @@
+const t = "card__notification-b07a1cfd", c = {
+  "card__notification-content": "card__notification-content-4c89a40e",
+  card__notification: t
+};
+export {
+  t as card__notification,
+  c as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),C=require("../../../../external/classnames/index.cjs.js"),v=require("react"),r=require("./card.module.scss.cjs.js"),q=require("./card-context.cjs.js"),P=require("./utility.cjs.js"),x=require("../../helpers/hooks/use-breakpoint-props.cjs.js"),t=v.forwardRef((a,s)=>{const{getCurrentBreakpointProps:n}=x.useBreakpointProps(a.defaultServerBreakpoint),{children:c,className:u,padding:i,background:f="bg-default",borderRadius:e,borderless:b,border:m="border-default",...p}=n(a,{padding:1}),[o,d]=P.getCardBorderPlacementColor(m),g=C.default(r.default.card,u,{[r.default[`card--border-${o}`]]:o,[r.default["card--borderless"]]:b,[r.default["card--no-border-radius-top"]]:e===!1||(e==null?void 0:e.top)===!1,[r.default["card--no-border-radius-right"]]:e===!1||(e==null?void 0:e.right)===!1,[r.default["card--no-border-radius-bottom"]]:e===!1||(e==null?void 0:e.bottom)===!1,[r.default["card--no-border-radius-left"]]:e===!1||(e==null?void 0:e.left)===!1});return l.jsx(q.CardContext.Provider,{value:{padding:i,background:f},children:l.jsx("div",{"data-name":"card",...p,className:g,ref:s,style:d?{"--card-border-color":`var(--color-${d})`}:void 0,children:c})})});t.displayName="Card";exports.Card=t;exports.default=t;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { BreakpointSupport } from '../../helpers';
+import { TColorsBorder } from '../commonTypes';
+import { CardContentProps } from './card-content/card-content';
+import { CardHeaderProps } from './card-header/card-header';
+export type CardBorderPlacement = 'top' | 'left';
+export type CardBorderType = 'default' | `${CardBorderPlacement}-${TColorsBorder}` | TColorsBorder;
+type CardBreakpointProps = {
+    /**
+     * Additional class.
+     */
+    className?: string;
+    /**
+     * Follows the order in border-radius CSS property
+     * Top-left / Top-right / Bottom-right / Bottom-left
+     */
+    borderRadius?: false | {
+        top?: boolean;
+        right?: boolean;
+        bottom?: boolean;
+        left?: boolean;
+    };
+    /**
+     * Remove border from card
+     */
+    borderless?: boolean;
+    /**
+     * Type of border
+     * @default border-default
+     */
+    border?: CardBorderType;
+} & Pick<CardContentProps, 'padding' | 'background'>;
+export interface CardProps extends BreakpointSupport<CardBreakpointProps> {
+    /**
+     * CardHeader and/or CardContent.
+     */
+    children?: React.ReactElement<CardContentProps | CardHeaderProps> | React.ReactElement<CardContentProps | CardHeaderProps>[] | React.ReactNode;
+}
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export default Card;

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

@@ -0,0 +1,44 @@
+import { jsx as d } from "react/jsx-runtime";
+import C from "../../../../external/classnames/index.es.js";
+import { forwardRef as u } from "react";
+import o from "./card.module.scss.es.js";
+import { CardContext as v } from "./card-context.es.js";
+import { getCardBorderPlacementColor as B } from "./utility.es.js";
+import { useBreakpointProps as P } from "../../helpers/hooks/use-breakpoint-props.es.js";
+const h = u((e, l) => {
+  const { getCurrentBreakpointProps: s } = P(e.defaultServerBreakpoint), {
+    children: c,
+    className: f,
+    padding: m,
+    background: n = "bg-default",
+    borderRadius: r,
+    borderless: i,
+    border: p = "border-default",
+    ...b
+  } = s(e, {
+    padding: 1
+  }), [a, t] = B(p), g = C(o.card, f, {
+    [o[`card--border-${a}`]]: a,
+    [o["card--borderless"]]: i,
+    [o["card--no-border-radius-top"]]: r === !1 || (r == null ? void 0 : r.top) === !1,
+    [o["card--no-border-radius-right"]]: r === !1 || (r == null ? void 0 : r.right) === !1,
+    [o["card--no-border-radius-bottom"]]: r === !1 || (r == null ? void 0 : r.bottom) === !1,
+    [o["card--no-border-radius-left"]]: r === !1 || (r == null ? void 0 : r.left) === !1
+  });
+  return /* @__PURE__ */ d(v.Provider, { value: { padding: m, background: n }, children: /* @__PURE__ */ d(
+    "div",
+    {
+      "data-name": "card",
+      ...b,
+      className: g,
+      ref: l,
+      style: t ? { "--card-border-color": `var(--color-${t})` } : void 0,
+      children: c
+    }
+  ) });
+});
+h.displayName = "Card";
+export {
+  h as Card,
+  h as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r="card-1dcacf64",d="card__content-815d48ff",e="card__header-5d78acc3",a={card:r,"card--borderless":"card--borderless-32e5f5c2","card--no-border-radius-top":"card--no-border-radius-top-b4365e4f",card__content:d,"card--no-border-radius-right":"card--no-border-radius-right-3ceb8758","card--no-border-radius-bottom":"card--no-border-radius-bottom-63f3360b","card--no-border-radius-left":"card--no-border-radius-left-a3acce4a","card--border-left":"card--border-left-e9b3151f","card--border-top":"card--border-top-e2a66b39","card__header--default":"card__header--default-90734e02","card__header--primary-main":"card__header--primary-main-8de91e10","card__header--primary-active":"card__header--primary-active-6877b9af","card__header--white":"card__header--white-9243bce2","card__header--bg-muted":"card__header--bg-muted-7904d086",card__header:e};exports.card=r;exports.card__content=d;exports.card__header=e;exports.default=a;

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

@@ -0,0 +1,23 @@
+const r = "card-1dcacf64", d = "card__content-815d48ff", a = "card__header-5d78acc3", e = {
+  card: r,
+  "card--borderless": "card--borderless-32e5f5c2",
+  "card--no-border-radius-top": "card--no-border-radius-top-b4365e4f",
+  card__content: d,
+  "card--no-border-radius-right": "card--no-border-radius-right-3ceb8758",
+  "card--no-border-radius-bottom": "card--no-border-radius-bottom-63f3360b",
+  "card--no-border-radius-left": "card--no-border-radius-left-a3acce4a",
+  "card--border-left": "card--border-left-e9b3151f",
+  "card--border-top": "card--border-top-e2a66b39",
+  "card__header--default": "card__header--default-90734e02",
+  "card__header--primary-main": "card__header--primary-main-8de91e10",
+  "card__header--primary-active": "card__header--primary-active-6877b9af",
+  "card__header--white": "card__header--white-9243bce2",
+  "card__header--bg-muted": "card__header--bg-muted-7904d086",
+  card__header: a
+};
+export {
+  r as card,
+  d as card__content,
+  a as card__header,
+  e as default
+};

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

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

package/src/community/components/card/utility.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=t=>{const e=t==null?void 0:t.replace(/(top-)|(left-)/s,"");return[t==null?void 0:t.replace(new RegExp(`(${e})|-`,"g"),""),e]},P=t=>{const e=o=>typeof o=="object"&&"vertical"in o&&"horizontal"in o,r=typeof t=="number"?t:e(t)?t.vertical:t==null?void 0:t.top,c=typeof t=="number"?t:e(t)?t.horizontal:t==null?void 0:t.right,l=typeof t=="number"?t:e(t)?t.vertical:t==null?void 0:t.bottom,s=typeof t=="number"?t:e(t)?t.horizontal:t==null?void 0:t.left;return{"--card-content-padding-top":`${r}rem`,"--card-content-padding-right":`${c}rem`,"--card-content-padding-bottom":`${l}rem`,"--card-content-padding-left":`${s}rem`}};exports.getCardBorderPlacementColor=m;exports.getPaddingCssVariables=P;

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

@@ -0,0 +1,11 @@
+import { TColorsBorder } from '../commonTypes';
+import { CardBorderPlacement, CardProps } from './card';
+import { CardContentProps } from './card-content/card-content';
+export type CardBorderTypeArray = [CardBorderPlacement, TColorsBorder];
+export declare const getCardBorderPlacementColor: (border?: CardProps["border"]) => CardBorderTypeArray | [];
+export declare const getPaddingCssVariables: (padding: CardContentProps["padding"]) => {
+    '--card-content-padding-top': string;
+    '--card-content-padding-right': string;
+    '--card-content-padding-bottom': string;
+    '--card-content-padding-left': string;
+};

package/src/community/components/card/utility.es.js

@@ -0,0 +1,16 @@
+const s = (t) => {
+  const e = t == null ? void 0 : t.replace(/(top-)|(left-)/s, "");
+  return [t == null ? void 0 : t.replace(new RegExp(`(${e})|-`, "g"), ""), e];
+}, f = (t) => {
+  const e = (o) => typeof o == "object" && "vertical" in o && "horizontal" in o, c = typeof t == "number" ? t : e(t) ? t.vertical : t == null ? void 0 : t.top, r = typeof t == "number" ? t : e(t) ? t.horizontal : t == null ? void 0 : t.right, l = typeof t == "number" ? t : e(t) ? t.vertical : t == null ? void 0 : t.bottom, m = typeof t == "number" ? t : e(t) ? t.horizontal : t == null ? void 0 : t.left;
+  return {
+    "--card-content-padding-top": `${c}rem`,
+    "--card-content-padding-right": `${r}rem`,
+    "--card-content-padding-bottom": `${l}rem`,
+    "--card-content-padding-left": `${m}rem`
+  };
+};
+export {
+  s as getCardBorderPlacementColor,
+  f as getPaddingCssVariables
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("../../../../external/classnames/index.cjs.js"),R=require("react"),S=require("../../../../external/react-animate-height/dist/esm/index.cjs.js"),I=require("../../../tedi/components/misc/print/print.cjs.js"),T=require("../icon/icon.cjs.js"),L=require("../typography/text/text.cjs.js"),n=require("./collapse.module.scss.cjs.js"),M=require("../../../tedi/helpers/hooks/use-print.cjs.js"),h=require("../../../tedi/components/layout/grid/row.cjs.js"),l=require("../../../tedi/components/layout/grid/col.cjs.js"),D=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),m=j=>{const{getLabel:a}=D.useLabels(),{id:i,children:f,className:q,openText:w=a("open"),closeText:C=a("close"),hideCollapseText:_=!1,title:r,titleRowProps:b,defaultOpen:v,open:c,onToggle:o,...g}=j,[y,N]=R.useState(v),d=M.usePrint(),s=d||(c!==void 0?c:y),P=x.default(n.default.collapse,q,{[n.default["collapse--is-open"]]:s}),u=()=>{N(t=>!t),o==null||o(!s)},O=t=>{(t.code==="Enter"||t.code==="Space")&&!t.repeat&&(t.preventDefault(),u())},p=e.jsx("div",{className:n.default.collapse__content,children:f});return e.jsxs("div",{"data-name":"collapse",...g,className:P,children:[e.jsx("button",{type:"button","data-name":"collapse-trigger",className:n.default.collapse__title,"aria-expanded":s,"aria-controls":i,onKeyDown:O,onClick:u,children:e.jsxs(h.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...b,element:"span",children:[r&&e.jsx(l.Col,{children:r}),e.jsx(l.Col,{width:"auto",children:e.jsxs(h.Row,{element:"span",alignItems:"center",gutter:1,children:[e.jsx(I.Print,{visibility:"hide",children:e.jsx(l.Col,{width:"auto",className:x.default({"visually-hidden":_}),children:e.jsx(L.Text,{element:"span",color:"primary",children:s?C:w})})}),e.jsx(l.Col,{width:"auto",children:e.jsx(T.Icon,{className:n.default.collapse__icon,name:"expand_more"})})]})})]})}),d?p:e.jsx(S.default,{duration:300,id:i,height:s?"auto":0,"data-testid":"collapse-inner",children:p})]})};exports.Collapse=m;exports.default=m;