@tedi-design-system/react 17.1.0-rc.9 → 17.1.0

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

@@ -0,0 +1,115 @@
+import { default as React } from 'react';
+export interface HeaderProps {
+    /**
+     * Content rendered inside the header, typically Header.Logo, Header.Center, and Header.Actions subcomponents.
+     */
+    children: React.ReactNode;
+    /**
+     * Toggle element for the mobile side navigation menu.
+     * Typically a SideNav.Toggle component.
+     */
+    toggle?: React.ReactNode;
+    /**
+     * Content rendered below the main header bar on mobile viewports (below `md` breakpoint).
+     * Commonly used for a mobile-specific search bar or other compact navigation elements.
+     */
+    bottom?: React.ReactNode;
+    /** Additional CSS class name applied to the header wrapper. */
+    className?: string;
+}
+export declare const Header: {
+    (props: HeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Logo: {
+        (props: HeaderLogoProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    Center: {
+        (props: HeaderCenterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Actions: {
+        (props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Language: {
+        (props: import('./components/header-language/header-language').HeaderLanguageProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Login: {
+        (props: import('./components/header-login/header-login').HeaderLoginProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Logout: {
+        (props: import('./components/header-logout/header-logout').HeaderLogoutProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Profile: {
+        (props: import('./components/header-profile/header-profile').HeaderProfileProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Role: {
+        (props: import('./components/header-role/header-role').HeaderRoleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Search: {
+        (props: import('./components/header-search/header-search').HeaderSearchProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export interface HeaderLogoProps {
+    /**
+     * The default logo to display (typically used in light theme).
+     */
+    logo: React.ReactNode;
+    /**
+     * Optional logo variant for dark theme.
+     * If provided, it will be used when the current theme is dark.
+     */
+    logoDark?: React.ReactNode;
+    /**
+     * Controls visibility of the logo.
+     * Useful for conditionally hiding the logo based on application state, feature flags,
+     * or custom media queries that fall between standard breakpoints (e.g. 420px).
+     * For responsive hiding at standard breakpoints, prefer wrapping Header.Logo with HideAt/ShowAt.
+     * @default true
+     */
+    showLogo?: boolean;
+    /**
+     * Optional link URL.
+     * If provided, the logo will be wrapped in an anchor element.
+     */
+    href?: string;
+    /** Additional CSS class name applied to the logo wrapper. */
+    className?: string;
+}
+export declare const HeaderLogo: {
+    (props: HeaderLogoProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export interface HeaderCenterProps {
+    /** Content rendered in the center area of the header, typically navigation links or a search bar. */
+    children: React.ReactNode;
+    /**
+     * Controls the horizontal alignment of center content.
+     * @default center
+     */
+    alignment?: 'flex-start' | 'center' | 'space-between';
+    /** Additional CSS class name applied to the center content area. */
+    className?: string;
+}
+export declare const HeaderCenter: {
+    (props: HeaderCenterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface HeaderActionsProps {
+    /** Action elements rendered on the right side of the header (e.g. language selector, login, profile). */
+    children: React.ReactNode;
+    /** Additional CSS class name applied to the actions wrapper. */
+    className?: string;
+}
+export declare const HeaderActions: {
+    (props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Header;

package/src/tedi/components/layout/header/index.d.ts

@@ -0,0 +1,7 @@
+export * from './header';
+export * from './components/header-language/header-language';
+export * from './components/header-login/header-login';
+export * from './components/header-logout/header-logout';
+export * from './components/header-profile/header-profile';
+export * from './components/header-role/header-role';
+export * from './components/header-search/header-search';

package/src/tedi/components/layout/hide-at/hide-at.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { Breakpoint } from '../../../helpers';
+type HideAtProps = {
+    children: React.ReactNode;
+} & Partial<Record<Breakpoint, boolean>>;
+export declare const HideAt: {
+    ({ children, ...breakpoints }: HideAtProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/src/tedi/components/layout/show-at/show-at.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { Breakpoint } from '../../../helpers';
+type ShowAtProps = {
+    children: React.ReactNode;
+} & Partial<Record<Breakpoint, boolean>>;
+export declare const ShowAt: {
+    ({ children, ...breakpoints }: ShowAtProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav-toggle":"tedi-sidenav-toggle-5aa60f9e","tedi-sidenav-toggle--collapse":"tedi-sidenav-toggle--collapse-3b54974c"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav-toggle":"tedi-sidenav-toggle-5aa60f9e","tedi-sidenav-toggle__icon":"tedi-sidenav-toggle__icon-a52afb07","tedi-sidenav-toggle--collapse":"tedi-sidenav-toggle--collapse-3b54974c"};exports.default=e;

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.module.scss.es.js

@@ -1,5 +1,6 @@
 const e = {
   "tedi-sidenav-toggle": "tedi-sidenav-toggle-5aa60f9e",
+  "tedi-sidenav-toggle__icon": "tedi-sidenav-toggle__icon-a52afb07",
   "tedi-sidenav-toggle--collapse": "tedi-sidenav-toggle--collapse-3b54974c"
 };
 export {

package/src/tedi/components/overlays/overlay/overlay.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const K=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),N=require("./overlay-content.cjs.js"),Q=require("./overlay-trigger.cjs.js"),j=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),i=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),X=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),Y=require("../../../helpers/hooks/use-is-mounted.cjs.js"),Z=3,S=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),u=E=>{const L=X.useIsTouchDevice(),{children:W,placement:A="top",openWith:s=L?"click":"hover",defaultOpen:G=!1,open:c,onToggle:r,role:d="tooltip",arrowDimensions:e,offset:H=Z+((e==null?void 0:e.height)??0),focusManager:f,dismissible:y,scrollLock:O,trackReferencePosition:V=!1}=E,{order:M=["reference","content"],initialFocus:m,modal:g,...x}=f??{},C=m!==void 0?m:g?0:void 0,[F,R]=n.useState(G),p=n.useRef(null),P=Y.useIsMounted(),h=n.useMemo(()=>r&&typeof c<"u"?c:F,[r,c,F]),v=n.useCallback(l=>{typeof c>"u"&&R(l),r==null||r(l)},[c,R,r]),{x:q,y:I,refs:a,strategy:b,context:o,middlewareData:k,placement:w}=t.useFloating({placement:A,open:h,onOpenChange:v,middleware:[i.offset(H),i.flip(),i.shift({padding:8}),i.arrow({element:p,padding:4})],whileElementsMounted:V?(l,B,J)=>j.autoUpdate(l,B,J,{animationFrame:!0}):j.autoUpdate}),{getReferenceProps:T,getFloatingProps:U}=t.useInteractions([t.useHover(o,{enabled:s==="hover",handleClose:t.safePolygon()}),t.useClick(o,{toggle:y}),t.useFocus(o,{enabled:s==="hover"}),t.useRole(o,{role:d}),t.useDismiss(o,{enabled:y,outsidePressEvent:s==="click"?"mousedown":"pointerdown"})]),_=n.useId(),z=n.useMemo(()=>({open:h,onOpenChange:v,isMounted:P,openWith:s,focusManager:f?{order:M,modal:g,initialFocus:C,...x}:void 0,reference:a.setReference,floating:a.setFloating,arrowRef:p,x:q,y:I,strategy:b,getReferenceProps:T,getFloatingProps:U,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...k.arrow},context:o,placement:w,scrollLock:O,role:d,contentId:_}),[h,v,P,s,f,a.setReference,a.setFloating,p,q,I,b,T,U,e==null?void 0:e.width,e==null?void 0:e.height,k.arrow,o,w,O,d,_,g,M,C,x]);return K.jsx(S.Provider,{value:z,children:W})};u.Trigger=Q.OverlayTrigger;u.Content=N.OverlayContent;exports.Overlay=u;exports.OverlayContext=S;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const N=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),Q=require("./overlay-content.cjs.js"),X=require("./overlay-trigger.cjs.js"),j=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),i=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Y=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),Z=require("../../../helpers/hooks/use-is-mounted.cjs.js"),$=3,S=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),u=E=>{const L=Y.useIsTouchDevice(),{children:W,placement:A="top",openWith:s=L?"click":"hover",defaultOpen:G=!1,open:a,onToggle:r,role:d="tooltip",arrowDimensions:e,offset:H=$+((e==null?void 0:e.height)??0),arrowPadding:V=4,focusManager:f,dismissible:y,scrollLock:O,trackReferencePosition:z=!1}=E,{order:M=["reference","content"],initialFocus:m,modal:g,...x}=f??{},C=m!==void 0?m:g?0:void 0,[F,P]=n.useState(G),p=n.useRef(null),R=Z.useIsMounted(),h=n.useMemo(()=>r&&typeof a<"u"?a:F,[r,a,F]),v=n.useCallback(l=>{typeof a>"u"&&P(l),r==null||r(l)},[a,P,r]),{x:q,y:I,refs:c,strategy:b,context:o,middlewareData:w,placement:k}=t.useFloating({placement:A,open:h,onOpenChange:v,middleware:[i.offset(H),i.flip(),i.shift({padding:8}),i.arrow({element:p,padding:V})],whileElementsMounted:z?(l,J,K)=>j.autoUpdate(l,J,K,{animationFrame:!0}):j.autoUpdate}),{getReferenceProps:T,getFloatingProps:U}=t.useInteractions([t.useHover(o,{enabled:s==="hover",handleClose:t.safePolygon()}),t.useClick(o,{toggle:y}),t.useFocus(o,{enabled:s==="hover"}),t.useRole(o,{role:d}),t.useDismiss(o,{enabled:y,outsidePressEvent:s==="click"?"mousedown":"pointerdown"})]),_=n.useId(),B=n.useMemo(()=>({open:h,onOpenChange:v,isMounted:R,openWith:s,focusManager:f?{order:M,modal:g,initialFocus:C,...x}:void 0,reference:c.setReference,floating:c.setFloating,arrowRef:p,x:q,y:I,strategy:b,getReferenceProps:T,getFloatingProps:U,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...w.arrow},context:o,placement:k,scrollLock:O,role:d,contentId:_}),[h,v,R,s,f,c.setReference,c.setFloating,p,q,I,b,T,U,e==null?void 0:e.width,e==null?void 0:e.height,w.arrow,o,k,O,d,_,g,M,C,x]);return N.jsx(S.Provider,{value:B,children:W})};u.Trigger=X.OverlayTrigger;u.Content=Q.OverlayContent;exports.Overlay=u;exports.OverlayContext=S;exports.default=u;

package/src/tedi/components/overlays/overlay/overlay.d.ts

@@ -75,6 +75,13 @@ export interface OverlayProps {
      * @default false
      */
     trackReferencePosition?: boolean;
+    /**
+     * Minimum distance (in px) between the arrow and the edges of the content.
+     * Helps keep the arrow away from rounded corners, especially on `-start` and `-end` placements.
+     * Use a larger value for bigger arrows or arrows with borders.
+     * @default 4
+     */
+    arrowPadding?: number;
 }
 export interface OverlayContextType {
     open: boolean;

package/src/tedi/components/overlays/overlay/overlay.es.js

@@ -1,13 +1,13 @@
-import { jsx as B } from "react/jsx-runtime";
-import { useFloating as J, useInteractions as K, useHover as N, useClick as Q, useFocus as X, useRole as Y, useDismiss as Z, safePolygon as _ } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import { createContext as $, useState as D, useRef as ee, useMemo as T, useCallback as te, useId as oe } from "react";
-import { OverlayContent as ne } from "./overlay-content.es.js";
-import { OverlayTrigger as re } from "./overlay-trigger.es.js";
+import { jsx as J } from "react/jsx-runtime";
+import { useFloating as K, useInteractions as N, useHover as Q, useClick as X, useFocus as Y, useRole as Z, useDismiss as _, safePolygon as $ } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { createContext as D, useState as ee, useRef as te, useMemo as T, useCallback as oe, useId as ne } from "react";
+import { OverlayContent as re } from "./overlay-content.es.js";
+import { OverlayTrigger as se } from "./overlay-trigger.es.js";
 import { autoUpdate as E } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as se, flip as ae, shift as ce, arrow as le } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-import { useIsTouchDevice as ie } from "../../../helpers/hooks/use-is-touch-device.es.js";
-import { useIsMounted as fe } from "../../../helpers/hooks/use-is-mounted.es.js";
-const ue = 3, de = $({
+import { offset as ae, flip as ce, shift as le, arrow as ie } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useIsTouchDevice as fe } from "../../../helpers/hooks/use-is-touch-device.es.js";
+import { useIsMounted as ue } from "../../../helpers/hooks/use-is-mounted.es.js";
+const de = 3, pe = D({
   open: !1,
   onOpenChange: () => {
   },
@@ -36,7 +36,7 @@ const ue = 3, de = $({
   scrollLock: void 0,
   contentId: ""
 }), L = (W) => {
-  const j = ie(), {
+  const j = fe(), {
     children: A,
     placement: G = "top",
     openWith: n = j ? "click" : "hover",
@@ -45,47 +45,48 @@ const ue = 3, de = $({
     onToggle: o,
     role: c = "tooltip",
     arrowDimensions: e,
-    offset: S = ue + ((e == null ? void 0 : e.height) ?? 0),
+    offset: S = de + ((e == null ? void 0 : e.height) ?? 0),
+    arrowPadding: U = 4,
     focusManager: l,
     dismissible: p,
     scrollLock: g,
-    trackReferencePosition: U = !1
-  } = W, { order: h = ["reference", "content"], initialFocus: m, modal: i, ...v } = l ?? {}, y = m !== void 0 ? m : i ? 0 : void 0, [O, x] = D(H), f = ee(null), F = fe(), u = T(() => o && typeof r < "u" ? r : O, [o, r, O]), d = te(
+    trackReferencePosition: V = !1
+  } = W, { order: h = ["reference", "content"], initialFocus: m, modal: i, ...v } = l ?? {}, y = m !== void 0 ? m : i ? 0 : void 0, [O, x] = ee(H), f = te(null), F = ue(), u = T(() => o && typeof r < "u" ? r : O, [o, r, O]), d = oe(
     (a) => {
       typeof r > "u" && x(a), o == null || o(a);
     },
     [r, x, o]
-  ), { x: C, y: M, refs: s, strategy: P, context: t, middlewareData: R, placement: k } = J({
+  ), { x: P, y: C, refs: s, strategy: M, context: t, middlewareData: R, placement: w } = K({
     placement: G,
     open: u,
     onOpenChange: d,
     middleware: [
-      se(S),
-      ae(),
-      ce({ padding: 8 }),
-      le({
+      ae(S),
+      ce(),
+      le({ padding: 8 }),
+      ie({
         element: f,
-        padding: 4
+        padding: U
       })
     ],
-    whileElementsMounted: U ? (a, q, z) => E(a, q, z, { animationFrame: !0 }) : E
-  }), { getReferenceProps: w, getFloatingProps: I } = K([
-    N(t, {
+    whileElementsMounted: V ? (a, z, B) => E(a, z, B, { animationFrame: !0 }) : E
+  }), { getReferenceProps: k, getFloatingProps: I } = N([
+    Q(t, {
       enabled: n === "hover",
-      handleClose: _()
+      handleClose: $()
     }),
-    Q(t, {
+    X(t, {
       toggle: p
     }),
-    X(t, {
+    Y(t, {
       enabled: n === "hover"
     }),
-    Y(t, { role: c }),
-    Z(t, {
+    Z(t, { role: c }),
+    _(t, {
       enabled: p,
       outsidePressEvent: n === "click" ? "mousedown" : "pointerdown"
     })
-  ]), b = oe(), V = T(
+  ]), b = ne(), q = T(
     () => ({
       open: u,
       onOpenChange: d,
@@ -100,10 +101,10 @@ const ue = 3, de = $({
       reference: s.setReference,
       floating: s.setFloating,
       arrowRef: f,
-      x: C,
-      y: M,
-      strategy: P,
-      getReferenceProps: w,
+      x: P,
+      y: C,
+      strategy: M,
+      getReferenceProps: k,
       getFloatingProps: I,
       arrow: {
         width: e == null ? void 0 : e.width,
@@ -111,7 +112,7 @@ const ue = 3, de = $({
         ...R.arrow
       },
       context: t,
-      placement: k,
+      placement: w,
       scrollLock: g,
       role: c,
       contentId: b
@@ -125,16 +126,16 @@ const ue = 3, de = $({
       s.setReference,
       s.setFloating,
       f,
+      P,
       C,
       M,
-      P,
-      w,
+      k,
       I,
       e == null ? void 0 : e.width,
       e == null ? void 0 : e.height,
       R.arrow,
       t,
-      k,
+      w,
       g,
       c,
       b,
@@ -144,12 +145,12 @@ const ue = 3, de = $({
       v
     ]
   );
-  return /* @__PURE__ */ B(de.Provider, { value: V, children: A });
+  return /* @__PURE__ */ J(pe.Provider, { value: q, children: A });
 };
-L.Trigger = re;
-L.Content = ne;
+L.Trigger = se;
+L.Content = re;
 export {
   L as Overlay,
-  de as OverlayContext,
+  pe as OverlayContext,
   L as default
 };

package/src/tedi/components/overlays/popover/index.d.ts

@@ -1,3 +1,4 @@
 export * from './popover';
 export * from './popover-content';
+export * from './popover-context';
 export * from './popover-trigger';

package/src/tedi/components/overlays/popover/popover-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),C=require("../../base/typography/text/text.cjs.js"),q=require("../../buttons/closing-button/closing-button.cjs.js"),y=require("../overlay/overlay.cjs.js"),j=require("../overlay/overlay-content.cjs.js"),o=require("./popover.module.scss.cjs.js"),_=f=>{const{children:r,width:l="small",className:x,title:e,titleProps:d={element:"h4"},close:a,closeProps:n={size:"default"}}=f,{onOpenChange:h}=i.useContext(y.OverlayContext),c=i.useId(),u=!!r,p=i.useId();return t.jsxs(j.OverlayContent,{classNames:{content:s.default(o.default["tedi-popover"],{[o.default[`tedi-popover--${l}`]]:l},x),arrow:o.default["tedi-popover__arrow"]},labelledBy:e?c:void 0,describedBy:u?p:void 0,children:[(e||a)&&t.jsxs("div",{className:s.default(o.default["tedi-popover__header"],{[o.default["tedi-popover__header--no-title"]]:!e}),children:[e&&t.jsx(C.Text,{...d,id:c,className:s.default("align-self-center",d.className),children:e}),a&&t.jsx(q.ClosingButton,{...n,onClick:m=>{var v;h(!1),(v=n.onClick)==null||v.call(n,m)}})]}),u?t.jsx("div",{id:p,children:r}):r]})};exports.PopoverContent=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),s=require("react"),y=require("../../base/typography/text/text.cjs.js"),_=require("../../buttons/closing-button/closing-button.cjs.js"),j=require("../overlay/overlay.cjs.js"),b=require("../overlay/overlay-content.cjs.js"),e=require("./popover.module.scss.cjs.js"),g=require("./popover-context.cjs.js"),x=C=>{const{children:i,width:d="small",className:h,title:t,titleProps:l={element:"h4"},close:a,closeProps:r={size:"default"}}=C,{onOpenChange:m}=s.useContext(j.OverlayContext),{withBorder:c}=s.useContext(g.PopoverContext),u=s.useId(),p=!!i,v=s.useId();return o.jsxs(b.OverlayContent,{classNames:{content:n.default(e.default["tedi-popover"],{[e.default[`tedi-popover--${d}`]]:d&&d!=="none",[e.default["tedi-popover--border"]]:c},h),arrow:n.default(e.default["tedi-popover__arrow"],{[e.default["tedi-popover__arrow--border"]]:c})},labelledBy:t?u:void 0,describedBy:p?v:void 0,children:[(t||a)&&o.jsxs("div",{className:n.default(e.default["tedi-popover__header"],{[e.default["tedi-popover__header--no-title"]]:!t}),children:[t&&o.jsx(y.Text,{...l,id:u,className:n.default("align-self-center",l.className),children:t}),a&&o.jsx(_.ClosingButton,{...r,onClick:q=>{var f;m(!1),(f=r.onClick)==null||f.call(r,q)}})]}),p?o.jsx("div",{id:v,children:i}):i]})};x.displayName="PopoverContent";exports.PopoverContent=x;

package/src/tedi/components/overlays/popover/popover-content.d.ts

@@ -27,6 +27,9 @@ export interface PopoverContentProps extends Omit<OverlayContentProps, 'classNam
      * Popover width.
      * @default small
      */
-    width?: 'small' | 'medium' | 'large';
+    width?: 'small' | 'medium' | 'large' | 'none';
 }
-export declare const PopoverContent: (props: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverContent: {
+    (props: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/tedi/components/overlays/popover/popover-content.es.js

@@ -1,49 +1,58 @@
-import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import s from "../../../../../external/classnames/index.es.js";
-import { useContext as _, useId as f } from "react";
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import r from "../../../../../external/classnames/index.es.js";
+import { useContext as h, useId as C } from "react";
 import { Text as u } from "../../base/typography/text/text.es.js";
-import { ClosingButton as y } from "../../buttons/closing-button/closing-button.es.js";
+import { ClosingButton as w } from "../../buttons/closing-button/closing-button.es.js";
 import { OverlayContext as B } from "../overlay/overlay.es.js";
-import { OverlayContent as g } from "../overlay/overlay-content.es.js";
-import o from "./popover.module.scss.es.js";
-const P = (h) => {
+import { OverlayContent as b } from "../overlay/overlay-content.es.js";
+import e from "./popover.module.scss.es.js";
+import { PopoverContext as g } from "./popover-context.es.js";
+const I = (_) => {
   const {
-    children: r,
+    children: i,
     width: n = "small",
-    className: C,
-    title: e,
-    titleProps: l = { element: "h4" },
-    close: a,
+    className: x,
+    title: o,
+    titleProps: d = { element: "h4" },
+    close: l,
     closeProps: t = { size: "default" }
-  } = h, { onOpenChange: x } = _(B), d = f(), m = !!r, c = f();
-  return /* @__PURE__ */ v(
-    g,
+  } = _, { onOpenChange: N } = h(B), { withBorder: p } = h(g), a = C(), m = !!i, c = C();
+  return /* @__PURE__ */ f(
+    b,
     {
       classNames: {
-        content: s(o["tedi-popover"], { [o[`tedi-popover--${n}`]]: n }, C),
-        arrow: o["tedi-popover__arrow"]
+        content: r(
+          e["tedi-popover"],
+          {
+            [e[`tedi-popover--${n}`]]: n && n !== "none",
+            [e["tedi-popover--border"]]: p
+          },
+          x
+        ),
+        arrow: r(e["tedi-popover__arrow"], { [e["tedi-popover__arrow--border"]]: p })
       },
-      labelledBy: e ? d : void 0,
+      labelledBy: o ? a : void 0,
       describedBy: m ? c : void 0,
       children: [
-        (e || a) && /* @__PURE__ */ v("div", { className: s(o["tedi-popover__header"], { [o["tedi-popover__header--no-title"]]: !e }), children: [
-          e && /* @__PURE__ */ i(u, { ...l, id: d, className: s("align-self-center", l.className), children: e }),
-          a && /* @__PURE__ */ i(
-            y,
+        (o || l) && /* @__PURE__ */ f("div", { className: r(e["tedi-popover__header"], { [e["tedi-popover__header--no-title"]]: !o }), children: [
+          o && /* @__PURE__ */ s(u, { ...d, id: a, className: r("align-self-center", d.className), children: o }),
+          l && /* @__PURE__ */ s(
+            w,
             {
               ...t,
-              onClick: (N) => {
-                var p;
-                x(!1), (p = t.onClick) == null || p.call(t, N);
+              onClick: (y) => {
+                var v;
+                N(!1), (v = t.onClick) == null || v.call(t, y);
               }
             }
           )
         ] }),
-        m ? /* @__PURE__ */ i("div", { id: c, children: r }) : r
+        m ? /* @__PURE__ */ s("div", { id: c, children: i }) : i
       ]
     }
   );
 };
+I.displayName = "PopoverContent";
 export {
-  P as PopoverContent
+  I as PopoverContent
 };

package/src/tedi/components/overlays/popover/popover-context.cjs.js

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

package/src/tedi/components/overlays/popover/popover-context.d.ts

@@ -0,0 +1,9 @@
+export interface PopoverContextValue {
+    /**
+     * If true, the popover is rendered with an illustrative border on the arrow
+     * side. Consumed by `Popover.Content` to apply the `--border` modifier
+     * classes.
+     */
+    withBorder: boolean;
+}
+export declare const PopoverContext: import('react').Context<PopoverContextValue>;

package/src/tedi/components/overlays/popover/popover-context.es.js

@@ -0,0 +1,7 @@
+import { createContext as o } from "react";
+const e = o({
+  withBorder: !1
+});
+export {
+  e as PopoverContext
+};

package/src/tedi/components/overlays/popover/popover.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),i=require("../overlay/overlay.cjs.js"),s=require("./popover-content.cjs.js"),u=require("./popover-trigger.cjs.js"),c=34,l=17,e=o=>{const{openWith:r="click",...t}=o;return n.jsx(i.Overlay,{arrowDimensions:{width:c,height:l},openWith:r,role:"dialog",...t})};e.Trigger=u.PopoverTrigger;e.Content=s.PopoverContent;exports.Popover=e;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),s=require("../overlay/overlay.cjs.js"),c=require("./popover-content.cjs.js"),u=require("./popover-context.cjs.js"),l=require("./popover-trigger.cjs.js"),v=34,p=17,a=12,d=4,e=t=>{const{openWith:n="click",withBorder:o=!1,...i}=t;return r.jsx(u.PopoverContext.Provider,{value:{withBorder:o},children:r.jsx(s.Overlay,{...i,arrowDimensions:{width:v,height:p},arrowPadding:o?a:d,openWith:n,role:"dialog"})})};e.Trigger=l.PopoverTrigger;e.Content=c.PopoverContent;exports.Popover=e;exports.default=e;

package/src/tedi/components/overlays/popover/popover.d.ts

@@ -1,6 +1,6 @@
 import { OffsetOptions } from '@floating-ui/react';
 import { OverlayOpenWith, OverlayProps } from '../overlay/overlay';
-export interface PopoverProps extends Omit<OverlayProps, 'arrowDimensions' | 'openWith' | 'offset'> {
+export interface PopoverProps extends Omit<OverlayProps, 'arrowDimensions' | 'openWith' | 'offset' | 'arrowPadding'> {
     /**
      * Adds correct event listeners that change the open state.
      * @default click
@@ -11,10 +11,20 @@ export interface PopoverProps extends Omit<OverlayProps, 'arrowDimensions' | 'op
      * @default GAP + ARROW_HEIGHT (3px + 17px)
      */
     offset?: OffsetOptions;
+    /**
+     * If true, popover renders with an illustrative border on the arrow side
+     * and extra arrow padding so the arrow's shoulders stay clear of the
+     * rounded corner on `-start` / `-end` placements.
+     * @default false
+     */
+    withBorder?: boolean;
 }
 export declare const Popover: {
     (props: PopoverProps): import("react/jsx-runtime").JSX.Element;
     Trigger: (props: import('../overlay/overlay-trigger').OverlayTriggerProps) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: import('./popover-content').PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+    Content: {
+        (props: import('./popover-content').PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
 };
 export default Popover;

package/src/tedi/components/overlays/popover/popover.es.js

@@ -1,25 +1,27 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Overlay as n } from "../overlay/overlay.es.js";
+import { jsx as r } from "react/jsx-runtime";
+import { Overlay as s } from "../overlay/overlay.es.js";
 import { PopoverContent as m } from "./popover-content.es.js";
-import { PopoverTrigger as p } from "./popover-trigger.es.js";
-const s = 34, c = 17, o = (r) => {
-  const { openWith: t = "click", ...e } = r;
-  return /* @__PURE__ */ i(
-    n,
+import { PopoverContext as p } from "./popover-context.es.js";
+import { PopoverTrigger as R } from "./popover-trigger.es.js";
+const a = 34, c = 17, D = 12, d = 4, t = (e) => {
+  const { openWith: i = "click", withBorder: o = !1, ...n } = e;
+  return /* @__PURE__ */ r(p.Provider, { value: { withBorder: o }, children: /* @__PURE__ */ r(
+    s,
     {
+      ...n,
       arrowDimensions: {
-        width: s,
+        width: a,
         height: c
       },
-      openWith: t,
-      role: "dialog",
-      ...e
+      arrowPadding: o ? D : d,
+      openWith: i,
+      role: "dialog"
     }
-  );
+  ) });
 };
-o.Trigger = p;
-o.Content = m;
+t.Trigger = R;
+t.Content = m;
 export {
-  o as Popover,
-  o as default
+  t as Popover,
+  t as default
 };

package/src/tedi/components/overlays/popover/popover.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-popover":"tedi-popover-8ff01648","tedi-popover--small":"tedi-popover--small-32885e48","tedi-popover--medium":"tedi-popover--medium-5da84c95","tedi-popover--large":"tedi-popover--large-70d97488","tedi-popover__arrow":"tedi-popover__arrow-43ccaae6","tedi-popover__header":"tedi-popover__header-d68faca1","tedi-popover__header--no-title":"tedi-popover__header--no-title-abe089cb"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-popover":"tedi-popover-8ff01648","tedi-popover--small":"tedi-popover--small-32885e48","tedi-popover--medium":"tedi-popover--medium-5da84c95","tedi-popover--large":"tedi-popover--large-70d97488","tedi-popover__arrow":"tedi-popover__arrow-43ccaae6","tedi-popover__arrow--border":"tedi-popover__arrow--border-43347b38","tedi-popover--border":"tedi-popover--border-f542a513","tedi-popover__header":"tedi-popover__header-d68faca1","tedi-popover__header--no-title":"tedi-popover__header--no-title-abe089cb"};exports.default=e;

package/src/tedi/components/overlays/popover/popover.module.scss.es.js

@@ -4,6 +4,8 @@ const e = {
   "tedi-popover--medium": "tedi-popover--medium-5da84c95",
   "tedi-popover--large": "tedi-popover--large-70d97488",
   "tedi-popover__arrow": "tedi-popover__arrow-43ccaae6",
+  "tedi-popover__arrow--border": "tedi-popover__arrow--border-43347b38",
+  "tedi-popover--border": "tedi-popover--border-f542a513",
   "tedi-popover__header": "tedi-popover__header-d68faca1",
   "tedi-popover__header--no-title": "tedi-popover__header--no-title-abe089cb"
 };

package/src/tedi/helpers/hooks/use-breakpoint.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),d=require("../../../../external/lodash-es/debounce.cjs.js"),n=["xs","sm","md","lg","xl","xxl"],o=(e="xs")=>{const[t,r]=a.useState(e);return a.useLayoutEffect(()=>{const s=()=>window.matchMedia("(min-width: 1400px)").matches?"xxl":window.matchMedia("(min-width: 1200px)").matches?"xl":window.matchMedia("(min-width: 992px)").matches?"lg":window.matchMedia("(min-width: 768px)").matches?"md":window.matchMedia("(min-width: 576px)").matches?"sm":"xs",i=d.default(()=>{r(s())},20);return r(s()),window.addEventListener("resize",i),()=>{i.cancel(),window.removeEventListener("resize",i)}},[]),t},u=(e,t)=>e?n.indexOf(e)<n.indexOf(t):!1;exports.breakpoints=n;exports.default=o;exports.isBreakpointBelow=u;exports.useBreakpoint=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),d=require("../../../../external/lodash-es/debounce.cjs.js"),n=["xs","sm","md","lg","xl","xxl"],o=(e="xs")=>{const[t,r]=a.useState(e);return a.useLayoutEffect(()=>{const s=()=>window.matchMedia("(min-width: 87.5rem)").matches?"xxl":window.matchMedia("(min-width: 75rem)").matches?"xl":window.matchMedia("(min-width: 62rem)").matches?"lg":window.matchMedia("(min-width: 48rem)").matches?"md":window.matchMedia("(min-width: 36rem)").matches?"sm":"xs",i=d.default(()=>{r(s())},20);return r(s()),window.addEventListener("resize",i),()=>{i.cancel(),window.removeEventListener("resize",i)}},[]),t},m=(e,t)=>e?n.indexOf(e)<n.indexOf(t):!1;exports.breakpoints=n;exports.default=o;exports.isBreakpointBelow=m;exports.useBreakpoint=o;

package/src/tedi/helpers/hooks/use-breakpoint.es.js

@@ -1,19 +1,19 @@
-import { useState as a, useLayoutEffect as o } from "react";
-import d from "../../../../external/lodash-es/debounce.es.js";
+import { useState as m, useLayoutEffect as a } from "react";
+import o from "../../../../external/lodash-es/debounce.es.js";
 const s = ["xs", "sm", "md", "lg", "xl", "xxl"], c = (e = "xs") => {
-  const [t, n] = a(e);
-  return o(() => {
-    const r = () => window.matchMedia("(min-width: 1400px)").matches ? "xxl" : window.matchMedia("(min-width: 1200px)").matches ? "xl" : window.matchMedia("(min-width: 992px)").matches ? "lg" : window.matchMedia("(min-width: 768px)").matches ? "md" : window.matchMedia("(min-width: 576px)").matches ? "sm" : "xs", i = d(() => {
+  const [t, n] = m(e);
+  return a(() => {
+    const r = () => window.matchMedia("(min-width: 87.5rem)").matches ? "xxl" : window.matchMedia("(min-width: 75rem)").matches ? "xl" : window.matchMedia("(min-width: 62rem)").matches ? "lg" : window.matchMedia("(min-width: 48rem)").matches ? "md" : window.matchMedia("(min-width: 36rem)").matches ? "sm" : "xs", i = o(() => {
       n(r());
     }, 20);
     return n(r()), window.addEventListener("resize", i), () => {
       i.cancel(), window.removeEventListener("resize", i);
     };
   }, []), t;
-}, x = (e, t) => e ? s.indexOf(e) < s.indexOf(t) : !1;
+}, h = (e, t) => e ? s.indexOf(e) < s.indexOf(t) : !1;
 export {
   s as breakpoints,
   c as default,
-  x as isBreakpointBelow,
+  h as isBreakpointBelow,
   c as useBreakpoint
 };