npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2348) hide show

package/pill/pill.styles.js.map ADDED Viewed

@@ -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_1wiyl8.css ADDED Viewed

@@ -0,0 +1,17 @@
+.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);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/popover/popover.styles.d.ts CHANGED Viewed

@@ -3,9 +3,9 @@ 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 declare const BubbleWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof PopoverStyleProps> & PopoverStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof PopoverStyleProps> & PopoverStyleProps, never>>> & string;
+export declare const MobileModalBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<import("..").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<(props: import("..").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, 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> & Partial<Pick<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> & Partial<Pick<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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export {};

package/popover-v2/popover-inline/popover-inline.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{PopoverTrigger as n}from"../popover-trigger.js";import{StyledText as o,StyledIcon as l}from"./popover-inline.styles.js";const i=i=>{var{ariaLabel:a,content:d,icon:s,underlineStyle:u="default",underlineHoverStyle:p="default"}=i,c=e(i,["ariaLabel","content","icon","underlineStyle","underlineHoverStyle"]);const m=!!d;return r(n,Object.assign({},c,{children:t(o,{"aria-label":null!=a?a:m?void 0:"More info",role:"button","aria-haspopup":"dialog",tabIndex:0,$defaultStyle:u,$hoverStyle:p,children:[d,s&&r(l,{$standalone:!m,children:s})]})}))};export{i as PopoverInline};
+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-v2/popover-inline/popover-inline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-inline.js","sources":["../../../src/popover-v2/popover-inline/popover-inline.tsx"],"sourcesContent":["import { PopoverTrigger } from \"../popover-trigger\";\nimport type { PopoverInlineProps } from \"../types\";\nimport { ~~StyledIcon,~~ ~~StyledText~~ } from \"./popover-inline.styles\";\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 <~~StyledText~~\n aria-label={ariaLabel ?? (hasContent ? undefined : \"More info\")}\n role=\"button\"\n aria-haspopup=\"dialog\"\n tabIndex={0}\n ~~$defaultStyle~~={underlineStyle}\n ~~$hoverStyle~~={underlineHoverStyle}\n >\n {content}\n {icon && (\n <~~StyledIcon $standalone~~={!hasContent}>{icon}</~~StyledIcon~~>\n )}\n </~~StyledText~~>\n </PopoverTrigger>\n );\n};\n"],"names":["PopoverInline","_a","ariaLabel","content","icon","underlineStyle","underlineHoverStyle","otherProps","__rest","hasContent","_jsx","PopoverTrigger","Object","assign","children","_jsxs","~~StyledText","~~undefined","role","tabIndex","~~$defaultStyle~~","~~$hoverStyle~~","~~StyledIcon~~","~~$standalone~~"],"mappings":"~~mOAIO~~,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,~~GAAKN~~,EAAU,CAAAO,SAC1BC,~~EAACC~~,~~EAAU~~,CAAA,~~aACKd~~,QAAAA,EAAcO,~~OAAaQ~~,EAAY,YACnDC,KAAK,SAAQ,gBACC,SACdC,SAAU,~~EAACC~~,~~cACIf~~,~~EAAcgB~~,~~YAChBf~~,EAAmBQ,SAAA,~~CAE/BX~~,EACAC,GACGM,~~EAACY~~,~~EAAU~~,~~CAAAC~~,~~aAAed~~,~~EAAUK~~,~~SAAGV~~,~~SAGlC~~"}
1	+ {"version":3,"file":"popover-inline.js","sources":["../../../src/popover-v2/popover-inline/popover-inline.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { PopoverTrigger } from \"../popover-trigger\";\nimport type { PopoverInlineProps } from \"../types\";\nimport * as styles from \"./popover-inline.styles\";\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":"gRAMO,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-v2/popover-inline/popover-inline.styles.d.ts CHANGED Viewed

@@ -1,11 +1,2 @@
-import type { PopoverInlineStyle } from "../types";
-interface StyledTextProps {
-    $defaultStyle: PopoverInlineStyle;
-    $hoverStyle: PopoverInlineStyle;
-}
-interface StyledIconProps {
-    $standalone: boolean;
-}
-export declare const StyledText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledTextProps>> & string;
-export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledIconProps>> & string;
-export {};
+export declare const popoverInlineText: import("@linaria/core").LinariaClassName;
+export declare const popoverInlineIconWithContent: import("@linaria/core").LinariaClassName;

package/popover-v2/popover-inline/popover-inline.styles.js CHANGED Viewed

@@ -1,22 +1,2 @@
-import e from"styled-components";import{V3_Colour as t}from"../../v3_theme/index.js";const n=e=>{switch(e){case"underline":return"text-decoration: underline 1px;";case"underline-dashed":return"text-decoration: underline dashed 1px;"}},r=e.span`
-    color: ${t["text-primary"]};
-    font-weight: 600;
-    text-underline-position: under;
-    ${({$defaultStyle:e})=>n(e)}
-    &:hover,
-    &:focus-visible {
-        color: ${t["text-hover"]};
-        ${({$hoverStyle:e})=>n(e)}
-    }
-    svg {
-        height: 1lh; // align vertically
-        width: 1em; // scale icon with font size
-        vertical-align: top;
-    }
-`,i=e.span`
-    ${e=>!e.$standalone&&"margin-left: 0.25rem;"}
-`;export{i as StyledIcon,r as StyledText};
+import"./popover-inline.styles_ziag9c.css";const p="p19t6gs0",o="pf3txif";export{o as popoverInlineIconWithContent,p as popoverInlineText};
 //# sourceMappingURL=popover-inline.styles.js.map

package/popover-v2/popover-inline/popover-inline.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-inline.styles.js","sources":["../../../src/popover-v2/popover-inline/popover-inline.styles.ts"],"sourcesContent":["import ~~styled from \"styled-components\";\n\nimport~~ { ~~V3_Colour~~ } from \"~~../../v3_theme~~\";\nimport ~~type~~ { ~~PopoverInlineStyle~~ } from \"~~../types~~\";\n\~~n//~~ ~~=============================================================================\n//~~ ~~STYLE~~ ~~INTERFACE\n//~~ ~~=============================================================================\~~n~~\ninterface~~ ~~StyledTextProps~~ {\~~n $defaultStyle: PopoverInlineStyle~~;\n ~~$hoverStyle~~: ~~PopoverInlineStyle~~;\n~~}\n\ninterface StyledIconProps {\n~~ ~~$standalone~~: ~~boolean~~;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getTextStyle = (style: PopoverInlineStyle) => {\n ~~switch (~~style~~) {\n case \~~"underline\"~~:\n return~~ \"text-decoration: underline 1px;\~~";\~~n ~~case~~ \"underline-dashed\"~~:\n return~~ \"text-decoration: underline dashed 1px;\~~";\~~n }\n~~};\~~n\~~nexport const StyledText = styled.span<StyledTextProps>`\~~n color: ${~~V3_Colour~~[\"text-~~primary~~\"]};\n ~~font~~-~~weight~~: ~~600;\~~n ~~text~~-underline-~~position~~: ~~under;\n~~\n ~~${({~~ ~~$defaultStyle~~ }~~) => getTextStyle($defaultStyle)}~~\n\n &:hover,\n &:focus-visible {\n ~~color: ${V3_Colour[\"~~text-~~hover\"]};\n ${({~~ ~~$hoverStyle~~ }) ~~=> getTextStyle($hoverStyle)}\~~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 ~~StyledIcon~~ = ~~styled.span<StyledIconProps>`\~~n ~~${(props) => !props.$standalone && \"~~margin-left: 0.25rem;\~~"}\~~n`;\n"],"names":["~~getTextStyle~~","~~style~~"~~,"StyledText","styled","span","V3_Colour","$defaultStyle","$hoverStyle","StyledIcon","props","$standalone"~~],"mappings":"~~qFAqBA~~,MAAMA,~~EAAgBC~~,~~IAClB~~,OAAQA,GACJ,IAAK,YACD,MAAO,kCACX,IAAK,mBACD,MAAO,2CAINC,EAAaC,EAAOC,IAAqB;aACzCC,EAAU;;;;MAIjB,EAAGC,mBAAoBN,EAAaM;;;;iBAIzBD,EAAU;UACjB,EAAGE,iBAAkBP,EAAaO;;;;;;;;EAU/BC,EAAaL,EAAOC,IAAqB;MAC/CK,IAAWA,EAAMC,aAAe;"}
1	+ {"version":3,"file":"popover-inline.styles.js","sources":["../../../src/popover-v2/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":"oFAIO,MAAMA,EAAiB,WAmCjBC,EAA4B"}

package/popover-v2/popover-inline/popover-inline.styles_ziag9c.css ADDED Viewed

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

package/popover-v2/popover-trigger.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import type { PopoverV2TriggerProps } from "./types";
-export declare const PopoverTrigger: ({ children, popoverContent, trigger: _trigger, position, zIndex, rootNode, customOffset, delay, onPopoverAppear, onPopoverDismiss, popoverAriaLabel, enableFlip, enableResize, overflow, triggerOnFocus, isModal, ...otherProps }: PopoverV2TriggerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverTrigger: ({ children, popoverContent, trigger: _trigger, position, zIndex, rootNode, customOffset, delay, onPopoverAppear, onPopoverDismiss, popoverAriaLabel, enableFlip, enableResize, overflow, triggerOnFocus, isModal, className, ...otherProps }: PopoverV2TriggerProps) => import("react/jsx-runtime").JSX.Element;

package/popover-v2/popover-trigger.js CHANGED Viewed

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

package/popover-v2/popover-trigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-trigger.js","sources":["../../src/popover-v2/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 type React from \"react\";\nimport { useContext, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { useFloatingChild } from \"../overlay/use-floating-context\";\nimport { useInheritedThemeScope } from \"../theme/theme-provider/hooks\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport { PopoverV2 } from \"./popover\";\nimport { TriggerContainer } from \"./popover-trigger.styles\";\nimport type { PopoverV2TriggerProps, PopoverV2TriggerType } from \"./types\";\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 ...otherProps\n}: PopoverV2TriggerProps) => {\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 theme = useContext(ThemeContext);\n const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n const [availableHeight, setAvailableHeight] = useState(0);\n const internalId = useRef(SimpleIdGenerator.generate());\n const popoverContainerId = `${internalId.current}-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: PopoverV2TriggerType = 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 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 <PopoverV2\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 </PopoverV2>\n );\n };\n\n return (\n <>\n <TriggerContainer\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 >\n {children}\n </TriggerContainer>\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","otherProps","__rest","visible","setVisible","useState","nodeRef","useRef","popoverRef","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","availableHeight","setAvailableHeight","popoverContainerId","SimpleIdGenerator","generate","current","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","_Fragment","_jsx","TriggerContainer","Object","assign","ref","node","setReference","onClick","event","stopPropagation","preventDefault","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","setFloating","onBlur","e","next","relatedTarget","document","activeElement","HTMLElement","hasAttribute","refEl","floatingEl","parentElement","contains","isFocusInside","style","outline","maxHeight","PopoverV2","onMobileClose","undefined","ariaLabel","id"],"mappings":"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"}
1	+ {"version":3,"file":"popover-trigger.js","sources":["../../src/popover-v2/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 {\n Breakpoint,\n useDesignToken,\n useInheritedThemeScope,\n useSafeMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useId } from \"../util\";\nimport { PopoverV2 } from \"./popover\";\nimport * as styles from \"./popover-trigger.styles\";\nimport type { PopoverV2TriggerProps, PopoverV2TriggerType } from \"./types\";\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}: PopoverV2TriggerProps) => {\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 mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\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: PopoverV2TriggerType = 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 <PopoverV2\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 </PopoverV2>\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","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","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","PopoverV2","onMobileClose","undefined","ariaLabel","id"],"mappings":"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"}

package/popover-v2/popover-trigger.styles.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare const ~~TriggerContainer~~: import("~~styled-components~~/~~dist/types~~").~~IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string~~;
1	+ export declare const triggerContainer: import("@linaria/core").LinariaClassName;

package/popover-v2/popover-trigger.styles.js CHANGED Viewed

@@ -1,7 +1,2 @@
-import t from"styled-components";const i=t.div`
-    display: inline;
-    width: fit-content;
-    cursor: pointer;
-    position: relative;
-`;export{i as TriggerContainer};
+import"./popover-trigger.styles_1yq7ffk.css";const o="tg7uzp3";export{o as triggerContainer};
 //# sourceMappingURL=popover-trigger.styles.js.map

package/popover-v2/popover-trigger.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-trigger.styles.js","sources":["../../src/popover-v2/popover-trigger.styles.~~tsx~~"],"sourcesContent":["import ~~styled~~ from \"~~styled-components~~\";\n\~~n// =============================================================================\n// STYLING\n// =============================================================================\~~nexport const ~~TriggerContainer~~ = ~~styled.div~~`\n display: inline;\n width: fit-content;\n cursor: pointer;\n position: relative;\n`;\n"],"names":["~~TriggerContainer~~"~~,"styled","div"~~],"mappings":"~~iCAKO~~,MAAMA,~~EAAmBC,EAAOC,GAAG;;;;;~~"}
1	+ {"version":3,"file":"popover-trigger.styles.js","sources":["../../src/popover-v2/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":"uEAEO,MAAMA,EAAgB"}

package/popover-v2/popover-trigger.styles_1yq7ffk.css ADDED Viewed

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

package/popover-v2/popover.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import type { PopoverV2Props } from "./types";
-export declare const PopoverV2: ({ children, visible, onMobileClose, maxHeight, overflow, ariaLabel, id, ...otherProps }: PopoverV2Props) => JSX.Element;
+export declare const PopoverV2: ({ children, visible, onMobileClose, maxHeight, overflow, ariaLabel, id, className, "data-testid": testId, ...otherProps }: PopoverV2Props) => JSX.Element;

package/popover-v2/popover.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as o,Fragment as r,jsx as i}from"react/jsx-runtime";import{useContext as t}from"react";import{r as l}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as a}from"styled-components";import{ModalV2 as n}from"../modal-v2/index.js";import{Typography as s}from"../typography/index.js";import{V3_Breakpoint as m}from"../v3_theme/index.js";import{PopoverContainer as d,PopoverCard as p}from"./popover.styles.js";const c=c=>{var{children:h,visible:f,onMobileClose:v,maxHeight:x,overflow:b,ariaLabel:u,id:g}=c,j=e(c,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id"]);const y=j["data-testid"]||"popover",C=t(a),M=m["sm-max"]({theme:C}),w=l.useMediaQuery({maxWidth:M}),H=()=>{v&&v()},_=()=>"string"==typeof h?i(s.BodyMD,{children:h}):h;return o(r,{children:[f&&i(d,Object.assign({tabIndex:0,"data-testid":y},j,{id:g,role:"dialog","aria-label":null!=u?u:"More information",children:i(p,{$maxHeight:x,$overflow:b,children:_()})})),w&&i(n,{show:null!=f&&f,onOverlayClick:H,onClose:H,id:g,role:"dialog","aria-label":null!=u?u:"More information",children:o(n.Card,{children:[i(n.Content,{children:_()}),i(n.CloseButton,{})]})})]})};export{c as PopoverV2};
+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 m,useMemo as s}from"react";import{Card as l}from"../card/card.js";import{Markup as a}from"../markup/markup.js";import{ModalV2 as d}from"../modal-v2/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as n}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useSafeMaxWidthMediaQuery as p}from"../theme/utils/media-query.js";import{useApplyStyle as h}from"../theme/utils/use-apply-styles.js";import{useDesignToken as c}from"../theme/utils/use-design-token.js";import{Typography as f}from"../typography/index.js";import{tokens as j,popoverCard as u,popoverCardWithMaxHeight as v,popoverCardWithOverflow as b,popoverContainer as x}from"./popover.styles.js";const y=y=>{var{children:k,visible:g=!1,onMobileClose:C,maxHeight:w,overflow:M,ariaLabel:N="More information",id:H,className:q,"data-testid":B="popover"}=y,L=e(y,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","data-testid"]);const O=c(n["sm-max"]),_=p(O),z=m(null),D=s((()=>({[j.popoverCard.maxHeight]:void 0===w?null:`${w}px`,[j.popoverCard.overflowY]:null!=M?M:null})),[w,M]);h(z,D);const I=()=>{C&&C()},S=()=>"string"==typeof k?t(f.BodyMD,{children:k}):k;return o(r,{children:[g&&!_&&t("div",Object.assign({ref:z,tabIndex:0,"data-testid":B},L,{className:i(x,q),id:H,role:"dialog","aria-label":N,children:t(l,{className:i(u,void 0!==w&&v,M&&b),children:t(a,{baseTextSize:"body-md",children:S()})})})),_&&t(d,{show:g,onOverlayClick:I,onClose:I,id:H,role:"dialog","aria-label":N,children:o(d.Card,{children:[t(d.Content,{children:t(a,{children:S()})}),t(d.CloseButton,{})]})})]})};export{y as PopoverV2};
 //# sourceMappingURL=popover.js.map

package/popover-v2/popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.js","sources":["../../src/popover-v2/popover.tsx"],"sourcesContent":["import { ~~useContext~~ } from \"react\";\nimport { ~~useMediaQuery~~ } from \"~~react-responsive~~\";\nimport { ~~ThemeContext~~ } from \"~~styled-components~~\";\n\nimport { ModalV2 } from \"../modal-v2\";\nimport { ~~Typography~~ } from \"../~~typography~~\";\nimport { ~~V3_Breakpoint~~ } from \"../~~v3_theme~~\";\nimport { ~~PopoverCard,~~ ~~PopoverContainer~~ } from \"./popover.styles\";\nimport type { PopoverV2Props } from \"./types\";\n\nexport const PopoverV2 = ({\n children,\n visible,\n onMobileClose,\n maxHeight,\n overflow,\n ariaLabel,\n id,\n ...otherProps\n}: PopoverV2Props): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const ~~testId~~ = ~~otherProps~~[\"~~data~~-~~testid~~\"] ~~\|\| \"popover\"~~;\n const ~~theme~~ = ~~useContext~~(~~ThemeContext~~);\n const ~~mobileBreakpoint~~ = ~~V3_Breakpoint[\"sm-max\"]~~(~~{ theme }~~);\n const ~~isMobile~~ = ~~useMediaQuery~~({ ~~maxWidth~~: ~~mobileBreakpoint~~ });\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 && (\n <~~PopoverContainer~~\n tabIndex={0}\n data-testid={testId}\n {...otherProps}\n id={id}\n role=\"dialog\"\n aria-label={ariaLabel ~~?? \"More information\"~~}\n >\n <~~PopoverCard $maxHeight~~={maxHeight} $overflow~~={overflow~~}>\n {renderContent()}\n </~~PopoverCard~~>\n </~~PopoverContainer~~>\n )}\n {isMobile && (\n <ModalV2\n show={visible ~~?? false~~}\n onOverlayClick={handleMobileClose}\n onClose={handleMobileClose}\n id={id}\n role=\"dialog\"\n aria-label={ariaLabel ~~?? \"More information\"~~}\n >\n <ModalV2.Card>\n <ModalV2.Content>{renderContent()}</ModalV2.Content>\n <ModalV2.CloseButton />\n </ModalV2.Card>\n </ModalV2>\n )}\n </>\n );\n};\n"],"names":["PopoverV2","_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","otherProps","__rest","~~testId~~","~~theme~~","~~useContext~~","~~ThemeContext~~","~~mobileBreakpoint~~","~~V3_Breakpoint~~","~~isMobile~~","~~useMediaQuery~~","~~maxWidth~~","handleMobileClose","renderContent","_jsx","Typography","BodyMD","_jsxs","_Fragment","~~PopoverContainer~~","~~Object~~","~~assign~~","tabIndex","role","~~PopoverCard~~","~~$maxHeight~~","~~$overflow~~","ModalV2","show","onOverlayClick","onClose","~~Card","~~Content","CloseButton"],"mappings":"~~6eAUO~~,MAAMA,EAAaC,IAAA,IAAAC,SACtBA,EAAQC,QACRA,~~EAAOC~~,~~cACPA~~,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,~~EAASC~~,~~GACTA~~,~~GAAEP~~,~~EACCQ~~,EAAUC,~~EAAAT~~,~~EARS~~,~~gFAatB~~,~~MAAMU~~,~~EAASF~~,EAAW,~~gBAAkB~~,~~UACtCG~~,~~EAAQC~~,~~EAAWC~~,~~GACnBC~~,EAAmBC,~~EAAc~~,~~UAAU~~,~~CAAEJ~~,~~UAC7CK~~,EAAWC,~~EAAAA~~,~~cAAc~~,~~CAAEC~~,~~SAAUJ~~,~~IAKrCK~~,EAAoB,~~KAClBhB~~,GACAA,GACJ,~~EAMEiB~~,EAAgB,IACE,~~iBAAbnB~~,~~EACHoB~~,EAACC,EAAWC,OAAM,~~CAAAtB~~,SAAEA,IAA6B,EAKzD,~~OACIuB~~,EAAAC,EAAA,~~CAAAxB~~,SAAA,CACKC,~~GACGmB~~,~~EAACK~~,~~EAAgBC~~,OAAAC,OAAA,~~CACbC~~,SAAU,EAAC,~~cACEnB~~,~~GACTF~~,EAAU,~~CACdD~~,GAAIA,~~EACJuB~~,KAAK,SAAQ,~~aACDxB~~,~~QAAAA~~,~~EAAa~~,~~mBAAkBL~~,~~SAE3CoB~~,~~EAACU~~,~~EAAW~~,~~CAAAC~~,~~WAAa5B~~,~~EAAS6B~~,~~UAAa5B~~,~~EAAQJ~~,~~SAClDmB~~,~~SAIZJ~~,~~GACGK~~,~~EAACa~~,EAAO,CACJC,~~KAAMjC~~,~~SAAAA~~,~~EACNkC~~,~~eAAgBjB~~,~~EAChBkB~~,~~QAASlB~~,~~EACTZ,~~GAAIA,~~EACJuB~~,KAAK,SAAQ,~~aACDxB~~,~~QAAAA~~,~~EAAa~~,~~mBAAkBL~~,~~SAE3CuB~~,~~EAACU~~,~~EAAQI~~,~~gBACLjB~~,~~EAACa~~,~~EAAQK~~,QAAO,~~CAAAtC~~,~~SAAEmB~~,~~MAClBC~~,~~EAACa~~,~~EAAQM~~,YAAW,~~WAIjC~~"}
1	+ {"version":3,"file":"popover.js","sources":["../../src/popover-v2/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 {\n Breakpoint,\n useApplyStyle,\n useDesignToken,\n useSafeMaxWidthMediaQuery,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./popover.styles\";\nimport type { PopoverV2Props } from \"./types\";\n\nexport const PopoverV2 = ({\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}: PopoverV2Props): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\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":["PopoverV2","_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","testId","otherProps","__rest","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","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":"g+BAgBO,MAAMA,EAAaC,IAAA,IAAAC,SACtBA,EAAQC,QACRA,GAAU,EAAKC,cACfA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAAY,mBAAkBC,GAC9BA,EAAEC,UACFA,EACA,cAAeC,EAAS,WAAST,EAC9BU,EAAUC,EAAAX,EAVS,0GAetB,MAAMY,EAAmBC,EAAeC,EAAW,WAC7CC,EAAWC,EAA0BJ,GACrCK,EAAsBC,EAAuB,MAC7CC,EAAmBC,GACrB,KAAA,CACI,CAACC,EAAcC,YAAYlB,gBACTmB,IAAdnB,EAA0B,KAAO,GAAGA,MACxC,CAACiB,EAAcC,YAAYE,WAAYnB,QAAAA,EAAY,QAEvD,CAACD,EAAWC,IAEhBoB,EAAcR,EAAqBE,GAKnC,MAAMO,EAAoB,KAClBvB,GACAA,GACJ,EAMEwB,EAAgB,IACE,iBAAb1B,EACH2B,EAACC,EAAWC,OAAM,CAAA7B,SAAEA,IAA6B,EAKzD,OACI8B,EAAAC,EAAA,CAAA/B,SAAA,CACKC,IAAYa,GACTa,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKlB,EACLmB,SAAU,EAAC,cACE3B,GACTC,EAAU,CACdF,UAAW6B,EAAKC,EAAyB9B,GACzCD,GAAIA,EACJgC,KAAK,SAAQ,aACDjC,EAASL,SAErB2B,EAACY,EAAI,CACDhC,UAAW6B,EACPI,OACclB,IAAdnB,GACIsC,EACJrC,GAAYsC,GACf1C,SAED2B,EAACgB,EAAM,CAACC,aAAa,mBAChBlB,WAKhBZ,GACGa,EAACkB,EAAO,CACJC,KAAM7C,EACN8C,eAAgBtB,EAChBuB,QAASvB,EACTnB,GAAIA,EACJgC,KAAK,SAAQ,aACDjC,EAASL,SAErB8B,EAACe,EAAQN,KAAI,CAAAvC,SAAA,CACT2B,EAACkB,EAAQI,QAAO,CAAAjD,SACZ2B,EAACgB,EAAM,CAAA3C,SAAE0B,QAEbC,EAACkB,EAAQK,YAAW,CAAA,UAIjC"}

package/popover-v2/popover.styles.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-import type { PopoverOverflowType } from "./types";
-interface PopoverCardStyleProps {
-    $overflow?: PopoverOverflowType | undefined;
-    $maxHeight?: number | undefined;
-}
-export declare const PopoverContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PopoverCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../card/types").CardProps, PopoverCardStyleProps>> & string & Omit<({ children, ...otherProps }: import("../card/types").CardProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-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 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-popoverV2-popoverCard-maxHeight";
+        readonly overflowY: "--fds-internal-popoverV2-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;

package/popover-v2/popover.styles.js CHANGED Viewed

@@ -1,44 +1,2 @@
-import e from"styled-components";import{Card as t}from"../card/card.js";import{ModalBox as r}from"../modal/modal-box.js";import{applyHtmlContentStyle as o}from"../shared/html-content/html-content.js";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as i}from"../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"../util/string-helper.js";import{V3_MediaQuery as m,V3_Colour as n,V3_Radius as d}from"../v3_theme/index.js";const s=e.div`
-    max-width: 30rem;
-    padding: 0 1rem;
-    pointer-events: auto;
-    outline: none;
-`,a=e(t)`
-    color: ${i.text};
-    ${o({textSize:"body-md"})}
-    ${m.MaxWidth.sm} {
-        display: none;
-    }
-    ${({$maxHeight:e})=>void 0!==e&&`\n        max-height: ${e}px;\n    `}
-    ${({$overflow:e})=>e&&`\n        overflow-y: ${e};\n    `}
-    &::-webkit-scrollbar {
-        width: 14px;
-    }
-    &::-webkit-scrollbar-track {
-        background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background: ${n["bg-inverse-subtlest"]};
-        border: 5px solid transparent;
-        border-radius: ${d.full};
-        background-clip: padding-box;
-    }
-`;e(r)`
-    padding: 3.5rem 1.25rem 2.5rem;
-`,e.div`
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-        display: none; /* Chrome/Safari/Webkit */
-    }
-    color: ${n.text};
-    ${o({textSize:"body-md"})}
-`;export{a as PopoverCard,s as PopoverContainer};
+import"./popover.styles_lslc72.css";const o={popoverCard:{maxHeight:"--fds-internal-popoverV2-popoverCard-maxHeight",overflowY:"--fds-internal-popoverV2-popoverCard-overflowY"}},p="pcmd570",r="pz2lvdt",e="p1j0bvgi",v="ps47yom";export{r as popoverCard,e as popoverCardWithMaxHeight,v as popoverCardWithOverflow,p as popoverContainer,o as tokens};
 //# sourceMappingURL=popover.styles.js.map

package/popover-v2/popover.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.styles.js","sources":["../../src/popover-v2/popover.styles.~~tsx~~"],"sourcesContent":["import ~~styled from \"styled-components\";\n\nimport~~ { ~~Card~~ } from \"~~../card\";\nimport { ModalBox } from \"../modal~~/~~modal-box~~\";\~~nimport { applyHtmlContentStyle } from~~ \~~"../shared/html-content/html-content\";\~~nimport { Colour ~~} from \"../theme\";\nimport { V3_Colour~~, ~~V3_MediaQuery~~, ~~V3_Radius~~ } from \"../~~v3_theme~~\";\~~nimport~~ ~~type~~ { ~~PopoverOverflowType~~ } ~~from~~ \"~~./types~~\";\n// ~~=============================================================================\n// STYLES INTERFACE~~\~~n// =============================================================================\ninterface PopoverCardStyleProps {~~\n ~~$overflow?: PopoverOverflowType \| undefined;\~~n ~~$maxHeight?:~~ ~~number~~ ~~\| undefined~~;\n}\~~n\n// =============================================================================\n// STYLING\n// =============================================================================\~~nexport const ~~PopoverContainer~~ = ~~styled.div~~`\n max-width: 30rem;\n padding: 0 1rem;\n pointer-events: auto;\n outline: none;\n`;\n\nexport const ~~PopoverCard~~ = ~~styled(Card)<PopoverCardStyleProps>`\~~n color: ${Colour.text};\n ~~${applyHtmlContentStyle({ textSize:~~ \~~"body-md\" })}\~~n\n ${~~V3_MediaQuery~~.MaxWidth.sm} {\n display: none;\n }\n\n ${({ $maxHeight }) =>\n $maxHeight !== undefined &&\n `\n max-height: ${$maxHeight}px;\n `}\n\n ${({ $overflow }) =>\n $overflow &&\n `\n overflow-y: ${$overflow};\n `}\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${~~V3_Colour~~[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${~~V3_Radius[\"~~full~~\"]~~};\n background-clip: padding-box;\n }\n`;\n\nexport const ~~MobileModalBox~~ = ~~styled(ModalBox)~~`\n ~~padding~~: ~~3.5rem~~ 1.~~25rem 2~~.~~5rem~~;\n`;\n\nexport const ~~ContentWrapper~~ = ~~styled.div~~`\n ~~overflow-y~~: ~~scroll~~;\n\n ~~&::-webkit~~-~~scrollbar {\n display~~: ~~none; /* Chrome/Safari/Webkit */\n }\n\n color:~~ ${~~V3_Colour~~.~~text~~};\n ~~${applyHtmlContentStyle({ textSize: \"body-md\" })}\n~~`;\n"],"names":["~~PopoverContainer~~","~~styled~~","~~div","PopoverCard","Card","Colour","text","applyHtmlContentStyle","textSize","V3_MediaQuery","MaxWidth","sm","$~~maxHeight","~~undefined~~","~~$overflow~~","~~V3_Colour~~","~~V3_Radius~~"~~,"ModalBox"~~],"mappings":"~~ooBAmBO~~,MAAMA,~~EAAmBC~~,~~EAAOC~~,~~GAAG;;;;;EAO7BC~~,~~EAAcF~~,~~EAAOG~~,~~EAA4B;aACjDC~~,~~EAAOC;MACdC~~,~~EAAsB~~,~~CAAEC,SAAU;;MAElCC,EAAcC,SAASC;;;;MAIvB,EAAGC,qBACcC,IAAfD,GACA,yBACcA;;MAGhB,EAAGE,eACDA,GACA,yBACcA;;;;;;;;;;;sBAYAC,EAAU;;yBAEPC,~~EAAgB~~;;;EAKXf~~,~~EAAOgB~~,~~EAAS;;EAIhBhB~~,~~EAAOC~~,~~GAAG;;;;;;;aAO3Ba~~,~~EAAUT;MACjBC~~,~~EAAsB,CAAEC,SAAU;~~"}
1	+ {"version":3,"file":"popover.styles.js","sources":["../../src/popover-v2/popover.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius } from \"../theme\";\n\nexport const tokens = {\n popoverCard: {\n maxHeight: \"--fds-internal-popoverV2-popoverCard-maxHeight\",\n overflowY: \"--fds-internal-popoverV2-popoverCard-overflowY\",\n },\n} as const;\n\nexport const popoverContainer = css`\n max-width: 30rem;\n padding: 0 1rem;\n pointer-events: auto;\n outline: none;\n`;\n\nexport const popoverCard = css`\n color: ${Colour.text};\n\n ${MediaQuery.MaxWidth.sm} {\n display: none;\n }\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${Colour[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${Radius.full};\n background-clip: padding-box;\n }\n`;\n\nexport const popoverCardWithMaxHeight = css`\n ${tokens.popoverCard.maxHeight}: initial;\n max-height: var(${tokens.popoverCard.maxHeight});\n`;\n\nexport const popoverCardWithOverflow = css`\n ${tokens.popoverCard.overflowY}: initial;\n overflow-y: var(${tokens.popoverCard.overflowY});\n`;\n"],"names":["tokens","popoverCard","maxHeight","overflowY","popoverContainer","popoverCardWithMaxHeight","popoverCardWithOverflow"],"mappings":"8DAIO,MAAMA,EAAS,CAClBC,YAAa,CACTC,UAAW,iDACXC,UAAW,mDAINC,EAAgB,UAOhBH,EAAW,UAuBXI,EAAwB,WAKxBC,EAAuB"}

package/popover-v2/popover.styles_lslc72.css ADDED Viewed

@@ -0,0 +1,4 @@
+.pcmd570{max-width:30rem;padding:0 1rem;pointer-events:auto;outline:none;}
+.pz2lvdt{color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .pz2lvdt{display:none;}.pz2lvdt::-webkit-scrollbar{width:14px;}.pz2lvdt::-webkit-scrollbar-track{background:transparent;}.pz2lvdt::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
+.p1j0bvgi{--fds-internal-popoverV2-popoverCard-maxHeight:initial;max-height:var(--fds-internal-popoverV2-popoverCard-maxHeight);}
+.ps47yom{--fds-internal-popoverV2-popoverCard-overflowY:initial;overflow-y:var(--fds-internal-popoverV2-popoverCard-overflowY);}

package/predictive-text-input/predictive-text-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e,__awaiter as r}from"../_virtual/_tslib.js";import{jsx as t,Fragment as o,jsxs as i}from"react/jsx-runtime";import s from"../external/lodash/debounce.js";import{useState as l,useRef as a,useCallback as n,useEffect as d}from"react";import{Input as p}from"../input/input.js";import{VisuallyHidden as c,concatIds as m}from"../shared/accessibility/index.js";import"styled-components";import"../util/string-helper.js";import"../v3_theme/index.js";import"../shared/dropdown-list-v2/dropdown-label.styles.js";import{DropdownList as u}from"../shared/dropdown-list-v2/dropdown-list.js";import{DropdownListState as h}from"../shared/dropdown-list-v2/dropdown-list-state.js";import"../shared/dropdown-list-v2/expandable-element.js";import"@lifesg/react-icons/caret-right";import"react-virtuoso";import"../button/button.style.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as g}from"../util/simple-id-generator.js";import"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as f}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/dropdown-list-v2/dropdown-list.styles.js";import"../shared/dropdown-list-v2/dropdown-search.js";import"../shared/dropdown-list-v2/nested-dropdown-list.styles.js";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import{InputWrapper as v}from"../shared/input-wrapper/input-wrapper.js";const w=w=>{var{className:x,"data-testid":j,selectedOption:y,minimumCharacters:b=3,fetchOptions:O,placeholder:T="Enter here...",readOnly:E=!1,disabled:I=!1,error:S,valueExtractor:_,listExtractor:C,displayValueExtractor:N,onSelectOption:$,alignment:B,dropdownZIndex:D,dropdownRootNode:A,dropdownWidth:L,"aria-describedby":R}=w,W=e(w,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const Z=e=>e?N?N(e):e.toString():"",[k,F]=l((()=>y?Z(y):"")),[V,q]=l((()=>y?Z(y):"")),[G,H]=l([]),[M,P]=l(!0),[z,J]=l(!1),[K,Q]=l(!!y),[U,X]=l(y),[Y,ee]=l(!1),[re,te]=l(!1),[oe]=l((()=>g.generate())),[ie,se]=l(null),le=`${oe}-instruction`,ae=a(null),ne=a(null),de=a(O),pe=n((e=>r(void 0,void 0,void 0,(function*(){if(de.current){J(!1),P(!0);try{const r=yield de.current(e);q(e),H(null!=r?r:[]),P(!1)}catch(e){J(!0),P(!1)}}}))),[]),ce=n(s((e=>{pe(e)}),500),[pe]);d((()=>{de.current=O}),[O]),d((()=>{k&&k.length>=b?K?k!==V&&ce(k):(ee(!0),ce(k)):ce.cancel(),""===k&&U&&(null==$||$(void 0,void 0),xe(),X(void 0)),y&&k!==Z(y)&&Q(!1)}),[k,y]),d((()=>{F(y?Z(y):""),q(y?Z(y):""),X(y),H([]),Q(!!y)}),[y]),d((()=>{var e;const r=je(),t=null!==(e=null==G?void 0:G.length)&&void 0!==e?e:0;"loading"===r&&k.length>=b?se("Loading suggested results"):"fail"!==r?!Y||M||z||se(0===t?k?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):se("Suggestions failed to load. Try again.")}),[G,k,z,M]),d((()=>()=>{ce.cancel()}),[ce]);const me=(e,r)=>{var t;null===(t=ne.current)||void 0===t||t.focus(),F(Z(e)),q(e?Z(e):""),Q(!0),X(e),ee(!1),null==$||$(e,r)},ue=()=>{te(!0)},he=e=>{Y||!ae.current||ae.current.contains(e.relatedTarget)||(te(!1),ve())},ge=()=>{ee(!1),te(!1)},fe=()=>{F(""),H([]),Q(!1),ee(!1),null==$||$(void 0,void 0)},ve=()=>{if(!K)if(U){const e=Z(U);F(e),ee(!1)}else fe()},we=e=>{F(e.target.value),Q(!1)},xe=e=>{q(""),Q(!1),H([]),P(!0)},je=()=>z?"fail":M?"loading":"success";return t(h,{children:t(f,{enabled:!E&&!I,isOpen:Y,renderElement:()=>i(v,{className:x,"data-testid":j,ref:ae,tabIndex:-1,onFocus:ue,onBlur:he,$focused:re,$disabled:I,$readOnly:E,$error:S,children:[i(c,{id:le,"aria-hidden":!0,children:["Type in ",b," or more characters for suggested results."]}),ie&&t(c,{"aria-live":"polite",children:ie}),t(p,Object.assign({role:"combobox",ref:ne,id:oe,type:"text",value:k,onChange:we,placeholder:T,readOnly:E,disabled:I,allowClear:!0,onClear:fe,"aria-expanded":Y,"aria-controls":oe,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:k.length<b?ve:void 0,styleType:"no-border","aria-describedby":m(R,le)},W))]}),renderDropdown:()=>t(o,{children:t(u,{listboxId:oe,listItems:G,onSelectItem:me,onDismiss:ge,valueExtractor:_,listExtractor:C,itemsLoadState:je(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>pe(k),width:L,matchElementWidth:!0})}),onOpen:()=>{!K&&k.length>=b&&te(!0)},onClose:()=>{ee(!1),te(!1),ve()},onDismiss:()=>{var e;ee(!1),te(!1),ve(),null===(e=ne.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:B,fitAvailableHeight:!0,customZIndex:D,rootNode:A})})};export{w as PredictiveTextInput};
+import{__rest as e,__awaiter as r}from"../_virtual/_tslib.js";import{jsx as t,Fragment as o,jsxs as i}from"react/jsx-runtime";import s from"../external/lodash/debounce.js";import{useState as l,useRef as n,useCallback as a,useEffect as d}from"react";import{Input as p}from"../input/input.js";import{VisuallyHidden as c,concatIds as m}from"../shared/accessibility/index.js";import"clsx";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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as u}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as h}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as f}from"../shared/dropdown-list/dropdown-list-state.js";import"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as g}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as x}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1qveyb9.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";const j=j=>{var{className:w,"data-testid":y,selectedOption:v,minimumCharacters:b=3,fetchOptions:_,placeholder:T="Enter here...",readOnly:O=!1,disabled:I=!1,error:A,valueExtractor:C,listExtractor:E,displayValueExtractor:k,onSelectOption:S,alignment:q,dropdownZIndex:N,dropdownRootNode:G,dropdownWidth:H,"aria-describedby":M}=j,P=e(j,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const B=e=>e?k?k(e):e.toString():"",[D,L]=l((()=>v?B(v):"")),[R,W]=l((()=>v?B(v):"")),[Z,$]=l([]),[F,V]=l(!0),[z,J]=l(!1),[K,Q]=l(!!v),[U,X]=l(v),[Y,ee]=l(!1),[re,te]=l(!1),oe=u(),[ie,se]=l(null),le=`${oe}-instruction`,ne=n(null),ae=n(null),de=n(_),pe=a((e=>r(void 0,void 0,void 0,(function*(){if(de.current){J(!1),V(!0);try{const r=yield de.current(e);W(e),$(null!=r?r:[]),V(!1)}catch(e){J(!0),V(!1)}}}))),[]),ce=a(s((e=>{pe(e)}),500),[pe]);d((()=>{de.current=_}),[_]),d((()=>{D&&D.length>=b?K?D!==R&&ce(D):(ee(!0),ce(D)):ce.cancel(),""===D&&U&&(null==S||S(void 0,void 0),we(),X(void 0)),v&&D!==B(v)&&Q(!1)}),[D,v]),d((()=>{L(v?B(v):""),W(v?B(v):""),X(v),$([]),Q(!!v)}),[v]),d((()=>{var e;const r=ye(),t=null!==(e=null==Z?void 0:Z.length)&&void 0!==e?e:0;"loading"===r&&D.length>=b?se("Loading suggested results"):"fail"!==r?!Y||F||z||se(0===t?D?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):se("Suggestions failed to load. Try again.")}),[Z,D,z,F]),d((()=>()=>{ce.cancel()}),[ce]);const me=(e,r)=>{var t;null===(t=ae.current)||void 0===t||t.focus(),L(B(e)),W(e?B(e):""),Q(!0),X(e),ee(!1),null==S||S(e,r)},ue=()=>{te(!0)},he=e=>{Y||!ne.current||ne.current.contains(e.relatedTarget)||(te(!1),xe())},fe=()=>{ee(!1),te(!1)},ge=()=>{L(""),$([]),Q(!1),ee(!1),null==S||S(void 0,void 0)},xe=()=>{if(!K)if(U){const e=B(U);L(e),ee(!1)}else ge()},je=e=>{L(e.target.value),Q(!1)},we=e=>{W(""),Q(!1),$([]),V(!0)},ye=()=>z?"fail":F?"loading":"success";return t(f,{children:t(g,{enabled:!O&&!I,isOpen:Y,renderElement:()=>i(x,{className:w,"data-testid":y,ref:ne,tabIndex:-1,onFocus:ue,onBlur:he,focused:re,disabled:I,readOnly:O,error:A,children:[i(c,{id:le,"aria-hidden":!0,children:["Type in ",b," or more characters for suggested results."]}),ie&&t(c,{"aria-live":"polite",children:ie}),t(p,Object.assign({role:"combobox",ref:ae,id:oe,type:"text",value:D,onChange:je,placeholder:T,readOnly:O,disabled:I,allowClear:!0,onClear:ge,"aria-expanded":Y,"aria-controls":oe,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:D.length<b?xe:void 0,styleType:"no-border","aria-describedby":m(M,le)},P))]}),renderDropdown:()=>t(o,{children:t(h,{listboxId:oe,listItems:Z,onSelectItem:me,onDismiss:fe,valueExtractor:C,listExtractor:E,itemsLoadState:ye(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>pe(D),width:H,matchElementWidth:!0})}),onOpen:()=>{!K&&D.length>=b&&te(!0)},onClose:()=>{ee(!1),te(!1),xe()},onDismiss:()=>{var e;ee(!1),te(!1),xe(),null===(e=ae.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:q,fitAvailableHeight:!0,customZIndex:N,rootNode:G})})};export{j as PredictiveTextInput};
 //# sourceMappingURL=predictive-text-input.js.map

package/predictive-text-input/predictive-text-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"predictive-text-input.js","sources":["../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n className,\n \"data-testid\": testId,\n selectedOption,\n minimumCharacters = 3,\n fetchOptions,\n placeholder = \"Enter here...\",\n readOnly = false,\n disabled = false,\n error,\n valueExtractor,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n const getDisplayValue = (item: T \| undefined): string => {\n if (!item) return \"\";\n return displayValueExtractor\n ? displayValueExtractor(item)\n : item.toString();\n };\n\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [input, setInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [searchedInput, setSearchedInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [options, setOptions] = useState<T[]>([]);\n const [isLoading, setIsLoading] = useState<boolean>(true);\n const [isError, setIsError] = useState<boolean>(false);\n const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n !!selectedOption\n );\n const [prevOptionSelected, setPrevOptionSelected] = useState<T \| undefined>(\n selectedOption\n );\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n const [resultAnnouncement, setResultAnnouncement] = useState<string \| null>(\n null\n );\n const instructionId = `${internalId}-instruction`;\n\n const nodeRef = useRef<HTMLDivElement \| null>(null);\n const selectorRef = useRef<HTMLInputElement \| null>(null);\n\n const fetchOptionsRef = useRef(fetchOptions);\n\n // =============================================================================\n // DEBOUNCE FUNCTIONS\n // =============================================================================\n const handleFetchOptions = useCallback(async (input: string) => {\n if (!fetchOptionsRef.current) return;\n setIsError(false);\n setIsLoading(true);\n try {\n const fetchedOptions = await fetchOptionsRef.current(input);\n setSearchedInput(input);\n setOptions(fetchedOptions ?? []);\n setIsLoading(false);\n } catch {\n setIsError(true);\n setIsLoading(false);\n }\n }, []);\n\n const fetchOptionsDebounced = useCallback(\n debounce((input: string) => {\n handleFetchOptions(input);\n }, 500),\n [handleFetchOptions]\n );\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n fetchOptionsRef.current = fetchOptions;\n }, [fetchOptions]);\n\n useEffect(() => {\n /**\n Should not fetch options for the following the scenario :\n * 1. When input < minimumCharacters\n * 2. When user selected option from dropdown becomes input\n * 3. Initial selectedOption passed in as input\n */\n if (input && input.length >= minimumCharacters) {\n if (!isOptionSelected) {\n setIsOpen(true);\n fetchOptionsDebounced(input);\n } else if (input !== searchedInput) {\n fetchOptionsDebounced(input);\n }\n } else {\n fetchOptionsDebounced.cancel();\n }\n\n if (input === \"\" && prevOptionSelected) {\n onSelectOption?.(undefined, undefined);\n handleDropdownDismiss();\n setPrevOptionSelected(undefined);\n }\n\n if (selectedOption && input !== getDisplayValue(selectedOption)) {\n setIsOptionSelected(false);\n }\n }, [input, selectedOption]);\n\n useEffect(() => {\n setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setPrevOptionSelected(selectedOption);\n setOptions([]);\n setIsOptionSelected(!!selectedOption);\n }, [selectedOption]);\n\n useEffect(() => {\n const state = getItemsLoadState();\n const count = options?.length ?? 0;\n\n if (state === \"loading\" && input.length >= minimumCharacters) {\n setResultAnnouncement(\"Loading suggested results\");\n return;\n }\n\n if (state === \"fail\") {\n setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n return;\n }\n\n if (isOpen && !isLoading && !isError) {\n if (count === 0) {\n setResultAnnouncement(input ? \"No results found.\" : null);\n } else {\n setResultAnnouncement(\n `${count} result${\n count > 1 ? \"s\" : \"\"\n } found. Press down arrow to scroll through the list.`\n );\n }\n }\n }, [options, input, isError, isLoading]);\n\n // =============================================================================\n // Cleanup: cancel debounce on unmount\n // =============================================================================\n useEffect(() => {\n return () => {\n fetchOptionsDebounced.cancel();\n };\n }, [fetchOptionsDebounced]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setInput(getDisplayValue(item));\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(true);\n setPrevOptionSelected(item);\n setIsOpen(false);\n onSelectOption?.(item, extractedValue);\n };\n\n const handleOpen = () => {\n if (!isOptionSelected && input.length >= minimumCharacters) {\n setIsFocused(true);\n }\n };\n\n const handleClose = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n };\n\n const handleNodeFocus = () => {\n setIsFocused(true);\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n !isOpen &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setIsFocused(false);\n handleOnBlur();\n }\n };\n\n const handleListDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n selectorRef.current?.focus();\n };\n\n const handleOnClear = () => {\n setInput(\"\");\n setOptions([]);\n setIsOptionSelected(false);\n setIsOpen(false);\n onSelectOption?.(undefined, undefined);\n };\n\n const handleOnBlur = () => {\n if (!isOptionSelected) {\n if (prevOptionSelected) {\n const prevValue = getDisplayValue(prevOptionSelected);\n setInput(prevValue);\n setIsOpen(false);\n } else {\n handleOnClear();\n }\n }\n };\n\n const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n setInput(e.target.value);\n setIsOptionSelected(false);\n };\n\n const handleDropdownDismiss = (item?: T) => {\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(!!item);\n setOptions([]);\n setIsLoading(true);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getItemsLoadState = (): ItemsLoadStateType => {\n if (isError) return \"fail\";\n return isLoading ? \"loading\" : \"success\";\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n const renderInputElement = () => {\n return (\n <InputWrapper\n className={className}\n data-testid={testId}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n $focused={isFocused}\n $disabled={disabled}\n $readOnly={readOnly}\n $error={error}\n >\n <VisuallyHidden id={instructionId} aria-hidden>\n Type in {minimumCharacters} or more characters for suggested\n results.\n </VisuallyHidden>\n {resultAnnouncement && (\n <VisuallyHidden aria-live=\"polite\">\n {resultAnnouncement}\n </VisuallyHidden>\n )}\n <Input\n role=\"combobox\"\n ref={selectorRef}\n id={internalId}\n type=\"text\"\n value={input}\n onChange={handleTyping}\n placeholder={placeholder}\n readOnly={readOnly}\n disabled={disabled}\n allowClear\n onClear={handleOnClear}\n aria-expanded={isOpen}\n aria-controls={internalId}\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n onBlur={\n input.length < minimumCharacters\n ? handleOnBlur\n : undefined\n }\n styleType=\"no-border\"\n aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n {...otherProps}\n />\n </InputWrapper>\n );\n };\n\n const renderDropdown = () => {\n return (\n <>\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n itemsLoadState={getItemsLoadState()}\n itemTruncationType={\"end\"}\n itemMaxLines={1}\n labelDisplayType={\"next-line\"}\n disableItemFocus\n onRetry={() => handleFetchOptions(input)}\n width={dropdownWidth}\n matchElementWidth\n />\n </>\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderInputElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle={false}\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["PredictiveTextInput","_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","SimpleIdGenerator","generate","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","$focused","$readOnly","$error","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"predictive-text-input.js","sources":["../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n className,\n \"data-testid\": testId,\n selectedOption,\n minimumCharacters = 3,\n fetchOptions,\n placeholder = \"Enter here...\",\n readOnly = false,\n disabled = false,\n error,\n valueExtractor,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n const getDisplayValue = (item: T \| undefined): string => {\n if (!item) return \"\";\n return displayValueExtractor\n ? displayValueExtractor(item)\n : item.toString();\n };\n\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [input, setInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [searchedInput, setSearchedInput] = useState<string>(() =>\n selectedOption ? getDisplayValue(selectedOption) : \"\"\n );\n const [options, setOptions] = useState<T[]>([]);\n const [isLoading, setIsLoading] = useState<boolean>(true);\n const [isError, setIsError] = useState<boolean>(false);\n const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n !!selectedOption\n );\n const [prevOptionSelected, setPrevOptionSelected] = useState<T \| undefined>(\n selectedOption\n );\n const [isOpen, setIsOpen] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const internalId = useId();\n const [resultAnnouncement, setResultAnnouncement] = useState<string \| null>(\n null\n );\n const instructionId = `${internalId}-instruction`;\n\n const nodeRef = useRef<HTMLDivElement \| null>(null);\n const selectorRef = useRef<HTMLInputElement \| null>(null);\n\n const fetchOptionsRef = useRef(fetchOptions);\n\n // =============================================================================\n // DEBOUNCE FUNCTIONS\n // =============================================================================\n const handleFetchOptions = useCallback(async (input: string) => {\n if (!fetchOptionsRef.current) return;\n setIsError(false);\n setIsLoading(true);\n try {\n const fetchedOptions = await fetchOptionsRef.current(input);\n setSearchedInput(input);\n setOptions(fetchedOptions ?? []);\n setIsLoading(false);\n } catch {\n setIsError(true);\n setIsLoading(false);\n }\n }, []);\n\n const fetchOptionsDebounced = useCallback(\n debounce((input: string) => {\n handleFetchOptions(input);\n }, 500),\n [handleFetchOptions]\n );\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n fetchOptionsRef.current = fetchOptions;\n }, [fetchOptions]);\n\n useEffect(() => {\n /**\n Should not fetch options for the following the scenario :\n * 1. When input < minimumCharacters\n * 2. When user selected option from dropdown becomes input\n * 3. Initial selectedOption passed in as input\n */\n if (input && input.length >= minimumCharacters) {\n if (!isOptionSelected) {\n setIsOpen(true);\n fetchOptionsDebounced(input);\n } else if (input !== searchedInput) {\n fetchOptionsDebounced(input);\n }\n } else {\n fetchOptionsDebounced.cancel();\n }\n\n if (input === \"\" && prevOptionSelected) {\n onSelectOption?.(undefined, undefined);\n handleDropdownDismiss();\n setPrevOptionSelected(undefined);\n }\n\n if (selectedOption && input !== getDisplayValue(selectedOption)) {\n setIsOptionSelected(false);\n }\n }, [input, selectedOption]);\n\n useEffect(() => {\n setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n setPrevOptionSelected(selectedOption);\n setOptions([]);\n setIsOptionSelected(!!selectedOption);\n }, [selectedOption]);\n\n useEffect(() => {\n const state = getItemsLoadState();\n const count = options?.length ?? 0;\n\n if (state === \"loading\" && input.length >= minimumCharacters) {\n setResultAnnouncement(\"Loading suggested results\");\n return;\n }\n\n if (state === \"fail\") {\n setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n return;\n }\n\n if (isOpen && !isLoading && !isError) {\n if (count === 0) {\n setResultAnnouncement(input ? \"No results found.\" : null);\n } else {\n setResultAnnouncement(\n `${count} result${\n count > 1 ? \"s\" : \"\"\n } found. Press down arrow to scroll through the list.`\n );\n }\n }\n }, [options, input, isError, isLoading]);\n\n // =============================================================================\n // Cleanup: cancel debounce on unmount\n // =============================================================================\n useEffect(() => {\n return () => {\n fetchOptionsDebounced.cancel();\n };\n }, [fetchOptionsDebounced]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setInput(getDisplayValue(item));\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(true);\n setPrevOptionSelected(item);\n setIsOpen(false);\n onSelectOption?.(item, extractedValue);\n };\n\n const handleOpen = () => {\n if (!isOptionSelected && input.length >= minimumCharacters) {\n setIsFocused(true);\n }\n };\n\n const handleClose = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n };\n\n const handleNodeFocus = () => {\n setIsFocused(true);\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n !isOpen &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setIsFocused(false);\n handleOnBlur();\n }\n };\n\n const handleListDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n setIsFocused(false);\n handleOnBlur();\n selectorRef.current?.focus();\n };\n\n const handleOnClear = () => {\n setInput(\"\");\n setOptions([]);\n setIsOptionSelected(false);\n setIsOpen(false);\n onSelectOption?.(undefined, undefined);\n };\n\n const handleOnBlur = () => {\n if (!isOptionSelected) {\n if (prevOptionSelected) {\n const prevValue = getDisplayValue(prevOptionSelected);\n setInput(prevValue);\n setIsOpen(false);\n } else {\n handleOnClear();\n }\n }\n };\n\n const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n setInput(e.target.value);\n setIsOptionSelected(false);\n };\n\n const handleDropdownDismiss = (item?: T) => {\n setSearchedInput(item ? getDisplayValue(item) : \"\");\n setIsOptionSelected(!!item);\n setOptions([]);\n setIsLoading(true);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getItemsLoadState = (): ItemsLoadStateType => {\n if (isError) return \"fail\";\n return isLoading ? \"loading\" : \"success\";\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n const renderInputElement = () => {\n return (\n <InputWrapper\n className={className}\n data-testid={testId}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={isFocused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <VisuallyHidden id={instructionId} aria-hidden>\n Type in {minimumCharacters} or more characters for suggested\n results.\n </VisuallyHidden>\n {resultAnnouncement && (\n <VisuallyHidden aria-live=\"polite\">\n {resultAnnouncement}\n </VisuallyHidden>\n )}\n <Input\n role=\"combobox\"\n ref={selectorRef}\n id={internalId}\n type=\"text\"\n value={input}\n onChange={handleTyping}\n placeholder={placeholder}\n readOnly={readOnly}\n disabled={disabled}\n allowClear\n onClear={handleOnClear}\n aria-expanded={isOpen}\n aria-controls={internalId}\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n onBlur={\n input.length < minimumCharacters\n ? handleOnBlur\n : undefined\n }\n styleType=\"no-border\"\n aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n {...otherProps}\n />\n </InputWrapper>\n );\n };\n\n const renderDropdown = () => {\n return (\n <>\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n itemsLoadState={getItemsLoadState()}\n itemTruncationType={\"end\"}\n itemMaxLines={1}\n labelDisplayType={\"next-line\"}\n disableItemFocus\n onRetry={() => handleFetchOptions(input)}\n width={dropdownWidth}\n matchElementWidth\n />\n </>\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderInputElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle={false}\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["PredictiveTextInput","_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","focused","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}