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

package/src/tedi/components/misc/scroll-visibility/scroll-visibility.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+export type AnimationDirection = 'left' | 'right' | 'down' | 'up' | 'center';
+export interface ScrollVisibilityProps {
+    /**
+     * Content to hide/show
+     */
+    children: ReactNode;
+    /**
+     * Additional class name which applies to first child element
+     */
+    className?: string;
+    /**
+     * Conditionally enable the functionality
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Determines wheter to hide or show when scrolled past scrollDistance
+     * @default hide
+     */
+    visibility?: 'hide' | 'show';
+    /**
+     * Determines if the component's visibility toggles when scrolling opposite direction after crossing scrollDistance
+     * @default false
+     */
+    toggleVisibility?: boolean;
+    /**
+     * Distance in px user has to scroll for the component to show/hide
+     * @default 100
+     */
+    scrollDistance?: number;
+    /**
+     * Direction used to calculate `scrollDistance`:
+     * - down: Measured from the top of the page.
+     * - up: Measured from the bottom of the page.
+     * @default down
+     */
+    scrollDirection?: 'up' | 'down';
+    /**
+     * Detect scroll based on this element
+     * @default document.documentElement
+     */
+    scrollContainer?: HTMLElement;
+    /**
+     * Direction the component animates to
+     * @default center
+     */
+    animationDirection?: AnimationDirection;
+}
+export declare const ScrollVisibility: (props: ScrollVisibilityProps) => import("react/jsx-runtime").JSX.Element;
+export default ScrollVisibility;

package/src/tedi/components/misc/scroll-visibility/scroll-visibility.es.js

@@ -0,0 +1,40 @@
+import { jsx as D } from "react/jsx-runtime";
+import h from "../../../../../external/classnames/index.es.js";
+import { useState as N, useRef as g, useEffect as E, cloneElement as H, isValidElement as V } from "react";
+import { useScroll as x } from "../../../helpers/hooks/use-scroll.es.js";
+import m from "./scroll-visibility.module.scss.es.js";
+const M = (b) => {
+  const {
+    children: s,
+    enabled: t = !0,
+    className: y,
+    visibility: n = "hide",
+    toggleVisibility: f = !1,
+    scrollDistance: l = 100,
+    scrollDirection: o = "down",
+    scrollContainer: S,
+    animationDirection: w = "center"
+  } = b, { scrollTop: e, scrollHeight: r, clientHeight: c } = x(S), [v, a] = N(() => {
+    if (!t) return !1;
+    const i = o === "down" ? e : r - c - e;
+    return n === "hide" ? i > l : i <= l;
+  }), u = g(o === "down" ? e : r - c - e);
+  E(() => {
+    if (!t) return;
+    const i = n === "show", d = o === "down" ? e : r - c - e;
+    f && d < u.current ? a(i) : d > l ? a(!i) : a(i), u.current = d;
+  }, [n, f, l, e, t, o, r, c]);
+  const p = h(
+    m["tedi-scroll-visibility"],
+    m[`tedi-scroll-visibility--${w}`],
+    {
+      [m["tedi-scroll-visibility--hidden"]]: t && v
+    },
+    y
+  );
+  return V(s) ? H(s, { className: h(s.props.className, p) }) : /* @__PURE__ */ D("div", { className: p, children: s });
+};
+export {
+  M as ScrollVisibility,
+  M as default
+};

package/src/tedi/components/misc/scroll-visibility/scroll-visibility.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-scroll-visibility":"tedi-scroll-visibility-5ec462c9","tedi-scroll-visibility--hidden":"tedi-scroll-visibility--hidden-cb9fb0d8","tedi-scroll-visibility--down":"tedi-scroll-visibility--down-89277867","tedi-scroll-visibility--up":"tedi-scroll-visibility--up-9ff1fd42","tedi-scroll-visibility--left":"tedi-scroll-visibility--left-3fd055c8","tedi-scroll-visibility--right":"tedi-scroll-visibility--right-e7e75856","tedi-scroll-visibility--center":"tedi-scroll-visibility--center-59611067"};exports.default=i;

package/src/tedi/components/misc/scroll-visibility/scroll-visibility.module.scss.es.js

@@ -0,0 +1,12 @@
+const i = {
+  "tedi-scroll-visibility": "tedi-scroll-visibility-5ec462c9",
+  "tedi-scroll-visibility--hidden": "tedi-scroll-visibility--hidden-cb9fb0d8",
+  "tedi-scroll-visibility--down": "tedi-scroll-visibility--down-89277867",
+  "tedi-scroll-visibility--up": "tedi-scroll-visibility--up-9ff1fd42",
+  "tedi-scroll-visibility--left": "tedi-scroll-visibility--left-3fd055c8",
+  "tedi-scroll-visibility--right": "tedi-scroll-visibility--right-e7e75856",
+  "tedi-scroll-visibility--center": "tedi-scroll-visibility--center-59611067"
+};
+export {
+  i as default
+};

package/src/tedi/components/misc/separator/separator.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),B=require("../../../../../external/classnames/index.cjs.js"),e=require("./separator.module.scss.cjs.js"),q=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),f=r=>{const{getCurrentBreakpointProps:m}=q.useBreakpointProps(r.defaultServerBreakpoint),{className:$,element:g="div",isStretched:S,spacing:a,topSpacing:s,bottomSpacing:o,axis:i="horizontal",color:d="default",variant:t,thickness:l=1,height:p,dotSize:n,display:u="block",...h}=m(r),k=B.default(e.default["tedi-separator"],$,{[e.default[`tedi-separator--${d}`]]:d},{[e.default[`tedi-separator--${i}`]]:i},{[e.default[`tedi-separator--${t}`]]:t},{[e.default[`tedi-separator--${u}`]]:u},{[e.default[`tedi-separator--${t}-${n}`]]:t&&n},{[e.default[`tedi-separator--thickness-${l}`]]:l&&!t},{[e.default["tedi-separator--is-stretched"]]:S},{[e.default[`tedi-separator--spacing-${a}`.replace(".","-")]]:a},{[e.default[`tedi-separator--top-${s}`.replace(".","-")]]:!a&&s},{[e.default[`tedi-separator--bottom-${o}`.replace(".","-")]]:!a&&o}),v=()=>{const c={};return p&&(c["--vertical-separator-height"]=`${p}rem`),c};return b.jsx(g,{"data-name":"separator",...h,style:v(),className:k})};exports.Separator=f;exports.default=f;

package/src/tedi/components/misc/separator/separator.d.ts

@@ -0,0 +1,77 @@
+import { BreakpointSupport } from '../../../helpers';
+export type SeparatorSpacing = 0 | 0.25 | 0.5 | 0.75 | 1 | 1.25 | 1.5 | 1.75 | 2 | 2.5 | 5;
+export interface SeparatorSharedProps {
+    /**
+     * Additional class.
+     */
+    className?: string;
+    /**
+     * Rendered HTML element.
+     * @default div
+     */
+    element?: 'hr' | 'div' | 'span';
+    /**
+     * Whether the separator should stretch to fill the full spacing inside cardContent.
+     */
+    isStretched?: boolean;
+    color?: 'primary' | 'secondary' | 'accent';
+    variant?: 'dotted' | 'dotted-small' | 'dot-only';
+    dotSize?: 'large' | 'medium' | 'small' | 'extra-small';
+    thickness?: 1 | 2;
+    /**
+     * Spacing applied based on the axis:
+     * - For horizontal axis, spacing is applied to top and bottom of the separator.
+     * - For vertical axis, spacing is applied to left and right of the separator.
+     */
+    spacing?: SeparatorSpacing;
+}
+export interface SeparatorVerticalProps extends SeparatorSharedProps {
+    /**
+     * Height of separator. Use with vertical axis, when full-width separator is not needed.
+     * Height can be number in rem units. It's customizable to allow for more flexibility around X components.
+     */
+    height?: number;
+    /**
+     * Axis of separator, vertical and horizontal separators support different props
+     */
+    axis: 'vertical';
+    topSpacing?: undefined;
+    bottomSpacing?: undefined;
+    display?: 'block' | 'inline';
+}
+export interface SeparatorHorizontalProps extends SeparatorSharedProps {
+    /**
+     * Spacing on top of separator. Ignored when spacing is also used. Only for horizontal axis.
+     */
+    topSpacing?: SeparatorSpacing;
+    /**
+     * Spacing on bottom of separator. Ignored when spacing is also used. Only for horizontal axis.
+     */
+    bottomSpacing?: SeparatorSpacing;
+    /**
+     * Axis of separator, vertical and horizontal separators support different props
+     */
+    axis?: 'horizontal';
+    height?: undefined;
+    display?: 'block';
+}
+export type SeparatorBreakpointProps = {
+    /**
+     * Spacing values based on breakpoints.
+     */
+    spacing?: Omit<SeparatorHorizontalProps['spacing'], 'axis'>;
+    /**
+     * Height values based on breakpoints (for vertical separators).
+     */
+    height?: Omit<SeparatorVerticalProps['height'], 'axis'>;
+    axis?: 'horizontal' | 'vertical';
+};
+export type SeparatorProps = BreakpointSupport<(SeparatorHorizontalProps | (SeparatorVerticalProps & {
+    variant?: 'dotted' | 'dotted-small';
+    dotSize?: undefined;
+})) | (SeparatorHorizontalProps | (SeparatorVerticalProps & {
+    variant: 'dot-only';
+    dotSize: 'large' | 'medium' | 'small' | 'extra-small';
+}))> & SeparatorBreakpointProps;
+export declare const Separator: (props: SeparatorProps) => JSX.Element;
+export default Separator;

package/src/tedi/components/misc/separator/separator.es.js

@@ -0,0 +1,43 @@
+import { jsx as k } from "react/jsx-runtime";
+import v from "../../../../../external/classnames/index.es.js";
+import t from "./separator.module.scss.es.js";
+import { useBreakpointProps as B } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const z = (a) => {
+  const { getCurrentBreakpointProps: $ } = B(a.defaultServerBreakpoint), {
+    className: g,
+    element: h = "div",
+    isStretched: f,
+    spacing: r,
+    topSpacing: s,
+    bottomSpacing: o,
+    axis: i = "horizontal",
+    color: p = "default",
+    variant: e,
+    thickness: c = 1,
+    height: n,
+    dotSize: d,
+    display: l = "block",
+    ...u
+  } = $(a), S = v(
+    t["tedi-separator"],
+    g,
+    { [t[`tedi-separator--${p}`]]: p },
+    { [t[`tedi-separator--${i}`]]: i },
+    { [t[`tedi-separator--${e}`]]: e },
+    { [t[`tedi-separator--${l}`]]: l },
+    { [t[`tedi-separator--${e}-${d}`]]: e && d },
+    { [t[`tedi-separator--thickness-${c}`]]: c && !e },
+    { [t["tedi-separator--is-stretched"]]: f },
+    { [t[`tedi-separator--spacing-${r}`.replace(".", "-")]]: r },
+    { [t[`tedi-separator--top-${s}`.replace(".", "-")]]: !r && s },
+    { [t[`tedi-separator--bottom-${o}`.replace(".", "-")]]: !r && o }
+  );
+  return /* @__PURE__ */ k(h, { "data-name": "separator", ...u, style: (() => {
+    const m = {};
+    return n && (m["--vertical-separator-height"] = `${n}rem`), m;
+  })(), className: S });
+};
+export {
+  z as Separator,
+  z as default
+};

package/src/tedi/components/misc/separator/separator.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-separator":"tedi-separator-08861c00","tedi-separator--vertical":"tedi-separator--vertical-fee3a031","tedi-separator--secondary":"tedi-separator--secondary-bb0cc0a1","tedi-separator--accent":"tedi-separator--accent-17878389","tedi-separator--block":"tedi-separator--block-48f7fe7e","tedi-separator--inline":"tedi-separator--inline-9021c8fe","tedi-separator--dotted":"tedi-separator--dotted-e3766e9c","tedi-separator--dotted-small":"tedi-separator--dotted-small-71e3be2e","tedi-separator--is-stretched":"tedi-separator--is-stretched-dfd66f31","tedi-separator--horizontal":"tedi-separator--horizontal-47a3986e","tedi-separator--top-0":"tedi-separator--top-0-677363d3","tedi-separator--bottom-0":"tedi-separator--bottom-0-e8608c44","tedi-separator--spacing-0":"tedi-separator--spacing-0-d3de83fa","tedi-separator--dot-only":"tedi-separator--dot-only-3babc1e5","tedi-separator--top-0-25":"tedi-separator--top-0-25-e87283bc","tedi-separator--bottom-0-25":"tedi-separator--bottom-0-25-c79e8c15","tedi-separator--spacing-0-25":"tedi-separator--spacing-0-25-6773860d","tedi-separator--top-0-5":"tedi-separator--top-0-5-e324a36c","tedi-separator--bottom-0-5":"tedi-separator--bottom-0-5-33887212","tedi-separator--spacing-0-5":"tedi-separator--spacing-0-5-36726d06","tedi-separator--top-0-75":"tedi-separator--top-0-75-e74f255c","tedi-separator--bottom-0-75":"tedi-separator--bottom-0-75-48b41611","tedi-separator--spacing-0-75":"tedi-separator--spacing-0-75-9bb50a77","tedi-separator--top-1":"tedi-separator--top-1-655231b6","tedi-separator--bottom-1":"tedi-separator--bottom-1-7e9cb062","tedi-separator--spacing-1":"tedi-separator--spacing-1-a40c2177","tedi-separator--top-1-25":"tedi-separator--top-1-25-b2261ac9","tedi-separator--bottom-1-25":"tedi-separator--bottom-1-25-0f204938","tedi-separator--spacing-1-25":"tedi-separator--spacing-1-25-d53a5705","tedi-separator--top-1-5":"tedi-separator--top-1-5-a2896e5b","tedi-separator--bottom-1-5":"tedi-separator--bottom-1-5-521ea969","tedi-separator--spacing-1-5":"tedi-separator--spacing-1-5-eec3fd3a","tedi-separator--top-1-75":"tedi-separator--top-1-75-376bb3f5","tedi-separator--bottom-1-75":"tedi-separator--bottom-1-75-601de207","tedi-separator--spacing-1-75":"tedi-separator--spacing-1-75-2738dc67","tedi-separator--top-2":"tedi-separator--top-2-d45b7bb4","tedi-separator--bottom-2":"tedi-separator--bottom-2-e0846020","tedi-separator--spacing-2":"tedi-separator--spacing-2-2b1d21c5","tedi-separator--top-2-5":"tedi-separator--top-2-5-9b0adc94","tedi-separator--bottom-2-5":"tedi-separator--bottom-2-5-3b00b4c4","tedi-separator--spacing-2-5":"tedi-separator--spacing-2-5-28334f74","tedi-separator--top-5":"tedi-separator--top-5-06286d83","tedi-separator--bottom-5":"tedi-separator--bottom-5-44801c7a","tedi-separator--spacing-5":"tedi-separator--spacing-5-86a9da4b","tedi-separator--thickness-1":"tedi-separator--thickness-1-d3383a73","tedi-separator--thickness-2":"tedi-separator--thickness-2-c8739ef3","tedi-separator--dot-only-extra-small":"tedi-separator--dot-only-extra-small-2eed2366","tedi-separator--dot-only-small":"tedi-separator--dot-only-small-fc9bf9ea","tedi-separator--dot-only-medium":"tedi-separator--dot-only-medium-d8c48848","tedi-separator--dot-only-large":"tedi-separator--dot-only-large-37aaffff","tedi-separator--primary":"tedi-separator--primary-9aa696f5"};exports.default=t;

package/src/tedi/components/misc/separator/separator.module.scss.es.js

@@ -0,0 +1,56 @@
+const t = {
+  "tedi-separator": "tedi-separator-08861c00",
+  "tedi-separator--vertical": "tedi-separator--vertical-fee3a031",
+  "tedi-separator--secondary": "tedi-separator--secondary-bb0cc0a1",
+  "tedi-separator--accent": "tedi-separator--accent-17878389",
+  "tedi-separator--block": "tedi-separator--block-48f7fe7e",
+  "tedi-separator--inline": "tedi-separator--inline-9021c8fe",
+  "tedi-separator--dotted": "tedi-separator--dotted-e3766e9c",
+  "tedi-separator--dotted-small": "tedi-separator--dotted-small-71e3be2e",
+  "tedi-separator--is-stretched": "tedi-separator--is-stretched-dfd66f31",
+  "tedi-separator--horizontal": "tedi-separator--horizontal-47a3986e",
+  "tedi-separator--top-0": "tedi-separator--top-0-677363d3",
+  "tedi-separator--bottom-0": "tedi-separator--bottom-0-e8608c44",
+  "tedi-separator--spacing-0": "tedi-separator--spacing-0-d3de83fa",
+  "tedi-separator--dot-only": "tedi-separator--dot-only-3babc1e5",
+  "tedi-separator--top-0-25": "tedi-separator--top-0-25-e87283bc",
+  "tedi-separator--bottom-0-25": "tedi-separator--bottom-0-25-c79e8c15",
+  "tedi-separator--spacing-0-25": "tedi-separator--spacing-0-25-6773860d",
+  "tedi-separator--top-0-5": "tedi-separator--top-0-5-e324a36c",
+  "tedi-separator--bottom-0-5": "tedi-separator--bottom-0-5-33887212",
+  "tedi-separator--spacing-0-5": "tedi-separator--spacing-0-5-36726d06",
+  "tedi-separator--top-0-75": "tedi-separator--top-0-75-e74f255c",
+  "tedi-separator--bottom-0-75": "tedi-separator--bottom-0-75-48b41611",
+  "tedi-separator--spacing-0-75": "tedi-separator--spacing-0-75-9bb50a77",
+  "tedi-separator--top-1": "tedi-separator--top-1-655231b6",
+  "tedi-separator--bottom-1": "tedi-separator--bottom-1-7e9cb062",
+  "tedi-separator--spacing-1": "tedi-separator--spacing-1-a40c2177",
+  "tedi-separator--top-1-25": "tedi-separator--top-1-25-b2261ac9",
+  "tedi-separator--bottom-1-25": "tedi-separator--bottom-1-25-0f204938",
+  "tedi-separator--spacing-1-25": "tedi-separator--spacing-1-25-d53a5705",
+  "tedi-separator--top-1-5": "tedi-separator--top-1-5-a2896e5b",
+  "tedi-separator--bottom-1-5": "tedi-separator--bottom-1-5-521ea969",
+  "tedi-separator--spacing-1-5": "tedi-separator--spacing-1-5-eec3fd3a",
+  "tedi-separator--top-1-75": "tedi-separator--top-1-75-376bb3f5",
+  "tedi-separator--bottom-1-75": "tedi-separator--bottom-1-75-601de207",
+  "tedi-separator--spacing-1-75": "tedi-separator--spacing-1-75-2738dc67",
+  "tedi-separator--top-2": "tedi-separator--top-2-d45b7bb4",
+  "tedi-separator--bottom-2": "tedi-separator--bottom-2-e0846020",
+  "tedi-separator--spacing-2": "tedi-separator--spacing-2-2b1d21c5",
+  "tedi-separator--top-2-5": "tedi-separator--top-2-5-9b0adc94",
+  "tedi-separator--bottom-2-5": "tedi-separator--bottom-2-5-3b00b4c4",
+  "tedi-separator--spacing-2-5": "tedi-separator--spacing-2-5-28334f74",
+  "tedi-separator--top-5": "tedi-separator--top-5-06286d83",
+  "tedi-separator--bottom-5": "tedi-separator--bottom-5-44801c7a",
+  "tedi-separator--spacing-5": "tedi-separator--spacing-5-86a9da4b",
+  "tedi-separator--thickness-1": "tedi-separator--thickness-1-d3383a73",
+  "tedi-separator--thickness-2": "tedi-separator--thickness-2-c8739ef3",
+  "tedi-separator--dot-only-extra-small": "tedi-separator--dot-only-extra-small-2eed2366",
+  "tedi-separator--dot-only-small": "tedi-separator--dot-only-small-fc9bf9ea",
+  "tedi-separator--dot-only-medium": "tedi-separator--dot-only-medium-d8c48848",
+  "tedi-separator--dot-only-large": "tedi-separator--dot-only-large-37aaffff",
+  "tedi-separator--primary": "tedi-separator--primary-9aa696f5"
+};
+export {
+  t as default
+};

package/src/tedi/components/misc/stretch-content/stretch-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),d=require("./stretch-content.module.scss.cjs.js"),h=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),t=e=>{const{getCurrentBreakpointProps:r}=h.useBreakpointProps(e.defaultServerBreakpoint),{children:n,role:o,direction:s="both",className:c,...u}=r(e),i=l.default(d.default[`tedi-stretch-content--${s}`],c);return a.jsx("div",{className:i,role:o,...u,children:n})};exports.StretchContent=t;exports.default=t;

package/src/tedi/components/misc/stretch-content/stretch-content.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { BreakpointSupport } from '../../../helpers';
+type StretchContentDirection = 'both' | 'horizontal' | 'vertical';
+interface StretchContentBreakpointProps {
+    /**
+     * An optional additional CSS class name to customize the styling of the container.
+     * This will be appended to the default BEM class generated for the component.
+     */
+    className?: string;
+    /**
+     * Specifies the axis along which the child element should be stretched.
+     * - `both` (default): Stretches the child element both horizontally and vertically.
+     * - `horizontal`: Stretches the child element only horizontally (width).
+     * - `vertical`: Stretches the child element only vertically (height).
+     * @default 'both'
+     */
+    direction?: StretchContentDirection;
+}
+export interface StretchContentProps extends BreakpointSupport<StretchContentBreakpointProps> {
+    /**
+     * Element that will be stretched within the container.
+     */
+    children: React.ReactElement;
+    /**
+     * Accessibility role for the container.
+     * @default none
+     */
+    role?: React.AriaRole;
+}
+export declare const StretchContent: (props: StretchContentProps) => JSX.Element;
+export default StretchContent;

package/src/tedi/components/misc/stretch-content/stretch-content.es.js

@@ -0,0 +1,18 @@
+import { jsx as i } from "react/jsx-runtime";
+import m from "../../../../../external/classnames/index.es.js";
+import l from "./stretch-content.module.scss.es.js";
+import { useBreakpointProps as p } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const B = (t) => {
+  const { getCurrentBreakpointProps: e } = p(t.defaultServerBreakpoint), {
+    children: r,
+    role: o,
+    direction: s = "both",
+    className: n,
+    ...c
+  } = e(t), a = m(l[`tedi-stretch-content--${s}`], n);
+  return /* @__PURE__ */ i("div", { className: a, role: o, ...c, children: r });
+};
+export {
+  B as StretchContent,
+  B as default
+};

package/src/tedi/components/misc/stretch-content/stretch-content.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-stretch-content--both":"tedi-stretch-content--both-fe1cc71d","tedi-stretch-content--horizontal":"tedi-stretch-content--horizontal-ab609201","tedi-stretch-content--vertical":"tedi-stretch-content--vertical-8c4e4c18"};exports.default=t;

package/src/tedi/components/misc/stretch-content/stretch-content.module.scss.es.js

@@ -0,0 +1,8 @@
+const t = {
+  "tedi-stretch-content--both": "tedi-stretch-content--both-fe1cc71d",
+  "tedi-stretch-content--horizontal": "tedi-stretch-content--horizontal-ab609201",
+  "tedi-stretch-content--vertical": "tedi-stretch-content--vertical-8c4e4c18"
+};
+export {
+  t as default
+};

package/src/tedi/components/navigation/hash-trigger/hash-trigger.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("react");function l(n){const e=n.getBoundingClientRect();return e.top>=0&&e.left>=0&&e.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&e.right<=(window.innerWidth||document.documentElement.clientWidth)}function u(){return window.location.hash.split("/").filter(e=>e.indexOf("?")!==0&&e.length!==1&&e.length!==0).map(e=>e.charAt(0)==="#"?e.substring(1):e)}const d=n=>{const{scrollOnMatch:e=!0,onMatch:r,id:t,children:o}=n,s=i.useRef(!0);return i.useEffect(()=>{const c=()=>{if(u().indexOf(t)!==-1){r&&r(t);const h=document.getElementById(t);e&&h&&!l(h)&&h.scrollIntoView(s.current?{behavior:"instant"}:{behavior:"smooth",block:"center"})}};return s.current&&(c(),s.current=!1),window.addEventListener("hashchange",c),()=>{window.removeEventListener("hashchange",c)}},[t,r,e]),i.isValidElement(o)?i.cloneElement(o,{id:t}):a.jsx("div",{id:t,children:o})};exports.HashTrigger=d;

package/src/tedi/components/navigation/hash-trigger/hash-trigger.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface HashTriggerProps {
+    /**
+     * HashTrigger content.
+     */
+    children: ReactNode;
+    /**
+     * Id, which is passed to first child element/component.<br />
+     * Child component has to inject id to DOM itself.<br />
+     * It's used to detect element on page where to scroll.
+     */
+    id: string;
+    /**
+     * Callback called when hash matches.
+     */
+    onMatch?: (id: string) => void;
+    /**
+     * Scroll to element on match.
+     * @default true
+     */
+    scrollOnMatch?: boolean;
+}
+export declare const HashTrigger: (props: HashTriggerProps) => import("react/jsx-runtime").JSX.Element;

package/src/tedi/components/navigation/hash-trigger/hash-trigger.es.js

@@ -0,0 +1,27 @@
+import { jsx as h } from "react/jsx-runtime";
+import { useRef as a, useEffect as l, cloneElement as d, isValidElement as u } from "react";
+function m(n) {
+  const e = n.getBoundingClientRect();
+  return e.top >= 0 && e.left >= 0 && e.bottom <= (window.innerHeight || document.documentElement.clientHeight) && e.right <= (window.innerWidth || document.documentElement.clientWidth);
+}
+function f() {
+  return window.location.hash.split("/").filter((e) => e.indexOf("?") !== 0 && e.length !== 1 && e.length !== 0).map((e) => e.charAt(0) === "#" ? e.substring(1) : e);
+}
+const p = (n) => {
+  const { scrollOnMatch: e = !0, onMatch: i, id: t, children: o } = n, r = a(!0);
+  return l(() => {
+    const s = () => {
+      if (f().indexOf(t) !== -1) {
+        i && i(t);
+        const c = document.getElementById(t);
+        e && c && !m(c) && c.scrollIntoView(r.current ? { behavior: "instant" } : { behavior: "smooth", block: "center" });
+      }
+    };
+    return r.current && (s(), r.current = !1), window.addEventListener("hashchange", s), () => {
+      window.removeEventListener("hashchange", s);
+    };
+  }, [t, i, e]), u(o) ? d(o, { id: t }) : /* @__PURE__ */ h("div", { id: t, children: o });
+};
+export {
+  p as HashTrigger
+};

package/src/tedi/components/navigation/link/link-helpers.d.ts

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

package/src/tedi/components/navigation/link/link.cjs.js

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

package/src/tedi/components/navigation/link/link.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { UnknownType } from '../../../types/commonTypes';
+import { ButtonContentProps } from '../../buttons/button-content/button-content';
+export type InternalLinkProps = {
+    /**
+     * If true, the icon will be placed in a separate column
+     */
+    iconStandalone?: boolean;
+};
+type AllowedTags = 'a' | React.ComponentType<UnknownType>;
+export type LinkProps<C extends React.ElementType = 'a'> = BreakpointSupport<ButtonContentProps<C, InternalLinkProps, AllowedTags> & {
+    /**
+     * Whether the link should be underlined by default
+     * @default true
+     */
+    underline?: boolean;
+}>;
+export declare const Link: <C extends React.ElementType = "a">(props: LinkProps<C>) => React.ReactElement | null;
+export default Link;

package/src/tedi/components/navigation/link/link.es.js

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

package/src/tedi/components/notifications/alert/alert.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),M=require("../../base/icon/icon.cjs.js"),N=require("../../base/typography/heading/heading.cjs.js"),P=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("./alert.module.scss.cjs.js"),S=require("../../../helpers/hooks/use-is-mounted.cjs.js"),k=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),y=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),R=require("../../layout/grid/row.cjs.js"),f=require("../../layout/grid/col.cjs.js"),p=a=>{const{getCurrentBreakpointProps:g}=k.useBreakpointProps(a.defaultServerBreakpoint),{children:s,role:i="alert",title:r,className:m,type:l="info",icon:o,onClose:c,isGlobal:h=!1,noSideBorders:j=!1,titleElement:q="h3",...x}=g(a),v=w.default(t.default["tedi-alert"],t.default[`tedi-alert--${l}`],{[t.default["tedi-alert--global"]]:h,[t.default["tedi-alert--no-side-borders"]]:j},m),_=S.useIsMounted(),b=n=>{const u={size:18},I=typeof n=="string"?{...u,name:n}:{...u,...n};return e.jsx(M.Icon,{...I,className:t.default["tedi-alert__icon"]})},B=i==="alert"?"assertive":i==="status"?"polite":"off",d=C.useId();return _?e.jsx("div",{role:i,"data-name":"alert","aria-label":`${l} alert`,"aria-live":B,"aria-labelledby":r?d:void 0,...x,className:v,children:e.jsxs(y.VerticalSpacing,{size:.25,children:[e.jsxs(R.Row,{gutterX:2,alignItems:r?"center":"start",children:[e.jsxs(f.Col,{grow:1,className:t.default["tedi-alert__content"],children:[o&&b(o),e.jsx("div",{className:"tedi-alert__content-wrapper",children:r?e.jsx(N.Heading,{element:q,id:d,modifiers:["h5"],children:r}):s})]}),c&&e.jsx(f.Col,{width:"auto",children:e.jsx(P.ClosingButton,{onClick:c})})]}),r&&s&&e.jsx("div",{className:"tedi-alert__content-wrapper",children:s})]})}):null};exports.Alert=p;exports.default=p;

package/src/tedi/components/notifications/alert/alert.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { IconWithoutBackgroundProps } from '../../base/icon/icon';
+export type AlertType = 'info' | 'success' | 'warning' | 'danger';
+type AlertBreakpointProps = {
+    /**
+     * Additional CSS class names to apply to the alert for custom styling.
+     * Allows combining multiple styles or adding external CSS classes.
+     */
+    className?: string;
+    /**
+     * Indicates that the alert is intended to span the full width of the page,
+     * typically for critical or prominent messages.
+     * @default false
+     */
+    isGlobal?: boolean;
+    /**
+     * Removes the side borders from the alert for a cleaner appearance.
+     * This also sets the border radius to 0.
+     * @default false
+     */
+    noSideBorders?: boolean;
+};
+export interface AlertProps extends BreakpointSupport<AlertBreakpointProps> {
+    /**
+     * The primary content displayed within the alert. This can include text, links, or other elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * An optional title for the alert, typically used to summarize the message's purpose.
+     * If provided, it appears prominently at the top of the alert.
+     */
+    title?: React.ReactNode;
+    /**
+     * Defines the visual and contextual type of the alert. This determines the icon, color, and
+     * overall style, making it clear whether the alert is informational, a success message,
+     * a warning, or an error.
+     * @default info
+     */
+    type?: AlertType;
+    /**
+     * Specifies an optional icon to display in the alert, providing quick visual context.
+     * Can be a string (icon name) or an object with additional `IconProps` to further customize the icon.
+     */
+    icon?: string | IconWithoutBackgroundProps;
+    /**
+     * Callback function triggered when the close button is clicked.
+     * Adding this handler renders a close button in the alert.
+     * Useful for dismissible alerts.
+     */
+    onClose?: () => void;
+    /**
+     * The ARIA role of the alert, informing screen readers about the alert's purpose.
+     * Options:
+     * - 'alert': For high-priority messages that demand immediate attention.
+     * - 'status': For less urgent messages providing feedback or updates.
+     * - 'none': Used when no ARIA role is needed.
+     * @default alert
+     */
+    role?: 'alert' | 'status' | 'none';
+    /**
+     * Semantic heading level for alert titles to ensure WCAG compliance.
+     *
+     * @example
+     * // For critical alerts that are main content
+     * titleElement="h2"
+     *
+     * @example
+     * // For secondary notifications
+     * titleElement="h4"
+     *
+     * @default 'h3'
+     */
+    titleElement?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export declare const Alert: (props: AlertProps) => JSX.Element | null;
+export default Alert;