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

package/language-switcher/dropdown-panel.d.ts

@@ -0,0 +1,13 @@
+import type React from "react";
+import type { LanguageSwitcherCode } from "./types";
+interface DropdownPanelProps {
+    focusedIndex: number;
+    handleItemSelect: (code: LanguageSwitcherCode) => void;
+    handleListKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => void;
+    itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;
+    listboxId: string;
+    selectedLanguage: LanguageSwitcherCode;
+    testId: string;
+}
+export declare const DropdownPanel: ({ focusedIndex, handleItemSelect, handleListKeyDown, itemRefs, listboxId, selectedLanguage, testId, }: DropdownPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/language-switcher/dropdown-panel.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{TickIcon as r}from"@lifesg/react-icons/tick";import o from"clsx";import{useRef as s}from"react";import{baseIndicatorStyle as i,selectedIndicator as m,listItem as a,listItemActiveSelected as l,listItemActive as n}from"../shared/dropdown-list/dropdown-list.styles.js";import{useDropdownRender as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as p}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as c}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{ARIA_LABEL as h,LANGUAGE_CODES as j,LANGUAGE_DISPLAY_MAP as u}from"./data.js";import{tokens as f,dropdownPanel as y,dropdownList as g,dropdownItem as x,dropdownItemSelected as w}from"./dropdown-panel.styles.js";const b=({focusedIndex:b,handleItemSelect:k,handleListKeyDown:v,itemRefs:I,listboxId:N,selectedLanguage:$,testId:q})=>{const{elementWidth:D,styles:F,setFloatingRef:K,getFloatingProps:L}=d(),R=s(null);return p(R,{[f.width]:`${D}px`}),e("div",Object.assign({ref:c(K,R),className:y,style:F,"data-testid":`${q}--panel`},L(),{children:e("ul",{className:g,role:"listbox",id:N,"aria-label":h,onKeyDown:v,children:j.map(((s,d)=>{const p=s===$,c=d===b;return t("li",{ref:e=>{I.current[d]=e},role:"option",lang:s,className:o(x,a,c&&p&&l,c&&!p&&n,p&&w),"aria-selected":p,tabIndex:c?0:-1,onClick:()=>k(s),"data-testid":`${q}--item-${s}`,children:[p?e(r,{className:o(i,m),"aria-hidden":!0}):e("div",{className:i}),u[s]]},s)}))})}))};export{b as DropdownPanel};
+//# sourceMappingURL=dropdown-panel.js.map

package/language-switcher/dropdown-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-panel.js","sources":["../../src/language-switcher/dropdown-panel.tsx"],"sourcesContent":["import { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport {\n    baseIndicatorStyle,\n    listItem,\n    listItemActive,\n    listItemActiveSelected,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\nimport { useDropdownRender } from \"../shared/dropdown-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport * as styles from \"./dropdown-panel.styles\";\nimport type { LanguageSwitcherCode } from \"./types\";\n\ninterface DropdownPanelProps {\n    focusedIndex: number;\n    handleItemSelect: (code: LanguageSwitcherCode) => void;\n    handleListKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => void;\n    itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;\n    listboxId: string;\n    selectedLanguage: LanguageSwitcherCode;\n    testId: string;\n}\n\nexport const DropdownPanel = ({\n    focusedIndex,\n    handleItemSelect,\n    handleListKeyDown,\n    itemRefs,\n    listboxId,\n    selectedLanguage,\n    testId,\n}: DropdownPanelProps) => {\n    const {\n        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    } = useDropdownRender();\n    const panelRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(panelRef, {\n        [styles.tokens.width]: `${elementWidth}px`,\n    });\n\n    return (\n        <div\n            ref={mergeRefs(setFloatingRef, panelRef)}\n            className={styles.dropdownPanel}\n            style={floatingStyles}\n            data-testid={`${testId}--panel`}\n            {...getFloatingProps()}\n        >\n            <ul\n                className={styles.dropdownList}\n                role=\"listbox\"\n                id={listboxId}\n                aria-label={ARIA_LABEL}\n                onKeyDown={handleListKeyDown}\n            >\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isSelected = code === selectedLanguage;\n                    const isFocused = index === focusedIndex;\n\n                    return (\n                        <li\n                            key={code}\n                            ref={(element: HTMLLIElement | null) => {\n                                itemRefs.current[index] = element;\n                            }}\n                            role=\"option\"\n                            lang={code}\n                            className={clsx(\n                                styles.dropdownItem,\n                                listItem,\n                                isFocused &&\n                                    isSelected &&\n                                    listItemActiveSelected,\n                                isFocused && !isSelected && listItemActive,\n                                isSelected && styles.dropdownItemSelected\n                            )}\n                            aria-selected={isSelected}\n                            tabIndex={isFocused ? 0 : -1}\n                            onClick={() => handleItemSelect(code)}\n                            data-testid={`${testId}--item-${code}`}\n                        >\n                            {isSelected ? (\n                                <TickIcon\n                                    className={clsx(\n                                        baseIndicatorStyle,\n                                        styles.selectedIndicator\n                                    )}\n                                    aria-hidden\n                                />\n                            ) : (\n                                <div className={baseIndicatorStyle} />\n                            )}\n                            {LANGUAGE_DISPLAY_MAP[code]}\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n};\n"],"names":["DropdownPanel","focusedIndex","handleItemSelect","handleListKeyDown","itemRefs","listboxId","selectedLanguage","testId","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","useDropdownRender","panelRef","useRef","useApplyStyle","styles.tokens","width","_jsx","Object","assign","ref","mergeRefs","className","styles.dropdownPanel","style","children","styles.dropdownList","role","id","ARIA_LABEL","onKeyDown","LANGUAGE_CODES","map","code","index","isSelected","isFocused","_jsxs","element","current","lang","clsx","styles.dropdownItem","listItem","listItemActiveSelected","listItemActive","styles.dropdownItemSelected","tabIndex","onClick","TickIcon","baseIndicatorStyle","styles.selectedIndicator","LANGUAGE_DISPLAY_MAP"],"mappings":"8qCA4BaA,EAAgB,EACzBC,eACAC,mBACAC,oBACAC,WACAC,YACAC,mBACAC,aAEA,MAAMC,aACFA,EACAC,OAAQC,EAAcC,eACtBA,EAAcC,iBACdA,GACAC,IACEC,EAAWC,EAAuB,MAMxC,OAJAC,EAAcF,EAAU,CACpB,CAACG,EAAcC,OAAQ,GAAGV,QAI1BW,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKC,EAAUZ,EAAgBG,GAC/BU,UAAWC,EACXC,MAAOhB,EAAc,cACR,GAAGH,YACZK,IAAkB,CAAAe,SAEtBR,EAAA,KAAA,CACIK,UAAWI,EACXC,KAAK,UACLC,GAAIzB,EAAS,aACD0B,EACZC,UAAW7B,EAAiBwB,SAE3BM,EAAeC,KAAI,CAACC,EAAMC,KACvB,MAAMC,EAAaF,IAAS7B,EACtBgC,EAAYF,IAAUnC,EAE5B,OACIsC,EAAA,KAAA,CAEIjB,IAAMkB,IACFpC,EAASqC,QAAQL,GAASI,CAAO,EAErCX,KAAK,SACLa,KAAMP,EACNX,UAAWmB,EACPC,EACAC,EACAP,GACID,GACAS,EACJR,IAAcD,GAAcU,EAC5BV,GAAcW,mBAEHX,EACfY,SAAUX,EAAY,KACtBY,QAAS,IAAMhD,EAAiBiC,iBACnB,GAAG5B,WAAgB4B,IAAMR,SAAA,CAErCU,EACGlB,EAACgC,EAAQ,CACL3B,UAAWmB,EACPS,EACAC,GACH,eAAA,IAILlC,EAAA,MAAA,CAAKK,UAAW4B,IAEnBE,EAAqBnB,KA/BjBA,EAgCJ,QAIf"}

package/language-switcher/dropdown-panel.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const tokens: {
+    readonly width: "--fds-internal-languageSwitcher-dropdown-width";
+};
+export declare const dropdownPanel: import("@linaria/core").LinariaClassName;
+export declare const dropdownList: import("@linaria/core").LinariaClassName;
+export { baseIndicatorStyle, selectedIndicator, } from "../shared/dropdown-list/dropdown-list.styles";
+export declare const dropdownItem: import("@linaria/core").LinariaClassName;
+export declare const dropdownItemSelected: import("@linaria/core").LinariaClassName;

package/language-switcher/dropdown-panel.styles.js

@@ -0,0 +1,2 @@
+import"../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css";import"./dropdown-panel.styles_1z0n7qq.css";const d={width:"--fds-internal-languageSwitcher-dropdown-width"},s="dbl9jc4",t="dogrnw8",o="d4xkcjy",n="ddiq5up";export{o as dropdownItem,n as dropdownItemSelected,t as dropdownList,s as dropdownPanel,d as tokens};
+//# sourceMappingURL=dropdown-panel.styles.js.map

package/language-switcher/dropdown-panel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-panel.styles.js","sources":["../../src/language-switcher/dropdown-panel.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n    width: \"--fds-internal-languageSwitcher-dropdown-width\",\n} as const;\n\nexport const dropdownPanel = css`\n    ${tokens.width}: initial;\n\n    width: var(${tokens.width});\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n    overflow: hidden;\n`;\n\nexport const dropdownList = css`\n    list-style: none;\n    margin: 0;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport {\n    baseIndicatorStyle,\n    selectedIndicator,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\n\nexport const dropdownItem = css`\n    align-items: center;\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const dropdownItemSelected = css`\n    background: transparent;\n    color: ${Colour[\"text-selected\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-hover\"]};\n    }\n`;\n"],"names":["tokens","width","dropdownPanel","dropdownList","dropdownItem","dropdownItemSelected"],"mappings":"4JAIO,MAAMA,EAAS,CAClBC,MAAO,kDAGEC,EAAa,UAUbC,EAAY,UAWZC,EAAY,UAUZC,EAAoB"}

package/language-switcher/dropdown-panel.styles_1z0n7qq.css

@@ -0,0 +1,4 @@
+.dbl9jc4{--fds-internal-languageSwitcher-dropdown-width:initial;width:var(--fds-internal-languageSwitcher-dropdown-width);border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);overflow:hidden;}
+.dogrnw8{list-style:none;margin:0;padding:var(--fds-spacing-8);}
+.d4xkcjy{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}.d4xkcjy:hover{background:var(--fds-colour-bg-hover-subtle);}
+.ddiq5up{background:transparent;color:var(--fds-colour-text-selected);}.ddiq5up:hover{background:var(--fds-colour-bg-hover);}

package/language-switcher/dropdown-variant.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import{LanguageIcon as n}from"@lifesg/react-icons/language";import{TickIcon as a}from"@lifesg/react-icons/tick";import o from"clsx";import{useState as s,useRef as i,useEffect as l}from"react";import{baseIndicatorStyle as d,selectedIndicator as c,listItem as p,listItemActiveSelected as u,listItemActive as m}from"../shared/dropdown-list/dropdown-list.styles.js";import{ElementWithDropdown as f}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as g}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{LANGUAGE_CODES as v,ARIA_LABEL as h,LANGUAGE_DISPLAY_MAP as b}from"./data.js";import{DropdownPanel as j,DropdownList as w,DropdownItem as x,StyledExpandableElement as y,LanguageIconWrapper as D}from"./dropdown-variant.style.js";const k=k=>{var{selectedLanguage:O,onSelectLanguage:$,testId:I}=k,L=e(k,["selectedLanguage","onSelectLanguage","testId"]);const[E,N]=s(!1),[T,A]=s(-1),C=i(null),F=i([]),M=`listbox-${g()}`;l((()=>{if(E){const e=v.indexOf(O),t=e>=0?e:0;A(t),setTimeout((()=>{var e;null===(e=F.current[t])||void 0===e||e.focus()}),0)}else A(-1)}),[E,O]);const R=e=>{var t;$(e),N(!1),null===(t=C.current)||void 0===t||t.focus()},S=e=>{var t,r,n,a;switch(e.key){case"ArrowDown":{e.preventDefault();const r=Math.min(T+1,v.length-1);A(r),null===(t=F.current[r])||void 0===t||t.focus();break}case"ArrowUp":{e.preventDefault();const t=Math.max(T-1,0);A(t),null===(r=F.current[t])||void 0===r||r.focus();break}case"Home":e.preventDefault(),A(0),null===(n=F.current[0])||void 0===n||n.focus();break;case"End":{e.preventDefault();const t=v.length-1;A(t),null===(a=F.current[t])||void 0===a||a.focus();break}case"Enter":case" ":e.preventDefault(),T>=0&&R(v[T])}};return t("div",Object.assign({"data-testid":I},L,{children:t(f,{enabled:!0,isOpen:E,renderElement:()=>r(y,{ref:C,disabled:!1,expanded:E,listboxId:M,popupRole:"listbox",readOnly:!1,"aria-label":`${h}, ${b[O]}`,"data-testid":`${I}--trigger`,children:[t(D,{"aria-hidden":!0,children:t(n,{})}),b[O]]}),renderDropdown:({elementWidth:e,styles:n,setFloatingRef:s,getFloatingProps:i})=>t(j,Object.assign({ref:s,style:Object.assign(Object.assign({},n),{width:e}),"data-testid":`${I}--panel`},i(),{children:t(w,{role:"listbox",id:M,"aria-label":h,onKeyDown:S,children:v.map(((e,n)=>{const s=e===O,i=n===T;return r(x,{ref:e=>{F.current[n]=e},role:"option",lang:e,className:o(p,i&&s&&u,i&&!s&&m),"aria-selected":s,tabIndex:i?0:-1,$selected:s,onClick:()=>R(e),"data-testid":`${I}--item-${e}`,children:[s?t(a,{className:o(d,c),"aria-hidden":!0}):t("div",{className:d}),b[e]]},e)}))})})),onOpen:()=>{N(!0)},onClose:()=>{N(!1)},onDismiss:()=>{var e;N(!1),null===(e=C.current)||void 0===e||e.focus()},clickToToggle:!0,offset:8})}))};export{k as DropdownVariant};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{LanguageIcon as o}from"@lifesg/react-icons/language";import{useState as s,useRef as i,useEffect as a}from"react";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 n}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import"../shared/dropdown-list/dropdown-list.js";import"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as l}from"../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 d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1kt4zhf.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";import{LANGUAGE_CODES as p,LANGUAGE_DISPLAY_MAP as m,ARIA_LABEL as c}from"./data.js";import{DropdownPanel as u}from"./dropdown-panel.js";import{expandableElement as h,languageIconWrapper as f}from"./dropdown-variant.styles.js";const g=g=>{var{selectedLanguage:j,onSelectLanguage:w,testId:v}=g,x=e(g,["selectedLanguage","onSelectLanguage","testId"]);const[_,b]=s(!1),[k,y]=s(-1),A=i(null),I=i([]),T=`listbox-${n()}`;a((()=>{if(_){const e=p.indexOf(j),r=e>=0?e:0;y(r),setTimeout((()=>{var e;null===(e=I.current[r])||void 0===e||e.focus()}),0)}else y(-1)}),[_,j]);const D=e=>{var r;w(e),b(!1),null===(r=A.current)||void 0===r||r.focus()},q=e=>{var r,t,o,s;switch(e.key){case"ArrowDown":{e.preventDefault();const t=Math.min(k+1,p.length-1);y(t),null===(r=I.current[t])||void 0===r||r.focus();break}case"ArrowUp":{e.preventDefault();const r=Math.max(k-1,0);y(r),null===(t=I.current[r])||void 0===t||t.focus();break}case"Home":e.preventDefault(),y(0),null===(o=I.current[0])||void 0===o||o.focus();break;case"End":{e.preventDefault();const r=p.length-1;y(r),null===(s=I.current[r])||void 0===s||s.focus();break}case"Enter":case" ":e.preventDefault(),k>=0&&D(p[k])}};return r("div",Object.assign({"data-testid":v},x,{children:r(d,{enabled:!0,isOpen:_,renderElement:()=>t(l,{ref:A,className:h,disabled:!1,expanded:_,listboxId:T,popupRole:"listbox",readOnly:!1,"aria-label":`${c}, ${m[j]}`,"data-testid":`${v}--trigger`,children:[r("span",{className:f,"aria-hidden":!0,children:r(o,{})}),m[j]]}),renderDropdown:()=>r(u,{focusedIndex:k,handleItemSelect:D,handleListKeyDown:q,itemRefs:I,listboxId:T,selectedLanguage:j,testId:v}),onOpen:()=>{b(!0)},onClose:()=>{b(!1)},onDismiss:()=>{var e;b(!1),null===(e=A.current)||void 0===e||e.focus()},clickToToggle:!0,offset:8})}))};export{g as DropdownVariant};
 //# sourceMappingURL=dropdown-variant.js.map

package/language-switcher/dropdown-variant.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-variant.js","sources":["../../src/language-switcher/dropdown-variant.tsx"],"sourcesContent":["import { LanguageIcon } from \"@lifesg/react-icons/language\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n    baseIndicatorStyle,\n    listItem,\n    listItemActive,\n    listItemActiveSelected,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { useId } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport {\n    DropdownItem,\n    DropdownList,\n    DropdownPanel,\n    LanguageIconWrapper,\n    selectedIndicator,\n    StyledExpandableElement,\n} from \"./dropdown-variant.style\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport type { LanguageSwitcherCode } from \"./types\";\n\nexport const DropdownVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState(-1);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const itemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    const id = useId();\n    const listboxId = `listbox-${id}`;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (isOpen) {\n            const selectedIdx = LANGUAGE_CODES.indexOf(selectedLanguage);\n            const idx = selectedIdx >= 0 ? selectedIdx : 0;\n            setFocusedIndex(idx);\n            setTimeout(() => {\n                itemRefs.current[idx]?.focus();\n            }, 0);\n        } else {\n            setFocusedIndex(-1);\n        }\n    }, [isOpen, selectedLanguage]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOpen = () => {\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleItemSelect = (code: LanguageSwitcherCode) => {\n        onSelectLanguage(code);\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleListKeyDown = (event: React.KeyboardEvent) => {\n        switch (event.key) {\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const next = Math.min(\n                    focusedIndex + 1,\n                    LANGUAGE_CODES.length - 1\n                );\n                setFocusedIndex(next);\n                itemRefs.current[next]?.focus();\n                break;\n            }\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const prev = Math.max(focusedIndex - 1, 0);\n                setFocusedIndex(prev);\n                itemRefs.current[prev]?.focus();\n                break;\n            }\n            case \"Home\": {\n                event.preventDefault();\n                setFocusedIndex(0);\n                itemRefs.current[0]?.focus();\n                break;\n            }\n            case \"End\": {\n                event.preventDefault();\n                const last = LANGUAGE_CODES.length - 1;\n                setFocusedIndex(last);\n                itemRefs.current[last]?.focus();\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                if (focusedIndex >= 0) {\n                    handleItemSelect(LANGUAGE_CODES[focusedIndex]);\n                }\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderElement = () => (\n        <StyledExpandableElement\n            ref={triggerRef}\n            disabled={false}\n            expanded={isOpen}\n            listboxId={listboxId}\n            popupRole=\"listbox\"\n            readOnly={false}\n            aria-label={`${ARIA_LABEL}, ${LANGUAGE_DISPLAY_MAP[selectedLanguage]}`}\n            data-testid={`${testId}--trigger`}\n        >\n            <LanguageIconWrapper aria-hidden>\n                <LanguageIcon />\n            </LanguageIconWrapper>\n            {LANGUAGE_DISPLAY_MAP[selectedLanguage]}\n        </StyledExpandableElement>\n    );\n\n    const renderDropdown = ({\n        elementWidth,\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <DropdownPanel\n            ref={setFloatingRef}\n            style={{ ...styles, width: elementWidth }}\n            data-testid={`${testId}--panel`}\n            {...getFloatingProps()}\n        >\n            <DropdownList\n                role=\"listbox\"\n                id={listboxId}\n                aria-label={ARIA_LABEL}\n                onKeyDown={handleListKeyDown}\n            >\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isSelected = code === selectedLanguage;\n                    const isFocused = index === focusedIndex;\n                    return (\n                        <DropdownItem\n                            key={code}\n                            ref={(el: HTMLLIElement | null) => {\n                                itemRefs.current[index] = el;\n                            }}\n                            role=\"option\"\n                            lang={code}\n                            className={clsx(\n                                listItem,\n                                isFocused &&\n                                    isSelected &&\n                                    listItemActiveSelected,\n                                isFocused && !isSelected && listItemActive\n                            )}\n                            aria-selected={isSelected}\n                            tabIndex={isFocused ? 0 : -1}\n                            $selected={isSelected}\n                            onClick={() => handleItemSelect(code)}\n                            data-testid={`${testId}--item-${code}`}\n                        >\n                            {isSelected ? (\n                                <TickIcon\n                                    className={clsx(\n                                        baseIndicatorStyle,\n                                        selectedIndicator\n                                    )}\n                                    aria-hidden\n                                />\n                            ) : (\n                                <div className={baseIndicatorStyle} />\n                            )}\n                            {LANGUAGE_DISPLAY_MAP[code]}\n                        </DropdownItem>\n                    );\n                })}\n            </DropdownList>\n        </DropdownPanel>\n    );\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <div data-testid={testId} {...otherProps}>\n            <ElementWithDropdown\n                enabled={true}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n            />\n        </div>\n    );\n};\n"],"names":["DropdownVariant","_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","triggerRef","useRef","itemRefs","listboxId","useId","useEffect","selectedIdx","LANGUAGE_CODES","indexOf","idx","setTimeout","current","focus","handleItemSelect","code","handleListKeyDown","event","key","preventDefault","next","Math","min","length","prev","max","_b","_c","last","_d","_jsx","children","ElementWithDropdown","enabled","renderElement","_jsxs","StyledExpandableElement","ref","disabled","expanded","popupRole","readOnly","ARIA_LABEL","LANGUAGE_DISPLAY_MAP","LanguageIconWrapper","LanguageIcon","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","DropdownPanel","Object","assign","style","width","DropdownList","role","id","onKeyDown","map","index","isSelected","isFocused","DropdownItem","el","lang","className","clsx","listItem","listItemActiveSelected","listItemActive","tabIndex","$selected","onClick","TickIcon","baseIndicatorStyle","selectedIndicator","onOpen","onClose","onDismiss","clickToToggle","offset"],"mappings":"q9BA2BO,MAAMA,EAAmBC,QAAAC,iBAC5BA,EAAgBC,iBAChBA,EAAgBC,OAChBA,KACGC,EAAUC,EAAAL,EAJe,CAAA,mBAAA,mBAAA,WAS5B,MAAOM,EAAQC,GAAaC,GAAS,IAC9BC,EAAcC,GAAmBF,GAAS,GAC3CG,EAAaC,EAA0B,MACvCC,EAAWD,EAAiC,IAG5CE,EAAY,WADPC,MAMXC,GAAU,KACN,GAAIV,EAAQ,CACR,MAAMW,EAAcC,EAAeC,QAAQlB,GACrCmB,EAAMH,GAAe,EAAIA,EAAc,EAC7CP,EAAgBU,GAChBC,YAAW,WACc,QAArBrB,EAAAa,EAASS,QAAQF,UAAI,IAAApB,GAAAA,EAAEuB,OAAO,GAC/B,EACP,MACIb,GAAgB,EACpB,GACD,CAACJ,EAAQL,IAKZ,MAaMuB,EAAoBC,UACtBvB,EAAiBuB,GACjBlB,GAAU,GACQ,QAAlBP,EAAAW,EAAWW,eAAO,IAAAtB,GAAAA,EAAEuB,OAAO,EAGzBG,EAAqBC,gBACvB,OAAQA,EAAMC,KACV,IAAK,YAAa,CACdD,EAAME,iBACN,MAAMC,EAAOC,KAAKC,IACdvB,EAAe,EACfS,EAAee,OAAS,GAE5BvB,EAAgBoB,GACM,QAAtB9B,EAAAa,EAASS,QAAQQ,UAAK,IAAA9B,GAAAA,EAAEuB,QACxB,KACJ,CACA,IAAK,UAAW,CACZI,EAAME,iBACN,MAAMK,EAAOH,KAAKI,IAAI1B,EAAe,EAAG,GACxCC,EAAgBwB,GACM,QAAtBE,EAAAvB,EAASS,QAAQY,UAAK,IAAAE,GAAAA,EAAEb,QACxB,KACJ,CACA,IAAK,OACDI,EAAME,iBACNnB,EAAgB,GACG,QAAnB2B,EAAAxB,EAASS,QAAQ,UAAE,IAAAe,GAAAA,EAAEd,QACrB,MAEJ,IAAK,MAAO,CACRI,EAAME,iBACN,MAAMS,EAAOpB,EAAee,OAAS,EACrCvB,EAAgB4B,GACM,QAAtBC,EAAA1B,EAASS,QAAQgB,UAAK,IAAAC,GAAAA,EAAEhB,QACxB,KACJ,CACA,IAAK,QACL,IAAK,IACDI,EAAME,iBACFpB,GAAgB,GAChBe,EAAiBN,EAAeT,MA4FhD,OACI+B,qCAAkBrC,GAAYC,EAAU,CAAAqC,SACpCD,EAACE,EAAmB,CAChBC,SAAS,EACTrC,OAAQA,EACRsC,cAvFU,IAClBC,EAACC,EAAuB,CACpBC,IAAKpC,EACLqC,UAAU,EACVC,SAAU3C,EACVQ,UAAWA,EACXoC,UAAU,UACVC,UAAU,EAAK,aACH,GAAGC,MAAeC,EAAqBpD,KAAmB,cACzD,GAAGE,aAAiBsC,SAAA,CAEjCD,EAACc,EAAmB,CAAA,eAAA,EAAAb,SAChBD,EAACe,EAAY,CAAA,KAEhBF,EAAqBpD,MA0ElBuD,eAtEW,EACnBC,eACAC,SACAC,iBACAC,sBAEApB,EAACqB,EAAaC,OAAAC,OAAA,CACVhB,IAAKY,EACLK,MAAKF,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAOL,GAAM,CAAEO,MAAOR,IAAY,cAC1B,GAAGtD,YACZyD,IAAkB,CAAAnB,SAEtBD,EAAC0B,EAAY,CACTC,KAAK,UACLC,GAAItD,EAAS,aACDsC,EACZiB,UAAW3C,EAAiBe,SAE3BvB,EAAeoD,KAAI,CAAC7C,EAAM8C,KACvB,MAAMC,EAAa/C,IAASxB,EACtBwE,EAAYF,IAAU9D,EAC5B,OACIoC,EAAC6B,EAAY,CAET3B,IAAM4B,IACF9D,EAASS,QAAQiD,GAASI,CAAE,EAEhCR,KAAK,SACLS,KAAMnD,EACNoD,UAAWC,EACPC,EACAN,GACID,GACAQ,EACJP,IAAcD,GAAcS,GAC/B,gBACcT,EACfU,SAAUT,EAAY,GAAI,EAAEU,UACjBX,EACXY,QAAS,IAAM5D,EAAiBC,GAAK,cACxB,GAAGtB,WAAgBsB,cAE/B+C,EACGhC,EAAC6C,EAAQ,CACLR,UAAWC,EACPQ,EACAC,GACH,eAAA,IAIL/C,EAAA,MAAA,CAAKqC,UAAWS,IAEnBjC,EAAqB5B,KA9BjBA,EA+BM,SAiBvB+D,OA1JO,KACfjF,GAAU,EAAK,EA0JPkF,QAvJQ,KAChBlF,GAAU,EAAM,EAuJRmF,UApJU,WAClBnF,GAAU,GACQ,QAAlBP,EAAAW,EAAWW,eAAO,IAAAtB,GAAAA,EAAEuB,OAAO,EAmJnBoE,eAAa,EACbC,OAAQ,MAEV"}
+{"version":3,"file":"dropdown-variant.js","sources":["../../src/language-switcher/dropdown-variant.tsx"],"sourcesContent":["import { LanguageIcon } from \"@lifesg/react-icons/language\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { ExpandableElement } from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { useId } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { DropdownPanel } from \"./dropdown-panel\";\nimport * as styles from \"./dropdown-variant.styles\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport type { LanguageSwitcherCode } from \"./types\";\n\nexport const DropdownVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState(-1);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const itemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    const id = useId();\n    const listboxId = `listbox-${id}`;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (isOpen) {\n            const selectedIdx = LANGUAGE_CODES.indexOf(selectedLanguage);\n            const idx = selectedIdx >= 0 ? selectedIdx : 0;\n            setFocusedIndex(idx);\n            setTimeout(() => {\n                itemRefs.current[idx]?.focus();\n            }, 0);\n        } else {\n            setFocusedIndex(-1);\n        }\n    }, [isOpen, selectedLanguage]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOpen = () => {\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleItemSelect = (code: LanguageSwitcherCode) => {\n        onSelectLanguage(code);\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleListKeyDown = (event: React.KeyboardEvent) => {\n        switch (event.key) {\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const next = Math.min(\n                    focusedIndex + 1,\n                    LANGUAGE_CODES.length - 1\n                );\n                setFocusedIndex(next);\n                itemRefs.current[next]?.focus();\n                break;\n            }\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const prev = Math.max(focusedIndex - 1, 0);\n                setFocusedIndex(prev);\n                itemRefs.current[prev]?.focus();\n                break;\n            }\n            case \"Home\": {\n                event.preventDefault();\n                setFocusedIndex(0);\n                itemRefs.current[0]?.focus();\n                break;\n            }\n            case \"End\": {\n                event.preventDefault();\n                const last = LANGUAGE_CODES.length - 1;\n                setFocusedIndex(last);\n                itemRefs.current[last]?.focus();\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                if (focusedIndex >= 0) {\n                    handleItemSelect(LANGUAGE_CODES[focusedIndex]);\n                }\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderElement = () => (\n        <ExpandableElement\n            ref={triggerRef}\n            className={styles.expandableElement}\n            disabled={false}\n            expanded={isOpen}\n            listboxId={listboxId}\n            popupRole=\"listbox\"\n            readOnly={false}\n            aria-label={`${ARIA_LABEL}, ${LANGUAGE_DISPLAY_MAP[selectedLanguage]}`}\n            data-testid={`${testId}--trigger`}\n        >\n            <span className={styles.languageIconWrapper} aria-hidden>\n                <LanguageIcon />\n            </span>\n            {LANGUAGE_DISPLAY_MAP[selectedLanguage]}\n        </ExpandableElement>\n    );\n\n    const renderDropdown = () => (\n        <DropdownPanel\n            focusedIndex={focusedIndex}\n            handleItemSelect={handleItemSelect}\n            handleListKeyDown={handleListKeyDown}\n            itemRefs={itemRefs}\n            listboxId={listboxId}\n            selectedLanguage={selectedLanguage}\n            testId={testId}\n        />\n    );\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <div data-testid={testId} {...otherProps}>\n            <ElementWithDropdown\n                enabled={true}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n            />\n        </div>\n    );\n};\n"],"names":["DropdownVariant","_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","triggerRef","useRef","itemRefs","listboxId","useId","useEffect","selectedIdx","LANGUAGE_CODES","indexOf","idx","setTimeout","current","focus","handleItemSelect","code","handleListKeyDown","event","key","preventDefault","next","Math","min","length","prev","max","_b","_c","last","_d","_jsx","children","ElementWithDropdown","enabled","renderElement","_jsxs","ExpandableElement","ref","className","styles.expandableElement","disabled","expanded","popupRole","readOnly","ARIA_LABEL","LANGUAGE_DISPLAY_MAP","styles.languageIconWrapper","LanguageIcon","renderDropdown","DropdownPanel","onOpen","onClose","onDismiss","clickToToggle","offset"],"mappings":"gyEAaO,MAAMA,EAAmBC,QAAAC,iBAC5BA,EAAgBC,iBAChBA,EAAgBC,OAChBA,KACGC,EAAUC,EAAAL,EAJe,CAAA,mBAAA,mBAAA,WAS5B,MAAOM,EAAQC,GAAaC,GAAS,IAC9BC,EAAcC,GAAmBF,GAAS,GAC3CG,EAAaC,EAA0B,MACvCC,EAAWD,EAAiC,IAG5CE,EAAY,WADPC,MAMXC,GAAU,KACN,GAAIV,EAAQ,CACR,MAAMW,EAAcC,EAAeC,QAAQlB,GACrCmB,EAAMH,GAAe,EAAIA,EAAc,EAC7CP,EAAgBU,GAChBC,YAAW,WACc,QAArBrB,EAAAa,EAASS,QAAQF,UAAI,IAAApB,GAAAA,EAAEuB,OAAO,GAC/B,EACP,MACIb,GAAgB,EACpB,GACD,CAACJ,EAAQL,IAKZ,MAaMuB,EAAoBC,UACtBvB,EAAiBuB,GACjBlB,GAAU,GACQ,QAAlBP,EAAAW,EAAWW,eAAO,IAAAtB,GAAAA,EAAEuB,OAAO,EAGzBG,EAAqBC,gBACvB,OAAQA,EAAMC,KACV,IAAK,YAAa,CACdD,EAAME,iBACN,MAAMC,EAAOC,KAAKC,IACdvB,EAAe,EACfS,EAAee,OAAS,GAE5BvB,EAAgBoB,GACM,QAAtB9B,EAAAa,EAASS,QAAQQ,UAAK,IAAA9B,GAAAA,EAAEuB,QACxB,KACJ,CACA,IAAK,UAAW,CACZI,EAAME,iBACN,MAAMK,EAAOH,KAAKI,IAAI1B,EAAe,EAAG,GACxCC,EAAgBwB,GACM,QAAtBE,EAAAvB,EAASS,QAAQY,UAAK,IAAAE,GAAAA,EAAEb,QACxB,KACJ,CACA,IAAK,OACDI,EAAME,iBACNnB,EAAgB,GACG,QAAnB2B,EAAAxB,EAASS,QAAQ,UAAE,IAAAe,GAAAA,EAAEd,QACrB,MAEJ,IAAK,MAAO,CACRI,EAAME,iBACN,MAAMS,EAAOpB,EAAee,OAAS,EACrCvB,EAAgB4B,GACM,QAAtBC,EAAA1B,EAASS,QAAQgB,UAAK,IAAAC,GAAAA,EAAEhB,QACxB,KACJ,CACA,IAAK,QACL,IAAK,IACDI,EAAME,iBACFpB,GAAgB,GAChBe,EAAiBN,EAAeT,MA4ChD,OACI+B,qCAAkBrC,GAAYC,EAAU,CAAAqC,SACpCD,EAACE,EAAmB,CAChBC,SAAS,EACTrC,OAAQA,EACRsC,cAvCU,IAClBC,EAACC,EAAiB,CACdC,IAAKpC,EACLqC,UAAWC,EACXC,UAAU,EACVC,SAAU7C,EACVQ,UAAWA,EACXsC,UAAU,UACVC,UAAU,EAAK,aACH,GAAGC,MAAeC,EAAqBtD,KAAmB,cACzD,GAAGE,aAAiBsC,SAAA,CAEjCD,EAAA,OAAA,CAAMQ,UAAWQ,EAA0B,eAAA,EAAAf,SACvCD,EAACiB,EAAY,CAAA,KAEhBF,EAAqBtD,MAyBlByD,eArBW,IACnBlB,EAACmB,EAAa,CACVlD,aAAcA,EACde,iBAAkBA,EAClBE,kBAAmBA,EACnBb,SAAUA,EACVC,UAAWA,EACXb,iBAAkBA,EAClBE,OAAQA,IAcJyD,OA1GO,KACfrD,GAAU,EAAK,EA0GPsD,QAvGQ,KAChBtD,GAAU,EAAM,EAuGRuD,UApGU,WAClBvD,GAAU,GACQ,QAAlBP,EAAAW,EAAWW,eAAO,IAAAtB,GAAAA,EAAEuB,OAAO,EAmGnBwC,eAAa,EACbC,OAAQ,MAEV"}

package/language-switcher/dropdown-variant.styles.d.ts

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

package/language-switcher/dropdown-variant.styles.js

@@ -0,0 +1,2 @@
+import"./dropdown-variant.styles_16c4wc1.css";const e="efqyehf",s="ljv0l5v";export{e as expandableElement,s as languageIconWrapper};
+//# sourceMappingURL=dropdown-variant.styles.js.map

package/language-switcher/dropdown-variant.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-variant.styles.js","sources":["../../src/language-switcher/dropdown-variant.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { iconContainer } from \"../shared/dropdown-list/expandable-element.styles\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const expandableElement = css`\n    min-width: 9rem;\n    width: auto;\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text-primary\"]};\n    height: 2.5rem;\n    padding: 0 ${Spacing[\"spacing-16\"]};\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n\n    .${iconContainer} {\n        margin-left: auto;\n\n        svg {\n            color: ${Colour[\"text-selected\"]};\n        }\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const languageIconWrapper = css`\n    display: flex;\n    align-items: center;\n    color: ${Colour[\"icon-primary\"]};\n\n    svg {\n        height: 1rem;\n        width: 1rem;\n    }\n`;\n"],"names":["expandableElement","languageIconWrapper"],"mappings":"+EAKO,MAAMA,EAAiB,UAyBjBC,EAAmB"}

package/language-switcher/dropdown-variant.styles_16c4wc1.css

@@ -0,0 +1,2 @@
+.efqyehf{min-width:9rem;width:auto;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-primary);height:2.5rem;padding:0 var(--fds-spacing-16);border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);}.efqyehf .i1r624au{margin-left:auto;}.efqyehf .i1r624au svg{color:var(--fds-colour-text-selected);}.efqyehf:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;}
+.ljv0l5v{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;color:var(--fds-colour-icon-primary);}.ljv0l5v svg{height:1rem;width:1rem;}

package/language-switcher/link-container-variant.d.ts

@@ -1,2 +1,2 @@
 import type { VariantInternalProps } from "./internal-types";
-export declare const LinkContainerVariant: ({ selectedLanguage, onSelectLanguage, testId, ...otherProps }: VariantInternalProps) => JSX.Element;
+export declare const LinkContainerVariant: ({ selectedLanguage, onSelectLanguage, testId, className, ...otherProps }: VariantInternalProps) => JSX.Element;

package/language-switcher/link-container-variant.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useRef as r}from"react";import{ARIA_LABEL as a,LANGUAGE_CODES as n,LANGUAGE_DISPLAY_MAP as o}from"./data.js";import{LinkContainerWrapper as c,LinkList as l,LinkListItem as s,LinkItem as i}from"./link-container-variant.style.js";const u=u=>{var{selectedLanguage:d,onSelectLanguage:m,testId:p}=u,g=e(u,["selectedLanguage","onSelectLanguage","testId"]);const f=r([]);return t(c,Object.assign({"data-testid":p},g,{children:t(l,{role:"group","aria-label":a,children:n.map(((e,r)=>{const a=e===d;return t(s,{children:t(i,{ref:e=>{f.current[r]=e},type:"button",lang:e,$active:a,"aria-pressed":a,tabIndex:a?0:-1,onClick:()=>m(e),onKeyDown:e=>((e,t)=>{var r;let a=null;switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault(),a=Math.min(t+1,n.length-1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault(),a=Math.max(t-1,0);break;case"Enter":case" ":{e.preventDefault();const r=n[t];m(r);break}}null!==a&&(null===(r=f.current[a])||void 0===r||r.focus())})(e,r),"data-testid":`${p}--item-${e}`,children:o[e]})},e)}))})}))};export{u as LinkContainerVariant};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import a from"clsx";import{useRef as r}from"react";import{ARIA_LABEL as s,LANGUAGE_CODES as n,LANGUAGE_DISPLAY_MAP as l}from"./data.js";import{linkContainerWrapper as c,linkList as o,linkListItem as i,linkItem as m,linkItemActive as u}from"./link-container-variant.styles.js";const d=d=>{var{selectedLanguage:p,onSelectLanguage:g,testId:f,className:b}=d,h=e(d,["selectedLanguage","onSelectLanguage","testId","className"]);const v=r([]);return t("div",Object.assign({className:a(c,b),"data-testid":f},h,{children:t("ul",{className:o,role:"group","aria-label":s,children:n.map(((e,r)=>{const s=e===p;return t("li",{className:i,children:t("button",{ref:e=>{v.current[r]=e},type:"button",lang:e,className:a(m,s&&u),"aria-pressed":s,tabIndex:s?0:-1,onClick:()=>g(e),onKeyDown:e=>((e,t)=>{var a;let r=null;switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault(),r=Math.min(t+1,n.length-1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault(),r=Math.max(t-1,0);break;case"Enter":case" ":{e.preventDefault();const a=n[t];g(a);break}}null!==r&&(null===(a=v.current[r])||void 0===a||a.focus())})(e,r),"data-testid":`${f}--item-${e}`,children:l[e]})},e)}))})}))};export{d as LinkContainerVariant};
 //# sourceMappingURL=link-container-variant.js.map

package/language-switcher/link-container-variant.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-container-variant.js","sources":["../../src/language-switcher/link-container-variant.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport {\n    LinkContainerWrapper,\n    LinkItem,\n    LinkList,\n    LinkListItem,\n} from \"./link-container-variant.style\";\n\nexport const LinkContainerVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n        let nextIndex: number | null = null;\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\": {\n                event.preventDefault();\n                nextIndex = Math.min(index + 1, LANGUAGE_CODES.length - 1);\n                break;\n            }\n            case \"ArrowLeft\":\n            case \"ArrowUp\": {\n                event.preventDefault();\n                nextIndex = Math.max(index - 1, 0);\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                const code = LANGUAGE_CODES[index];\n                onSelectLanguage(code);\n                break;\n            }\n        }\n\n        if (nextIndex !== null) {\n            itemRefs.current[nextIndex]?.focus();\n        }\n    };\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <LinkContainerWrapper data-testid={testId} {...otherProps}>\n            <LinkList role=\"group\" aria-label={ARIA_LABEL}>\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isActive = code === selectedLanguage;\n                    return (\n                        <LinkListItem key={code}>\n                            <LinkItem\n                                ref={(el) => {\n                                    itemRefs.current[index] = el;\n                                }}\n                                type=\"button\"\n                                lang={code}\n                                $active={isActive}\n                                aria-pressed={isActive}\n                                tabIndex={isActive ? 0 : -1}\n                                onClick={() => onSelectLanguage(code)}\n                                onKeyDown={(e) => handleKeyDown(e, index)}\n                                data-testid={`${testId}--item-${code}`}\n                            >\n                                {LANGUAGE_DISPLAY_MAP[code]}\n                            </LinkItem>\n                        </LinkListItem>\n                    );\n                })}\n            </LinkList>\n        </LinkContainerWrapper>\n    );\n};\n"],"names":["LinkContainerVariant","_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","itemRefs","useRef","_jsx","LinkContainerWrapper","Object","assign","children","LinkList","role","ARIA_LABEL","LANGUAGE_CODES","map","code","index","isActive","LinkListItem","LinkItem","ref","el","current","type","lang","$active","tabIndex","onClick","onKeyDown","e","event","nextIndex","key","preventDefault","Math","min","length","max","focus","handleKeyDown","LANGUAGE_DISPLAY_MAP"],"mappings":"kUAYO,MAAMA,EAAwBC,QAAAC,iBACjCA,EAAgBC,iBAChBA,EAAgBC,OAChBA,KACGC,EAAUC,EAAAL,EAJoB,CAAA,mBAAA,mBAAA,WASjC,MAAMM,EAAWC,EAAqC,IAsCtD,OACIC,EAACC,EAAoBC,OAAAC,OAAA,CAAA,cAAcR,GAAYC,EAAU,CAAAQ,SACrDJ,EAACK,EAAQ,CAACC,KAAK,QAAO,aAAaC,EAAUH,SACxCI,EAAeC,KAAI,CAACC,EAAMC,KACvB,MAAMC,EAAWF,IAASjB,EAC1B,OACIO,EAACa,EAAY,CAAAT,SACTJ,EAACc,EAAQ,CACLC,IAAMC,IACFlB,EAASmB,QAAQN,GAASK,CAAE,EAEhCE,KAAK,SACLC,KAAMT,EAAIU,QACDR,EAAQ,eACHA,EACdS,SAAUT,EAAW,GAAI,EACzBU,QAAS,IAAM5B,EAAiBgB,GAChCa,UAAYC,GAlDlB,EAACC,EAA4Bd,WAC/C,IAAIe,EAA2B,KAE/B,OAAQD,EAAME,KACV,IAAK,aACL,IAAK,YACDF,EAAMG,iBACNF,EAAYG,KAAKC,IAAInB,EAAQ,EAAGH,EAAeuB,OAAS,GACxD,MAEJ,IAAK,YACL,IAAK,UACDN,EAAMG,iBACNF,EAAYG,KAAKG,IAAIrB,EAAQ,EAAG,GAChC,MAEJ,IAAK,QACL,IAAK,IAAK,CACNc,EAAMG,iBACN,MAAMlB,EAAOF,EAAeG,GAC5BjB,EAAiBgB,GACjB,KACJ,EAGc,OAAdgB,IAC2B,QAA3BlC,EAAAM,EAASmB,QAAQS,UAAU,IAAAlC,GAAAA,EAAEyC,QACjC,EAuB0CC,CAAcV,EAAGb,GAAM,cAC5B,GAAGhB,WAAgBe,aAE/ByB,EAAqBzB,MAdXA,EAgBJ,QAIR"}
+{"version":3,"file":"link-container-variant.js","sources":["../../src/language-switcher/link-container-variant.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport * as styles from \"./link-container-variant.styles\";\n\nexport const LinkContainerVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    className,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n        let nextIndex: number | null = null;\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\": {\n                event.preventDefault();\n                nextIndex = Math.min(index + 1, LANGUAGE_CODES.length - 1);\n                break;\n            }\n            case \"ArrowLeft\":\n            case \"ArrowUp\": {\n                event.preventDefault();\n                nextIndex = Math.max(index - 1, 0);\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                const code = LANGUAGE_CODES[index];\n                onSelectLanguage(code);\n                break;\n            }\n        }\n\n        if (nextIndex !== null) {\n            itemRefs.current[nextIndex]?.focus();\n        }\n    };\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <div\n            className={clsx(styles.linkContainerWrapper, className)}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ul\n                className={styles.linkList}\n                role=\"group\"\n                aria-label={ARIA_LABEL}\n            >\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isActive = code === selectedLanguage;\n                    return (\n                        <li className={styles.linkListItem} key={code}>\n                            <button\n                                ref={(el) => {\n                                    itemRefs.current[index] = el;\n                                }}\n                                type=\"button\"\n                                lang={code}\n                                className={clsx(\n                                    styles.linkItem,\n                                    isActive && styles.linkItemActive\n                                )}\n                                aria-pressed={isActive}\n                                tabIndex={isActive ? 0 : -1}\n                                onClick={() => onSelectLanguage(code)}\n                                onKeyDown={(e) => handleKeyDown(e, index)}\n                                data-testid={`${testId}--item-${code}`}\n                            >\n                                {LANGUAGE_DISPLAY_MAP[code]}\n                            </button>\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n};\n"],"names":["LinkContainerVariant","_a","selectedLanguage","onSelectLanguage","testId","className","otherProps","__rest","itemRefs","useRef","_jsx","Object","assign","clsx","styles.linkContainerWrapper","styles.linkList","role","ARIA_LABEL","children","LANGUAGE_CODES","map","code","index","isActive","styles.linkListItem","ref","el","current","type","lang","styles.linkItem","styles.linkItemActive","tabIndex","onClick","onKeyDown","e","event","nextIndex","key","preventDefault","Math","min","length","max","focus","handleKeyDown","LANGUAGE_DISPLAY_MAP"],"mappings":"2WAQO,MAAMA,EAAwBC,IAAA,IAAAC,iBACjCA,EAAgBC,iBAChBA,EAAgBC,OAChBA,EAAMC,UACNA,GAASJ,EACNK,EAAUC,EAAAN,EALoB,CAAA,mBAAA,mBAAA,SAAA,cAUjC,MAAMO,EAAWC,EAAqC,IAsCtD,OACIC,EAAA,MAAAC,OAAAC,OAAA,CACIP,UAAWQ,EAAKC,EAA6BT,GAAU,cAC1CD,GACTE,YAEJI,EAAA,KAAA,CACIL,UAAWU,EACXC,KAAK,qBACOC,EAAUC,SAErBC,EAAeC,KAAI,CAACC,EAAMC,KACvB,MAAMC,EAAWF,IAASnB,EAC1B,OACIQ,EAAA,KAAA,CAAIL,UAAWmB,EAAmBN,SAC9BR,EAAA,SAAA,CACIe,IAAMC,IACFlB,EAASmB,QAAQL,GAASI,CAAE,EAEhCE,KAAK,SACLC,KAAMR,EACNhB,UAAWQ,EACPiB,EACAP,GAAYQ,GACf,eACaR,EACdS,SAAUT,EAAW,GAAI,EACzBU,QAAS,IAAM9B,EAAiBkB,GAChCa,UAAYC,GA7DlB,EAACC,EAA4Bd,WAC/C,IAAIe,EAA2B,KAE/B,OAAQD,EAAME,KACV,IAAK,aACL,IAAK,YACDF,EAAMG,iBACNF,EAAYG,KAAKC,IAAInB,EAAQ,EAAGH,EAAeuB,OAAS,GACxD,MAEJ,IAAK,YACL,IAAK,UACDN,EAAMG,iBACNF,EAAYG,KAAKG,IAAIrB,EAAQ,EAAG,GAChC,MAEJ,IAAK,QACL,IAAK,IAAK,CACNc,EAAMG,iBACN,MAAMlB,EAAOF,EAAeG,GAC5BnB,EAAiBkB,GACjB,KACJ,EAGc,OAAdgB,IAC2B,QAA3BpC,EAAAO,EAASmB,QAAQU,UAAU,IAAApC,GAAAA,EAAE2C,QACjC,EAkC0CC,CAAcV,EAAGb,GAAM,cAC5B,GAAGlB,WAAgBiB,IAAMH,SAErC4B,EAAqBzB,MAjBWA,EAmBpC,QAIf"}

package/language-switcher/link-container-variant.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const linkContainerWrapper: import("@linaria/core").LinariaClassName;
+export declare const linkList: import("@linaria/core").LinariaClassName;
+export declare const linkListItem: import("@linaria/core").LinariaClassName;
+export declare const linkItem: import("@linaria/core").LinariaClassName;
+export declare const linkItemActive: import("@linaria/core").LinariaClassName;

package/language-switcher/link-container-variant.styles.js

@@ -0,0 +1,2 @@
+import"./link-container-variant.styles_1blx9qm.css";const l="ldxubbp",t="lqgsuoq",e="l3egc8p",r="lrbzpdb",s="l1retz23";export{l as linkContainerWrapper,r as linkItem,s as linkItemActive,t as linkList,e as linkListItem};
+//# sourceMappingURL=link-container-variant.styles.js.map

package/language-switcher/link-container-variant.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-container-variant.styles.js","sources":["../../src/language-switcher/link-container-variant.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// LINK CONTAINER STYLES\n// =============================================================================\nexport const linkContainerWrapper = css`\n    display: inline-flex;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    align-items: center;\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n`;\n\nexport const linkList = css`\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    align-items: center;\n    gap: 0 ${Spacing[\"spacing-8\"]};\n    flex-wrap: wrap;\n`;\n\nexport const linkListItem = css`\n    display: flex;\n    align-items: center;\n`;\n\nexport const linkItem = css`\n    display: flex;\n    padding: 0.25rem 0.5rem;\n    justify-content: center;\n    align-items: center;\n    gap: 0.625rem;\n    border: none;\n    border-radius: ${Radius[\"md\"]};\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text-subtler\"]};\n    text-align: center;\n    transition: color ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n    background: none;\n    cursor: pointer;\n\n    &:hover {\n        color: ${Colour[\"text-hover\"]};\n        text-decoration: underline;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const linkItemActive = css`\n    background: ${Colour[\"bg-primary-subtler\"]};\n    color: ${Colour[\"text-selected\"]};\n    cursor: default;\n\n    &:hover {\n        color: ${Colour[\"text-selected\"]};\n        text-decoration: none;\n    }\n`;\n"],"names":["linkContainerWrapper","linkList","linkListItem","linkItem","linkItemActive"],"mappings":"qFAOO,MAAMA,EAAoB,UASpBC,EAAQ,UAURC,EAAY,UAKZC,EAAQ,UA0BRC,EAAc"}

package/language-switcher/link-container-variant.styles_1blx9qm.css

@@ -0,0 +1,5 @@
+.ldxubbp{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:var(--fds-spacing-8) var(--fds-spacing-16);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);}
+.lqgsuoq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none;margin:0;padding:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0 var(--fds-spacing-8);-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
+.l3egc8p{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;}
+.lrbzpdb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0.25rem 0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.625rem;border:none;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-subtler);text-align:center;-webkit-transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:color var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);background:none;cursor:pointer;}.lrbzpdb:hover{color:var(--fds-colour-text-hover);-webkit-text-decoration:underline;text-decoration:underline;}.lrbzpdb:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;}
+.l1retz23{background:var(--fds-colour-bg-primary-subtler);color:var(--fds-colour-text-selected);cursor:default;}.l1retz23:hover{color:var(--fds-colour-text-selected);-webkit-text-decoration:none;text-decoration:none;}

package/layout/col-div.js

@@ -1,2 +1,2 @@
-import{__rest as s}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import r from"clsx";import e,{useRef as n}from"react";import"../theme/theme-provider/index.js";import{parseCSSVariableValue as o}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as l}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as a}from"../theme/utils/use-apply-styles.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as m}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{colDiv as i,tokens as x}from"./col-div.styles.js";const p={xxs:{start:x.xxsStart,span:x.xxsSpan,end:x.xxsEnd},xs:{start:x.xsStart,span:x.xsSpan,end:x.xsEnd},sm:{start:x.smStart,span:x.smSpan,end:x.smEnd},md:{start:x.mdStart,span:x.mdSpan,end:x.mdEnd},lg:{start:x.lgStart,span:x.lgSpan,end:x.lgEnd},xl:{start:x.xlStart,span:x.xlSpan,end:x.xlEnd},xxl:{start:x.xxlStart,span:x.xxlSpan,end:x.xxlEnd}},d=s=>{var t,r;const e=o(s,null!==(r=null===(t=globalThis.document)||void 0===t?void 0:t.documentElement)&&void 0!==r?r:null),n=parseInt(e,10);return Number.isNaN(n)?1/0:n},u=e.forwardRef(((e,o)=>{const{xxlCols:x,xlCols:u,lgCols:c,mdCols:f,smCols:j,xsCols:v,xxsCols:g,className:h}=e,S=s(e,["xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className"]),C=n(null),E=m(C,o),b=(s,t)=>{if(!s)return{start:void 0,span:void 0,end:void 0};if(Array.isArray(s)){const[r,e]=s;if(-1===e)return{start:r,span:void 0,end:-1};const n=d(t);return{start:r,span:Math.min(e-r,n),end:void 0}}const r=d(t);return{start:void 0,span:Math.min(s,r),end:void 0}};return a(C,Object.assign({},(()=>{const s=b(g,l["xxs-column"]),t=b(v||g,l["xs-column"]),r=b(j||v||g,l["sm-column"]),e=b(f||j||v||g,l["md-column"]),n=b(c||f||j||v||g,l["lg-column"]),o=b(u||c||f||j||v||g,l["xl-column"]),a=b(x||u||c||f||j||v||g,l["xxl-column"]),m={};return[{result:s,prefix:"xxs"},{result:t,prefix:"xs"},{result:r,prefix:"sm"},{result:e,prefix:"md"},{result:n,prefix:"lg"},{result:o,prefix:"xl"},{result:a,prefix:"xxl"}].forEach((({result:s,prefix:t})=>{const r=p[t];s.start&&(m[r.start]=String(s.start)),s.span&&(m[r.span]=String(s.span)),s.end&&(m[r.end]=String(s.end))})),m})())),t("div",Object.assign({ref:E,className:r(i,h)},S))}));export{u as ColDiv};
+import{__rest as s}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import r from"clsx";import e,{useRef as n}from"react";import"../theme/theme-provider/index.js";import{parseCSSVariableValue as o}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as l}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as m}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as a}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{colDiv as i,tokens as x}from"./col-div.styles.js";const p={xxs:{start:x.xxsStart,span:x.xxsSpan,end:x.xxsEnd},xs:{start:x.xsStart,span:x.xsSpan,end:x.xsEnd},sm:{start:x.smStart,span:x.smSpan,end:x.smEnd},md:{start:x.mdStart,span:x.mdSpan,end:x.mdEnd},lg:{start:x.lgStart,span:x.lgSpan,end:x.lgEnd},xl:{start:x.xlStart,span:x.xlSpan,end:x.xlEnd},xxl:{start:x.xxlStart,span:x.xxlSpan,end:x.xxlEnd}},d=s=>{var t,r;const e=o(s,null!==(r=null===(t=globalThis.document)||void 0===t?void 0:t.documentElement)&&void 0!==r?r:null),n=parseInt(e,10);return Number.isNaN(n)?1/0:n},u=e.forwardRef(((e,o)=>{const{xxlCols:x,xlCols:u,lgCols:c,mdCols:f,smCols:j,xsCols:h,xxsCols:v,className:g}=e,S=s(e,["xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className"]),C=n(null),y=a(C,o),E=(s,t)=>{if(!s)return{start:void 0,span:void 0,end:void 0};if(Array.isArray(s)){const[r,e]=s;if(-1===e)return{start:r,span:void 0,end:-1};const n=d(t);return{start:r,span:Math.min(e-r,n),end:void 0}}const r=d(t);return{start:void 0,span:Math.min(s,r),end:void 0}};return m(C,Object.assign({},(()=>{const s=E(v,l["xxs-column"]),t=E(h||v,l["xs-column"]),r=E(j||h||v,l["sm-column"]),e=E(f||j||h||v,l["md-column"]),n=E(c||f||j||h||v,l["lg-column"]),o=E(u||c||f||j||h||v,l["xl-column"]),m=E(x||u||c||f||j||h||v,l["xxl-column"]),a={};return[{result:s,prefix:"xxs"},{result:t,prefix:"xs"},{result:r,prefix:"sm"},{result:e,prefix:"md"},{result:n,prefix:"lg"},{result:o,prefix:"xl"},{result:m,prefix:"xxl"}].forEach((({result:s,prefix:t})=>{const r=p[t];s.start&&(a[r.start]=String(s.start)),s.span&&(a[r.span]=String(s.span)),s.end&&(a[r.end]=String(s.end))})),a})())),t("div",Object.assign({ref:y,className:r(i,g)},S))}));export{u as ColDiv};
 //# sourceMappingURL=col-div.js.map

package/layout/col-div.js.map

@@ -1 +1 @@
-{"version":3,"file":"col-div.js","sources":["../../src/layout/col-div.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { type BreakpointCSSVariableString, useApplyStyle } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens/breakpoint\";\nimport { parseCSSVariableValue } from \"../theme/utils/css-variable\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./col-div.styles\";\nimport type { ColDivProps } from \"./types\";\n\nconst TOKEN_MAP: Record<string, Record<string, string>> = {\n    xxs: {\n        start: styles.tokens.xxsStart,\n        span: styles.tokens.xxsSpan,\n        end: styles.tokens.xxsEnd,\n    },\n    xs: {\n        start: styles.tokens.xsStart,\n        span: styles.tokens.xsSpan,\n        end: styles.tokens.xsEnd,\n    },\n    sm: {\n        start: styles.tokens.smStart,\n        span: styles.tokens.smSpan,\n        end: styles.tokens.smEnd,\n    },\n    md: {\n        start: styles.tokens.mdStart,\n        span: styles.tokens.mdSpan,\n        end: styles.tokens.mdEnd,\n    },\n    lg: {\n        start: styles.tokens.lgStart,\n        span: styles.tokens.lgSpan,\n        end: styles.tokens.lgEnd,\n    },\n    xl: {\n        start: styles.tokens.xlStart,\n        span: styles.tokens.xlSpan,\n        end: styles.tokens.xlEnd,\n    },\n    xxl: {\n        start: styles.tokens.xxlStart,\n        span: styles.tokens.xxlSpan,\n        end: styles.tokens.xxlEnd,\n    },\n};\n\nconst getColCount = (token: BreakpointCSSVariableString): number => {\n    const value = parseCSSVariableValue(\n        token,\n        globalThis.document?.documentElement ?? null\n    );\n    const parsed = parseInt(value, 10);\n    return Number.isNaN(parsed) ? Infinity : parsed;\n};\n\nconst Component = (\n    props: ColDivProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const {\n        xxlCols,\n        xlCols,\n        lgCols,\n        mdCols,\n        smCols,\n        xsCols,\n        xxsCols,\n        className,\n        ...otherProps\n    } = props;\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const mergedRef = mergeRefs(rootRef, ref);\n\n    const getColSpan = (\n        cols: number | [number, number] | undefined,\n        colToken: (typeof Breakpoint)[keyof typeof Breakpoint]\n    ) => {\n        if (!cols) return { start: undefined, span: undefined, end: undefined };\n\n        if (Array.isArray(cols)) {\n            const [start, end] = cols;\n            if (end === -1) {\n                return { start, span: undefined, end: -1 };\n            }\n            const maxCols = getColCount(colToken);\n            return {\n                start,\n                span: Math.min(end - start, maxCols),\n                end: undefined,\n            };\n        }\n\n        const maxCols = getColCount(colToken);\n        return {\n            start: undefined,\n            span: Math.min(cols, maxCols),\n            end: undefined,\n        };\n    };\n\n    const getCssVars = () => {\n        const xxsResult = getColSpan(xxsCols, Breakpoint[\"xxs-column\"]);\n        const xsResult = getColSpan(xsCols || xxsCols, Breakpoint[\"xs-column\"]);\n        const smResult = getColSpan(\n            smCols || xsCols || xxsCols,\n            Breakpoint[\"sm-column\"]\n        );\n        const mdResult = getColSpan(\n            mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"md-column\"]\n        );\n        const lgResult = getColSpan(\n            lgCols || mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"lg-column\"]\n        );\n        const xlResult = getColSpan(\n            xlCols || lgCols || mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"xl-column\"]\n        );\n        const xxlResult = getColSpan(\n            xxlCols ||\n                xlCols ||\n                lgCols ||\n                mdCols ||\n                smCols ||\n                xsCols ||\n                xxsCols,\n            Breakpoint[\"xxl-column\"]\n        );\n\n        const cssVars: Record<string, string> = {};\n\n        const results = [\n            { result: xxsResult, prefix: \"xxs\" },\n            { result: xsResult, prefix: \"xs\" },\n            { result: smResult, prefix: \"sm\" },\n            { result: mdResult, prefix: \"md\" },\n            { result: lgResult, prefix: \"lg\" },\n            { result: xlResult, prefix: \"xl\" },\n            { result: xxlResult, prefix: \"xxl\" },\n        ];\n\n        results.forEach(({ result, prefix }) => {\n            const tokens = TOKEN_MAP[prefix];\n            if (result.start) cssVars[tokens.start] = String(result.start);\n            if (result.span) cssVars[tokens.span] = String(result.span);\n            if (result.end) cssVars[tokens.end] = String(result.end);\n        });\n\n        return cssVars;\n    };\n\n    useApplyStyle(rootRef, {\n        ...getCssVars(),\n    });\n\n    return (\n        <div\n            ref={mergedRef}\n            className={clsx(styles.colDiv, className)}\n            {...otherProps}\n        />\n    );\n};\n\nexport const ColDiv = React.forwardRef(Component);\n"],"names":["TOKEN_MAP","xxs","start","styles.tokens","xxsStart","span","xxsSpan","end","xxsEnd","xs","xsStart","xsSpan","xsEnd","sm","smStart","smSpan","smEnd","md","mdStart","mdSpan","mdEnd","lg","lgStart","lgSpan","lgEnd","xl","xlStart","xlSpan","xlEnd","xxl","xxlStart","xxlSpan","xxlEnd","getColCount","token","value","parseCSSVariableValue","_b","_a","globalThis","document","documentElement","parsed","parseInt","Number","isNaN","Infinity","ColDiv","React","forwardRef","props","ref","xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className","otherProps","__rest","rootRef","useRef","mergedRef","mergeRefs","getColSpan","cols","colToken","undefined","Array","isArray","maxCols","Math","min","useApplyStyle","Object","assign","xxsResult","Breakpoint","xsResult","smResult","mdResult","lgResult","xlResult","xxlResult","cssVars","result","prefix","forEach","tokens","String","getCssVars","_jsx","clsx","styles.colDiv"],"mappings":"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"}
+{"version":3,"file":"col-div.js","sources":["../../src/layout/col-div.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { type BreakpointCSSVariableString, useApplyStyle } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens/breakpoint\";\nimport { parseCSSVariableValue } from \"../theme/utils/css-variable\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./col-div.styles\";\nimport type { ColDivProps } from \"./types\";\n\nconst TOKEN_MAP: Record<string, Record<string, string>> = {\n    xxs: {\n        start: styles.tokens.xxsStart,\n        span: styles.tokens.xxsSpan,\n        end: styles.tokens.xxsEnd,\n    },\n    xs: {\n        start: styles.tokens.xsStart,\n        span: styles.tokens.xsSpan,\n        end: styles.tokens.xsEnd,\n    },\n    sm: {\n        start: styles.tokens.smStart,\n        span: styles.tokens.smSpan,\n        end: styles.tokens.smEnd,\n    },\n    md: {\n        start: styles.tokens.mdStart,\n        span: styles.tokens.mdSpan,\n        end: styles.tokens.mdEnd,\n    },\n    lg: {\n        start: styles.tokens.lgStart,\n        span: styles.tokens.lgSpan,\n        end: styles.tokens.lgEnd,\n    },\n    xl: {\n        start: styles.tokens.xlStart,\n        span: styles.tokens.xlSpan,\n        end: styles.tokens.xlEnd,\n    },\n    xxl: {\n        start: styles.tokens.xxlStart,\n        span: styles.tokens.xxlSpan,\n        end: styles.tokens.xxlEnd,\n    },\n};\n\nconst getColCount = (token: BreakpointCSSVariableString): number => {\n    const value = parseCSSVariableValue(\n        token,\n        globalThis.document?.documentElement ?? null\n    );\n    const parsed = parseInt(value, 10);\n    return Number.isNaN(parsed) ? Infinity : parsed;\n};\n\nconst Component = (\n    props: ColDivProps,\n    ref: React.Ref<HTMLDivElement>\n): JSX.Element => {\n    const {\n        xxlCols,\n        xlCols,\n        lgCols,\n        mdCols,\n        smCols,\n        xsCols,\n        xxsCols,\n        className,\n        ...otherProps\n    } = props;\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const mergedRef = mergeRefs(rootRef, ref);\n\n    const getColSpan = (\n        cols: number | [number, number] | undefined,\n        colToken: (typeof Breakpoint)[keyof typeof Breakpoint]\n    ) => {\n        if (!cols) return { start: undefined, span: undefined, end: undefined };\n\n        if (Array.isArray(cols)) {\n            const [start, end] = cols;\n            if (end === -1) {\n                return { start, span: undefined, end: -1 };\n            }\n            const maxCols = getColCount(colToken);\n            return {\n                start,\n                span: Math.min(end - start, maxCols),\n                end: undefined,\n            };\n        }\n\n        const maxCols = getColCount(colToken);\n        return {\n            start: undefined,\n            span: Math.min(cols, maxCols),\n            end: undefined,\n        };\n    };\n\n    const getCssVars = () => {\n        const xxsResult = getColSpan(xxsCols, Breakpoint[\"xxs-column\"]);\n        const xsResult = getColSpan(xsCols || xxsCols, Breakpoint[\"xs-column\"]);\n        const smResult = getColSpan(\n            smCols || xsCols || xxsCols,\n            Breakpoint[\"sm-column\"]\n        );\n        const mdResult = getColSpan(\n            mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"md-column\"]\n        );\n        const lgResult = getColSpan(\n            lgCols || mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"lg-column\"]\n        );\n        const xlResult = getColSpan(\n            xlCols || lgCols || mdCols || smCols || xsCols || xxsCols,\n            Breakpoint[\"xl-column\"]\n        );\n        const xxlResult = getColSpan(\n            xxlCols ||\n                xlCols ||\n                lgCols ||\n                mdCols ||\n                smCols ||\n                xsCols ||\n                xxsCols,\n            Breakpoint[\"xxl-column\"]\n        );\n\n        const cssVars: Record<string, string> = {};\n\n        const results = [\n            { result: xxsResult, prefix: \"xxs\" },\n            { result: xsResult, prefix: \"xs\" },\n            { result: smResult, prefix: \"sm\" },\n            { result: mdResult, prefix: \"md\" },\n            { result: lgResult, prefix: \"lg\" },\n            { result: xlResult, prefix: \"xl\" },\n            { result: xxlResult, prefix: \"xxl\" },\n        ];\n\n        results.forEach(({ result, prefix }) => {\n            const tokens = TOKEN_MAP[prefix];\n            if (result.start) cssVars[tokens.start] = String(result.start);\n            if (result.span) cssVars[tokens.span] = String(result.span);\n            if (result.end) cssVars[tokens.end] = String(result.end);\n        });\n\n        return cssVars;\n    };\n\n    useApplyStyle(rootRef, {\n        ...getCssVars(),\n    });\n\n    return (\n        <div\n            ref={mergedRef}\n            className={clsx(styles.colDiv, className)}\n            {...otherProps}\n        />\n    );\n};\n\nexport const ColDiv = React.forwardRef(Component);\n"],"names":["TOKEN_MAP","xxs","start","styles.tokens","xxsStart","span","xxsSpan","end","xxsEnd","xs","xsStart","xsSpan","xsEnd","sm","smStart","smSpan","smEnd","md","mdStart","mdSpan","mdEnd","lg","lgStart","lgSpan","lgEnd","xl","xlStart","xlSpan","xlEnd","xxl","xxlStart","xxlSpan","xxlEnd","getColCount","token","value","parseCSSVariableValue","_b","_a","globalThis","document","documentElement","parsed","parseInt","Number","isNaN","Infinity","ColDiv","React","forwardRef","props","ref","xxlCols","xlCols","lgCols","mdCols","smCols","xsCols","xxsCols","className","otherProps","__rest","rootRef","useRef","mergedRef","mergeRefs","getColSpan","cols","colToken","undefined","Array","isArray","maxCols","Math","min","useApplyStyle","Object","assign","xxsResult","Breakpoint","xsResult","smResult","mdResult","lgResult","xlResult","xxlResult","cssVars","result","prefix","forEach","tokens","String","getCssVars","_jsx","clsx","styles.colDiv"],"mappings":"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"}

package/link-list/components/common.js

@@ -1,2 +1,2 @@
-import{__rest as i}from"../../_virtual/_tslib.js";import{jsx as t,Fragment as e,jsxs as r}from"react/jsx-runtime";import{ItemContainer as s,ItemContentContainer as n,ItemTitleSmall as d,ItemTitleDefault as l,Description as o,ItemIcon as c}from"../link-list.styles.js";const a=({"data-testid":a,items:m,handleItemClick:p,style:h})=>{const k="small"===h?d:l;return t(e,{children:m.map(((e,d)=>{const{title:l,description:m,secondaryDescription:h,onClick:$}=e,f=i(e,["title","description","secondaryDescription","onClick"]);return r(s,Object.assign({"data-testid":`${a}-${d}`,onClick:i=>p(i,e)},f,{children:[r(n,{children:[t(k,{forwardedAs:"div","data-testid":`link-title-${d}`,weight:"semibold",children:l}),m&&t(o,{"data-testid":`link-description-${d}`,children:m}),h]}),t(c,{"aria-hidden":!0})]}),`${a}-${d}`)}))})};export{a as LinkListItems};
+import{__rest as i}from"../../_virtual/_tslib.js";import{jsx as t,Fragment as s,jsxs as e}from"react/jsx-runtime";import{ChevronRightIcon as a}from"@lifesg/react-icons/chevron-right";import r from"clsx";import{Typography as l}from"../../typography/index.js";import{itemContentContainer as c,itemTitleSmall as n,itemTitleDefault as o,itemDescription as d,itemIcon as m,itemContainer as p}from"../link-list.styles.js";const h=({"data-testid":h,items:f,handleItemClick:g,style:k})=>{const y="small"===k?l.HeadingXS:l.HeadingSM,N="small"===k?n:o;return t(s,{children:f.map(((s,n)=>{const{title:o,description:f,secondaryDescription:k,onClick:$,className:j}=s,u=i(s,["title","description","secondaryDescription","onClick","className"]);return e("a",Object.assign({"data-testid":`${h}-${n}`,onClick:i=>g(i,s)},u,{className:r(p,j),children:[e("div",{className:c,children:[t(y,{as:"div","data-testid":`link-title-${n}`,weight:"semibold",className:N,children:o}),f&&t(l.BodyMD,{"data-testid":`link-description-${n}`,className:d,children:f}),k]}),t(a,{"aria-hidden":!0,className:m})]}),`${h}-${n}`)}))})};export{h as LinkListItems};
 //# sourceMappingURL=common.js.map

package/link-list/components/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sources":["../../../src/link-list/components/common.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport type { LinkListItemProps, LinkListStyle } from \"../internal-types\";\nimport {\n    Description,\n    ItemContainer,\n    ItemContentContainer,\n    ItemIcon,\n    ItemTitleDefault,\n    ItemTitleSmall,\n} from \"../link-list.styles\";\n\ntype LinkListItemsProps<T> = {\n    \"data-testid\"?: string | undefined;\n    items: LinkListItemProps<T>[];\n    handleItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => void;\n    style?: LinkListStyle | undefined;\n};\nexport const LinkListItems = <T,>({\n    \"data-testid\": testId,\n    items,\n    handleItemClick,\n    style,\n}: LinkListItemsProps<T>) => {\n    const ItemTitle = style === \"small\" ? ItemTitleSmall : ItemTitleDefault;\n\n    return (\n        <>\n            {items.map((item, index) => {\n                const {\n                    title,\n                    description,\n                    secondaryDescription,\n                    onClick: _onClick, // deconstruct since we are handling it\n                    ...otherProps\n                } = item;\n\n                return (\n                    <ItemContainer\n                        key={`${testId}-${index}`}\n                        data-testid={`${testId}-${index}`}\n                        onClick={(event) => handleItemClick(event, item)}\n                        {...otherProps}\n                    >\n                        <ItemContentContainer>\n                            <ItemTitle\n                                forwardedAs=\"div\"\n                                data-testid={`link-title-${index}`}\n                                weight=\"semibold\"\n                            >\n                                {title}\n                            </ItemTitle>\n                            {description && (\n                                <Description\n                                    data-testid={`link-description-${index}`}\n                                >\n                                    {description}\n                                </Description>\n                            )}\n                            {secondaryDescription}\n                        </ItemContentContainer>\n                        <ItemIcon aria-hidden />\n                    </ItemContainer>\n                );\n            })}\n        </>\n    );\n};\n"],"names":["LinkListItems","testId","items","handleItemClick","style","ItemTitle","ItemTitleSmall","ItemTitleDefault","_jsx","_Fragment","children","map","item","index","title","description","secondaryDescription","onClick","_onClick","otherProps","__rest","_jsxs","ItemContainer","Object","assign","event","ItemContentContainer","forwardedAs","weight","Description","ItemIcon"],"mappings":"4QAqBO,MAAMA,EAAgB,EACzB,cAAeC,EACfC,QACAC,kBACAC,YAEA,MAAMC,EAAsB,UAAVD,EAAoBE,EAAiBC,EAEvD,OACIC,EAAAC,EAAA,CAAAC,SACKR,EAAMS,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,GAETN,EADGO,EAAUC,EACbR,EANE,CAAA,QAAA,cAAA,uBAAA,YAQN,OACIS,EAACC,EAAaC,OAAAC,OAAA,CAAA,cAEG,GAAGvB,KAAUY,IAC1BI,QAAUQ,GAAUtB,EAAgBsB,EAAOb,IACvCO,EAAU,CAAAT,SAAA,CAEdW,EAACK,EAAoB,CAAAhB,SAAA,CACjBF,EAACH,EAAS,CACNsB,YAAY,MAAK,cACJ,cAAcd,IAC3Be,OAAO,WAAUlB,SAEhBI,IAEJC,GACGP,EAACqB,EAAW,CAAA,cACK,oBAAoBhB,IAAOH,SAEvCK,IAGRC,KAELR,EAACsB,EAAQ,CAAA,eAAA,OAtBJ,GAAG7B,KAAUY,IAuBN,KAGzB"}
+{"version":3,"file":"common.js","sources":["../../../src/link-list/components/common.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LinkListItemProps, LinkListStyle } from \"../internal-types\";\nimport * as styles from \"../link-list.styles\";\n\ntype LinkListItemsProps<T> = {\n    \"data-testid\"?: string | undefined;\n    items: LinkListItemProps<T>[];\n    handleItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => void;\n    style?: LinkListStyle | undefined;\n};\nexport const LinkListItems = <T,>({\n    \"data-testid\": testId,\n    items,\n    handleItemClick,\n    style,\n}: LinkListItemsProps<T>) => {\n    const ItemTitle =\n        style === \"small\" ? Typography.HeadingXS : Typography.HeadingSM;\n    const itemTitleClassName =\n        style === \"small\" ? styles.itemTitleSmall : styles.itemTitleDefault;\n\n    return (\n        <>\n            {items.map((item, index) => {\n                const {\n                    title,\n                    description,\n                    secondaryDescription,\n                    onClick: _onClick, // deconstruct since we are handling it\n                    className,\n                    ...otherProps\n                } = item;\n\n                return (\n                    <a\n                        key={`${testId}-${index}`}\n                        data-testid={`${testId}-${index}`}\n                        onClick={(event) => handleItemClick(event, item)}\n                        {...otherProps}\n                        className={clsx(styles.itemContainer, className)}\n                    >\n                        <div className={styles.itemContentContainer}>\n                            <ItemTitle\n                                as=\"div\"\n                                data-testid={`link-title-${index}`}\n                                weight=\"semibold\"\n                                className={itemTitleClassName}\n                            >\n                                {title}\n                            </ItemTitle>\n                            {description && (\n                                <Typography.BodyMD\n                                    data-testid={`link-description-${index}`}\n                                    className={styles.itemDescription}\n                                >\n                                    {description}\n                                </Typography.BodyMD>\n                            )}\n                            {secondaryDescription}\n                        </div>\n                        <ChevronRightIcon\n                            aria-hidden\n                            className={styles.itemIcon}\n                        />\n                    </a>\n                );\n            })}\n        </>\n    );\n};\n"],"names":["LinkListItems","testId","items","handleItemClick","style","ItemTitle","Typography","HeadingXS","HeadingSM","itemTitleClassName","styles.itemTitleSmall","styles.itemTitleDefault","_jsx","_Fragment","children","map","item","index","title","description","secondaryDescription","onClick","_onClick","className","otherProps","_jsxs","event","clsx","styles.itemContainer","styles.itemContentContainer","as","weight","BodyMD","styles.itemDescription","ChevronRightIcon","styles.itemIcon"],"mappings":"gaAiBO,MAAMA,EAAgB,EACzB,cAAeC,EACfC,QACAC,kBACAC,YAEA,MAAMC,EACQ,UAAVD,EAAoBE,EAAWC,UAAYD,EAAWE,UACpDC,EACQ,UAAVL,EAAoBM,EAAwBC,EAEhD,OACIC,EAAAC,EAAA,CAAAC,SACKZ,EAAMa,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,EAAQC,UACjBA,GAEAP,EADGQ,IACHR,EAPE,CAAA,QAAA,cAAA,uBAAA,UAAA,cASN,OACIS,mCAEiB,GAAGxB,KAAUgB,IAC1BI,QAAUK,GAAUvB,EAAgBuB,EAAOV,IACvCQ,EAAU,CACdD,UAAWI,EAAKC,EAAsBL,GAAUT,SAAA,CAEhDW,EAAA,MAAA,CAAKF,UAAWM,EAA2Bf,SAAA,CACvCF,EAACP,EAAS,CACNyB,GAAG,MAAK,cACK,cAAcb,IAC3Bc,OAAO,WACPR,UAAWd,EAAkBK,SAE5BI,IAEJC,GACGP,EAACN,EAAW0B,OAAM,CAAA,cACD,oBAAoBf,IACjCM,UAAWU,EAAsBnB,SAEhCK,IAGRC,KAELR,EAACsB,EAAgB,CAAA,eAAA,EAEbX,UAAWY,OA3BV,GAAGlC,KAAUgB,IA6BlB,KAGb"}

package/link-list/components/link-list-eager.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useSpring as r}from"@react-spring/web";import{useState as l}from"react";import{useResizeDetector as s}from"../../external/react-resize-detector/build/index.esm.js";import{inertValue as n}from"../../shared/accessibility/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as o}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{Expandable as a,ExpandableChild as m,ToggleButton as d,ToggleButtonLabel as c,ViewLessIcon as p,ViewMoreIcon as h}from"../link-list.styles.js";import{LinkListItems as u}from"./common.js";const f=({items:f,maxShown:g,style:j,onItemClick:b,customLabels:k})=>{const[w,y]=l(!g||g>=f.length),x=g?f.slice(g):[],v=s(),C=v.ref,I=o(),D=(e,t)=>{t.onClick?(e.preventDefault(),t.onClick(e)):b&&(e.preventDefault(),b(t,e))},L=()=>{y(!w)},V=r({height:w?v.height:0});return e(t,{children:[i(u,{"data-testid":"link-list-items-shown",items:g?f.slice(0,g):f,handleItemClick:D,style:j}),x.length>0&&i(a,{id:I,style:V,"data-testid":"minimised-content",inert:n(!w),children:i(m,{ref:C,$border:!0,children:i(u,{"data-testid":"link-list-items-minimised",style:j,items:x,handleItemClick:D})})}),x.length>0&&e(d,{type:"button",onClick:L,"data-testid":"toggle-button","aria-expanded":w,"aria-controls":I,children:[i(c,{forwardedAs:"span",weight:"semibold","data-testid":"toggle-button-label",children:w?(null==k?void 0:k.viewLess)||"View less":(null==k?void 0:k.viewMore)||"View more"}),i(w?p:h,{"aria-hidden":!0})]})]})};export{f as EagerLinkList};
+import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{MinusIcon as s}from"@lifesg/react-icons/minus";import{PlusIcon as r}from"@lifesg/react-icons/plus";import{useSpring as l,animated as o}from"@react-spring/web";import{useState as n}from"react";import{useResizeDetector as a}from"../../external/react-resize-detector/build/index.esm.js";import{inertValue as m}from"../../shared/accessibility/index.js";import{Typography as d}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as c}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{expandable as p,expandableList as h,toggleButton as u,toggleButtonLabel as f,toggleButtonIcon as g}from"../link-list.styles.js";import{LinkListItems as j}from"./common.js";const y=({items:y,maxShown:b,style:k,onItemClick:v,customLabels:x})=>{const[w,C]=n(!b||b>=y.length),N=b?y.slice(b):[],D=a(),I=D.ref,L=c(),M=(e,t)=>{t.onClick?(e.preventDefault(),t.onClick(e)):v&&(e.preventDefault(),v(t,e))},V=()=>{C(!w)},z=l({height:w?D.height:0});return e(t,{children:[i(j,{"data-testid":"link-list-items-shown",items:b?y.slice(0,b):y,handleItemClick:M,style:k}),N.length>0&&i(o.div,{id:L,style:z,"data-testid":"minimised-content",inert:m(!w),className:p,children:i("div",{ref:I,className:h,children:i(j,{"data-testid":"link-list-items-minimised",style:k,items:N,handleItemClick:M})})}),N.length>0&&e("button",{type:"button",onClick:V,"data-testid":"toggle-button","aria-expanded":w,"aria-controls":L,className:u,children:[i(d.BodyMD,{as:"span",weight:"semibold","data-testid":"toggle-button-label",className:f,children:w?(null==x?void 0:x.viewLess)||"View less":(null==x?void 0:x.viewMore)||"View more"}),i(w?s:r,{"aria-hidden":!0,className:g})]})]})};export{y as EagerLinkList};
 //# sourceMappingURL=link-list-eager.js.map

package/link-list/components/link-list-eager.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list-eager.js","sources":["../../../src/link-list/components/link-list-eager.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../../shared/accessibility\";\nimport { useId } from \"../../util\";\nimport type {\n    BaseProps,\n    LinkListEagerProps,\n    LinkListItemProps,\n} from \"../internal-types\";\nimport {\n    Expandable,\n    ExpandableChild,\n    ToggleButton,\n    ToggleButtonLabel,\n    ViewLessIcon,\n    ViewMoreIcon,\n} from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListEagerProps, \"loadMode\">;\nexport const EagerLinkList = <T,>({\n    items,\n    maxShown,\n    style,\n    onItemClick,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showMinimised, setShowMinimised] = useState<boolean>(\n        maxShown ? maxShown >= items.length : true\n    );\n\n    const itemsMinimised = maxShown ? items.slice(maxShown) : [];\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    const id = useId();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleToggleButtonClick = () => {\n        setShowMinimised(!showMinimised);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => (\n        <ToggleButton\n            type=\"button\"\n            onClick={handleToggleButtonClick}\n            data-testid=\"toggle-button\"\n            aria-expanded={showMinimised}\n            aria-controls={id}\n        >\n            <ToggleButtonLabel\n                forwardedAs=\"span\"\n                weight=\"semibold\"\n                data-testid=\"toggle-button-label\"\n            >\n                {showMinimised\n                    ? customLabels?.viewLess || \"View less\"\n                    : customLabels?.viewMore || \"View more\"}\n            </ToggleButtonLabel>\n            {showMinimised ? (\n                <ViewLessIcon aria-hidden />\n            ) : (\n                <ViewMoreIcon aria-hidden />\n            )}\n        </ToggleButton>\n    );\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showMinimised ? resizeDetector.height : 0,\n    });\n\n    return (\n        <>\n            <LinkListItems\n                data-testid=\"link-list-items-shown\"\n                items={maxShown ? items.slice(0, maxShown) : items}\n                handleItemClick={handleListItemClick}\n                style={style}\n            />\n            {itemsMinimised.length > 0 && (\n                <Expandable\n                    id={id}\n                    style={expandableStyles}\n                    data-testid=\"minimised-content\"\n                    inert={inertValue(!showMinimised)}\n                >\n                    <ExpandableChild ref={childRef} $border>\n                        <LinkListItems\n                            data-testid=\"link-list-items-minimised\"\n                            style={style}\n                            items={itemsMinimised}\n                            handleItemClick={handleListItemClick}\n                        />\n                    </ExpandableChild>\n                </Expandable>\n            )}\n            {itemsMinimised.length > 0 && renderToggle()}\n        </>\n    );\n};\n"],"names":["EagerLinkList","items","maxShown","style","onItemClick","customLabels","showMinimised","setShowMinimised","useState","length","itemsMinimised","slice","resizeDetector","useResizeDetector","childRef","ref","id","useId","handleListItemClick","event","item","onClick","preventDefault","handleToggleButtonClick","expandableStyles","useSpring","height","_jsxs","_jsx","LinkListItems","handleItemClick","Expandable","inert","inertValue","children","ExpandableChild","ToggleButton","type","ToggleButtonLabel","forwardedAs","weight","viewLess","viewMore","ViewLessIcon","ViewMoreIcon"],"mappings":"+rBAwBO,MAAMA,EAAgB,EACzBC,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,GACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,IACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,IAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAgC9BkB,EAAmBC,EAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,eACIC,EAACC,iBACe,wBACZ5B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C6B,gBAAiBZ,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBmB,EAACG,EAAU,CACPf,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZQ,MAAOC,GAAY3B,GAAc4B,SAEjCN,EAACO,EAAe,CAACpB,IAAKD,sBAClBc,EAACC,EAAa,CAAA,cACE,4BACZ1B,MAAOA,EACPF,MAAOS,EACPoB,gBAAiBZ,QAKhCR,EAAeD,OAAS,GAtD7BkB,EAACS,EAAY,CACTC,KAAK,SACLhB,QAASE,EAAuB,cACpB,gBAAe,gBACZjB,kBACAU,EAAEkB,SAAA,CAEjBN,EAACU,GACGC,YAAY,OACZC,OAAO,WAAU,cACL,+BAEXlC,GACKD,eAAAA,EAAcoC,WAAY,aAC1BpC,aAAY,EAAZA,EAAcqC,WAAY,cAGhCd,EADHtB,EACIqC,EAEAC,EAFY,CAAA,eAAA,SAsClB"}
+{"version":3,"file":"link-list-eager.js","sources":["../../../src/link-list/components/link-list-eager.tsx"],"sourcesContent":["import { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../../shared/accessibility\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type {\n    BaseProps,\n    LinkListEagerProps,\n    LinkListItemProps,\n} from \"../internal-types\";\nimport * as styles from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListEagerProps, \"loadMode\">;\nexport const EagerLinkList = <T,>({\n    items,\n    maxShown,\n    style,\n    onItemClick,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showMinimised, setShowMinimised] = useState<boolean>(\n        maxShown ? maxShown >= items.length : true\n    );\n\n    const itemsMinimised = maxShown ? items.slice(maxShown) : [];\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    const id = useId();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleToggleButtonClick = () => {\n        setShowMinimised(!showMinimised);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => (\n        <button\n            type=\"button\"\n            onClick={handleToggleButtonClick}\n            data-testid=\"toggle-button\"\n            aria-expanded={showMinimised}\n            aria-controls={id}\n            className={styles.toggleButton}\n        >\n            <Typography.BodyMD\n                as=\"span\"\n                weight=\"semibold\"\n                data-testid=\"toggle-button-label\"\n                className={styles.toggleButtonLabel}\n            >\n                {showMinimised\n                    ? customLabels?.viewLess || \"View less\"\n                    : customLabels?.viewMore || \"View more\"}\n            </Typography.BodyMD>\n            {showMinimised ? (\n                <MinusIcon aria-hidden className={styles.toggleButtonIcon} />\n            ) : (\n                <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n            )}\n        </button>\n    );\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showMinimised ? resizeDetector.height : 0,\n    });\n\n    return (\n        <>\n            <LinkListItems\n                data-testid=\"link-list-items-shown\"\n                items={maxShown ? items.slice(0, maxShown) : items}\n                handleItemClick={handleListItemClick}\n                style={style}\n            />\n            {itemsMinimised.length > 0 && (\n                <animated.div\n                    id={id}\n                    style={expandableStyles}\n                    data-testid=\"minimised-content\"\n                    inert={inertValue(!showMinimised)}\n                    className={styles.expandable}\n                >\n                    <div ref={childRef} className={styles.expandableList}>\n                        <LinkListItems\n                            data-testid=\"link-list-items-minimised\"\n                            style={style}\n                            items={itemsMinimised}\n                            handleItemClick={handleListItemClick}\n                        />\n                    </div>\n                </animated.div>\n            )}\n            {itemsMinimised.length > 0 && renderToggle()}\n        </>\n    );\n};\n"],"names":["EagerLinkList","items","maxShown","style","onItemClick","customLabels","showMinimised","setShowMinimised","useState","length","itemsMinimised","slice","resizeDetector","useResizeDetector","childRef","ref","id","useId","handleListItemClick","event","item","onClick","preventDefault","handleToggleButtonClick","expandableStyles","useSpring","height","_jsxs","_Fragment","children","_jsx","LinkListItems","handleItemClick","animated","div","inert","inertValue","className","styles.expandable","styles.expandableList","type","styles.toggleButton","Typography","BodyMD","as","weight","styles.toggleButtonLabel","viewLess","viewMore","MinusIcon","PlusIcon","styles.toggleButtonIcon"],"mappings":"+1BAoBO,MAAMA,EAAgB,EACzBC,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,GACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,IACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,IAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAkC9BkB,EAAmBC,EAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,EAAa,CAAA,cACE,wBACZ9B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C+B,gBAAiBd,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBqB,EAACG,EAASC,IAAG,CACTlB,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZW,MAAOC,GAAY9B,GACnB+B,UAAWC,WAEXR,EAAA,MAAA,CAAKf,IAAKD,EAAUuB,UAAWE,EAAqBV,SAChDC,EAACC,EAAa,CAAA,cACE,4BACZ5B,MAAOA,EACPF,MAAOS,EACPsB,gBAAiBd,QAKhCR,EAAeD,OAAS,GAzD7BkB,EAAA,SAAA,CACIa,KAAK,SACLnB,QAASE,gBACG,gBAAe,gBACZjB,EAAa,gBACbU,EACfqB,UAAWI,EAAmBZ,SAAA,CAE9BC,EAACY,EAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBACZR,UAAWS,EAAwBjB,SAElCvB,GACKD,eAAAA,EAAc0C,WAAY,aAC1B1C,aAAY,EAAZA,EAAc2C,WAAY,cAGhClB,EADHxB,EACI2C,EAEAC,EAFS,CAAA,eAAA,EAAab,UAAWc,SAuCvC"}

package/link-list/components/link-list-lazy.js

@@ -1,2 +1,2 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsxs as t,Fragment as i,jsx as r}from"react/jsx-runtime";import{useSpring as o}from"@react-spring/web";import{useState as n}from"react";import{useResizeDetector as s}from"../../external/react-resize-detector/build/index.esm.js";import{ComponentLoadingSpinner as m}from"../../shared/component-loading-spinner/component-loading-spinner.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import{Colour as l}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/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{Expandable as a,ExpandableChild as d,ToggleButton as p,ToggleButtonLabel as c,ViewMoreIcon as h}from"../link-list.styles.js";import{LinkListItems as u}from"./common.js";const j=({items:j,style:f,onItemClick:g,loadMore:b,onLoadMore:k,customLabels:v})=>{const[y,x]=n(!1),w=s(),C=w.ref,L=()=>e(void 0,void 0,void 0,(function*(){if(!y){x(!0);try{yield k()}catch(e){}x(!1)}})),M=o({height:w.height});return t(i,{children:[r(a,{style:M,"data-testid":"content",children:r(d,{ref:C,children:r(u,{"data-testid":"link-list-items",items:j,handleItemClick:(e,t)=>{t.onClick?(e.preventDefault(),t.onClick(e)):g&&(e.preventDefault(),g(t,e))},style:f})})}),b&&(()=>{const e=y?"Loading...":(null==v?void 0:v.viewMore)||"View more";return t(p,{type:"button",onClick:L,"data-testid":"toggle-button","aria-disabled":y,$loading:y,children:[r(c,{forwardedAs:"span",weight:"semibold","data-testid":"toggle-button-label","aria-busy":y,children:e}),y?r(m,{color:l["text-disabled"]}):r(h,{"aria-hidden":!0})]})})()]})};export{j as LazyLinkList};
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsxs as t,Fragment as i,jsx as o}from"react/jsx-runtime";import{PlusIcon as r}from"@lifesg/react-icons/plus";import{useSpring as s,animated as m}from"@react-spring/web";import n from"clsx";import{useState as a}from"react";import{useResizeDetector as l}from"../../external/react-resize-detector/build/index.esm.js";import{ComponentLoadingSpinner as d}from"../../shared/component-loading-spinner/component-loading-spinner.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import{Colour as p}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/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../theme/utils/use-media-query.js";import{Typography as c}from"../../typography/index.js";import{expandable as h,toggleButtonLabel as u,toggleButtonIcon as f,toggleButton as j,toggleButtonLoading as g}from"../link-list.styles.js";import{LinkListItems as y}from"./common.js";const b=({items:b,style:v,onItemClick:k,loadMore:x,onLoadMore:C,customLabels:w})=>{const[M,N]=a(!1),D=l(),L=D.ref,q=()=>e(void 0,void 0,void 0,(function*(){if(!M){N(!0);try{yield C()}catch(e){}N(!1)}})),I=s({height:D.height});return t(i,{children:[o(m.div,{style:I,"data-testid":"content",className:h,children:o("div",{ref:L,children:o(y,{"data-testid":"link-list-items",items:b,handleItemClick:(e,t)=>{t.onClick?(e.preventDefault(),t.onClick(e)):k&&(e.preventDefault(),k(t,e))},style:v})})}),x&&(()=>{const e=M?"Loading...":(null==w?void 0:w.viewMore)||"View more";return t("button",{type:"button",onClick:q,"data-testid":"toggle-button","aria-disabled":M,className:n(j,M&&g),children:[o(c.BodyMD,{as:"span",weight:"semibold","data-testid":"toggle-button-label","aria-busy":M,className:u,children:e}),M?o(d,{color:p["text-disabled"]}):o(r,{"aria-hidden":!0,className:f})]})})()]})};export{b as LazyLinkList};
 //# sourceMappingURL=link-list-lazy.js.map

package/link-list/components/link-list-lazy.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list-lazy.js","sources":["../../../src/link-list/components/link-list-lazy.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { Colour } from \"../../theme\";\nimport type {\n    BaseProps,\n    LinkListItemProps,\n    LinkListLazyProps,\n} from \"../internal-types\";\nimport {\n    Expandable,\n    ExpandableChild,\n    ToggleButton,\n    ToggleButtonLabel,\n    ViewMoreIcon,\n} from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListLazyProps, \"loadMode\">;\nexport const LazyLinkList = <T,>({\n    items,\n    style,\n    onItemClick,\n    loadMore,\n    onLoadMore,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [isLoading, setIsLoading] = useState(false);\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleClickViewMore = async () => {\n        if (isLoading) return;\n\n        setIsLoading(true);\n        try {\n            await onLoadMore();\n        } catch {\n            // do nothing\n        }\n        setIsLoading(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => {\n        const label = isLoading\n            ? \"Loading...\"\n            : customLabels?.viewMore || \"View more\";\n\n        return (\n            <ToggleButton\n                type=\"button\"\n                onClick={handleClickViewMore}\n                data-testid=\"toggle-button\"\n                aria-disabled={isLoading}\n                $loading={isLoading}\n            >\n                <ToggleButtonLabel\n                    forwardedAs=\"span\"\n                    weight=\"semibold\"\n                    data-testid=\"toggle-button-label\"\n                    aria-busy={isLoading}\n                >\n                    {label}\n                </ToggleButtonLabel>\n\n                {isLoading ? (\n                    <ComponentLoadingSpinner color={Colour[\"text-disabled\"]} />\n                ) : (\n                    <ViewMoreIcon aria-hidden />\n                )}\n            </ToggleButton>\n        );\n    };\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: resizeDetector.height,\n    });\n\n    return (\n        <>\n            <Expandable style={expandableStyles} data-testid=\"content\">\n                <ExpandableChild ref={childRef}>\n                    <LinkListItems\n                        data-testid=\"link-list-items\"\n                        items={items}\n                        handleItemClick={handleListItemClick}\n                        style={style}\n                    />\n                </ExpandableChild>\n            </Expandable>\n            {loadMore && renderToggle()}\n        </>\n    );\n};\n"],"names":["LazyLinkList","items","style","onItemClick","loadMore","onLoadMore","customLabels","isLoading","setIsLoading","useState","resizeDetector","useResizeDetector","childRef","ref","handleClickViewMore","__awaiter","_a","expandableStyles","useSpring","height","_jsxs","_jsx","Expandable","ExpandableChild","children","LinkListItems","handleItemClick","event","item","onClick","preventDefault","label","viewMore","ToggleButton","type","$loading","ToggleButtonLabel","forwardedAs","weight","ComponentLoadingSpinner","color","Colour","ViewMoreIcon","renderToggle"],"mappings":"igCAuBO,MAAMA,EAAe,EACxBC,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,GAAS,GAErCC,EAAiBC,IACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,OAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAqCMS,EAAmBC,EAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,eACIC,EAACC,GAAWpB,MAAOe,EAAgB,cAAc,mBAC7CI,EAACE,GAAgBV,IAAKD,EAAQY,SAC1BH,EAACI,EAAa,CAAA,cACE,kBACZxB,MAAOA,EACPyB,gBA7EQ,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNxB,IACPwB,EAAMG,iBACN3B,EAAYyB,EAAMD,GACtB,EAgEgBzB,MAAOA,QAIlBE,GAhDY,MACjB,MAAM2B,EAAQxB,EACR,cACAD,aAAY,EAAZA,EAAc0B,WAAY,YAEhC,OACIZ,EAACa,EAAY,CACTC,KAAK,SACLL,QAASf,EAAmB,cAChB,gBAAe,gBACZP,EAAS4B,SACd5B,EAASiB,SAAA,CAEnBH,EAACe,EAAiB,CACdC,YAAY,OACZC,OAAO,yBACK,sBAAqB,YACtB/B,EAASiB,SAEnBO,IAGJxB,EACGc,EAACkB,EAAuB,CAACC,MAAOC,EAAO,mBAEvCpB,EAACqB,EAAY,CAAA,eAAA,MAEN,EAqBFC,KACd"}
+{"version":3,"file":"link-list-lazy.js","sources":["../../../src/link-list/components/link-list-lazy.tsx"],"sourcesContent":["import { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { Colour } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport type {\n    BaseProps,\n    LinkListItemProps,\n    LinkListLazyProps,\n} from \"../internal-types\";\nimport * as styles from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListLazyProps, \"loadMode\">;\nexport const LazyLinkList = <T,>({\n    items,\n    style,\n    onItemClick,\n    loadMore,\n    onLoadMore,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [isLoading, setIsLoading] = useState(false);\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleClickViewMore = async () => {\n        if (isLoading) return;\n\n        setIsLoading(true);\n        try {\n            await onLoadMore();\n        } catch {\n            // do nothing\n        }\n        setIsLoading(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => {\n        const label = isLoading\n            ? \"Loading...\"\n            : customLabels?.viewMore || \"View more\";\n\n        return (\n            <button\n                type=\"button\"\n                onClick={handleClickViewMore}\n                data-testid=\"toggle-button\"\n                aria-disabled={isLoading}\n                className={clsx(\n                    styles.toggleButton,\n                    isLoading && styles.toggleButtonLoading\n                )}\n            >\n                <Typography.BodyMD\n                    as=\"span\"\n                    weight=\"semibold\"\n                    data-testid=\"toggle-button-label\"\n                    aria-busy={isLoading}\n                    className={styles.toggleButtonLabel}\n                >\n                    {label}\n                </Typography.BodyMD>\n\n                {isLoading ? (\n                    <ComponentLoadingSpinner color={Colour[\"text-disabled\"]} />\n                ) : (\n                    <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n                )}\n            </button>\n        );\n    };\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: resizeDetector.height,\n    });\n\n    return (\n        <>\n            <animated.div\n                style={expandableStyles}\n                data-testid=\"content\"\n                className={styles.expandable}\n            >\n                <div ref={childRef}>\n                    <LinkListItems\n                        data-testid=\"link-list-items\"\n                        items={items}\n                        handleItemClick={handleListItemClick}\n                        style={style}\n                    />\n                </div>\n            </animated.div>\n            {loadMore && renderToggle()}\n        </>\n    );\n};\n"],"names":["LazyLinkList","items","style","onItemClick","loadMore","onLoadMore","customLabels","isLoading","setIsLoading","useState","resizeDetector","useResizeDetector","childRef","ref","handleClickViewMore","__awaiter","_a","expandableStyles","useSpring","height","_jsxs","_jsx","animated","div","className","styles.expandable","children","LinkListItems","handleItemClick","event","item","onClick","preventDefault","label","viewMore","type","clsx","styles.toggleButton","styles.toggleButtonLoading","Typography","BodyMD","as","weight","styles.toggleButtonLabel","ComponentLoadingSpinner","color","Colour","PlusIcon","styles.toggleButtonIcon","renderToggle"],"mappings":"msCAoBO,MAAMA,EAAe,EACxBC,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,GAAS,GAErCC,EAAiBC,IACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,OAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAyCMS,EAAmBC,EAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,eACIC,EAACC,EAASC,IAAG,CACTrB,MAAOe,EAAgB,cACX,UACZO,UAAWC,WAEXJ,EAAA,MAAA,CAAKR,IAAKD,EAAQc,SACdL,EAACM,EAAa,CAAA,cACE,kBACZ1B,MAAOA,EACP2B,gBArFQ,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACN1B,IACP0B,EAAMG,iBACN7B,EAAY2B,EAAMD,GACtB,EAwEgB3B,MAAOA,QAIlBE,GAxDY,MACjB,MAAM6B,EAAQ1B,EACR,cACAD,aAAY,EAAZA,EAAc4B,WAAY,YAEhC,OACId,EAAA,SAAA,CACIe,KAAK,SACLJ,QAASjB,EAAmB,cAChB,gCACGP,EACfiB,UAAWY,EACPC,EACA9B,GAAa+B,aAGjBjB,EAACkB,EAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBAAqB,YACtBnC,EACXiB,UAAWmB,WAEVV,IAGJ1B,EACGc,EAACuB,EAAuB,CAACC,MAAOC,EAAO,mBAEvCzB,EAAC0B,oBAAqBvB,UAAWwB,MAEhC,EAyBIC,KACd"}

package/link-list/link-list.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"../_virtual/_tslib.js";import{jsx as e,Fragment as t}from"react/jsx-runtime";import{EagerLinkList as s}from"./components/link-list-eager.js";import{LazyLinkList as l}from"./components/link-list-lazy.js";import{Container as m}from"./link-list.styles.js";const a=a=>{if(!a.loadMode||"eager"===a.loadMode){const{loadMode:t,items:l,style:i="default",onItemClick:n,maxShown:r,customLabels:d}=a,c=o(a,["loadMode","items","style","onItemClick","maxShown","customLabels"]);return e(m,Object.assign({},c,{children:e(s,{items:l,maxShown:r,style:i,onItemClick:n,customLabels:d})}))}if("lazy"===a.loadMode){const{loadMode:t,items:s,style:i="default",onItemClick:n,loadMore:r,onLoadMore:d,customLabels:c}=a,u=o(a,["loadMode","items","style","onItemClick","loadMore","onLoadMore","customLabels"]);return e(m,Object.assign({},u,{children:e(l,{items:s,style:i,onItemClick:n,loadMore:r,onLoadMore:d,customLabels:c})}))}return e(t,{})};export{a as LinkList};
+import{__rest as o}from"../_virtual/_tslib.js";import{jsx as e,Fragment as s}from"react/jsx-runtime";import t from"clsx";import{EagerLinkList as l}from"./components/link-list-eager.js";import{LazyLinkList as a}from"./components/link-list-lazy.js";import{container as m}from"./link-list.styles.js";const i=i=>{if(!i.loadMode||"eager"===i.loadMode){const{loadMode:s,items:a,style:r="default",onItemClick:n,maxShown:c,customLabels:d,className:u}=i,M=o(i,["loadMode","items","style","onItemClick","maxShown","customLabels","className"]);return e("div",Object.assign({},M,{className:t(m,u),children:e(l,{items:a,maxShown:c,style:r,onItemClick:n,customLabels:d})}))}if("lazy"===i.loadMode){const{loadMode:s,items:l,style:r="default",onItemClick:n,loadMore:c,onLoadMore:d,customLabels:u,className:M}=i,f=o(i,["loadMode","items","style","onItemClick","loadMore","onLoadMore","customLabels","className"]);return e("div",Object.assign({},f,{className:t(m,M),children:e(a,{items:l,style:r,onItemClick:n,loadMore:c,onLoadMore:d,customLabels:u})}))}return e(s,{})};export{i as LinkList};
 //# sourceMappingURL=link-list.js.map

package/link-list/link-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list.js","sources":["../../src/link-list/link-list.tsx"],"sourcesContent":["import { EagerLinkList } from \"./components/link-list-eager\";\nimport { LazyLinkList } from \"./components/link-list-lazy\";\nimport { Container } from \"./link-list.styles\";\nimport type { LinkListProps } from \"./types\";\n\nexport const LinkList = <T,>(props: LinkListProps<T>): JSX.Element => {\n    if (!props.loadMode || props.loadMode === \"eager\") {\n        const {\n            loadMode: _loadMode,\n            items,\n            style = \"default\",\n            onItemClick,\n            maxShown,\n            customLabels,\n            ...otherProps\n        } = props;\n\n        return (\n            <Container {...otherProps}>\n                <EagerLinkList\n                    items={items}\n                    maxShown={maxShown}\n                    style={style}\n                    onItemClick={onItemClick}\n                    customLabels={customLabels}\n                />\n            </Container>\n        );\n    }\n    if (props.loadMode === \"lazy\") {\n        {\n            const {\n                loadMode: _loadMode,\n                items,\n                style = \"default\",\n                onItemClick,\n                loadMore,\n                onLoadMore,\n                customLabels,\n                ...otherProps\n            } = props;\n\n            return (\n                <Container {...otherProps}>\n                    <LazyLinkList\n                        items={items}\n                        style={style}\n                        onItemClick={onItemClick}\n                        loadMore={loadMore}\n                        onLoadMore={onLoadMore}\n                        customLabels={customLabels}\n                    />\n                </Container>\n            );\n        }\n    }\n\n    return <></>;\n};\n"],"names":["LinkList","props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","otherProps","__rest","_jsx","Container","Object","assign","children","EagerLinkList","loadMore","onLoadMore","LazyLinkList"],"mappings":"qRAKO,MAAMA,EAAgBC,IACzB,IAAKA,EAAMC,UAA+B,UAAnBD,EAAMC,SAAsB,CAC/C,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWC,SACXA,EAAQC,aACRA,GAEAP,EADGQ,EAAUC,EACbT,EARE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,iBAUN,OACIU,EAACC,EAASC,OAAAC,OAAA,CAAA,EAAKL,EAAU,CAAAM,SACrBJ,EAACK,EAAa,CACVZ,MAAOA,EACPG,SAAUA,EACVF,MAAOA,EACPC,YAAaA,EACbE,aAAcA,MAI9B,CACA,GAAuB,SAAnBP,EAAMC,SACN,CACI,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWW,SACXA,EAAQC,WACRA,EAAUV,aACVA,GAEAP,EADGQ,EAAUC,EACbT,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,iBAWN,OACIU,EAACC,EAASC,OAAAC,OAAA,CAAA,EAAKL,EAAU,CAAAM,SACrBJ,EAACQ,EAAY,CACTf,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbW,SAAUA,EACVC,WAAYA,EACZV,aAAcA,MAI9B,CAGJ,OAAOG,OAAK"}
+{"version":3,"file":"link-list.js","sources":["../../src/link-list/link-list.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { EagerLinkList } from \"./components/link-list-eager\";\nimport { LazyLinkList } from \"./components/link-list-lazy\";\nimport * as styles from \"./link-list.styles\";\nimport type { LinkListProps } from \"./types\";\n\nexport const LinkList = <T,>(props: LinkListProps<T>): JSX.Element => {\n    if (!props.loadMode || props.loadMode === \"eager\") {\n        const {\n            loadMode: _loadMode,\n            items,\n            style = \"default\",\n            onItemClick,\n            maxShown,\n            customLabels,\n            className,\n            ...otherProps\n        } = props;\n\n        return (\n            <div {...otherProps} className={clsx(styles.container, className)}>\n                <EagerLinkList\n                    items={items}\n                    maxShown={maxShown}\n                    style={style}\n                    onItemClick={onItemClick}\n                    customLabels={customLabels}\n                />\n            </div>\n        );\n    }\n    if (props.loadMode === \"lazy\") {\n        {\n            const {\n                loadMode: _loadMode,\n                items,\n                style = \"default\",\n                onItemClick,\n                loadMore,\n                onLoadMore,\n                customLabels,\n                className,\n                ...otherProps\n            } = props;\n\n            return (\n                <div\n                    {...otherProps}\n                    className={clsx(styles.container, className)}\n                >\n                    <LazyLinkList\n                        items={items}\n                        style={style}\n                        onItemClick={onItemClick}\n                        loadMore={loadMore}\n                        onLoadMore={onLoadMore}\n                        customLabels={customLabels}\n                    />\n                </div>\n            );\n        }\n    }\n\n    return <></>;\n};\n"],"names":["LinkList","props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","EagerLinkList","loadMore","onLoadMore","children","LazyLinkList"],"mappings":"ySAOO,MAAMA,EAAgBC,IACzB,IAAKA,EAAMC,UAA+B,UAAnBD,EAAMC,SAAsB,CAC/C,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWC,SACXA,EAAQC,aACRA,EAAYC,UACZA,GAEAR,EADGS,EAAUC,EACbV,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,eAAA,cAWN,OACIW,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,GAAYD,UAAWM,EAAKC,EAAkBP,YACnDG,EAACK,GACGb,MAAOA,EACPG,SAAUA,EACVF,MAAOA,EACPC,YAAaA,EACbE,aAAcA,MAI9B,CACA,GAAuB,SAAnBP,EAAMC,SACN,CACI,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWY,SACXA,EAAQC,WACRA,EAAUX,aACVA,EAAYC,UACZA,GAEAR,EADGS,EAAUC,EACbV,EAVE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,eAAA,cAYN,OACIW,yBACQF,EAAU,CACdD,UAAWM,EAAKC,EAAkBP,GAAUW,SAE5CR,EAACS,EAAY,CACTjB,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbY,SAAUA,EACVC,WAAYA,EACZX,aAAcA,MAI9B,CAGJ,OAAOI,OAAK"}