@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.7

package/cjs/input-textarea/{textarea.styles_22z4n3.css → textarea.styles_q77m5x.css}

@@ -1,4 +1,4 @@
-@layer fds{.w1xqauhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+@layer fds{.w1xqauhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-8);}
 .e10c6rk9{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);outline:none;overflow:auto;display:block;padding:var(--fds-spacing-12) var(--fds-spacing-16);width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.e10c6rk9:focus,.e10c6rk9:active{outline-offset:-1px;outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-border-focus);}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-webkit-scrollbar{width:14px;}.e10c6rk9::-webkit-scrollbar-track{background:transparent;}.e10c6rk9::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-moz-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::placeholder{color:var(--fds-colour-text-subtler);}
 .e1kovz0t{border-color:transparent;background:transparent!important;padding:var(--fds-spacing-12) 0;}.e1kovz0t:focus,.e1kovz0t:active{outline-color:var(--fds-colour-border-focus);}
 .e9uwuyt{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.e9uwuyt:focus,.e9uwuyt:active{outline-color:var(--fds-colour-border-disabled);}

package/cjs/language-switcher/language-switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"language-switcher.js","sources":["../../../src/language-switcher/language-switcher.tsx"],"sourcesContent":["import { announce } from \"@react-aria/live-announcer\";\n\nimport { LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { DropdownVariant } from \"./dropdown-variant\";\nimport { LinkContainerVariant } from \"./link-container-variant\";\nimport type { LanguageSwitcherCode, LanguageSwitcherProps } from \"./types\";\n\nexport const LanguageSwitcher = ({\n    variant = \"dropdown\",\n    selectedLanguage = \"en\",\n    onSelectLanguage,\n    \"data-testid\": testId = \"language-switcher\",\n    ...otherProps\n}: LanguageSwitcherProps): JSX.Element => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelectLanguage = (code: LanguageSwitcherCode) => {\n        if (code !== selectedLanguage && onSelectLanguage) {\n            onSelectLanguage(code);\n            announce(`${LANGUAGE_DISPLAY_MAP[code]} selected`, \"polite\");\n        }\n    };\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    switch (variant) {\n        case \"dropdown\":\n            return (\n                <DropdownVariant\n                    selectedLanguage={selectedLanguage}\n                    onSelectLanguage={handleSelectLanguage}\n                    testId={testId}\n                    {...otherProps}\n                />\n            );\n        case \"link-container\":\n            return (\n                <LinkContainerVariant\n                    selectedLanguage={selectedLanguage}\n                    onSelectLanguage={handleSelectLanguage}\n                    testId={testId}\n                    {...otherProps}\n                />\n            );\n    }\n};\n"],"names":["_a","variant","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","handleSelectLanguage","code","announce","LANGUAGE_DISPLAY_MAP","_jsx","DropdownVariant","LinkContainerVariant"],"mappings":"uPAOiCA,QAAAC,QAC7BA,EAAU,WAAUC,iBACpBA,EAAmB,KAAIC,iBACvBA,EACA,cAAeC,EAAS,qBAAmBJ,EACxCK,EAAUC,EAAAA,OAAAN,EALgB,iEAU7B,MAAMO,EAAwBC,IACtBA,IAASN,GAAoBC,IAC7BA,EAAiBK,GACjBC,EAAAA,SAAS,GAAGC,EAAAA,qBAAqBF,cAAkB,UACvD,EAMJ,OAAQP,GACJ,IAAK,WACD,OACIU,EAAAA,IAACC,EAAAA,+BACGV,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC,IAGhB,IAAK,iBACD,OACIM,EAAAA,IAACE,EAAAA,oCACGX,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC"}
+{"version":3,"file":"language-switcher.js","sources":["../../../src/language-switcher/language-switcher.tsx"],"sourcesContent":["import { announce } from \"@react-aria/live-announcer\";\n\nimport { LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { DropdownVariant } from \"./dropdown-variant\";\nimport { LinkContainerVariant } from \"./link-container-variant\";\nimport type { LanguageSwitcherCode, LanguageSwitcherProps } from \"./types\";\n\n// @catalog\n/**\n * A locale-switching control that lets users change the active display language.\n *\n * Use `LanguageSwitcher` to surface supported languages as either\n * a compact dropdown or a set of inline links.\n */\nexport const LanguageSwitcher = ({\n    variant = \"dropdown\",\n    selectedLanguage = \"en\",\n    onSelectLanguage,\n    \"data-testid\": testId = \"language-switcher\",\n    ...otherProps\n}: LanguageSwitcherProps): JSX.Element => {\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelectLanguage = (code: LanguageSwitcherCode) => {\n        if (code !== selectedLanguage && onSelectLanguage) {\n            onSelectLanguage(code);\n            announce(`${LANGUAGE_DISPLAY_MAP[code]} selected`, \"polite\");\n        }\n    };\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    switch (variant) {\n        case \"dropdown\":\n            return (\n                <DropdownVariant\n                    selectedLanguage={selectedLanguage}\n                    onSelectLanguage={handleSelectLanguage}\n                    testId={testId}\n                    {...otherProps}\n                />\n            );\n        case \"link-container\":\n            return (\n                <LinkContainerVariant\n                    selectedLanguage={selectedLanguage}\n                    onSelectLanguage={handleSelectLanguage}\n                    testId={testId}\n                    {...otherProps}\n                />\n            );\n    }\n};\n"],"names":["_a","variant","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","handleSelectLanguage","code","announce","LANGUAGE_DISPLAY_MAP","_jsx","DropdownVariant","LinkContainerVariant"],"mappings":"uPAciCA,QAAAC,QAC7BA,EAAU,WAAUC,iBACpBA,EAAmB,KAAIC,iBACvBA,EACA,cAAeC,EAAS,qBAAmBJ,EACxCK,EAAUC,EAAAA,OAAAN,EALgB,iEAU7B,MAAMO,EAAwBC,IACtBA,IAASN,GAAoBC,IAC7BA,EAAiBK,GACjBC,EAAAA,SAAS,GAAGC,EAAAA,qBAAqBF,cAAkB,UACvD,EAMJ,OAAQP,GACJ,IAAK,WACD,OACIU,EAAAA,IAACC,EAAAA,+BACGV,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC,IAGhB,IAAK,iBACD,OACIM,EAAAA,IAACE,EAAAA,oCACGX,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC"}

package/cjs/layout/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./col-div.js"),t=require("./container.js"),n=require("./content.js"),o=require("./section.js");const i={Container:t.Container,Section:o.Section,Content:n.Content,ColDiv:e.ColDiv};exports.Layout=i;
+"use strict";var e=require("./col-div.js"),t=require("./container.js"),n=require("./content.js"),o=require("./section.js");const i={ColDiv:e.ColDiv,Container:t.Container,Content:n.Content,Section:o.Section};exports.Layout=i;
 //# sourceMappingURL=index.js.map

package/cjs/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/layout/index.ts"],"sourcesContent":["import { ColDiv } from \"./col-div\";\nimport { Container } from \"./container\";\nimport { Content } from \"./content\";\nimport { Section } from \"./section\";\n\nexport const Layout = {\n    Container,\n    Section,\n    Content,\n    ColDiv,\n};\n\nexport * from \"./types\";\n"],"names":["Layout","Container","Section","Content","ColDiv"],"mappings":"2HAKO,MAAMA,EAAS,WAClBC,EAAAA,kBACAC,EAAAA,gBACAC,EAAAA,eACAC,EAAAA"}
+{"version":3,"file":"index.js","sources":["../../../src/layout/index.ts"],"sourcesContent":["import { ColDiv } from \"./col-div\";\nimport { Container } from \"./container\";\nimport { Content } from \"./content\";\nimport { Section } from \"./section\";\n\n// @catalog\n/**\n * A set of structural layout primitives for composing page regions.\n *\n * Use `Layout` sub-components to establish full-width page sections, centred\n * content areas, and responsive grid columns. Sub-components:\n * - `Layout.ColDiv` — a `<div>` that occupies a responsive column span within a grid `Container`.\n * - `Layout.Container` — a flex or grid layout wrapper constrained to the content width.\n * - `Layout.Content` — the primary content block, composes of `Section` + `Container`. Use `Section` and `Container` directly for more granular control.\n * - `Layout.Section` — a full-width semantic `<section>` page region.\n */\nexport const Layout = {\n    /** Renders a `<div>` that occupies a responsive column span within a grid `Container`. */\n    ColDiv,\n    /** Renders a flex or grid layout wrapper constrained to the content width. */\n    Container,\n    /** The primary content block — composes a `Section` with an inner `Container`. */\n    Content,\n    /** Renders a full-width semantic `<section>` page region. */\n    Section,\n};\n\nexport * from \"./types\";\n"],"names":["Layout","ColDiv","Container","Content","Section"],"mappings":"2HAgBO,MAAMA,EAAS,QAElBC,EAAAA,iBAEAC,EAAAA,kBAEAC,EAAAA,gBAEAC,EAAAA"}

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

@@ -1 +1 @@
-{"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":["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":"2UAiB6B,EACzB,cAAeA,EACfC,QACAC,kBACAC,YAEA,MAAMC,EACQ,UAAVD,EAAoBE,EAAAA,WAAWC,UAAYD,EAAAA,WAAWE,UACpDC,EACQ,UAAVL,EAAoBM,EAAAA,eAAwBC,EAAAA,iBAEhD,OACIC,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACKZ,EAAMa,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,EAAQC,UACjBA,GAEAP,EADGQ,WACHR,EAPE,CAAA,QAAA,cAAA,uBAAA,UAAA,cASN,OACIS,EAAAA,sCAEiB,GAAGxB,KAAUgB,IAC1BI,QAAUK,GAAUvB,EAAgBuB,EAAOV,IACvCQ,EAAU,CACdD,UAAWI,EAAAA,QAAKC,EAAAA,cAAsBL,GAAUT,SAAA,CAEhDW,EAAAA,KAAA,MAAA,CAAKF,UAAWM,EAAAA,qBAA2Bf,SAAA,CACvCF,EAAAA,IAACP,EAAS,CACNyB,GAAG,MAAK,cACK,cAAcb,IAC3Bc,OAAO,WACPR,UAAWd,EAAkBK,SAE5BI,IAEJC,GACGP,EAAAA,IAACN,EAAAA,WAAW0B,OAAM,CAAA,cACD,oBAAoBf,IACjCM,UAAWU,kBAAsBnB,SAEhCK,IAGRC,KAELR,EAAAA,IAACsB,EAAAA,iBAAgB,CAAA,eAAA,EAEbX,UAAWY,gBA3BV,GAAGlC,KAAUgB,IA6BlB,KAGb"}
+{"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 * as styles from \"../link-list.styles\";\nimport type { LinkListItemProps, LinkListStyle } from \"../types\";\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":["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":"2UAiB6B,EACzB,cAAeA,EACfC,QACAC,kBACAC,YAEA,MAAMC,EACQ,UAAVD,EAAoBE,EAAAA,WAAWC,UAAYD,EAAAA,WAAWE,UACpDC,EACQ,UAAVL,EAAoBM,EAAAA,eAAwBC,EAAAA,iBAEhD,OACIC,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACKZ,EAAMa,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,EAAQC,UACjBA,GAEAP,EADGQ,WACHR,EAPE,CAAA,QAAA,cAAA,uBAAA,UAAA,cASN,OACIS,EAAAA,sCAEiB,GAAGxB,KAAUgB,IAC1BI,QAAUK,GAAUvB,EAAgBuB,EAAOV,IACvCQ,EAAU,CACdD,UAAWI,EAAAA,QAAKC,EAAAA,cAAsBL,GAAUT,SAAA,CAEhDW,EAAAA,KAAA,MAAA,CAAKF,UAAWM,EAAAA,qBAA2Bf,SAAA,CACvCF,EAAAA,IAACP,EAAS,CACNyB,GAAG,MAAK,cACK,cAAcb,IAC3Bc,OAAO,WACPR,UAAWd,EAAkBK,SAE5BI,IAEJC,GACGP,EAAAA,IAACN,EAAAA,WAAW0B,OAAM,CAAA,cACD,oBAAoBf,IACjCM,UAAWU,kBAAsBnB,SAEhCK,IAGRC,KAELR,EAAAA,IAACsB,EAAAA,iBAAgB,CAAA,eAAA,EAEbX,UAAWY,gBA3BV,GAAGlC,KAAUgB,IA6BlB,KAGb"}

package/cjs/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 { 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":["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","styles.toggleButtonIcon","PlusIcon"],"mappings":"ynBAoB6B,EACzBA,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,EAAAA,UACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,EAAAA,QAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAkC9BkB,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,cAAa,CAAA,cACE,wBACZ9B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C+B,gBAAiBd,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBqB,EAAAA,IAACG,EAAAA,SAASC,IAAG,CACTlB,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZW,MAAOC,EAAAA,YAAY9B,GACnB+B,UAAWC,EAAAA,oBAEXR,EAAAA,IAAA,MAAA,CAAKf,IAAKD,EAAUuB,UAAWE,EAAAA,eAAqBV,SAChDC,EAAAA,IAACC,gBAAa,CAAA,cACE,4BACZ5B,MAAOA,EACPF,MAAOS,EACPsB,gBAAiBd,QAKhCR,EAAeD,OAAS,GAzD7BkB,EAAAA,KAAA,SAAA,CACIa,KAAK,SACLnB,QAASE,gBACG,gBAAe,gBACZjB,EAAa,gBACbU,EACfqB,UAAWI,EAAAA,aAAmBZ,SAAA,CAE9BC,EAAAA,IAACY,EAAAA,WAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBACZR,UAAWS,EAAAA,kBAAwBjB,SAElCvB,GACKD,eAAAA,EAAc0C,WAAY,aAC1B1C,aAAY,EAAZA,EAAc2C,WAAY,cAEnC1C,EACGwB,EAAAA,IAACmB,EAAAA,UAAS,CAAA,eAAA,EAAaZ,UAAWa,EAAAA,mBAElCpB,EAAAA,IAACqB,EAAAA,2BAAqBd,UAAWa,EAAAA,wBAqCtC"}
+{"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 * as styles from \"../link-list.styles\";\nimport type {\n    LinkListBaseProps,\n    LinkListEagerProps,\n    LinkListItemProps,\n} from \"../types\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<LinkListBaseProps<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":["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","styles.toggleButtonIcon","PlusIcon"],"mappings":"ynBAoB6B,EACzBA,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,EAAAA,UACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,EAAAA,QAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAkC9BkB,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,cAAa,CAAA,cACE,wBACZ9B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C+B,gBAAiBd,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBqB,EAAAA,IAACG,EAAAA,SAASC,IAAG,CACTlB,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZW,MAAOC,EAAAA,YAAY9B,GACnB+B,UAAWC,EAAAA,oBAEXR,EAAAA,IAAA,MAAA,CAAKf,IAAKD,EAAUuB,UAAWE,EAAAA,eAAqBV,SAChDC,EAAAA,IAACC,gBAAa,CAAA,cACE,4BACZ5B,MAAOA,EACPF,MAAOS,EACPsB,gBAAiBd,QAKhCR,EAAeD,OAAS,GAzD7BkB,EAAAA,KAAA,SAAA,CACIa,KAAK,SACLnB,QAASE,gBACG,gBAAe,gBACZjB,EAAa,gBACbU,EACfqB,UAAWI,EAAAA,aAAmBZ,SAAA,CAE9BC,EAAAA,IAACY,EAAAA,WAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBACZR,UAAWS,EAAAA,kBAAwBjB,SAElCvB,GACKD,eAAAA,EAAc0C,WAAY,aAC1B1C,aAAY,EAAZA,EAAc2C,WAAY,cAEnC1C,EACGwB,EAAAA,IAACmB,EAAAA,UAAS,CAAA,eAAA,EAAaZ,UAAWa,EAAAA,mBAElCpB,EAAAA,IAACqB,EAAAA,2BAAqBd,UAAWa,EAAAA,wBAqCtC"}

package/cjs/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 { 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":["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":"+iCAoB4B,EACxBA,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,EAAAA,UAAS,GAErCC,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAyCMS,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,EAAAA,2BACIC,MAACC,EAAAA,SAASC,IAAG,CACTrB,MAAOe,EAAgB,cACX,UACZO,UAAWC,EAAAA,oBAEXJ,EAAAA,IAAA,MAAA,CAAKR,IAAKD,EAAQc,SACdL,EAAAA,IAACM,gBAAa,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,OAAA,SAAA,CACIe,KAAK,SACLJ,QAASjB,EAAmB,cAChB,gCACGP,EACfiB,UAAWY,UACPC,EAAAA,aACA9B,GAAa+B,iCAGjBjB,EAAAA,IAACkB,EAAAA,WAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBAAqB,YACtBnC,EACXiB,UAAWmB,EAAAA,2BAEVV,IAGJ1B,EACGc,EAAAA,IAACuB,EAAAA,wBAAuB,CAACC,MAAOC,EAAAA,OAAO,mBAEvCzB,EAAAA,IAAC0B,EAAAA,2BAAqBvB,UAAWwB,EAAAA,qBAEhC,EAyBIC,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 * as styles from \"../link-list.styles\";\nimport type {\n    LinkListBaseProps,\n    LinkListItemProps,\n    LinkListLazyProps,\n} from \"../types\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<LinkListBaseProps<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":["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":"+iCAoB4B,EACxBA,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,EAAAA,UAAS,GAErCC,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAyCMS,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,EAAAA,2BACIC,MAACC,EAAAA,SAASC,IAAG,CACTrB,MAAOe,EAAgB,cACX,UACZO,UAAWC,EAAAA,oBAEXJ,EAAAA,IAAA,MAAA,CAAKR,IAAKD,EAAQc,SACdL,EAAAA,IAACM,gBAAa,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,OAAA,SAAA,CACIe,KAAK,SACLJ,QAASjB,EAAmB,cAChB,gCACGP,EACfiB,UAAWY,UACPC,EAAAA,aACA9B,GAAa+B,iCAGjBjB,EAAAA,IAACkB,EAAAA,WAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBAAqB,YACtBnC,EACXiB,UAAWmB,EAAAA,2BAEVV,IAGJ1B,EACGc,EAAAA,IAACuB,EAAAA,wBAAuB,CAACC,MAAOC,EAAAA,OAAO,mBAEvCzB,EAAAA,IAAC0B,EAAAA,2BAAqBvB,UAAWwB,EAAAA,qBAEhC,EAyBIC,KACd"}

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

@@ -1 +1 @@
-{"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":["props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","EagerLinkList","loadMore","onLoadMore","children","LazyLinkList"],"mappings":"qUAO6BA,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,SACbV,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,eAAA,cAWN,OACIW,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,GAAYD,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,YACnDG,EAAAA,IAACK,EAAAA,eACGb,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,SACbV,EAVE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,eAAA,cAYN,OACIW,EAAAA,2BACQF,EAAU,CACdD,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,GAAUW,SAE5CR,EAAAA,IAACS,EAAAA,aAAY,CACTjB,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbY,SAAUA,EACVC,WAAYA,EACZX,aAAcA,MAI9B,CAGJ,OAAOI,EAAAA,kBAAK"}
+{"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\n// @catalog\n/**\n * A list of anchor links with optional truncation or lazy loading.\n *\n * Use `LinkList` to display a set of navigable links with titles and optional\n * descriptions.\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":["props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","EagerLinkList","loadMore","onLoadMore","children","LazyLinkList"],"mappings":"qUAc6BA,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,SACbV,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,eAAA,cAWN,OACIW,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,GAAYD,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,YACnDG,EAAAA,IAACK,EAAAA,eACGb,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,SACbV,EAVE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,eAAA,cAYN,OACIW,EAAAA,2BACQF,EAAU,CACdD,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,GAAUW,SAE5CR,EAAAA,IAACS,EAAAA,aAAY,CACTjB,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbY,SAAUA,EACVC,WAAYA,EACZX,aAAcA,MAI9B,CAGJ,OAAOI,EAAAA,kBAAK"}

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-dropdown.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport * as styles from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n    {\n        defaultLabel,\n        stickyOffset = 0,\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": testId,\n        className,\n        renderItem,\n    }: LocalNavDropdownProps,\n    ref: React.Ref<HTMLElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const detectStickyRef = useRef<HTMLSpanElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const navWrapperRef = useRef<HTMLElement>(null);\n    const navItemListRef = useRef<HTMLUListElement>(null);\n    const listItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n    const [isStickied, setIsStickied] = useState<boolean>(false);\n    const [isDropdownExpanded, setIsDropdownExpanded] =\n        useState<boolean>(false);\n    const [viewportHeight, setViewportHeight] = useState(0);\n    const [dropdowntHeight, setDropdownHeight] = useState(0);\n    const [dynamicMargin, setDynamicMargin] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const navTestId = testId || \"local-nav-dropdown\";\n    const dropdownListId = useId();\n\n    useImperativeHandle(ref, () => navWrapperRef.current!);\n\n    useApplyStyle(navWrapperRef, {\n        [styles.tokens.navWrapper.stickyOffset]: `${stickyOffset}px`,\n        [styles.tokens.navWrapper.sideMargin]: `${dynamicMargin}px`,\n    });\n\n    useApplyStyle(navItemListRef, {\n        [styles.tokens.navItemList.viewportHeight]: `${\n            viewportHeight - dropdowntHeight - stickyOffset\n        }px`,\n    });\n\n    const labelText =\n        typeof selectedItemIndex === \"number\" &&\n        selectedItemIndex >= 0 &&\n        isStickied\n            ? items[selectedItemIndex].title\n            : defaultLabel;\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n\n    useEffect(() => {\n        if (dropdownRef.current) {\n            const dropdownHeight =\n                dropdownRef.current.getBoundingClientRect().height;\n            setDropdownHeight(dropdownHeight);\n        }\n    }, []);\n\n    useEffect(() => {\n        addStylesheetForDocumentBody();\n        return () => {\n            applyBodyStyleClass(\"remove\");\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded && isStickied) {\n            applyBodyStyleClass(\"add\");\n        } else {\n            applyBodyStyleClass(\"remove\");\n        }\n    }, [isDropdownExpanded, isStickied]);\n\n    useEffect(() => {\n        setViewportHeight(window.innerHeight);\n        const handleResize = () => {\n            setViewportHeight(window.innerHeight);\n        };\n        window.addEventListener(\"resize\", handleResize);\n        return () => window.removeEventListener(\"resize\", handleResize);\n    }, []);\n\n    useEffect(() => {\n        const callback = (entries: IntersectionObserverEntry[]) => {\n            const [entry] = entries;\n            setIsStickied(!entry.isIntersecting);\n        };\n\n        const observer = new IntersectionObserver(callback, {\n            threshold: 1,\n            rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n        });\n\n        if (detectStickyRef.current) {\n            observer.observe(detectStickyRef.current);\n        }\n\n        return () => observer.disconnect();\n    }, [stickyOffset]);\n\n    useEffect(() => {\n        const adjustPadding = () => {\n            const dropdown = navWrapperRef?.current;\n            if (dropdown) {\n                const dropdownRect = dropdown.getBoundingClientRect();\n                const spaceToRight =\n                    document.body.clientWidth - dropdownRect.right;\n                const spaceToLeft = dropdownRect.left;\n                // Calculate the padding needed to balance the dropdown in the viewport\n                const sidePadding = Math.max(spaceToRight, spaceToLeft);\n                setDynamicMargin(sidePadding);\n            }\n        };\n        adjustPadding();\n\n        window.addEventListener(\"resize\", adjustPadding);\n\n        return () => {\n            window.removeEventListener(\"resize\", adjustPadding);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded) {\n            listItemRefs.current[focusedIndex]?.focus();\n        }\n    }, [isDropdownExpanded, focusedIndex]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\n        }\n    };\n\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            DROPDOWN_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleToggleDropdown = () => {\n        setIsDropdownExpanded((prev) => !prev);\n    };\n\n    const handleDismissBackdrop = () => {\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemClick = (\n        e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n        item: LocalNavItemProps,\n        index: number\n    ) => {\n        if (onNavItemSelect) {\n            onNavItemSelect(e, item, index);\n        }\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(0);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(items.length - 1);\n        } else if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            setIsDropdownExpanded(true);\n            setFocusedIndex(0);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n        }\n    };\n\n    const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            const nextIndex = (focusedIndex + 1) % items.length;\n            setFocusedIndex(nextIndex);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            const prevIndex =\n                focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n            setFocusedIndex(prevIndex);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n            dropdownRef.current?.focus();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDropdownNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavDropdownItemComponentProps) => {\n        const { id, title } = item;\n\n        if (renderItem) {\n            return (\n                <li\n                    id={id}\n                    key={index}\n                    role=\"menuitem\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    aria-current={isSelected ? true : undefined}\n                    tabIndex={-1}\n                    ref={(el) => {\n                        listItemRefs.current[index] = el;\n                    }}\n                >\n                    {renderItem(item, {\n                        selected: isSelected,\n                        stickied: isStickied,\n                    })}\n                </li>\n            );\n        }\n\n        return (\n            <li\n                id={id}\n                key={index}\n                role=\"menuitem\"\n                className={clsx(\n                    styles.navItem,\n                    isSelected && isStickied && styles.navItemSelected\n                )}\n                onClick={handleClick}\n                onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                aria-current={isSelected ? true : undefined}\n                tabIndex={-1}\n                ref={(el) => {\n                    listItemRefs.current[index] = el as HTMLLIElement;\n                }}\n            >\n                {isSelected && <TickIcon className={styles.tickIcon} />}\n                <div\n                    className={clsx(\n                        styles.navItemLabel,\n                        isSelected && styles.navItemLabelSelected\n                    )}\n                >\n                    {title}\n                </div>\n            </li>\n        );\n    };\n\n    return (\n        <>\n            <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n            <nav\n                ref={navWrapperRef}\n                id={id}\n                data-testid={navTestId}\n                className={clsx(\n                    styles.navWrapper,\n                    isStickied && styles.navWrapperStickied,\n                    className\n                )}\n            >\n                <div\n                    ref={dropdownRef}\n                    role=\"button\"\n                    onClick={handleToggleDropdown}\n                    onKeyDown={handleNavSelectKeyDown}\n                    data-testid={`${navTestId}-label`}\n                    className={clsx(\n                        styles.navSelect,\n                        isDropdownExpanded && styles.navSelectExpanded\n                    )}\n                    aria-haspopup=\"true\"\n                    aria-expanded={isDropdownExpanded}\n                    aria-controls={dropdownListId}\n                    tabIndex={0}\n                >\n                    <Typography.BodyBL weight=\"semibold\">\n                        {labelText}\n                    </Typography.BodyBL>\n                    <ChevronDownIcon\n                        className={clsx(\n                            styles.navSelectIcon,\n                            isDropdownExpanded && styles.navSelectIconExpanded\n                        )}\n                    />\n                </div>\n                {isDropdownExpanded && (\n                    <ul\n                        ref={navItemListRef}\n                        id={dropdownListId}\n                        role=\"menu\"\n                        onKeyDown={handleNavItemListKeyDown}\n                        data-testid={`${navTestId}-dropdown-list`}\n                        className={styles.navItemList}\n                    >\n                        {items.map((item, i) =>\n                            renderDropdownNavItem({\n                                handleClick: (e) =>\n                                    handleNavItemClick(e, item, i),\n                                isSelected: i === selectedItemIndex,\n                                item,\n                                renderItem,\n                                index: i,\n                            })\n                        )}\n                    </ul>\n                )}\n                {isDropdownExpanded && isStickied && (\n                    <div\n                        className={styles.backdrop}\n                        onClick={handleDismissBackdrop}\n                    />\n                )}\n            </nav>\n        </>\n    );\n};\n\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","navItemListRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","useId","useImperativeHandle","current","useApplyStyle","styles.tokens","navWrapper","sideMargin","navItemList","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","clsx","styles.navWrapper","styles.navWrapperStickied","role","onClick","prev","onKeyDown","length","styles.navSelect","styles.navSelectExpanded","tabIndex","Typography","BodyBL","weight","ChevronDownIcon","styles.navSelectIcon","styles.navSelectIconExpanded","nextIndex","prevIndex","styles.navItemList","map","item","i","isSelected","index","undefined","el","selected","stickied","styles.navItem","styles.navItemSelected","TickIcon","styles.tickIcon","styles.navItemLabel","styles.navItemLabelSelected","renderDropdownNavItem","handleNavItemClick","styles.backdrop"],"mappings":"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"}
+{"version":3,"file":"local-nav-dropdown.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport * as styles from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n    {\n        defaultLabel,\n        stickyOffset = 0,\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": testId,\n        className,\n        renderItem,\n    }: LocalNavDropdownProps,\n    ref: React.Ref<HTMLElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const detectStickyRef = useRef<HTMLSpanElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const navWrapperRef = useRef<HTMLElement>(null);\n    const navItemListRef = useRef<HTMLUListElement>(null);\n    const listItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n    const [isStickied, setIsStickied] = useState<boolean>(false);\n    const [isDropdownExpanded, setIsDropdownExpanded] =\n        useState<boolean>(false);\n    const [viewportHeight, setViewportHeight] = useState(0);\n    const [dropdowntHeight, setDropdownHeight] = useState(0);\n    const [dynamicMargin, setDynamicMargin] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const navTestId = testId || \"local-nav-dropdown\";\n    const dropdownListId = useId();\n\n    useImperativeHandle(ref, () => navWrapperRef.current!);\n\n    useApplyStyle(navWrapperRef, {\n        [styles.tokens.navWrapper.stickyOffset]: `${stickyOffset}px`,\n        [styles.tokens.navWrapper.sideMargin]: `${dynamicMargin}px`,\n    });\n\n    useApplyStyle(navItemListRef, {\n        [styles.tokens.navItemList.viewportHeight]: `${\n            viewportHeight - dropdowntHeight - stickyOffset\n        }px`,\n    });\n\n    const labelText =\n        typeof selectedItemIndex === \"number\" &&\n        selectedItemIndex >= 0 &&\n        isStickied\n            ? items[selectedItemIndex].title\n            : defaultLabel;\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n\n    useEffect(() => {\n        if (dropdownRef.current) {\n            const dropdownHeight =\n                dropdownRef.current.getBoundingClientRect().height;\n            setDropdownHeight(dropdownHeight);\n        }\n    }, []);\n\n    useEffect(() => {\n        addStylesheetForDocumentBody();\n        return () => {\n            applyBodyStyleClass(\"remove\");\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded && isStickied) {\n            applyBodyStyleClass(\"add\");\n        } else {\n            applyBodyStyleClass(\"remove\");\n        }\n    }, [isDropdownExpanded, isStickied]);\n\n    useEffect(() => {\n        setViewportHeight(window.innerHeight);\n        const handleResize = () => {\n            setViewportHeight(window.innerHeight);\n        };\n        window.addEventListener(\"resize\", handleResize);\n        return () => window.removeEventListener(\"resize\", handleResize);\n    }, []);\n\n    useEffect(() => {\n        const callback = (entries: IntersectionObserverEntry[]) => {\n            const [entry] = entries;\n            setIsStickied(!entry.isIntersecting);\n        };\n\n        const observer = new IntersectionObserver(callback, {\n            threshold: 1,\n            rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n        });\n\n        if (detectStickyRef.current) {\n            observer.observe(detectStickyRef.current);\n        }\n\n        return () => observer.disconnect();\n    }, [stickyOffset]);\n\n    useEffect(() => {\n        const adjustPadding = () => {\n            const dropdown = navWrapperRef?.current;\n            if (dropdown) {\n                const dropdownRect = dropdown.getBoundingClientRect();\n                const spaceToRight =\n                    document.body.clientWidth - dropdownRect.right;\n                const spaceToLeft = dropdownRect.left;\n                // Calculate the padding needed to balance the dropdown in the viewport\n                const sidePadding = Math.max(spaceToRight, spaceToLeft);\n                setDynamicMargin(sidePadding);\n            }\n        };\n        adjustPadding();\n\n        window.addEventListener(\"resize\", adjustPadding);\n\n        return () => {\n            window.removeEventListener(\"resize\", adjustPadding);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded) {\n            listItemRefs.current[focusedIndex]?.focus();\n        }\n    }, [isDropdownExpanded, focusedIndex]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\n        }\n    };\n\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            DROPDOWN_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleToggleDropdown = () => {\n        setIsDropdownExpanded((prev) => !prev);\n    };\n\n    const handleDismissBackdrop = () => {\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemClick = (\n        e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n        item: LocalNavItemProps,\n        index: number\n    ) => {\n        if (onNavItemSelect) {\n            onNavItemSelect(e, item, index);\n        }\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(0);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(items.length - 1);\n        } else if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            setIsDropdownExpanded(true);\n            setFocusedIndex(0);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n        }\n    };\n\n    const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            const nextIndex = (focusedIndex + 1) % items.length;\n            setFocusedIndex(nextIndex);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            const prevIndex =\n                focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n            setFocusedIndex(prevIndex);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n            dropdownRef.current?.focus();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDropdownNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavDropdownItemComponentProps) => {\n        const { id, title } = item;\n\n        if (renderItem) {\n            return (\n                <li\n                    id={id}\n                    key={index}\n                    role=\"menuitem\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    aria-current={isSelected ? true : undefined}\n                    tabIndex={-1}\n                    ref={(el) => {\n                        listItemRefs.current[index] = el;\n                    }}\n                >\n                    {renderItem(item, {\n                        selected: isSelected,\n                        stickied: isStickied,\n                    })}\n                </li>\n            );\n        }\n\n        return (\n            <li\n                id={id}\n                key={index}\n                role=\"menuitem\"\n                className={clsx(\n                    styles.navItem,\n                    isSelected && isStickied && styles.navItemSelected\n                )}\n                onClick={handleClick}\n                onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                aria-current={isSelected ? true : undefined}\n                tabIndex={-1}\n                ref={(el) => {\n                    listItemRefs.current[index] = el as HTMLLIElement;\n                }}\n            >\n                {isSelected && <TickIcon className={styles.tickIcon} />}\n                <div\n                    className={clsx(\n                        styles.navItemLabel,\n                        isSelected && styles.navItemLabelSelected\n                    )}\n                >\n                    {title}\n                </div>\n            </li>\n        );\n    };\n\n    return (\n        <>\n            <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n            <nav\n                ref={navWrapperRef}\n                id={id}\n                data-testid={navTestId}\n                className={clsx(\n                    styles.navWrapper,\n                    isStickied && styles.navWrapperStickied,\n                    className\n                )}\n            >\n                <div\n                    ref={dropdownRef}\n                    role=\"button\"\n                    onClick={handleToggleDropdown}\n                    onKeyDown={handleNavSelectKeyDown}\n                    data-testid={`${navTestId}-label`}\n                    className={clsx(\n                        styles.navSelect,\n                        isDropdownExpanded && styles.navSelectExpanded\n                    )}\n                    aria-haspopup=\"true\"\n                    aria-expanded={isDropdownExpanded}\n                    aria-controls={dropdownListId}\n                    tabIndex={0}\n                >\n                    <Typography.BodyBL weight=\"semibold\">\n                        {labelText}\n                    </Typography.BodyBL>\n                    <ChevronDownIcon\n                        className={clsx(\n                            styles.navSelectIcon,\n                            isDropdownExpanded && styles.navSelectIconExpanded\n                        )}\n                    />\n                </div>\n                {isDropdownExpanded && (\n                    <ul\n                        ref={navItemListRef}\n                        id={dropdownListId}\n                        role=\"menu\"\n                        onKeyDown={handleNavItemListKeyDown}\n                        data-testid={`${navTestId}-dropdown-list`}\n                        className={styles.navItemList}\n                    >\n                        {items.map((item, i) =>\n                            renderDropdownNavItem({\n                                handleClick: (e) =>\n                                    handleNavItemClick(e, item, i),\n                                isSelected: i === selectedItemIndex,\n                                item,\n                                renderItem,\n                                index: i,\n                            })\n                        )}\n                    </ul>\n                )}\n                {isDropdownExpanded && isStickied && (\n                    <div\n                        className={styles.backdrop}\n                        onClick={handleDismissBackdrop}\n                    />\n                )}\n            </nav>\n        </>\n    );\n};\n// @catalog\n/**\n * A collapsible dropdown used for in-page navigation on mobile viewports.\n *\n * Use `LocalNavDropdown` when the page has multiple named sections and screen\n * width is insufficient for a persistent sidebar.\n *\n * @remarks\n * This component adopts a fundamentally different interaction model from\n * `LocalNavMenu`: it collapses into a single trigger button and uses a menu\n * overlay, making it suited for mobile while `LocalNavMenu` suits desktop.\n */\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","navItemListRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","useId","useImperativeHandle","current","useApplyStyle","styles.tokens","navWrapper","sideMargin","navItemList","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","clsx","styles.navWrapper","styles.navWrapperStickied","role","onClick","prev","onKeyDown","length","styles.navSelect","styles.navSelectExpanded","tabIndex","Typography","BodyBL","weight","ChevronDownIcon","styles.navSelectIcon","styles.navSelectIconExpanded","nextIndex","prevIndex","styles.navItemList","map","item","i","isSelected","index","undefined","el","selected","stickied","styles.navItem","styles.navItemSelected","TickIcon","styles.tickIcon","styles.navItemLabel","styles.navItemLabelSelected","renderDropdownNavItem","handleNavItemClick","styles.backdrop"],"mappings":"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"}

package/cjs/local-nav/local-nav-menu/local-nav-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\n/**\n * A sidebar navigation element. The currently visible section will be highlighted.\n *\n * This component should be placed inside a container that aligns it to the side.\n * The container can also have `position: sticky` in order to make it a sticky sidebar.\n */\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <Typography.BodyBL\n                    className={styles.textLabel}\n                    weight={isSelected ? \"semibold\" : \"regular\"}\n                >\n                    {title}\n                </Typography.BodyBL>\n            );\n        };\n\n        return (\n            <li\n                id={id}\n                key={index}\n                className={clsx(\n                    styles.navItem,\n                    isSelected && styles.navItemSelected\n                )}\n            >\n                <div\n                    className={styles.navItemContent}\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </div>\n            </li>\n        );\n    };\n    return (\n        <ul\n            ref={ref}\n            id={id}\n            className={clsx(styles.nav, className)}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </ul>\n    );\n};\n\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","Typography","BodyBL","styles.textLabel","weight","renderLocalNavItem"],"mappings":"uPAcA,MAwGaA,OAAeC,QAAMC,YAxGhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAoErC,OACIK,EAAAA,IAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAAA,QAAKC,EAAAA,IAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,IApDC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,GAAUL,EAgBtB,OACIJ,EAAAA,IAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EAAAA,QACPS,UACAH,GAAcI,EAAAA,iBACjBC,SAEDZ,MAAA,MAAA,CACIJ,UAAWiB,EAAAA,eACXC,KAAK,OACLC,QAAST,EACTU,UAAYC,GAtDC,EACzBA,EACAX,KAIA,MAAMY,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFb,EAAYW,GAChB,EA2C8BG,CAAqBH,EAAGX,GAC1Ce,SAAU,EAAC,iBACGd,QAAoBe,EAASV,SA5B/Cf,EACOA,EAAWO,EAAM,CAAEmB,SAAUhB,IAGpCP,EAAAA,IAACwB,EAAAA,WAAWC,OAAM,CACd7B,UAAW8B,EAAAA,UACXC,OAAQpB,EAAa,WAAa,UAASK,SAE1CH,OAQAD,EAgBJ,EAYMoB,CAAmB,CACtBtB,YAAcW,GAAM1B,EAAgB0B,EAAGb,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}
+{"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <Typography.BodyBL\n                    className={styles.textLabel}\n                    weight={isSelected ? \"semibold\" : \"regular\"}\n                >\n                    {title}\n                </Typography.BodyBL>\n            );\n        };\n\n        return (\n            <li\n                id={id}\n                key={index}\n                className={clsx(\n                    styles.navItem,\n                    isSelected && styles.navItemSelected\n                )}\n            >\n                <div\n                    className={styles.navItemContent}\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </div>\n            </li>\n        );\n    };\n    return (\n        <ul\n            ref={ref}\n            id={id}\n            className={clsx(styles.nav, className)}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </ul>\n    );\n};\n\n// @catalog\n/**\n * A sidebar navigation list that highlights the currently selected section.\n *\n * Use `LocalNavMenu` for desktop in-page navigation where the list is always\n * visible.\n */\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","Typography","BodyBL","styles.textLabel","weight","renderLocalNavItem"],"mappings":"uPAQA,MA+GaA,OAAeC,QAAMC,YA/GhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAoErC,OACIK,EAAAA,IAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAAA,QAAKC,EAAAA,IAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,IApDC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,GAAUL,EAgBtB,OACIJ,EAAAA,IAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EAAAA,QACPS,UACAH,GAAcI,EAAAA,iBACjBC,SAEDZ,MAAA,MAAA,CACIJ,UAAWiB,EAAAA,eACXC,KAAK,OACLC,QAAST,EACTU,UAAYC,GAtDC,EACzBA,EACAX,KAIA,MAAMY,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFb,EAAYW,GAChB,EA2C8BG,CAAqBH,EAAGX,GAC1Ce,SAAU,EAAC,iBACGd,QAAoBe,EAASV,SA5B/Cf,EACOA,EAAWO,EAAM,CAAEmB,SAAUhB,IAGpCP,EAAAA,IAACwB,EAAAA,WAAWC,OAAM,CACd7B,UAAW8B,EAAAA,UACXC,OAAQpB,EAAa,WAAa,UAASK,SAE1CH,OAQAD,EAgBJ,EAYMoB,CAAmB,CACtBtB,YAAcW,GAAM1B,EAAgB0B,EAAGb,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}

package/cjs/markup/markup.js.map

@@ -1 +1 @@
-{"version":3,"file":"markup.js","sources":["../../../src/markup/markup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useMemo, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { generateFontProperties } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./markup.style\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { baseTextColor, baseTextSize, inline, className, ...otherProps } =\n        props;\n\n    const containerRef = useRef<HTMLDivElement | HTMLSpanElement>(null);\n    const mergedRef = useMemo(() => mergeRefs(containerRef, ref), [ref]);\n\n    const fontDeclarations = useMemo(() => {\n        if (!baseTextSize) {\n            return undefined;\n        }\n\n        return generateFontProperties(baseTextSize, \"regular\");\n    }, [baseTextSize]);\n\n    const appliedStyles = useMemo(\n        () => ({\n            color: baseTextColor || null,\n            ...fontDeclarations,\n        }),\n        [baseTextColor, fontDeclarations]\n    );\n\n    useApplyStyle(containerRef, appliedStyles);\n\n    const mergedClassName = clsx(\n        styles.baseMarkup,\n        baseTextSize && styles.sizedMarkup,\n        className\n    );\n\n    const ElementTag = inline ? \"span\" : \"div\";\n\n    return (\n        <ElementTag\n            ref={mergedRef as React.Ref<HTMLDivElement & HTMLSpanElement>}\n            className={mergedClassName}\n            {...otherProps}\n        />\n    );\n};\n\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","className","otherProps","__rest","containerRef","useRef","mergedRef","useMemo","mergeRefs","fontDeclarations","generateFontProperties","appliedStyles","Object","assign","color","useApplyStyle","mergedClassName","clsx","styles.baseMarkup","styles.sizedMarkup","ElementTag","_jsx"],"mappings":"m1BAUA,MA6CaA,EAASC,EAAAA,YA7CJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,EAAMC,UAAEA,GACzCL,EADuDM,EAAUC,EAAAA,OACjEP,EADE,CAAA,gBAAA,eAAA,SAAA,cAGAQ,EAAeC,EAAAA,OAAyC,MACxDC,EAAYC,EAAAA,SAAQ,IAAMC,EAAAA,UAAUJ,EAAcP,IAAM,CAACA,IAEzDY,EAAmBF,EAAAA,SAAQ,KAC7B,GAAKR,EAIL,OAAOW,EAAAA,uBAAuBX,EAAc,UAAU,GACvD,CAACA,IAEEY,EAAgBJ,EAAAA,SAClB,IAAMK,OAAAC,OAAA,CACFC,MAAOhB,GAAiB,MACrBW,IAEP,CAACX,EAAeW,IAGpBM,EAAAA,cAAcX,EAAcO,GAE5B,MAAMK,EAAkBC,EAAAA,QACpBC,EAAAA,WACAnB,GAAgBoB,EAAAA,YAChBlB,GAGEmB,EAAapB,EAAS,OAAS,MAErC,OACIqB,MAACD,EAAUR,OAAAC,OAAA,CACPhB,IAAKS,EACLL,UAAWe,GACPd,GACN"}
+{"version":3,"file":"markup.js","sources":["../../../src/markup/markup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useMemo, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { generateFontProperties } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./markup.style\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { baseTextColor, baseTextSize, inline, className, ...otherProps } =\n        props;\n\n    const containerRef = useRef<HTMLDivElement | HTMLSpanElement>(null);\n    const mergedRef = useMemo(() => mergeRefs(containerRef, ref), [ref]);\n\n    const fontDeclarations = useMemo(() => {\n        if (!baseTextSize) {\n            return undefined;\n        }\n\n        return generateFontProperties(baseTextSize, \"regular\");\n    }, [baseTextSize]);\n\n    const appliedStyles = useMemo(\n        () => ({\n            color: baseTextColor || null,\n            ...fontDeclarations,\n        }),\n        [baseTextColor, fontDeclarations]\n    );\n\n    useApplyStyle(containerRef, appliedStyles);\n\n    const mergedClassName = clsx(\n        styles.baseMarkup,\n        baseTextSize && styles.sizedMarkup,\n        className\n    );\n\n    const ElementTag = inline ? \"span\" : \"div\";\n\n    return (\n        <ElementTag\n            ref={mergedRef as React.Ref<HTMLDivElement & HTMLSpanElement>}\n            className={mergedClassName}\n            {...otherProps}\n        />\n    );\n};\n\n// @catalog\n/**\n * A container for rendering rich HTML markup.\n *\n * Use `Markup` to wrap CMS-generated or sanitised HTML content while applying\n * a consistent base font size and colour.\n */\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","className","otherProps","__rest","containerRef","useRef","mergedRef","useMemo","mergeRefs","fontDeclarations","generateFontProperties","appliedStyles","Object","assign","color","useApplyStyle","mergedClassName","clsx","styles.baseMarkup","styles.sizedMarkup","ElementTag","_jsx"],"mappings":"m1BAUA,MAoDaA,EAASC,EAAAA,YApDJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,EAAMC,UAAEA,GACzCL,EADuDM,EAAUC,EAAAA,OACjEP,EADE,CAAA,gBAAA,eAAA,SAAA,cAGAQ,EAAeC,EAAAA,OAAyC,MACxDC,EAAYC,EAAAA,SAAQ,IAAMC,EAAAA,UAAUJ,EAAcP,IAAM,CAACA,IAEzDY,EAAmBF,EAAAA,SAAQ,KAC7B,GAAKR,EAIL,OAAOW,EAAAA,uBAAuBX,EAAc,UAAU,GACvD,CAACA,IAEEY,EAAgBJ,EAAAA,SAClB,IAAMK,OAAAC,OAAA,CACFC,MAAOhB,GAAiB,MACrBW,IAEP,CAACX,EAAeW,IAGpBM,EAAAA,cAAcX,EAAcO,GAE5B,MAAMK,EAAkBC,EAAAA,QACpBC,EAAAA,WACAnB,GAAgBoB,EAAAA,YAChBlB,GAGEmB,EAAapB,EAAS,OAAS,MAErC,OACIqB,MAACD,EAAUR,OAAAC,OAAA,CACPhB,IAAKS,EACLL,UAAWe,GACPd,GACN"}

package/cjs/masked-input/masked-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"masked-input.js","sources":["../../../src/masked-input/masked-input.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport clsx from \"clsx\";\nimport { isEmpty } from \"lodash\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./masked-input.styles\";\nimport type { MaskedInputProps } from \"./types\";\n\nconst Component = (\n    {\n        value,\n        readOnly,\n        \"data-testid\": dataTestId,\n        maskRange,\n        unmaskRange,\n        maskRegex,\n        maskTransformer,\n        iconMask = <EyeSlashIcon />,\n        iconUnmask = <EyeIcon />,\n        iconActiveColor: maskIconActiveColor,\n        iconInactiveColor: maskIconInactiveColor,\n        maskChar = \"•\",\n        error,\n        disableMask,\n        transformInput,\n        loadState,\n        onMask,\n        onUnmask,\n        onChange,\n        onFocus,\n        onBlur,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: MaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isEmptyReadOnlyState = readOnly && isEmpty(value);\n    const [isMasked, setIsMasked] = useState<boolean>(!disableMask);\n    const [updatedValue, setUpdatedValue] = useState<string>(value || \"\");\n    const internalId = useId();\n    const valueId = `${otherProps.id ?? internalId}-value`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const tryAgainRef = useRef<HTMLButtonElement>(null);\n    const readOnlyButtonRef = useRef<HTMLButtonElement>(null);\n    const iconContainerRef = useRef<HTMLDivElement>(null);\n    const isMaskedRef = useRef<boolean>(!disableMask);\n    const ariaLabelledBy = otherProps[\"aria-labelledby\"];\n\n    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n    useApplyStyle(iconContainerRef, {\n        [styles.tokens.iconContainer.inactiveColor]: maskIconInactiveColor,\n        [styles.tokens.iconContainer.activeColor]: maskIconActiveColor,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setUpdatedValue(value || \"\");\n    }, [value]);\n\n    useEffect(() => {\n        if (!readOnly) return;\n\n        if (loadState === \"fail\") {\n            tryAgainRef.current?.focus();\n        }\n\n        if (loadState === \"success\") {\n            readOnlyButtonRef.current?.focus();\n        }\n    }, [readOnly, loadState]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(false);\n        onFocus?.(event);\n    };\n\n    const handleBlur = (event?: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(true);\n        onBlur?.(event!);\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        let value = event.target.value;\n\n        switch (transformInput) {\n            case \"uppercase\":\n                value = value.toUpperCase();\n                break;\n            case \"lowercase\":\n                value = value.toLowerCase();\n                break;\n            default:\n                break;\n        }\n\n        setUpdatedValue(value);\n        event.target.value = value;\n        onChange?.(event);\n    };\n\n    const handleTryAgain = () => {\n        if (readOnly) {\n            onTryAgain?.();\n        }\n    };\n\n    const handleIconMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n    };\n\n    const handleToggleMask = () => {\n        const nextMasked = !isMasked;\n\n        toggleMasking(nextMasked);\n\n        if (!nextMasked) {\n            inputRef.current?.focus();\n            return;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const toggleMasking = (mask: boolean) => {\n        if (isMaskedRef.current === mask) return;\n\n        isMaskedRef.current = mask;\n        setIsMasked(mask);\n\n        if (mask) {\n            onMask?.();\n        } else {\n            onUnmask?.();\n        }\n    };\n\n    const getValue = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        return isMasked && !disableMask\n            ? StringHelper.maskValue(updatedValue, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : updatedValue;\n    };\n\n    const shouldDisableMasking = () =>\n        !updatedValue?.toString().length || disableMask;\n\n    const getValueDescription = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        if (isMasked && !disableMask) {\n            const desc = StringHelper.getMaskedDescription(\n                updatedValue,\n                \"masked\",\n                maskRange\n            );\n\n            return desc || \"Masked value\";\n        }\n\n        return updatedValue;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        if (isEmptyReadOnlyState) {\n            return <></>;\n        }\n\n        const isDisabled = shouldDisableMasking();\n\n        return (\n            <div\n                ref={iconContainerRef}\n                className={clsx(\n                    styles.iconContainer,\n                    isDisabled && styles.iconContainerDisabled\n                )}\n                data-testid={`icon-${isMasked ? \"masked\" : \"unmasked\"}`}\n                onMouseDown={!isDisabled ? handleIconMouseDown : undefined}\n                onClick={!isDisabled ? handleToggleMask : undefined}\n                aria-hidden=\"true\"\n            >\n                {isMasked ? iconUnmask : iconMask}\n            </div>\n        );\n    };\n\n    const renderReadOnlyButton = () => {\n        const isButtonDisabled = shouldDisableMasking() || isEmptyReadOnlyState;\n\n        return (\n            <>\n                <VisuallyHidden id={valueId}>\n                    {getValueDescription()}\n                </VisuallyHidden>\n                <button\n                    ref={readOnlyButtonRef}\n                    className={styles.readOnlyClickable}\n                    data-testid=\"masked-input-readonly-button\"\n                    onClick={!isButtonDisabled ? handleToggleMask : undefined}\n                    type=\"button\"\n                    aria-labelledby={concatIds(valueId, ariaLabelledBy)}\n                    aria-disabled={isButtonDisabled}\n                >\n                    <span className={styles.readOnlyValueText}>\n                        {getValue()}\n                    </span>\n                    {!isButtonDisabled && (\n                        <span className={styles.readOnlyIconContainer}>\n                            {isMasked ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </span>\n                    )}\n                </button>\n            </>\n        );\n    };\n\n    const renderElement = () => {\n        if (readOnly) {\n            switch (loadState) {\n                case \"fail\":\n                    return (\n                        <BasicButton\n                            ref={tryAgainRef}\n                            className={styles.clickableErrorWrapper}\n                            onClick={handleTryAgain}\n                            data-testid=\"try-again-button\"\n                            type=\"button\"\n                        >\n                            <span className={styles.errorTextContainer}>\n                                <ExclamationTriangleIcon\n                                    className={styles.errorIcon}\n                                />\n                                <span className={styles.errorLabel}>Error</span>\n                            </span>\n                            <span className={styles.tryAgainLabel}>\n                                Try again?\n                            </span>\n                        </BasicButton>\n                    );\n                case \"loading\":\n                    return (\n                        <div className={styles.loadingWrapper}>\n                            <ComponentLoadingSpinner\n                                className={styles.spinner}\n                            />\n                            <Typography.BodyBL className={styles.loadingLabel}>\n                                Retrieving...\n                            </Typography.BodyBL>\n                        </div>\n                    );\n                case \"success\":\n                default:\n                    return renderReadOnlyButton();\n            }\n        }\n\n        return (\n            <InputGroup\n                ref={inputRef}\n                className={clsx(styles.inputGroupWrapper, className)}\n                data-testid={`${dataTestId || \"masked-input\"}${\n                    isMasked ? \"-masked\" : \"-unmasked\"\n                }`}\n                addon={{\n                    type: \"custom\",\n                    attributes: {\n                        children: renderIcon(),\n                    },\n                    position: \"right\",\n                }}\n                onFocus={!readOnly ? handleFocus : undefined}\n                onBlur={!readOnly ? handleBlur : undefined}\n                onClick={readOnly ? handleToggleMask : undefined}\n                onChange={handleChange}\n                value={getValue()}\n                readOnly={readOnly}\n                error={error}\n                {...otherProps}\n            />\n        );\n    };\n\n    return <div aria-busy={loadState === \"loading\"}>{renderElement()}</div>;\n};\n\nexport const MaskedInput = React.forwardRef(Component);\n"],"names":["MaskedInput","React","forwardRef","_a","ref","value","readOnly","dataTestId","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","_jsx","EyeSlashIcon","iconUnmask","EyeIcon","iconActiveColor","maskIconActiveColor","iconInactiveColor","maskIconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","className","otherProps","__rest","isEmptyReadOnlyState","isEmpty","isMasked","setIsMasked","useState","updatedValue","setUpdatedValue","internalId","useId","valueId","_b","id","inputRef","useRef","tryAgainRef","readOnlyButtonRef","iconContainerRef","isMaskedRef","ariaLabelledBy","useImperativeHandle","current","useApplyStyle","styles.tokens","iconContainer","inactiveColor","activeColor","useEffect","focus","handleFocus","event","toggleMasking","handleBlur","handleChange","target","toUpperCase","toLowerCase","handleTryAgain","handleIconMouseDown","preventDefault","handleToggleMask","nextMasked","mask","getValue","StringHelper","maskValue","shouldDisableMasking","toString","length","getValueDescription","getMaskedDescription","renderIcon","isDisabled","clsx","styles.iconContainer","styles.iconContainerDisabled","onMouseDown","undefined","onClick","children","_jsxs","BasicButton","styles.clickableErrorWrapper","type","styles.errorTextContainer","ExclamationTriangleIcon","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","styles.loadingWrapper","ComponentLoadingSpinner","styles.spinner","Typography","BodyBL","styles.loadingLabel","isButtonDisabled","VisuallyHidden","styles.readOnlyClickable","concatIds","styles.readOnlyValueText","styles.readOnlyIconContainer","renderReadOnlyButton","InputGroup","Object","assign","styles.inputGroupWrapper","addon","attributes","position","renderElement"],"mappings":"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"}
+{"version":3,"file":"masked-input.js","sources":["../../../src/masked-input/masked-input.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport clsx from \"clsx\";\nimport { isEmpty } from \"lodash\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./masked-input.styles\";\nimport type { MaskedInputProps } from \"./types\";\n\nconst Component = (\n    {\n        value,\n        readOnly,\n        \"data-testid\": dataTestId,\n        maskRange,\n        unmaskRange,\n        maskRegex,\n        maskTransformer,\n        iconMask = <EyeSlashIcon />,\n        iconUnmask = <EyeIcon />,\n        iconActiveColor: maskIconActiveColor,\n        iconInactiveColor: maskIconInactiveColor,\n        maskChar = \"•\",\n        error,\n        disableMask,\n        transformInput,\n        loadState,\n        onMask,\n        onUnmask,\n        onChange,\n        onFocus,\n        onBlur,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: MaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isEmptyReadOnlyState = readOnly && isEmpty(value);\n    const [isMasked, setIsMasked] = useState<boolean>(!disableMask);\n    const [updatedValue, setUpdatedValue] = useState<string>(value || \"\");\n    const internalId = useId();\n    const valueId = `${otherProps.id ?? internalId}-value`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const tryAgainRef = useRef<HTMLButtonElement>(null);\n    const readOnlyButtonRef = useRef<HTMLButtonElement>(null);\n    const iconContainerRef = useRef<HTMLDivElement>(null);\n    const isMaskedRef = useRef<boolean>(!disableMask);\n    const ariaLabelledBy = otherProps[\"aria-labelledby\"];\n\n    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n    useApplyStyle(iconContainerRef, {\n        [styles.tokens.iconContainer.inactiveColor]: maskIconInactiveColor,\n        [styles.tokens.iconContainer.activeColor]: maskIconActiveColor,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setUpdatedValue(value || \"\");\n    }, [value]);\n\n    useEffect(() => {\n        if (!readOnly) return;\n\n        if (loadState === \"fail\") {\n            tryAgainRef.current?.focus();\n        }\n\n        if (loadState === \"success\") {\n            readOnlyButtonRef.current?.focus();\n        }\n    }, [readOnly, loadState]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(false);\n        onFocus?.(event);\n    };\n\n    const handleBlur = (event?: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(true);\n        onBlur?.(event!);\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        let value = event.target.value;\n\n        switch (transformInput) {\n            case \"uppercase\":\n                value = value.toUpperCase();\n                break;\n            case \"lowercase\":\n                value = value.toLowerCase();\n                break;\n            default:\n                break;\n        }\n\n        setUpdatedValue(value);\n        event.target.value = value;\n        onChange?.(event);\n    };\n\n    const handleTryAgain = () => {\n        if (readOnly) {\n            onTryAgain?.();\n        }\n    };\n\n    const handleIconMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n    };\n\n    const handleToggleMask = () => {\n        const nextMasked = !isMasked;\n\n        toggleMasking(nextMasked);\n\n        if (!nextMasked) {\n            inputRef.current?.focus();\n            return;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const toggleMasking = (mask: boolean) => {\n        if (isMaskedRef.current === mask) return;\n\n        isMaskedRef.current = mask;\n        setIsMasked(mask);\n\n        if (mask) {\n            onMask?.();\n        } else {\n            onUnmask?.();\n        }\n    };\n\n    const getValue = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        return isMasked && !disableMask\n            ? StringHelper.maskValue(updatedValue, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : updatedValue;\n    };\n\n    const shouldDisableMasking = () =>\n        !updatedValue?.toString().length || disableMask;\n\n    const getValueDescription = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        if (isMasked && !disableMask) {\n            const desc = StringHelper.getMaskedDescription(\n                updatedValue,\n                \"masked\",\n                maskRange\n            );\n\n            return desc || \"Masked value\";\n        }\n\n        return updatedValue;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        if (isEmptyReadOnlyState) {\n            return <></>;\n        }\n\n        const isDisabled = shouldDisableMasking();\n\n        return (\n            <div\n                ref={iconContainerRef}\n                className={clsx(\n                    styles.iconContainer,\n                    isDisabled && styles.iconContainerDisabled\n                )}\n                data-testid={`icon-${isMasked ? \"masked\" : \"unmasked\"}`}\n                onMouseDown={!isDisabled ? handleIconMouseDown : undefined}\n                onClick={!isDisabled ? handleToggleMask : undefined}\n                aria-hidden=\"true\"\n            >\n                {isMasked ? iconUnmask : iconMask}\n            </div>\n        );\n    };\n\n    const renderReadOnlyButton = () => {\n        const isButtonDisabled = shouldDisableMasking() || isEmptyReadOnlyState;\n\n        return (\n            <>\n                <VisuallyHidden id={valueId}>\n                    {getValueDescription()}\n                </VisuallyHidden>\n                <button\n                    ref={readOnlyButtonRef}\n                    className={styles.readOnlyClickable}\n                    data-testid=\"masked-input-readonly-button\"\n                    onClick={!isButtonDisabled ? handleToggleMask : undefined}\n                    type=\"button\"\n                    aria-labelledby={concatIds(valueId, ariaLabelledBy)}\n                    aria-disabled={isButtonDisabled}\n                >\n                    <span className={styles.readOnlyValueText}>\n                        {getValue()}\n                    </span>\n                    {!isButtonDisabled && (\n                        <span className={styles.readOnlyIconContainer}>\n                            {isMasked ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </span>\n                    )}\n                </button>\n            </>\n        );\n    };\n\n    const renderElement = () => {\n        if (readOnly) {\n            switch (loadState) {\n                case \"fail\":\n                    return (\n                        <BasicButton\n                            ref={tryAgainRef}\n                            className={styles.clickableErrorWrapper}\n                            onClick={handleTryAgain}\n                            data-testid=\"try-again-button\"\n                            type=\"button\"\n                        >\n                            <span className={styles.errorTextContainer}>\n                                <ExclamationTriangleIcon\n                                    className={styles.errorIcon}\n                                />\n                                <span className={styles.errorLabel}>Error</span>\n                            </span>\n                            <span className={styles.tryAgainLabel}>\n                                Try again?\n                            </span>\n                        </BasicButton>\n                    );\n                case \"loading\":\n                    return (\n                        <div className={styles.loadingWrapper}>\n                            <ComponentLoadingSpinner\n                                className={styles.spinner}\n                            />\n                            <Typography.BodyBL className={styles.loadingLabel}>\n                                Retrieving...\n                            </Typography.BodyBL>\n                        </div>\n                    );\n                case \"success\":\n                default:\n                    return renderReadOnlyButton();\n            }\n        }\n\n        return (\n            <InputGroup\n                ref={inputRef}\n                className={clsx(styles.inputGroupWrapper, className)}\n                data-testid={`${dataTestId || \"masked-input\"}${\n                    isMasked ? \"-masked\" : \"-unmasked\"\n                }`}\n                addon={{\n                    type: \"custom\",\n                    attributes: {\n                        children: renderIcon(),\n                    },\n                    position: \"right\",\n                }}\n                onFocus={!readOnly ? handleFocus : undefined}\n                onBlur={!readOnly ? handleBlur : undefined}\n                onClick={readOnly ? handleToggleMask : undefined}\n                onChange={handleChange}\n                value={getValue()}\n                readOnly={readOnly}\n                error={error}\n                {...otherProps}\n            />\n        );\n    };\n\n    return <div aria-busy={loadState === \"loading\"}>{renderElement()}</div>;\n};\n\n// @catalog\n/**\n * A text input that masks sensitive values and allows toggling visibility.\n *\n * Use `MaskedInput` when collecting or displaying sensitive data such as\n * identity numbers or passwords.\n */\nexport const MaskedInput = React.forwardRef(Component);\n"],"names":["MaskedInput","React","forwardRef","_a","ref","value","readOnly","dataTestId","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","_jsx","EyeSlashIcon","iconUnmask","EyeIcon","iconActiveColor","maskIconActiveColor","iconInactiveColor","maskIconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","className","otherProps","__rest","isEmptyReadOnlyState","isEmpty","isMasked","setIsMasked","useState","updatedValue","setUpdatedValue","internalId","useId","valueId","_b","id","inputRef","useRef","tryAgainRef","readOnlyButtonRef","iconContainerRef","isMaskedRef","ariaLabelledBy","useImperativeHandle","current","useApplyStyle","styles.tokens","iconContainer","inactiveColor","activeColor","useEffect","focus","handleFocus","event","toggleMasking","handleBlur","handleChange","target","toUpperCase","toLowerCase","handleTryAgain","handleIconMouseDown","preventDefault","handleToggleMask","nextMasked","mask","getValue","StringHelper","maskValue","shouldDisableMasking","toString","length","getValueDescription","getMaskedDescription","renderIcon","isDisabled","clsx","styles.iconContainer","styles.iconContainerDisabled","onMouseDown","undefined","onClick","children","_jsxs","BasicButton","styles.clickableErrorWrapper","type","styles.errorTextContainer","ExclamationTriangleIcon","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","styles.loadingWrapper","ComponentLoadingSpinner","styles.spinner","Typography","BodyBL","styles.loadingLabel","isButtonDisabled","VisuallyHidden","styles.readOnlyClickable","concatIds","styles.readOnlyValueText","styles.readOnlyIconContainer","renderReadOnlyButton","InputGroup","Object","assign","styles.inputGroupWrapper","addon","attributes","position","renderElement"],"mappings":"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"}

package/cjs/masthead/masthead.js.map

@@ -1 +1 @@
-{"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useEffect } from \"react\";\n\nimport { useTheme } from \"../theme\";\n\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const { mode } = useTheme();\n    const isDarkMode = mode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <div\n            className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n            dangerouslySetInnerHTML={createContent()}\n        />\n    );\n};\n\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","mode","useTheme","isDarkMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"4wBAWA,MAiEaA,EAAWC,EAAAA,MAjEE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,aACXC,EAAsB,SAATF,EAKnBG,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFD,EACAI,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACR,IAKJ,MAAME,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,aACIC,UAAWC,EAAAA,QAAKC,EAAAA,QAAgB1B,GAAW2B,kBAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IASJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}
+{"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useEffect } from \"react\";\n\nimport { useTheme } from \"../theme\";\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const { mode } = useTheme();\n    const isDarkMode = mode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <div\n            className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n            dangerouslySetInnerHTML={createContent()}\n        />\n    );\n};\n\n// @catalog\n/**\n * Displays the Singapore Government Design System (SGDS) masthead banner.\n *\n * Use `Masthead` at the top of government digital services to meet the SGDS\n * masthead requirement.\n */\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","mode","useTheme","isDarkMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"4wBAUA,MAwEaA,EAAWC,EAAAA,MAxEE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,aACXC,EAAsB,SAATF,EAKnBG,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFD,EACAI,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACR,IAKJ,MAAME,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,aACIC,UAAWC,EAAAA,QAAKC,EAAAA,QAAgB1B,GAAW2B,kBAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IAgBJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}

package/cjs/menu/menu.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react");require("clsx"),require("../theme/theme-provider/context.js"),require("../typography/typography.js"),require("../card/card.styles_1gh9gs3.css"),require("../markup/markup.js"),require("../modal-v2/index.js"),require("../theme/theme-provider/index.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../popover/popover.styles_ujnf0h.css");var i=require("../popover/popover-trigger.js");require("../popover/popover-inline/popover-inline.styles_bkopnt.css");var n=require("./menu-content.js"),s=require("./menu-item.js"),o=require("./menu-link.js"),u=require("./menu-section.js");const a=n=>{var{children:s,position:o="bottom-start",menuContent:u,"data-testid":a="menu"}=n,p=e.__rest(n,["children","position","menuContent","data-testid"]);return r.jsx(i.PopoverTrigger,Object.assign({position:o,popoverContent:e=>t.cloneElement(u,{overflow:e.overflow,maxHeight:e.maxHeight}),"data-testid":a},p,{children:s}))},p=Object.assign(a,{Content:n.MenuContent,Section:u.MenuSection,Item:s.MenuItem,Link:o.MenuLink});exports.Menu=p,exports.MenuTrigger=a;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react");require("clsx"),require("../theme/theme-provider/context.js"),require("../typography/typography.js"),require("../card/card.styles_1gh9gs3.css"),require("../markup/markup.js"),require("../modal-v2/modal-v2.js"),require("../theme/theme-provider/index.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../popover/popover.styles_ujnf0h.css");var i=require("../popover/popover-trigger.js");require("../popover/popover-inline/popover-inline.styles_bkopnt.css");var n=require("./menu-content.js"),s=require("./menu-item.js"),o=require("./menu-link.js"),u=require("./menu-section.js");const a=n=>{var{children:s,position:o="bottom-start",menuContent:u,"data-testid":a="menu"}=n,p=e.__rest(n,["children","position","menuContent","data-testid"]);return r.jsx(i.PopoverTrigger,Object.assign({position:o,popoverContent:e=>t.cloneElement(u,{overflow:e.overflow,maxHeight:e.maxHeight}),"data-testid":a},p,{children:s}))},p=Object.assign(a,{Content:n.MenuContent,Item:s.MenuItem,Link:o.MenuLink,Section:u.MenuSection});exports.Menu=p,exports.MenuTrigger=a;
 //# sourceMappingURL=menu.js.map

package/cjs/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/menu/menu.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\n\nimport type { PopoverRenderProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { MenuContent } from \"./menu-content\";\nimport { MenuItem } from \"./menu-item\";\nimport { MenuLink } from \"./menu-link\";\nimport { MenuSection } from \"./menu-section\";\nimport type { MenuContentProps, MenuProps } from \"./types\";\n\nexport const MenuTrigger = ({\n    children,\n    position = \"bottom-start\",\n    menuContent,\n    \"data-testid\": testId = \"menu\",\n    ...otherProps\n}: MenuProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <PopoverTrigger\n            position={position}\n            popoverContent={(renderProps: PopoverRenderProps) =>\n                cloneElement<MenuContentProps>(menuContent, {\n                    overflow: renderProps.overflow,\n                    maxHeight: renderProps.maxHeight,\n                })\n            }\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n        </PopoverTrigger>\n    );\n};\n\nexport const Menu = Object.assign(MenuTrigger, {\n    Content: MenuContent,\n    Section: MenuSection,\n    Item: MenuItem,\n    Link: MenuLink,\n});\n"],"names":["MenuTrigger","_a","children","position","menuContent","testId","otherProps","__rest","_jsx","PopoverTrigger","popoverContent","renderProps","cloneElement","overflow","maxHeight","Menu","Object","assign","Content","MenuContent","Section","MenuSection","Item","MenuItem","Link","MenuLink"],"mappings":"kjCAUO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,SACRA,EAAW,eAAcC,YACzBA,EACA,cAAeC,EAAS,QAAMJ,EAC3BK,EAAUC,EAAAA,OAAAN,EALW,qDAUxB,OACIO,MAACC,EAAAA,8BACGN,SAAUA,EACVO,eAAiBC,GACbC,EAAAA,aAA+BR,EAAa,CACxCS,SAAUF,EAAYE,SACtBC,UAAWH,EAAYG,YACzB,cAEOT,GACTC,YAEHJ,IACY,EAIZa,EAAOC,OAAOC,OAAOjB,EAAa,CAC3CkB,QAASC,EAAAA,YACTC,QAASC,EAAAA,YACTC,KAAMC,EAAAA,SACNC,KAAMC,EAAAA"}
+{"version":3,"file":"menu.js","sources":["../../../src/menu/menu.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\n\nimport type { PopoverRenderProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { MenuContent } from \"./menu-content\";\nimport { MenuItem } from \"./menu-item\";\nimport { MenuLink } from \"./menu-link\";\nimport { MenuSection } from \"./menu-section\";\nimport type { MenuContentProps, MenuProps } from \"./types\";\n\n/**\n * Trigger wrapper that anchors a `Menu.Content` panel to its child element.\n *\n * Prefer the `Menu` composite export when building a full menu — it bundles\n * `Menu.Content`, `Menu.Section`, `Menu.Item`, and `Menu.Link` as named\n * sub-components alongside the trigger.\n */\nexport const MenuTrigger = ({\n    children,\n    position = \"bottom-start\",\n    menuContent,\n    \"data-testid\": testId = \"menu\",\n    ...otherProps\n}: MenuProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <PopoverTrigger\n            position={position}\n            popoverContent={(renderProps: PopoverRenderProps) =>\n                cloneElement<MenuContentProps>(menuContent, {\n                    overflow: renderProps.overflow,\n                    maxHeight: renderProps.maxHeight,\n                })\n            }\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n        </PopoverTrigger>\n    );\n};\n\n// @catalog\n/**\n * A popover-anchored menu composed of sections and interactive items.\n *\n * Use `Menu` when a trigger element should open a floating panel of actions or\n * navigation links.\n *\n * Sub-components:\n * - `Menu.Content` — the floating panel that contains menu sections.\n * - `Menu.Item` — a non-anchor interactive list item with a primary label and optional sub-label.\n * - `Menu.Link` — an anchor (`<a>`) list item styled as a menu entry.\n * - `Menu.Section` — a grouping container for `Menu.Item` and `Menu.Link` entries.\n */\nexport const Menu = Object.assign(MenuTrigger, {\n    /** Renders the floating panel that contains menu sections. */\n    Content: MenuContent,\n    /** Renders a non-anchor interactive list item with a primary label and optional sub-label. */\n    Item: MenuItem,\n    /** Renders an anchor (`<a>`) list item styled as a menu entry. */\n    Link: MenuLink,\n    /** Groups related menu entries. */\n    Section: MenuSection,\n});\n"],"names":["MenuTrigger","_a","children","position","menuContent","testId","otherProps","__rest","_jsx","PopoverTrigger","popoverContent","renderProps","cloneElement","overflow","maxHeight","Menu","Object","assign","Content","MenuContent","Item","MenuItem","Link","MenuLink","Section","MenuSection"],"mappings":"qjCAiBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,SACRA,EAAW,eAAcC,YACzBA,EACA,cAAeC,EAAS,QAAMJ,EAC3BK,EAAUC,EAAAA,OAAAN,EALW,qDAUxB,OACIO,MAACC,EAAAA,8BACGN,SAAUA,EACVO,eAAiBC,GACbC,EAAAA,aAA+BR,EAAa,CACxCS,SAAUF,EAAYE,SACtBC,UAAWH,EAAYG,YACzB,cAEOT,GACTC,YAEHJ,IACY,EAiBZa,EAAOC,OAAOC,OAAOjB,EAAa,CAE3CkB,QAASC,EAAAA,YAETC,KAAMC,EAAAA,SAENC,KAAMC,EAAAA,SAENC,QAASC,EAAAA"}

package/cjs/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/modal/index.ts"],"sourcesContent":["import { Modal as Base } from \"./modal\";\nimport { ModalBox as Box } from \"./modal-box\";\n\nexport const Modal = Object.assign(Base, {\n    Box,\n});\n\nexport * from \"./types\";\n"],"names":["Modal","Object","assign","Base","Box"],"mappings":"2EAGaA,EAAQC,OAAOC,OAAOC,QAAM,KACrCC,EAAAA"}
+{"version":3,"file":"index.js","sources":["../../../src/modal/index.ts"],"sourcesContent":["import { Modal as Base } from \"./modal\";\nimport { ModalBox as Box } from \"./modal-box\";\n\n// @catalog\n/**\n * A full-screen overlay modal with a slide animation.\n *\n * Use `Modal` to present content that requires the user's immediate attention\n * or a focused interaction. Use `ModalV2` for built-in scroll handling and improved accessibility.\n *\n * Sub-components:\n * - `Modal.Box` — a styled content box with an optional close button.\n */\nexport const Modal = Object.assign(Base, {\n    /**\n     * A styled content container for use inside `Modal`. Renders an optional\n     * close button and stops click events from propagating to the overlay.\n     */\n    Box,\n});\n\nexport * from \"./types\";\n"],"names":["Modal","Object","assign","Base","Box"],"mappings":"2EAaaA,EAAQC,OAAOC,OAAOC,QAAM,KAKrCC,EAAAA"}

package/cjs/modal/modal-box.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),s=require("react/jsx-runtime"),o=require("@lifesg/react-icons/cross"),r=require("clsx"),t=require("react"),i=require("../shared/clickable-icon/clickable-icon.js"),l=require("./modal-box.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(r);const n=t.forwardRef((function(r,t){var{id:a="modal-box",children:n,onClose:u,showCloseButton:d=!0,className:f}=r,b=e.__rest(r,["id","children","onClose","showCloseButton","className"]);return s.jsxs("div",Object.assign({ref:t,"data-testid":a},b,{onClick:e=>{e.stopPropagation()},className:c.default(l.box,f),children:[d&&s.jsx(i.ClickableIcon,{onClick:u,"data-testid":"close-button",focusHighlight:!1,focusOutline:"browser",className:l.closeButton,children:s.jsx(o.CrossIcon,{})}),n]}))}));n.displayName="Modal.Box",exports.ModalBox=n;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("@lifesg/react-icons/cross"),i=require("clsx"),t=require("react"),l=require("../shared/clickable-icon/clickable-icon.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("./modal-box.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(i);const u=t.forwardRef((function(i,t){var{id:n="modal-box",children:u,onClose:d,showCloseButton:f=!0,className:j,elementRef:m}=i,q=e.__rest(i,["id","children","onClose","showCloseButton","className","elementRef"]);return r.jsxs("div",Object.assign({ref:a.mergeRefs(t,m),"data-testid":n},q,{onClick:e=>{e.stopPropagation()},className:c.default(o.box,j),children:[f&&r.jsx(l.ClickableIcon,{onClick:d,"data-testid":"close-button",focusHighlight:!1,focusOutline:"browser",className:o.closeButton,children:r.jsx(s.CrossIcon,{})}),u]}))}));u.displayName="Modal.Box",exports.ModalBox=u;
 //# sourceMappingURL=modal-box.js.map

package/cjs/modal/modal-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-box.js","sources":["../../../src/modal/modal-box.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport type { NamedExoticComponent } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport * as styles from \"./modal-box.styles\";\nimport type { ModalBoxProps } from \"./types\";\n\nfunction ModalBoxInner(\n    {\n        id = \"modal-box\",\n        children,\n        onClose,\n        showCloseButton = true,\n        className,\n        ...otherProps\n    }: ModalBoxProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCloseButton = () => {\n        return (\n            <ClickableIcon\n                onClick={onClose}\n                data-testid=\"close-button\"\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                className={styles.closeButton}\n            >\n                <CrossIcon />\n            </ClickableIcon>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            data-testid={id}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.box, className)}\n        >\n            {showCloseButton && renderCloseButton()}\n            {children}\n        </div>\n    );\n}\n\nexport const ModalBox = forwardRef<HTMLDivElement, ModalBoxProps>(\n    ModalBoxInner\n);\n\n(ModalBox as NamedExoticComponent).displayName = \"Modal.Box\";\n"],"names":["ModalBox","forwardRef","_a","ref","id","children","onClose","showCloseButton","className","otherProps","__rest","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.box","_jsx","ClickableIcon","focusHighlight","focusOutline","styles.closeButton","CrossIcon","displayName"],"mappings":"mVA2DaA,EAAWC,EAAAA,YAjDxB,SACIC,EAQAC,GARA,IAAAC,GACIA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,EAAIC,UACtBA,GAASN,EACNO,EAAUC,EAAAA,OAAAR,EANjB,2DAkCA,OACIS,OAAA,MAAAC,OAAAC,OAAA,CACIV,IAAKA,EAAG,cACKC,GACTK,EAAU,CACdK,QA1BeC,IACnBA,EAAMC,iBAAiB,EA0BnBR,UAAWS,EAAAA,QAAKC,EAAAA,IAAYV,GAAUH,SAAA,CAErCE,GApBDY,EAAAA,IAACC,EAAAA,cAAa,CACVN,QAASR,EAAO,cACJ,eACZe,gBAAgB,EAChBC,aAAa,UACbd,UAAWe,cAAkBlB,SAE7Bc,EAAAA,IAACK,EAAAA,UAAS,CAAA,KAcbnB,KAGb,IAMCL,EAAkCyB,YAAc"}
+{"version":3,"file":"modal-box.js","sources":["../../../src/modal/modal-box.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport type { NamedExoticComponent } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./modal-box.styles\";\nimport type { ModalBoxProps } from \"./types\";\n\nfunction ModalBoxInner(\n    {\n        id = \"modal-box\",\n        children,\n        onClose,\n        showCloseButton = true,\n        className,\n        elementRef,\n        ...otherProps\n    }: ModalBoxProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCloseButton = () => {\n        return (\n            <ClickableIcon\n                onClick={onClose}\n                data-testid=\"close-button\"\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                className={styles.closeButton}\n            >\n                <CrossIcon />\n            </ClickableIcon>\n        );\n    };\n\n    return (\n        <div\n            ref={mergeRefs(ref, elementRef)}\n            data-testid={id}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.box, className)}\n        >\n            {showCloseButton && renderCloseButton()}\n            {children}\n        </div>\n    );\n}\n\nexport const ModalBox = forwardRef<HTMLDivElement, ModalBoxProps>(\n    ModalBoxInner\n);\n\n(ModalBox as NamedExoticComponent).displayName = \"Modal.Box\";\n"],"names":["ModalBox","forwardRef","_a","ref","id","children","onClose","showCloseButton","className","elementRef","otherProps","__rest","_jsxs","Object","assign","mergeRefs","onClick","event","stopPropagation","clsx","styles.box","_jsx","ClickableIcon","focusHighlight","focusOutline","styles.closeButton","CrossIcon","displayName"],"mappings":"kkBA6DaA,EAAWC,EAAAA,YAlDxB,SACIC,EASAC,OATAC,GACIA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,EAAIC,UACtBA,EAASC,WACTA,GAAUP,EACPQ,EAAUC,EAAAA,OAAAT,EAPjB,wEAmCA,OACIU,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIX,IAAKY,YAAUZ,EAAKM,iBACPL,GACTM,EAAU,CACdM,QA1BeC,IACnBA,EAAMC,iBAAiB,EA0BnBV,UAAWW,UAAKC,EAAAA,IAAYZ,GAAUH,SAAA,CAErCE,GApBDc,EAAAA,IAACC,EAAAA,cAAa,CACVN,QAASV,EAAO,cACJ,eACZiB,gBAAgB,EAChBC,aAAa,UACbhB,UAAWiB,cAAkBpB,SAE7BgB,EAAAA,IAACK,EAAAA,UAAS,CAAA,KAcbrB,KAGb,IAMCL,EAAkC2B,YAAc"}

package/cjs/modal-v2/index.js

@@ -1,2 +1,2 @@
-"use strict";var o=require("./modal-v2.js"),t=require("./slots/card.js"),e=require("./slots/close-button.js"),s=require("./slots/content.js"),r=require("./slots/footer.js");const n=Object.assign(o.ModalV2,{Card:t.Card,CloseButton:e.CloseButton,Content:s.Content,Footer:r.Footer});exports.ModalV2=n;
+"use strict";var r=require("./modal-v2.js");exports.ModalV2=r.ModalV2;
 //# sourceMappingURL=index.js.map

package/cjs/modal-v2/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/modal-v2/index.ts"],"sourcesContent":["import { ModalV2 as Base } from \"./modal-v2\";\nimport { Card, CloseButton, Content, Footer } from \"./slots\";\n\nexport const ModalV2 = Object.assign(Base, {\n    Card,\n    CloseButton,\n    Content,\n    Footer,\n});\n\nexport * from \"./types\";\n"],"names":["ModalV2","Object","assign","Base","Card","CloseButton","Content","Footer"],"mappings":"mLAGaA,EAAUC,OAAOC,OAAOC,UAAM,MACvCC,EAAAA,iBACAC,EAAAA,oBACAC,EAAAA,eACAC,EAAAA"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/cjs/modal-v2/modal-v2.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@floating-ui/react"),i=require("clsx"),t=require("react"),l=require("../overlay/overlay.js"),s=require("../shared/hooks/useViewport.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var n=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../util/use-event.js"),d=require("./modal-context.js"),u=require("./modal-v2.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=c(i),v=c(t);exports.ModalV2=i=>{var{id:c,show:b,onClose:h,animationFrom:j="bottom",children:y,enableOverlayClick:q=!0,rootComponentId:x,zIndex:p,onOverlayClick:f,dismissKeyboardOnShow:g=!0,"data-testid":C="modal","aria-label":k,"aria-labelledby":O,"aria-describedby":F,disableInitialFocus:I=!1,className:w}=i,N=e.__rest(i,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const S=o.useEvent((()=>{var e,r;g&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))})),{verticalHeight:M}=s.useViewport({enabled:b,onBeforeStart:S}),_=t.useRef(null),z=t.useRef(null),E=y&&v.default.cloneElement(y,{ref:_});n.useApplyStyle(z,{[u.tokens.container.verticalHeight]:null==M?null:`${M}px`});const{refs:P,context:R}=a.useFloating({open:b,onOpenChange:e=>{e||null==h||h()}}),{isMounted:V,status:H}=a.useTransitionStatus(R,{duration:300}),K=a.useDismiss(R,{outsidePress:!1,enabled:!!h}),{getFloatingProps:$}=a.useInteractions([K]);return r.jsx(l.Overlay,{"data-testid":`${C}-overlay`,show:b,enableOverlayClick:q,onOverlayClick:f,id:c,rootId:x,containerRef:_,zIndex:p,children:r.jsx("div",Object.assign({ref:z,"data-testid":C,"data-status":H,"data-animation-from":j},N,{className:m.default(u.container,w),children:r.jsx(d.ModalContext.Provider,{value:{onClose:h},children:V&&r.jsx(a.FloatingFocusManager,{context:R,initialFocus:I?-1:P.floating,children:r.jsx("div",{className:u.scrollContainer,children:r.jsx("div",Object.assign({ref:P.setFloating},$(),{role:"dialog","aria-label":k,"aria-labelledby":O,"aria-describedby":F,className:u.modalContainer,children:E}))})})})}))})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@floating-ui/react"),a=require("clsx"),i=require("react"),s=require("../overlay/overlay.js"),l=require("../shared/hooks/useViewport.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var o=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("../util/use-event.js"),u=require("./modal-context.js"),d=require("./modal-v2.styles.js"),c=require("./slots/card.js"),m=require("./slots/close-button.js"),j=require("./slots/content.js"),v=require("./slots/footer.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=b(a),q=b(i);const y=Object.assign((a=>{var{id:c,show:m,onClose:j,animationFrom:v="bottom",children:b,enableOverlayClick:y=!0,rootComponentId:C,zIndex:x,onOverlayClick:f,dismissKeyboardOnShow:p=!0,"data-testid":g="modal","aria-label":O,"aria-labelledby":k,"aria-describedby":F,disableInitialFocus:I=!1,className:w}=a,N=e.__rest(a,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const S=n.useEvent((()=>{var e,r;p&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))})),{verticalHeight:M}=l.useViewport({enabled:m,onBeforeStart:S}),_=i.useRef(null),z=i.useRef(null),B=b&&q.default.cloneElement(b,{ref:_});o.useApplyStyle(z,{[d.tokens.container.verticalHeight]:null==M?null:`${M}px`});const{refs:E,context:P}=t.useFloating({open:m,onOpenChange:e=>{e||null==j||j()}}),{isMounted:R,status:V}=t.useTransitionStatus(P,{duration:300}),H=t.useDismiss(P,{outsidePress:!1,enabled:!!j}),{getFloatingProps:K}=t.useInteractions([H]);return r.jsx(s.Overlay,{"data-testid":`${g}-overlay`,show:m,enableOverlayClick:y,onOverlayClick:f,id:c,rootId:C,containerRef:_,zIndex:x,children:r.jsx("div",Object.assign({ref:z,"data-testid":g,"data-status":V,"data-animation-from":v},N,{className:h.default(d.container,w),children:r.jsx(u.ModalContext.Provider,{value:{onClose:j},children:R&&r.jsx(t.FloatingFocusManager,{context:P,initialFocus:I?-1:E.floating,children:r.jsx("div",{className:d.scrollContainer,children:r.jsx("div",Object.assign({ref:E.setFloating},K(),{role:"dialog","aria-label":O,"aria-labelledby":k,"aria-describedby":F,className:d.modalContainer,children:B}))})})})}))})}),{Card:c.Card,CloseButton:m.CloseButton,Content:j.Content,Footer:v.Footer});exports.ModalV2=y;
 //# sourceMappingURL=modal-v2.js.map