@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.11

package/phone-number-input/types.d.ts

@@ -1,47 +1,107 @@
 import type React from "react";
+/**
+ * Represents a selectable country entry in the phone number country code dropdown.
+ */
 export interface CountryValue {
+    /** The country name. */
     name: string;
+    /** The country region. */
     regions: string[];
+    /**
+     * ISO 3166-1 alpha-2 country code.
+     */
     iso2: string;
+    /**
+     * Calling code for the country, without the leading `+`.
+     */
     countryCode: string;
+    /**
+     * Phone number format mask applied to the phone number field.
+     */
     format: string;
 }
+/**
+ * Value shape for `PhoneNumberInput`, representing the selected country code
+ * and the phone number separately.
+ */
 export interface PhoneNumberInputValue {
     /**
-     * You may choose to specify with or without the +. The return value
-     * will always contain the +
+     * Country calling code. May be supplied with or without a leading `+`;
      */
     countryCode?: string | undefined;
+    /**
+     * The phone number number, without the country code prefix.
+     */
     number?: string | undefined;
 }
+/**
+ * Props for the `PhoneNumberInput` component.
+ */
 export interface PhoneNumberInputProps extends React.AriaAttributes {
-    /** The value of the input */
+    /**
+     * Controlled value containing the selected country code and phone number.
+     */
     value?: PhoneNumberInputValue | undefined;
+    /**
+     * Renders the input in an error state when `true`.
+     */
     error?: boolean | undefined;
-    /** Specifies if the clear button should be present in the input */
+    /**
+     * Shows a clear button inside the input when `true` and the field has a value.
+     */
     allowClear?: boolean | undefined;
     "data-testid"?: string | undefined;
     className?: string | undefined;
+    /**
+     * Removes the visible border from the input group when `true`.
+     *
+     * @default false
+     */
     noBorder?: boolean | undefined;
     /**
-     * Specifies if the country code is a fixed value and the user
-     * cannot select another option
+     * When `true`, the country code is displayed as a static label and the
+     * user cannot change it. When `false`, a searchable dropdown is rendered.
+     *
+     * @default false
      */
     fixedCountry?: boolean | undefined;
+    /**
+     * Called whenever the country or phone number changes.
+     *
+     * @param value Updated phone number value including the leading `+`.
+     */
     onChange?: ((value: PhoneNumberInputValue) => void) | undefined;
-    /** Called when the clear button in the input field is clicked */
+    /**
+     * Called when the clear button is activated.
+     */
     onClear?: () => void | undefined;
-    /** Called when a defocus happens */
+    /**
+     * Called when the input loses focus.
+     */
     onBlur?: (() => void) | undefined;
-    /** The placeholder value for the dropdown selector */
+    /**
+     * Placeholder text shown in the country code dropdown when no country is
+     * selected.
+     *
+     * @default "Select"
+     */
     optionPlaceholder?: string | undefined;
-    /** The placeholder value for the dropdown search */
+    /**
+     * Placeholder text shown inside the search field of the country code
+     * dropdown. Only relevant when `enableSearch` is `true`.
+     */
     optionSearchPlaceholder?: string | undefined;
-    /** Specifies if search is enabled in the dropdown */
+    /**
+     * Enables a search field inside the country code dropdown.
+     */
     enableSearch?: boolean | undefined;
-    /** Called when the dropdown is dismissed */
+    /**
+     * Called when the country code dropdown closes.
+     */
     onHideOptions?: (() => void) | undefined;
-    /** Called when the dropdown is visible */
+    /**
+     * Called when the country code dropdown opens.
+     */
     onShowOptions?: (() => void) | undefined;
     disabled?: boolean | undefined;
     name?: string | undefined;
@@ -50,4 +110,10 @@ export interface PhoneNumberInputProps extends React.AriaAttributes {
     readOnly?: boolean | undefined;
     id?: string | undefined;
     autoComplete?: string | undefined;
+    /**
+     * Returns the accessible label for the phone number input.
+     *
+     * @param country Currently selected country, or `undefined`.
+     */
+    getAriaLabel?: ((country?: CountryValue) => string) | undefined;
 }

package/pill/pill.d.ts

@@ -1,2 +1,9 @@
 import type { PillProps } from "./types";
-export declare const Pill: ({ type, colorType, children, icon, ...otherProps }: PillProps) => JSX.Element;
+/**
+ * A compact label used to display status, category, or metadata.
+ *
+ * Use `Pill` to surface short, read-only information — such as a tag or status
+ * badge — inline with other content.
+ * @keywords badge, label, status
+ */
+export declare const Pill: ({ type, colorType, children, icon, className, ...otherProps }: PillProps) => JSX.Element;

package/pill/pill.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsxs as e,jsx as o}from"react/jsx-runtime";import t from"react";import{Wrapper as i,Label as c}from"./pill.style.js";const l=l=>{var{type:n,colorType:p="black",children:m,icon:a}=l,s=r(l,["type","colorType","children","icon"]);return e(i,Object.assign({$type:n,$color:p},s,{children:[a&&t.cloneElement(a,{"aria-hidden":!0}),o(c,{children:m})]}))};export{l as Pill};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as l}from"react/jsx-runtime";import i from"clsx";import o from"react";import{label as c,wrapperBase as a,wrapperSolid as s,wrapperOutlinePrimary as t,wrapperOutlineBlue as m,wrapperOutlineRed as n,wrapperOutlineYellow as p,wrapperOutlineGreen as d,wrapperOutlineGrey as y,wrapperOutlineBlack as b,wrapperSolidPrimary as u,wrapperSolidBlue as f,wrapperSolidRed as g,wrapperSolidYellow as h,wrapperSolidGreen as j,wrapperSolidGrey as v,wrapperSolidBlack as N}from"./pill.styles.js";const k={solid:{black:N,grey:v,green:j,yellow:h,red:g,blue:f,primary:u},outline:{black:b,grey:y,green:d,yellow:p,red:n,blue:m,primary:t}},x=t=>{var{type:m,colorType:n="black",children:p,icon:d,className:y}=t,b=e(t,["type","colorType","children","icon","className"]);return r("div",Object.assign({},b,{className:i(a,"solid"===m&&s,k[m][n],y),children:[d&&o.cloneElement(d,{"aria-hidden":!0}),l("div",{className:c,children:p})]}))};export{x as Pill};
 //# sourceMappingURL=pill.js.map

package/pill/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sources":["../../src/pill/pill.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Label, Wrapper } from \"./pill.style\";\nimport type { PillProps } from \"./types\";\n\nexport const Pill = ({\n    type,\n    colorType = \"black\",\n    children,\n    icon,\n    ...otherProps\n}: PillProps): JSX.Element => {\n    return (\n        <Wrapper $type={type} $color={colorType} {...otherProps}>\n            {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n            <Label>{children}</Label>\n        </Wrapper>\n    );\n};\n"],"names":["Pill","_a","type","colorType","children","icon","otherProps","__rest","_jsxs","Wrapper","Object","assign","$type","$color","React","cloneElement","_jsx","Label"],"mappings":"2KAKO,MAAMA,EAAQC,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,GAAIJ,EACDK,EAAUC,EAAAN,EALI,wCAOjB,OACIO,EAACC,EAAOC,OAAAC,OAAA,CAAAC,MAAQV,EAAIW,OAAUV,GAAeG,EAAU,CAAAF,SAAA,CAClDC,GAAQS,EAAMC,aAAaV,EAAM,CAAE,eAAe,IACnDW,EAACC,EAAK,CAAAb,SAAEA,OACF"}
+{"version":3,"file":"pill.js","sources":["../../src/pill/pill.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./pill.styles\";\nimport type { PillColorType, PillProps, PillType } from \"./types\";\n\nconst WRAPPER_CLASS: Record<PillType, Record<PillColorType, string>> = {\n    solid: {\n        black: styles.wrapperSolidBlack,\n        grey: styles.wrapperSolidGrey,\n        green: styles.wrapperSolidGreen,\n        yellow: styles.wrapperSolidYellow,\n        red: styles.wrapperSolidRed,\n        blue: styles.wrapperSolidBlue,\n        primary: styles.wrapperSolidPrimary,\n    },\n    outline: {\n        black: styles.wrapperOutlineBlack,\n        grey: styles.wrapperOutlineGrey,\n        green: styles.wrapperOutlineGreen,\n        yellow: styles.wrapperOutlineYellow,\n        red: styles.wrapperOutlineRed,\n        blue: styles.wrapperOutlineBlue,\n        primary: styles.wrapperOutlinePrimary,\n    },\n};\n\n// @catalog\n/**\n * A compact label used to display status, category, or metadata.\n *\n * Use `Pill` to surface short, read-only information — such as a tag or status\n * badge — inline with other content.\n * @keywords badge, label, status\n */\nexport const Pill = ({\n    type,\n    colorType = \"black\",\n    children,\n    icon,\n    className,\n    ...otherProps\n}: PillProps): JSX.Element => {\n    return (\n        <div\n            {...otherProps}\n            className={clsx(\n                styles.wrapperBase,\n                type === \"solid\" && styles.wrapperSolid,\n                WRAPPER_CLASS[type][colorType],\n                className\n            )}\n        >\n            {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n            <div className={styles.label}>{children}</div>\n        </div>\n    );\n};\n"],"names":["WRAPPER_CLASS","solid","black","styles.wrapperSolidBlack","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","outline","styles.wrapperOutlineBlack","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","Pill","_a","type","colorType","children","icon","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.wrapperBase","styles.wrapperSolid","React","cloneElement","_jsx","styles.label"],"mappings":"oiBAMA,MAAMA,EAAiE,CACnEC,MAAO,CACHC,MAAOC,EACPC,KAAMC,EACNC,MAAOC,EACPC,OAAQC,EACRC,IAAKC,EACLC,KAAMC,EACNC,QAASC,GAEbC,QAAS,CACLd,MAAOe,EACPb,KAAMc,EACNZ,MAAOa,EACPX,OAAQY,EACRV,IAAKW,EACLT,KAAMU,EACNR,QAASS,IAYJC,EAAQC,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,EAAIC,UACJA,GAASL,EACNM,EAAUC,EAAAP,EANI,oDAQjB,OACIQ,EAAA,MAAAC,OAAAC,OAAA,GACQJ,EAAU,CACdD,UAAWM,EACPC,EACS,UAATX,GAAoBY,EACpBtC,EAAc0B,GAAMC,GACpBG,GACHF,SAAA,CAEAC,GAAQU,EAAMC,aAAaX,EAAM,CAAE,eAAe,IACnDY,EAAA,MAAA,CAAKX,UAAWY,EAAYd,SAAGA,OAC7B"}

package/pill/pill.styles.d.ts

@@ -0,0 +1,17 @@
+export declare const wrapperBase: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolid: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidBlack: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidGrey: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidGreen: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidYellow: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidRed: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidBlue: import("@linaria/core").LinariaClassName;
+export declare const wrapperSolidPrimary: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineBlack: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineGrey: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineGreen: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineYellow: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineRed: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlineBlue: import("@linaria/core").LinariaClassName;
+export declare const wrapperOutlinePrimary: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;

package/pill/pill.styles.js

@@ -0,0 +1,2 @@
+import"./pill.styles_xwrniu.css";const w="w2wrvwd",l="w1bnitgk",i="w10rd591",n="w14ozhbm",r="w1dquypt",o="wijzmbj",t="wtf7rkw",m="w17huuqy",s="w1lx8mm6",p="wnrixoo",u="wnolbsf",z="w1nlhiv2",b="wfw4qqz",c="w1c1fn8z",f="w19krjn1",h="w1h3c6yz",q="l1uma0l6";export{q as label,w as wrapperBase,p as wrapperOutlineBlack,f as wrapperOutlineBlue,z as wrapperOutlineGreen,u as wrapperOutlineGrey,h as wrapperOutlinePrimary,c as wrapperOutlineRed,b as wrapperOutlineYellow,l as wrapperSolid,i as wrapperSolidBlack,m as wrapperSolidBlue,r as wrapperSolidGreen,n as wrapperSolidGrey,s as wrapperSolidPrimary,t as wrapperSolidRed,o as wrapperSolidYellow};
+//# sourceMappingURL=pill.styles.js.map

package/pill/pill.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.styles.js","sources":["../../src/pill/pill.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius } from \"../theme\";\n\nexport const wrapperBase = css`\n    border-radius: ${Radius[\"full\"]};\n    padding: 0.125rem 0.5rem;\n    width: fit-content;\n    max-width: 100%;\n    ${Font[\"body-xs-semibold\"]}\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    border: ${Border[\"width-010\"]} ${Border.solid};\n    svg {\n        flex-shrink: 0;\n    }\n`;\n\nexport const wrapperSolid = css`\n    color: ${Colour[\"text-inverse\"]};\n    border-color: transparent;\n`;\n\nexport const wrapperSolidBlack = css`\n    background: ${Colour[\"bg-inverse\"]};\n`;\n\nexport const wrapperSolidGrey = css`\n    background: ${Colour[\"bg-inverse-subtler\"]};\n`;\n\nexport const wrapperSolidGreen = css`\n    background: ${Colour[\"bg-success-strong\"]};\n`;\n\nexport const wrapperSolidYellow = css`\n    background: ${Colour[\"bg-warning-strong\"]};\n`;\n\nexport const wrapperSolidRed = css`\n    background: ${Colour[\"bg-error-strong\"]};\n`;\n\nexport const wrapperSolidBlue = css`\n    background: ${Colour[\"bg-info-strong\"]};\n`;\n\nexport const wrapperSolidPrimary = css`\n    background: ${Colour[\"bg-primary\"]};\n`;\n\nexport const wrapperOutlineBlack = css`\n    background: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour.text};\n`;\n\nexport const wrapperOutlineGrey = css`\n    background: ${Colour[\"bg-stronger\"]};\n    border-color: ${Colour[\"border-strong\"]};\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const wrapperOutlineGreen = css`\n    background: ${Colour[\"bg-success\"]};\n    border-color: ${Colour[\"border-success\"]};\n    color: ${Colour[\"text-success\"]};\n`;\n\nexport const wrapperOutlineYellow = css`\n    background: ${Colour[\"bg-warning\"]};\n    border-color: ${Colour[\"border-warning\"]};\n    color: ${Colour[\"text-warning\"]};\n`;\n\nexport const wrapperOutlineRed = css`\n    background: ${Colour[\"bg-error\"]};\n    border-color: ${Colour[\"border-error\"]};\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const wrapperOutlineBlue = css`\n    background: ${Colour[\"bg-info\"]};\n    border-color: ${Colour[\"border-info\"]};\n    color: ${Colour[\"text-info\"]};\n`;\n\nexport const wrapperOutlinePrimary = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border-color: ${Colour[\"border-primary\"]};\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const label = css`\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    text-align: left;\n`;\n"],"names":["wrapperBase","wrapperSolid","wrapperSolidBlack","wrapperSolidGrey","wrapperSolidGreen","wrapperSolidYellow","wrapperSolidRed","wrapperSolidBlue","wrapperSolidPrimary","wrapperOutlineBlack","wrapperOutlineGrey","wrapperOutlineGreen","wrapperOutlineYellow","wrapperOutlineRed","wrapperOutlineBlue","wrapperOutlinePrimary","label"],"mappings":"qDAIO,MAAMA,EAAW,UAeXC,EAAY,WAKZC,EAAiB,WAIjBC,EAAgB,WAIhBC,EAAiB,WAIjBC,EAAkB,UAIlBC,EAAe,UAIfC,EAAgB,WAIhBC,EAAmB,WAInBC,EAAmB,UAMnBC,EAAkB,UAMlBC,EAAmB,WAMnBC,EAAoB,UAMpBC,EAAiB,WAMjBC,EAAkB,WAMlBC,EAAqB,WAMrBC,EAAK"}

package/pill/pill.styles_xwrniu.css

@@ -0,0 +1,17 @@
+@layer fds{.w2wrvwd{border-radius:var(--fds-radius-full);padding:0.125rem 0.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.25rem;border:var(--fds-border-width-010) var(--fds-border-style-solid);}.w2wrvwd svg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.w1bnitgk{color:var(--fds-colour-text-inverse);border-color:transparent;}
+.w10rd591{background:var(--fds-colour-bg-inverse);}
+.w14ozhbm{background:var(--fds-colour-bg-inverse-subtler);}
+.w1dquypt{background:var(--fds-colour-bg-success-strong);}
+.wijzmbj{background:var(--fds-colour-bg-warning-strong);}
+.wtf7rkw{background:var(--fds-colour-bg-error-strong);}
+.w17huuqy{background:var(--fds-colour-bg-info-strong);}
+.w1lx8mm6{background:var(--fds-colour-bg-primary);}
+.wnrixoo{background:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text);}
+.wnolbsf{background:var(--fds-colour-bg-stronger);border-color:var(--fds-colour-border-strong);color:var(--fds-colour-text-subtler);}
+.w1nlhiv2{background:var(--fds-colour-bg-success);border-color:var(--fds-colour-border-success);color:var(--fds-colour-text-success);}
+.wfw4qqz{background:var(--fds-colour-bg-warning);border-color:var(--fds-colour-border-warning);color:var(--fds-colour-text-warning);}
+.w1c1fn8z{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);color:var(--fds-colour-text-error);}
+.w19krjn1{background:var(--fds-colour-bg-info);border-color:var(--fds-colour-border-info);color:var(--fds-colour-text-info);}
+.w1h3c6yz{background:var(--fds-colour-bg-primary-subtlest);border-color:var(--fds-colour-border-primary);color:var(--fds-colour-text-primary);}
+.l1uma0l6{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:left;}}

package/pill/types.d.ts

@@ -1,8 +1,27 @@
 import type React from "react";
+/**
+ * Visual style variant for `Pill`.
+ *
+ * - `"solid"` renders a filled background.
+ * - `"outline"` renders a border-only style.
+ */
 export type PillType = "outline" | "solid";
+/** Color theme for `Pill`. */
 export type PillColorType = "black" | "grey" | "green" | "yellow" | "red" | "blue" | "primary";
+/**
+ * Props for the `Pill` component.
+ */
 export interface PillProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant for the pill. */
     type: PillType;
+    /**
+     * Color theme applied to the pill.
+     *
+     * @default "black"
+     */
     colorType?: PillColorType | undefined;
+    /**
+     * Icon rendered before the label text.
+     */
     icon?: JSX.Element | undefined;
 }

package/popover/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./popover";
-export * from "./popover-hoc";
+export * from "./popover-inline";
+export * from "./popover-trigger";
 export * from "./types";

package/popover/index.js

@@ -1,2 +1,2 @@
-export{Popover}from"./popover.js";export{withPopover}from"./popover-hoc.js";
+export{Popover}from"./popover.js";export{PopoverInline}from"./popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover-trigger.js";
 //# sourceMappingURL=index.js.map

package/popover/popover-inline/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./popover-inline";
+export * from "./types";

package/popover/popover-inline/popover-inline.d.ts

@@ -0,0 +1,7 @@
+import type { PopoverInlineProps } from "./types";
+/**
+ * An inline text or icon element that opens a popover on interaction.
+ *
+ * Use `PopoverInline` to embed a labelled trigger directly within a body of content.
+ */
+export declare const PopoverInline: ({ ariaLabel, content, icon, underlineStyle, underlineHoverStyle, ...otherProps }: PopoverInlineProps) => import("react/jsx-runtime").JSX.Element;

package/popover/popover-inline/popover-inline.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as r,jsxs as n}from"react/jsx-runtime";import t from"clsx";import{PopoverTrigger as l}from"../popover-trigger.js";import{popoverInlineText as o,popoverInlineIconWithContent as a}from"./popover-inline.styles.js";const i=i=>{var{ariaLabel:s,content:d,icon:p,underlineStyle:c="default",underlineHoverStyle:u="default"}=i,m=e(i,["ariaLabel","content","icon","underlineStyle","underlineHoverStyle"]);const f=!!d;return r(l,Object.assign({},m,{children:n("span",{"aria-label":null!=s?s:f?void 0:"More info",role:"button","aria-haspopup":"dialog",tabIndex:0,className:o,"data-underline-style":c,"data-underline-hover-style":u,children:[d,p&&r("span",{className:t(f&&a),children:p})]})}))};export{i as PopoverInline};
+//# sourceMappingURL=popover-inline.js.map

package/popover/popover-inline/popover-inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-inline.js","sources":["../../../src/popover/popover-inline/popover-inline.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { PopoverTrigger } from \"../popover-trigger\";\nimport * as styles from \"./popover-inline.styles\";\nimport type { PopoverInlineProps } from \"./types\";\n\n/**\n * An inline text or icon element that opens a popover on interaction.\n *\n * Use `PopoverInline` to embed a labelled trigger directly within a body of content.\n */\nexport const PopoverInline = ({\n    ariaLabel,\n    content,\n    icon,\n    underlineStyle = \"default\",\n    underlineHoverStyle = \"default\",\n    ...otherProps\n}: PopoverInlineProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const hasContent = !!content;\n\n    return (\n        <PopoverTrigger {...otherProps}>\n            <span\n                aria-label={ariaLabel ?? (hasContent ? undefined : \"More info\")}\n                role=\"button\"\n                aria-haspopup=\"dialog\"\n                tabIndex={0}\n                className={styles.popoverInlineText}\n                data-underline-style={underlineStyle}\n                data-underline-hover-style={underlineHoverStyle}\n            >\n                {content}\n                {icon && (\n                    <span\n                        className={clsx(\n                            hasContent && styles.popoverInlineIconWithContent\n                        )}\n                    >\n                        {icon}\n                    </span>\n                )}\n            </span>\n        </PopoverTrigger>\n    );\n};\n"],"names":["PopoverInline","_a","ariaLabel","content","icon","underlineStyle","underlineHoverStyle","otherProps","__rest","hasContent","_jsx","PopoverTrigger","Object","assign","children","_jsxs","undefined","role","tabIndex","className","styles.popoverInlineText","clsx","styles.popoverInlineIconWithContent"],"mappings":"gRAWO,MAAMA,EAAiBC,IAAA,IAAAC,UAC1BA,EAASC,QACTA,EAAOC,KACPA,EAAIC,eACJA,EAAiB,UAASC,oBAC1BA,EAAsB,WAASL,EAC5BM,EAAUC,EAAAP,EANa,uEAW1B,MAAMQ,IAAeN,EAErB,OACIO,EAACC,EAAcC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAAO,SAC1BC,EAAA,OAAA,CAAA,aACgBb,QAAAA,EAAcO,OAAaO,EAAY,YACnDC,KAAK,SAAQ,gBACC,SACdC,SAAU,EACVC,UAAWC,yBACWf,EAAc,6BACRC,EAAmBQ,SAAA,CAE9CX,EACAC,GACGM,EAAA,OAAA,CACIS,UAAWE,EACPZ,GAAca,GACjBR,SAEAV,SAIA"}

package/popover/popover-inline/popover-inline.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const popoverInlineText: import("@linaria/core").LinariaClassName;
+export declare const popoverInlineIconWithContent: import("@linaria/core").LinariaClassName;

package/popover/popover-inline/popover-inline.styles.js

@@ -0,0 +1,2 @@
+import"./popover-inline.styles_bkopnt.css";const p="p1h7dfwa",o="pzf43s3";export{o as popoverInlineIconWithContent,p as popoverInlineText};
+//# sourceMappingURL=popover-inline.styles.js.map

package/popover/popover-inline/popover-inline.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-inline.styles.js","sources":["../../../src/popover/popover-inline/popover-inline.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../../theme\";\n\nexport const popoverInlineText = css`\n    color: ${Colour[\"text-primary\"]};\n    font-weight: 600;\n    text-underline-position: under;\n\n    &[data-underline-style=\"underline\"] {\n        text-decoration: underline 1px;\n    }\n\n    &[data-underline-style=\"underline-dashed\"] {\n        text-decoration: underline dashed 1px;\n    }\n\n    &:hover,\n    &:focus-visible {\n        color: ${Colour[\"text-hover\"]};\n    }\n\n    &[data-underline-hover-style=\"underline\"]:hover,\n    &[data-underline-hover-style=\"underline\"]:focus-visible {\n        text-decoration: underline 1px;\n    }\n\n    &[data-underline-hover-style=\"underline-dashed\"]:hover,\n    &[data-underline-hover-style=\"underline-dashed\"]:focus-visible {\n        text-decoration: underline dashed 1px;\n    }\n\n    svg {\n        height: 1lh; /* align vertically */\n        width: 1em; /* scale icon with font size */\n        vertical-align: top;\n    }\n`;\n\nexport const popoverInlineIconWithContent = css`\n    margin-left: 0.25rem;\n`;\n"],"names":["popoverInlineText","popoverInlineIconWithContent"],"mappings":"iFAIO,MAAMA,EAAiB,WAmCjBC,EAA4B"}

package/popover/popover-inline/popover-inline.styles_bkopnt.css

@@ -0,0 +1,2 @@
+@layer fds{.p1h7dfwa{color:var(--fds-colour-text-primary);font-weight:600;text-underline-position:under;}.p1h7dfwa[data-underline-style="underline"]{-webkit-text-decoration:underline 1px;text-decoration:underline 1px;}.p1h7dfwa[data-underline-style="underline-dashed"]{-webkit-text-decoration:underline dashed 1px;text-decoration:underline dashed 1px;}.p1h7dfwa:hover,.p1h7dfwa:focus-visible{color:var(--fds-colour-text-hover);}.p1h7dfwa[data-underline-hover-style="underline"]:hover,.p1h7dfwa[data-underline-hover-style="underline"]:focus-visible{-webkit-text-decoration:underline 1px;text-decoration:underline 1px;}.p1h7dfwa[data-underline-hover-style="underline-dashed"]:hover,.p1h7dfwa[data-underline-hover-style="underline-dashed"]:focus-visible{-webkit-text-decoration:underline dashed 1px;text-decoration:underline dashed 1px;}.p1h7dfwa svg{height:1lh;width:1em;vertical-align:top;}
+.pzf43s3{margin-left:0.25rem;}}

package/popover/popover-inline/types.d.ts

@@ -0,0 +1,36 @@
+import type { PopoverTriggerProps } from "../types";
+/**
+ * Underline decoration applied to the `PopoverInline` trigger span.
+ */
+export type PopoverInlineStyle = "default" | "underline" | "underline-dashed";
+/**
+ * Props for the `PopoverInline` component.
+ */
+export interface PopoverInlineProps extends Omit<PopoverTriggerProps, "children"> {
+    /**
+     * Accessible label for the trigger button.
+     *
+     * @default "More info" when `content` is not provided
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Label text or element displayed inside the trigger span.
+     */
+    content?: React.ReactNode | undefined;
+    /**
+     * Icon element rendered after `content` inside the trigger span.
+     */
+    icon?: JSX.Element | undefined;
+    /**
+     * Underline style applied to the trigger span in its default state.
+     *
+     * @default "default"
+     */
+    underlineStyle?: PopoverInlineStyle | undefined;
+    /**
+     * Underline style applied to the trigger span on hover.
+     *
+     * @default "default"
+     */
+    underlineHoverStyle?: PopoverInlineStyle | undefined;
+}

package/popover/popover-trigger.d.ts

@@ -0,0 +1,8 @@
+import type { PopoverTriggerProps } from "./types";
+/**
+ * Wraps an element to make it a popover trigger.
+ *
+ * Use `PopoverTrigger` when you need to attach a popover to any arbitrary
+ * child element.
+ */
+export declare const PopoverTrigger: ({ children, popoverContent, trigger: _trigger, position, zIndex, rootNode, customOffset, delay, onPopoverAppear, onPopoverDismiss, popoverAriaLabel, enableFlip, enableResize, overflow, triggerOnFocus, isModal, className, ...otherProps }: PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;

package/popover/popover-trigger.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as o,Fragment as t,jsx as r}from"react/jsx-runtime";import{useFloating as i,autoUpdate as n,offset as l,flip as s,shift as a,limitShift as p,size as m,useClick as c,useDismiss as u,useHover as d,useFocus as f,useInteractions as v,FloatingPortal as g,FloatingFocusManager as h}from"@floating-ui/react";import j from"clsx";import{useState as b,useRef as y}from"react";import{useFloatingChild as x}from"../overlay/use-floating-context.js";import"../theme/theme-provider/index.js";import{useInheritedThemeScope as O}from"../theme/theme-provider/hooks.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as k}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as F}from"../theme/utils/use-media-query.js";import{Popover as P}from"./popover.js";import{triggerContainer as w}from"./popover-trigger.styles.js";const M=M=>{var z,A,{children:C,popoverContent:N,trigger:E="click",position:H="top",zIndex:L,rootNode:R,customOffset:D,delay:I,onPopoverAppear:q,onPopoverDismiss:S,popoverAriaLabel:T,enableFlip:_=!0,enableResize:B=!1,overflow:$="auto",triggerOnFocus:G=!1,isModal:J=!0,className:K}=M,Q=e(M,["children","popoverContent","trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","className"]);const[U,V]=b(!1),W=y(null),X=y(null),Y=F("sm"),[Z,ee]=b(0),oe=`${k()}-popover`,{refs:te,floatingStyles:re,context:ie}=i({open:U,placement:H,whileElementsMounted:n,middleware:[l(null!=D?D:16),_&&s(),a({limiter:p()}),B&&m({apply({availableHeight:e}){ee(e)}})],onOpenChange:e=>{V(e),U!==e&&ge(e)}}),ne=x(),{themeProps:le,themeStyle:se}=O(U),ae="hover"===(Y?"click":E),pe=c(ie,{ignoreMouse:ae}),me=u(ie),ce=d(ie,{enabled:ae,delay:{open:null!==(z=null==I?void 0:I.open)&&void 0!==z?z:0,close:null!==(A=null==I?void 0:I.close)&&void 0!==A?A:500}}),ue=f(ie,{enabled:G}),{getReferenceProps:de,getFloatingProps:fe}=v([pe,me,ce,ue]),ve=()=>{V(!1),ge(!1)},ge=e=>{e&&q&&q(),!e&&S&&S()};return o(t,{children:[r("div",Object.assign({ref:e=>{W.current=e,te.setReference(e)}},de({onClick:e=>{e.stopPropagation(),e.preventDefault()}}),Q,{className:j(w,K),children:C})),U&&r(g,{root:R,children:r(h,Object.assign({context:ie},!J&&{initialFocus:-1,returnFocus:!1,modal:!1},{children:r("div",Object.assign({ref:e=>{X.current=e,te.setFloating(e)}},le,{onBlur:e=>{var o;if(J||Y&&"function"!=typeof N)return;const t=null!==(o=e.relatedTarget)&&void 0!==o?o:document.activeElement;t&&(e=>{var o;if(!e)return!1;if(e instanceof HTMLElement&&e.hasAttribute("data-floating-ui-focus-guard"))return!0;const t=W.current,r=null===(o=X.current)||void 0===o?void 0:o.parentElement;return!!t&&t.contains(e)||!!r&&r.contains(e)})(t)||(V(!1),ge(!1))},style:Object.assign(Object.assign(Object.assign({},se),re),{outline:"none",zIndex:null!=L?L:ne})},fe(),{children:"function"==typeof N?N(B?{maxHeight:Z,overflow:$}:{}):r(P,{visible:!0,onMobileClose:ve,maxHeight:B?Z:void 0,overflow:B?$:void 0,ariaLabel:T,id:oe,children:N})}))}))})]})};export{M as PopoverTrigger};
+//# sourceMappingURL=popover-trigger.js.map

package/popover/popover-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.js","sources":["../../src/popover/popover-trigger.tsx"],"sourcesContent":["import {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef, useState } from \"react\";\n\nimport { useFloatingChild } from \"../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport { Popover } from \"./popover\";\nimport * as styles from \"./popover-trigger.styles\";\nimport type { PopoverTriggerProps, PopoverTriggerType } from \"./types\";\n\n/**\n * Wraps an element to make it a popover trigger.\n *\n * Use `PopoverTrigger` when you need to attach a popover to any arbitrary\n * child element.\n */\nexport const PopoverTrigger = ({\n    children,\n    popoverContent,\n    trigger: _trigger = \"click\",\n    position = \"top\",\n    zIndex,\n    rootNode,\n    customOffset,\n    delay,\n    onPopoverAppear,\n    onPopoverDismiss,\n    popoverAriaLabel,\n    enableFlip = true,\n    enableResize = false,\n    overflow = \"auto\",\n    triggerOnFocus = false,\n    isModal = true,\n    className,\n    ...otherProps\n}: PopoverTriggerProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [visible, setVisible] = useState<boolean>(false);\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const popoverRef = useRef<HTMLElement | null>(null);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [availableHeight, setAvailableHeight] = useState(0);\n    const internalId = useId();\n    const popoverContainerId = `${internalId}-popover`;\n\n    const { refs, floatingStyles, context } = useFloating({\n        open: visible,\n        placement: position,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(customOffset ?? 16),\n            enableFlip && flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            enableResize &&\n                size({\n                    apply({ availableHeight }) {\n                        setAvailableHeight(availableHeight);\n                    },\n                }),\n        ],\n        onOpenChange: (isOpen) => {\n            setVisible(isOpen);\n\n            // this callback is triggering twice on hover, the check here prevents extra calls\n            if (visible !== isOpen) {\n                handleVisibilityChange(isOpen);\n            }\n        },\n    });\n    const parentZIndex = useFloatingChild();\n    const { themeProps, themeStyle } = useInheritedThemeScope(visible);\n\n    const trigger: PopoverTriggerType = isMobile ? \"click\" : _trigger;\n    const isTooltip = trigger === \"hover\";\n\n    const click = useClick(context, {\n        // allow trigger by Space/Enter, but disable mouse click in hover mode\n        ignoreMouse: isTooltip,\n    });\n\n    const dismiss = useDismiss(context);\n\n    const hover = useHover(context, {\n        enabled: isTooltip,\n        // short window to enter the floating element without it closing\n        delay: {\n            open: delay?.open ?? 0,\n            close: delay?.close ?? 500,\n        },\n    });\n\n    const focus = useFocus(context, {\n        enabled: triggerOnFocus,\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n        hover,\n        focus,\n    ]);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isFocusInside = (node: Node | null) => {\n        if (!node) return false;\n\n        if (\n            node instanceof HTMLElement &&\n            node.hasAttribute(\"data-floating-ui-focus-guard\")\n        ) {\n            return true;\n        }\n\n        const refEl = nodeRef.current;\n        const floatingEl = popoverRef.current?.parentElement;\n\n        return (\n            (!!refEl && refEl.contains(node)) ||\n            (!!floatingEl && floatingEl.contains(node))\n        );\n    };\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handlePopoverMobileClose = () => {\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    const handleVisibilityChange = (nextVisible: boolean) => {\n        if (nextVisible && onPopoverAppear) onPopoverAppear();\n        if (!nextVisible && onPopoverDismiss) onPopoverDismiss();\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLElement>) => {\n        // On mobile, ModalV2 handles its own dismiss via onMobileClose\n        if (isModal || (isMobile && typeof popoverContent !== \"function\"))\n            return;\n\n        const next =\n            (e.relatedTarget as Node | null) ??\n            (document.activeElement as Node | null);\n\n        if (next && isFocusInside(next)) return;\n\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderPopover = () => {\n        if (typeof popoverContent === \"function\") {\n            return popoverContent(\n                enableResize ? { maxHeight: availableHeight, overflow } : {}\n            );\n        }\n\n        return (\n            <Popover\n                visible\n                onMobileClose={handlePopoverMobileClose}\n                maxHeight={enableResize ? availableHeight : undefined}\n                overflow={enableResize ? overflow : undefined}\n                ariaLabel={popoverAriaLabel}\n                id={popoverContainerId}\n            >\n                {popoverContent}\n            </Popover>\n        );\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    nodeRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps({\n                    onClick: (event) => {\n                        // prevent popover interaction from triggering click events on parents\n                        event.stopPropagation();\n                        event.preventDefault();\n                    },\n                })}\n                {...otherProps}\n                className={clsx(styles.triggerContainer, className)}\n            >\n                {children}\n            </div>\n            {visible && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        {...(!isModal && {\n                            initialFocus: -1,\n                            returnFocus: false,\n                            modal: false,\n                        })}\n                    >\n                        <div\n                            ref={(node) => {\n                                popoverRef.current = node;\n                                refs.setFloating(node);\n                            }}\n                            {...themeProps}\n                            onBlur={handleBlur}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                                outline: \"none\",\n                                zIndex: zIndex ?? parentZIndex,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            {renderPopover()}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["PopoverTrigger","_a","children","popoverContent","trigger","_trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","className","otherProps","__rest","visible","setVisible","useState","nodeRef","useRef","popoverRef","isMobile","useMaxWidthMediaQuery","availableHeight","setAvailableHeight","popoverContainerId","useId","refs","floatingStyles","context","useFloating","open","placement","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","limiter","limitShift","size","apply","onOpenChange","isOpen","handleVisibilityChange","parentZIndex","useFloatingChild","themeProps","themeStyle","useInheritedThemeScope","isTooltip","click","useClick","ignoreMouse","dismiss","useDismiss","hover","useHover","enabled","_b","close","_c","focus","useFocus","getReferenceProps","getFloatingProps","useInteractions","handlePopoverMobileClose","nextVisible","_jsxs","_jsx","Object","assign","ref","node","current","setReference","onClick","event","stopPropagation","preventDefault","clsx","styles.triggerContainer","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","setFloating","onBlur","e","next","relatedTarget","document","activeElement","HTMLElement","hasAttribute","refEl","floatingEl","parentElement","contains","isFocusInside","style","outline","maxHeight","Popover","onMobileClose","undefined","ariaLabel","id"],"mappings":"kmCAiCO,MAAMA,EAAkBC,aAAAC,SAC3BA,EAAQC,eACRA,EACAC,QAASC,EAAW,QAAOC,SAC3BA,EAAW,MAAKC,OAChBA,EAAMC,SACNA,EAAQC,aACRA,EAAYC,MACZA,EAAKC,gBACLA,EAAeC,iBACfA,EAAgBC,iBAChBA,EAAgBC,WAChBA,GAAa,EAAIC,aACjBA,GAAe,EAAKC,SACpBA,EAAW,OAAMC,eACjBA,GAAiB,EAAKC,QACtBA,GAAU,EAAIC,UACdA,GAASlB,EACNmB,EAAUC,EAAApB,EAlBc,CAAA,WAAA,iBAAA,UAAA,WAAA,SAAA,WAAA,eAAA,QAAA,kBAAA,mBAAA,mBAAA,aAAA,eAAA,WAAA,iBAAA,UAAA,cAuB3B,MAAOqB,EAASC,GAAcC,GAAkB,GAC1CC,EAAUC,EAA2B,MACrCC,EAAaD,EAA2B,MACxCE,EAAWC,EAAsB,OAChCC,EAAiBC,IAAsBP,EAAS,GAEjDQ,GAAqB,GADRC,eAGbC,KAAEA,GAAIC,eAAEA,GAAcC,QAAEA,IAAYC,EAAY,CAClDC,KAAMhB,EACNiB,UAAWjC,EACXkC,qBAAsBC,EACtBC,WAAY,CACRC,EAAOlC,QAAAA,EAAgB,IACvBK,GAAc8B,IACdC,EAAM,CACFC,QAASC,MAEbhC,GACIiC,EAAK,CACD,KAAAC,EAAMnB,gBAAEA,IACJC,GAAmBD,EACvB,KAGZoB,aAAeC,IACX5B,EAAW4B,GAGP7B,IAAY6B,GACZC,GAAuBD,EAC3B,IAGFE,GAAeC,KACfC,WAAEA,GAAUC,WAAEA,IAAeC,EAAuBnC,GAGpDoC,GAAwB,WADM9B,EAAW,QAAUvB,GAGnDsD,GAAQC,EAASxB,GAAS,CAE5ByB,YAAaH,KAGXI,GAAUC,EAAW3B,IAErB4B,GAAQC,EAAS7B,GAAS,CAC5B8B,QAASR,GAEThD,MAAO,CACH4B,KAAiB,QAAX6B,EAAAzD,eAAAA,EAAO4B,YAAI,IAAA6B,EAAAA,EAAI,EACrBC,MAAmB,QAAZC,EAAA3D,eAAAA,EAAO0D,aAAK,IAAAC,EAAAA,EAAI,OAIzBC,GAAQC,EAASnC,GAAS,CAC5B8B,QAASjD,KAGPuD,kBAAEA,GAAiBC,iBAAEA,IAAqBC,EAAgB,CAC5Df,GACAG,GACAE,GACAM,KA4BEK,GAA2B,KAC7BpD,GAAW,GACX6B,IAAuB,EAAM,EAG3BA,GAA0BwB,IACxBA,GAAejE,GAAiBA,KAC/BiE,GAAehE,GAAkBA,GAAkB,EA0C5D,OACIiE,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFzD,EAAQ0D,QAAUD,EAClBhD,GAAKkD,aAAaF,EAAK,GAEvBV,GAAkB,CAClBa,QAAUC,IAENA,EAAMC,kBACND,EAAME,gBAAgB,IAG1BpE,EAAU,CACdD,UAAWsE,EAAKC,EAAyBvE,GAAUjB,SAElDA,KAEJoB,GACGwD,EAACa,EAAc,CAACC,KAAMpF,EAAQN,SAC1B4E,EAACe,EAAoBd,OAAAC,OAAA,CACjB5C,QAASA,KACHlB,GAAW,CACb4E,cAAc,EACdC,aAAa,EACbC,OAAO,aAGXlB,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFvD,EAAWwD,QAAUD,EACrBhD,GAAK+D,YAAYf,EAAK,GAEtB3B,GAAU,CACd2C,OA1EJC,UAEhB,GAAIjF,GAAYU,GAAsC,mBAAnBzB,EAC/B,OAEJ,MAAMiG,EAC8B,QAAhCnG,EAACkG,EAAEE,qBAA6B,IAAApG,EAAAA,EAC/BqG,SAASC,cAEVH,GAzCc,CAAClB,UACnB,IAAKA,EAAM,OAAO,EAElB,GACIA,aAAgBsB,aAChBtB,EAAKuB,aAAa,gCAElB,OAAO,EAGX,MAAMC,EAAQjF,EAAQ0D,QAChBwB,EAA+B,QAAlB1G,EAAA0B,EAAWwD,eAAO,IAAAlF,OAAA,EAAAA,EAAE2G,cAEvC,QACOF,GAASA,EAAMG,SAAS3B,MACxByB,GAAcA,EAAWE,SAAS3B,EAAM,EA0BnC4B,CAAcV,KAE1B7E,GAAW,GACX6B,IAAuB,GAAM,EA+DT2D,MAAKhC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACExB,IACArB,IAAc,CACjB6E,QAAS,OACTzG,OAAQA,QAAAA,EAAU8C,MAElBoB,KAAkB,CAAAvE,SA9DZ,mBAAnBC,EACAA,EACHY,EAAe,CAAEkG,UAAWnF,EAAiBd,YAAa,IAK9D8D,EAACoC,EAAO,CACJ5F,SAAO,EACP6F,cAAexC,GACfsC,UAAWlG,EAAee,OAAkBsF,EAC5CpG,SAAUD,EAAeC,OAAWoG,EACpCC,UAAWxG,EACXyG,GAAItF,GAAkB9B,SAErBC,cAsDN"}

package/popover/popover-trigger.styles.d.ts

@@ -0,0 +1 @@
+export declare const triggerContainer: import("@linaria/core").LinariaClassName;

package/popover/popover-trigger.styles.js

@@ -0,0 +1,2 @@
+import"./popover-trigger.styles_8zokig.css";const o="tjxhm5y";export{o as triggerContainer};
+//# sourceMappingURL=popover-trigger.styles.js.map

package/popover/popover-trigger.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.styles.js","sources":["../../src/popover/popover-trigger.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const triggerContainer = css`\n    display: inline;\n    width: fit-content;\n    cursor: pointer;\n    position: relative;\n`;\n"],"names":["triggerContainer"],"mappings":"mEAEO,MAAMA,EAAgB"}

package/popover/popover-trigger.styles_8zokig.css

@@ -0,0 +1 @@
+@layer fds{.tjxhm5y{display:inline;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative;}}

package/popover/popover.d.ts

@@ -1,5 +1,9 @@
 import type { PopoverProps } from "./types";
 /**
- * @deprecated Use `PopoverV2` for improved positioning behaviour. This component will be removed in DS v3.
+ * The presentational overlay for a popover panel. Renders as a floating card
+ * on desktop and modal on mobile.
+ *
+ * Use with `PopoverTrigger`, which manages visibility state and positioning.
+ * @keywords info, overlay, tooltip
  */
-export declare const Popover: ({ children, visible, onMobileClose, ...otherProps }: PopoverProps) => JSX.Element;
+export declare const Popover: ({ children, visible, onMobileClose, maxHeight, overflow, ariaLabel, id, className, "data-testid": testId, ...otherProps }: PopoverProps) => JSX.Element;

package/popover/popover.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,Fragment as t,jsx as o}from"react/jsx-runtime";import i from"../external/lodash/debounce.js";import{useState as n,useRef as s,useEffect as l}from"react";import{r as c}from"../external/react-responsive/dist/react-responsive.js";import{Card as d}from"../card/card.js";import{Modal as m}from"../modal/modal.js";import{MediaWidths as a}from"../v2_spec/media-spec.js";import{V2_Text as p}from"../v2_text/text.js";import{BubbleWrap as h,MobileModalBox as f,ContentWrapper as u}from"./popover.styles.js";const v=v=>{var{children:x,visible:j,onMobileClose:w}=v,b=e(v,["children","visible","onMobileClose"]);const g=b["data-testid"]||"popover",[y,C]=n("none"),_=s(null),L=c.useMediaQuery({maxWidth:a.mobileL}),M=s(y);l((()=>(E(),window.addEventListener("resize",i(z,300)),()=>{window.removeEventListener("resize",i(z,300))})),[]);const z=()=>{E()},B=()=>{w&&w()},E=()=>{const e=O();var r;e&&(r=e,M.current=r,C(r))},O=()=>{if(_.current){const e=_.current.getBoundingClientRect(),r=24,t=e.y<r,o=window.innerWidth-r;return e.x<r?t?"top-left":"left":e.x+e.width>o?t?"top-right":"right":("top-left"===M.current||"left"===M.current)&&e.x-e.width/2>r||("top-right"===M.current||"right"===M.current)&&e.x+2*e.width<o?t?"top-center":"none":t?"top-center":void 0}},W=()=>"string"==typeof x?o(p.BodySmall,{children:x}):x;return r(t,{children:[o(h,Object.assign({ref:_,"data-testid":g,$visible:j,$offset:y},b,{children:o(d,{children:W()})})),L&&o(m,{show:null!=j&&j,onOverlayClick:B,children:o(f,{onClose:B,children:o(u,{children:W()})})})]})};export{v as Popover};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as o,Fragment as r,jsx as t}from"react/jsx-runtime";import i from"clsx";import{useRef as l,useMemo as m}from"react";import{Card as s}from"../card/card.js";import{Markup as a}from"../markup/markup.js";import{ModalV2 as d}from"../modal-v2/modal-v2.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as n}from"../theme/utils/use-apply-styles.js";import{useMaxWidthMediaQuery as p}from"../theme/utils/use-media-query.js";import{Typography as c}from"../typography/index.js";import{tokens as h,popoverCard as v,popoverCardWithMaxHeight as f,popoverCardWithOverflow as u,popoverContainer as j}from"./popover.styles.js";const b=b=>{var{children:x,visible:y=!1,onMobileClose:C,maxHeight:g,overflow:k,ariaLabel:w="More information",id:M,className:N,"data-testid":H="popover"}=b,q=e(b,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","data-testid"]);const B=p("sm"),L=l(null),O=m((()=>({[h.popoverCard.maxHeight]:void 0===g?null:`${g}px`,[h.popoverCard.overflowY]:null!=k?k:null})),[g,k]);n(L,O);const _=()=>{C&&C()},z=()=>"string"==typeof x?t(c.BodyMD,{children:x}):x;return o(r,{children:[y&&!B&&t("div",Object.assign({ref:L,tabIndex:0,"data-testid":H},q,{className:i(j,N),id:M,role:"dialog","aria-label":w,children:t(s,{className:i(v,void 0!==g&&f,k&&u),children:t(a,{baseTextSize:"body-md",children:z()})})})),B&&t(d,{show:y,onOverlayClick:_,onClose:_,id:M,role:"dialog","aria-label":w,children:o(d.Card,{children:[t(d.Content,{children:t(a,{children:z()})}),t(d.CloseButton,{})]})})]})};export{b as Popover};
 //# sourceMappingURL=popover.js.map

package/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../src/popover/popover.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\n\nimport { Card } from \"../card\";\nimport { Modal } from \"../modal/modal\";\nimport { MediaWidths } from \"../v2_spec/media-spec\";\nimport { V2_Text } from \"../v2_text/text\";\nimport type { OffsetPosition } from \"./popover.styles\";\nimport { BubbleWrap, ContentWrapper, MobileModalBox } from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\n/**\n * @deprecated Use `PopoverV2` for improved positioning behaviour. This component will be removed in DS v3.\n */\nexport const Popover = ({\n    children,\n    visible,\n    onMobileClose,\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"] || \"popover\";\n    const [offset, _setOffset] = useState<OffsetPosition>(\"none\");\n    const bubbleRef = useRef<HTMLDivElement>(null);\n    const isMobile = useMediaQuery({\n        maxWidth: MediaWidths.mobileL,\n    });\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n    const offsetStateRef = useRef<OffsetPosition>(offset);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setOffset = (value: OffsetPosition) => {\n        offsetStateRef.current = value;\n        _setOffset(value);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        updateOffsetPosition();\n        window.addEventListener(\"resize\", debounce(handleViewportResize, 300));\n\n        return () => {\n            window.removeEventListener(\n                \"resize\",\n                debounce(handleViewportResize, 300)\n            );\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewportResize = () => {\n        updateOffsetPosition();\n    };\n\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const updateOffsetPosition = () => {\n        const newOffsetPosition = getOffsetPosition();\n\n        if (newOffsetPosition) {\n            setOffset(newOffsetPosition);\n        }\n    };\n\n    const getOffsetPosition = (): OffsetPosition | undefined => {\n        if (bubbleRef.current) {\n            const bubbleRect = bubbleRef.current.getBoundingClientRect();\n            const paddingBuffer = 24; // buffer for all sides\n            const hasExceededTop = bubbleRect.y < paddingBuffer;\n            const rightLimit = window.innerWidth - paddingBuffer;\n\n            if (bubbleRect.x < paddingBuffer) {\n                // Exceed left\n                return hasExceededTop ? \"top-left\" : \"left\";\n            } else if (bubbleRect.x + bubbleRect.width > rightLimit) {\n                // Exceed right\n                return hasExceededTop ? \"top-right\" : \"right\";\n            }\n\n            /**\n             * Handle cases where there is more space and we can\n             * shift bubble back to center\n             */\n            if (\n                (offsetStateRef.current === \"top-left\" ||\n                    offsetStateRef.current === \"left\") &&\n                bubbleRect.x - bubbleRect.width / 2 > paddingBuffer\n            ) {\n                return hasExceededTop ? \"top-center\" : \"none\";\n            }\n\n            if (\n                (offsetStateRef.current === \"top-right\" ||\n                    offsetStateRef.current === \"right\") &&\n                bubbleRect.x + bubbleRect.width * 2 < rightLimit\n            ) {\n                return hasExceededTop ? \"top-center\" : \"none\";\n            }\n\n            if (hasExceededTop) {\n                return \"top-center\";\n            }\n\n            // All ok, do nothing\n            return undefined;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <V2_Text.BodySmall>{children}</V2_Text.BodySmall>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            <BubbleWrap\n                ref={bubbleRef}\n                data-testid={testId}\n                $visible={visible}\n                $offset={offset}\n                {...otherProps}\n            >\n                <Card>{renderContent()}</Card>\n            </BubbleWrap>\n            {isMobile && (\n                <Modal\n                    show={visible ?? false}\n                    onOverlayClick={handleMobileClose}\n                >\n                    <MobileModalBox onClose={handleMobileClose}>\n                        <ContentWrapper>{renderContent()}</ContentWrapper>\n                    </MobileModalBox>\n                </Modal>\n            )}\n        </>\n    );\n};\n"],"names":["Popover","_a","children","visible","onMobileClose","otherProps","__rest","testId","offset","_setOffset","useState","bubbleRef","useRef","isMobile","useMediaQuery","maxWidth","MediaWidths","mobileL","offsetStateRef","useEffect","updateOffsetPosition","window","addEventListener","debounce","handleViewportResize","removeEventListener","handleMobileClose","newOffsetPosition","getOffsetPosition","value","current","bubbleRect","getBoundingClientRect","paddingBuffer","hasExceededTop","y","rightLimit","innerWidth","x","width","renderContent","_jsx","V2_Text","BodySmall","_jsxs","_Fragment","BubbleWrap","Object","assign","ref","$visible","$offset","Card","Modal","show","onOverlayClick","MobileModalBox","onClose","ContentWrapper"],"mappings":"ijBAeO,MAAMA,EAAWC,QAAAC,SACpBA,EAAQC,QACRA,EAAOC,cACPA,KACGC,EAAUC,EAAAL,EAJO,CAAA,WAAA,UAAA,kBASpB,MAAMM,EAASF,EAAW,gBAAkB,WACrCG,EAAQC,GAAcC,EAAyB,QAChDC,EAAYC,EAAuB,MACnCC,EAAWC,EAAAA,cAAc,CAC3BC,SAAUC,EAAYC,UASpBC,EAAiBN,EAAuBJ,GAa9CW,GAAU,KACNC,IACAC,OAAOC,iBAAiB,SAAUC,EAASC,EAAsB,MAE1D,KACHH,OAAOI,oBACH,SACAF,EAASC,EAAsB,KAClC,IAEN,IAKH,MAAMA,EAAuB,KACzBJ,GAAsB,EAGpBM,EAAoB,KAClBtB,GACAA,GACJ,EAMEgB,EAAuB,KACzB,MAAMO,EAAoBC,IArCZ,IAACC,EAuCXF,IAvCWE,EAwCDF,EAvCdT,EAAeY,QAAUD,EACzBpB,EAAWoB,GAuCX,EAGED,EAAoB,KACtB,GAAIjB,EAAUmB,QAAS,CACnB,MAAMC,EAAapB,EAAUmB,QAAQE,wBAC/BC,EAAgB,GAChBC,EAAiBH,EAAWI,EAAIF,EAChCG,EAAaf,OAAOgB,WAAaJ,EAEvC,OAAIF,EAAWO,EAAIL,EAERC,EAAiB,WAAa,OAC9BH,EAAWO,EAAIP,EAAWQ,MAAQH,EAElCF,EAAiB,YAAc,SAQV,aAA3BhB,EAAeY,SACe,SAA3BZ,EAAeY,UACnBC,EAAWO,EAAIP,EAAWQ,MAAQ,EAAIN,IAMV,cAA3Bf,EAAeY,SACe,UAA3BZ,EAAeY,UACnBC,EAAWO,EAAuB,EAAnBP,EAAWQ,MAAYH,EAN/BF,EAAiB,aAAe,OAWvCA,EACO,kBAIX,CACJ,GAMEM,EAAgB,IACE,iBAAbtC,EACHuC,EAACC,EAAQC,UAAS,CAAAzC,SAAEA,IAA6B,EAKzD,OACI0C,EAAAC,EAAA,CAAA3C,SAAA,CACIuC,EAACK,EAAUC,OAAAC,OAAA,CACPC,IAAKtC,EAAS,cACDJ,EAAM2C,SACT/C,EAAOgD,QACR3C,GACLH,EAAU,CAAAH,SAEduC,EAACW,EAAI,CAAAlD,SAAEsC,SAEV3B,GACG4B,EAACY,EAAK,CACFC,KAAMnD,SAAAA,EACNoD,eAAgB7B,EAAiBxB,SAEjCuC,EAACe,EAAc,CAACC,QAAS/B,EAAiBxB,SACtCuC,EAACiB,EAAc,CAAAxD,SAAEsC,YAI9B"}
+{"version":3,"file":"popover.js","sources":["../../src/popover/popover.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { Card } from \"../card\";\nimport { Markup } from \"../markup\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useApplyStyle, useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\n// @catalog\n/**\n * The presentational overlay for a popover panel. Renders as a floating card\n * on desktop and modal on mobile.\n *\n * Use with `PopoverTrigger`, which manages visibility state and positioning.\n * @keywords info, overlay, tooltip\n */\nexport const Popover = ({\n    children,\n    visible = false,\n    onMobileClose,\n    maxHeight,\n    overflow,\n    ariaLabel = \"More information\",\n    id,\n    className,\n    \"data-testid\": testId = \"popover\",\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const popoverContainerRef = useRef<HTMLDivElement>(null);\n    const popoverCardStyle = useMemo(\n        () => ({\n            [styles.tokens.popoverCard.maxHeight]:\n                maxHeight === undefined ? null : `${maxHeight}px`,\n            [styles.tokens.popoverCard.overflowY]: overflow ?? null,\n        }),\n        [maxHeight, overflow]\n    );\n    useApplyStyle(popoverContainerRef, popoverCardStyle);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyMD>{children}</Typography.BodyMD>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            {visible && !isMobile && (\n                <div\n                    ref={popoverContainerRef}\n                    tabIndex={0}\n                    data-testid={testId}\n                    {...otherProps}\n                    className={clsx(styles.popoverContainer, className)}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <Card\n                        className={clsx(\n                            styles.popoverCard,\n                            maxHeight !== undefined &&\n                                styles.popoverCardWithMaxHeight,\n                            overflow && styles.popoverCardWithOverflow\n                        )}\n                    >\n                        <Markup baseTextSize=\"body-md\">\n                            {renderContent()}\n                        </Markup>\n                    </Card>\n                </div>\n            )}\n            {isMobile && (\n                <ModalV2\n                    show={visible}\n                    onOverlayClick={handleMobileClose}\n                    onClose={handleMobileClose}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <ModalV2.Card>\n                        <ModalV2.Content>\n                            <Markup>{renderContent()}</Markup>\n                        </ModalV2.Content>\n                        <ModalV2.CloseButton />\n                    </ModalV2.Card>\n                </ModalV2>\n            )}\n        </>\n    );\n};\n"],"names":["Popover","_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","testId","otherProps","__rest","isMobile","useMaxWidthMediaQuery","popoverContainerRef","useRef","popoverCardStyle","useMemo","styles.tokens","popoverCard","undefined","overflowY","useApplyStyle","handleMobileClose","renderContent","_jsx","Typography","BodyMD","_jsxs","_Fragment","Object","assign","ref","tabIndex","clsx","styles.popoverContainer","role","Card","styles.popoverCard","styles.popoverCardWithMaxHeight","styles.popoverCardWithOverflow","Markup","baseTextSize","ModalV2","show","onOverlayClick","onClose","Content","CloseButton"],"mappings":"o2BAmBO,MAAMA,EAAWC,IAAA,IAAAC,SACpBA,EAAQC,QACRA,GAAU,EAAKC,cACfA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAAY,mBAAkBC,GAC9BA,EAAEC,UACFA,EACA,cAAeC,EAAS,WAAST,EAC9BU,EAAUC,EAAAX,EAVO,0GAepB,MAAMY,EAAWC,EAAsB,MACjCC,EAAsBC,EAAuB,MAC7CC,EAAmBC,GACrB,KAAA,CACI,CAACC,EAAcC,YAAYf,gBACTgB,IAAdhB,EAA0B,KAAO,GAAGA,MACxC,CAACc,EAAcC,YAAYE,WAAYhB,QAAAA,EAAY,QAEvD,CAACD,EAAWC,IAEhBiB,EAAcR,EAAqBE,GAKnC,MAAMO,EAAoB,KAClBpB,GACAA,GACJ,EAMEqB,EAAgB,IACE,iBAAbvB,EACHwB,EAACC,EAAWC,OAAM,CAAA1B,SAAEA,IAA6B,EAKzD,OACI2B,EAAAC,EAAA,CAAA5B,SAAA,CACKC,IAAYU,GACTa,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKlB,EACLmB,SAAU,EAAC,cACExB,GACTC,EAAU,CACdF,UAAW0B,EAAKC,EAAyB3B,GACzCD,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErBwB,EAACY,EAAI,CACD7B,UAAW0B,EACPI,OACclB,IAAdhB,GACImC,EACJlC,GAAYmC,GACfvC,SAEDwB,EAACgB,EAAM,CAACC,aAAa,mBAChBlB,WAKhBZ,GACGa,EAACkB,EAAO,CACJC,KAAM1C,EACN2C,eAAgBtB,EAChBuB,QAASvB,EACThB,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErB2B,EAACe,EAAQN,KAAI,CAAApC,SAAA,CACTwB,EAACkB,EAAQI,QAAO,CAAA9C,SACZwB,EAACgB,EAAM,CAAAxC,SAAEuB,QAEbC,EAACkB,EAAQK,YAAW,CAAA,UAIjC"}

package/popover/popover.styles.d.ts

@@ -1,11 +1,10 @@
-export type OffsetPosition = "top-center" | "top-left" | "top-right" | "left" | "right" | "none";
-interface PopoverStyleProps {
-    $visible?: boolean;
-    $offset: OffsetPosition;
-}
-export declare const BubbleWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PopoverStyleProps>> & string;
-export declare const MobileModalBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ModalBoxProps, never>> & string & Omit<({ id, children, onClose, showCloseButton, ...otherProps }: import("..").ModalBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const HOCWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HOCTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const tokens: {
+    readonly popoverCard: {
+        readonly maxHeight: "--fds-internal-popover-popoverCard-maxHeight";
+        readonly overflowY: "--fds-internal-popover-popoverCard-overflowY";
+    };
+};
+export declare const popoverContainer: import("@linaria/core").LinariaClassName;
+export declare const popoverCard: import("@linaria/core").LinariaClassName;
+export declare const popoverCardWithMaxHeight: import("@linaria/core").LinariaClassName;
+export declare const popoverCardWithOverflow: import("@linaria/core").LinariaClassName;