@lifesg/react-design-system 4.0.0-alpha.4 → 4.0.0-alpha.6

package/cjs/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../../src/accordion/accordion.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport * as styles from \"./accordion.styles\";\nimport { AccordionContext } from \"./accordion-context\";\nimport { AccordionItem } from \"./accordion-item\";\nimport type { AccordionProps } from \"./types\";\n\nconst AccordionBase = ({\n    children,\n    title,\n    enableExpandAll = true,\n    initialDisplay = \"expand-all\",\n    showTitleInMobile = false,\n    id,\n    \"data-testid\": testId,\n    className,\n    headingLevel = 2,\n    onExpandCollapseChange,\n}: AccordionProps): JSX.Element => {\n    const [expandAll, setExpandAll] = useState<boolean>(\n        initialDisplay === \"expand-all\"\n    );\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const [itemState, setItemState] = useState<Record<string, boolean>>({});\n\n    useEffect(() => {\n        setHasFirstLoad(true);\n    }, []);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            onExpandCollapseChange?.(expandAll);\n        }\n    }, [expandAll, hasFirstLoad]);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            const itemStates = Object.values(itemState);\n            if (itemStates.length > 0) {\n                const allExpanded = itemStates.every((state) => state === true);\n                const allCollapsed = itemStates.every(\n                    (state) => state === false\n                );\n\n                if (allExpanded && !expandAll) {\n                    setExpandAll(true);\n                } else if (allCollapsed && expandAll) {\n                    setExpandAll(false);\n                }\n            }\n        }\n    }, [itemState, expandAll, hasFirstLoad]);\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => {\n            const expandValue = !prevExpandValue;\n\n            const updatedChildState = Object.keys(itemState).reduce(\n                (acc, key) => {\n                    acc[key] = expandValue;\n                    return acc;\n                },\n                {} as typeof itemState\n            );\n\n            setItemState(updatedChildState);\n            return expandValue;\n        });\n    };\n\n    const onItemStateChange = (id: string, isExpanded: boolean) => {\n        setItemState((prev) => ({ ...prev, [id]: isExpanded }));\n    };\n\n    const onItemDeregister = (id: string) => {\n        setItemState((prev) => {\n            const newState = { ...prev };\n            delete newState[id];\n            return newState;\n        });\n    };\n\n    const renderCollapseExpandAll = () => {\n        return (\n            <Button\n                className={styles.expandCollapseLink}\n                data-testid=\"accordion-expand-collapse-button\"\n                onClick={handleExpandCollapseClick}\n                styleType=\"link\"\n                type=\"button\"\n                sizeType=\"small\"\n            >\n                {expandAll ? \"Hide all\" : \"Show all\"}\n            </Button>\n        );\n    };\n\n    const renderTitleWrapper = () => {\n        if (!title && !enableExpandAll) {\n            return null;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.titleWrapper,\n                    !showTitleInMobile &&\n                        !enableExpandAll &&\n                        styles.titleWrapperHidden\n                )}\n            >\n                {title && (\n                    <h2\n                        className={clsx(\n                            styles.title,\n                            !showTitleInMobile && styles.titleHidden\n                        )}\n                        data-testid=\"accordion-title\"\n                        aria-level={headingLevel}\n                    >\n                        {title}\n                    </h2>\n                )}\n                {enableExpandAll && renderCollapseExpandAll()}\n            </div>\n        );\n    };\n\n    return (\n        <AccordionContext.Provider\n            value={{\n                expandAll,\n                itemHeadingLevel: headingLevel\n                    ? title\n                        ? headingLevel + 1\n                        : headingLevel\n                    : undefined,\n                onItemStateChange,\n                onItemDeregister,\n                itemState,\n            }}\n        >\n            <div\n                id={id}\n                data-testid={testId}\n                className={clsx(styles.accordionWrapper, className)}\n            >\n                {renderTitleWrapper()}\n                {children}\n            </div>\n        </AccordionContext.Provider>\n    );\n};\n\nexport const Accordion = Object.assign(AccordionBase, {\n    Item: AccordionItem,\n});\n"],"names":["Accordion","Object","assign","children","title","enableExpandAll","initialDisplay","showTitleInMobile","id","testId","className","headingLevel","onExpandCollapseChange","expandAll","setExpandAll","useState","hasFirstLoad","setHasFirstLoad","itemState","setItemState","useEffect","itemStates","values","length","allExpanded","every","state","allCollapsed","handleExpandCollapseClick","event","preventDefault","prevExpandValue","expandValue","updatedChildState","keys","reduce","acc","key","_jsx","AccordionContext","Provider","value","itemHeadingLevel","undefined","onItemStateChange","isExpanded","prev","onItemDeregister","newState","_jsxs","clsx","styles.accordionWrapper","styles.titleWrapper","styles.titleWrapperHidden","styles.title","styles.titleHidden","Button","styles.expandCollapseLink","onClick","styleType","type","sizeType","Item","AccordionItem"],"mappings":"iTAUA,MAoJaA,EAAYC,OAAOC,QApJV,EAClBC,WACAC,QACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EAAAA,SACX,eAAnBT,IAEGU,EAAcC,GAAmBF,EAAAA,UAAkB,IACnDG,EAAWC,GAAgBJ,EAAAA,SAAkC,CAAA,GAEpEK,EAAAA,WAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,EAAAA,WAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,EAAAA,WAAU,KACN,GAAIJ,EAAc,CACd,MAAMK,EAAapB,OAAOqB,OAAOJ,GACjC,GAAIG,EAAWE,OAAS,EAAG,CACvB,MAAMC,EAAcH,EAAWI,OAAOC,IAAoB,IAAVA,IAC1CC,EAAeN,EAAWI,OAC3BC,IAAoB,IAAVA,IAGXF,IAAgBX,EAChBC,GAAa,GACNa,GAAgBd,GACvBC,GAAa,EAErB,CACJ,IACD,CAACI,EAAWL,EAAWG,IAE1B,MAAMY,EAA6BC,IAC/BA,EAAMC,iBACNhB,GAAciB,IACV,MAAMC,GAAeD,EAEfE,EAAoBhC,OAAOiC,KAAKhB,GAAWiB,QAC7C,CAACC,EAAKC,KACFD,EAAIC,GAAOL,EACJI,IAEX,CAAA,GAIJ,OADAjB,EAAac,GACND,CAAW,GACpB,EA6DN,OACIM,MAACC,EAAAA,iBAAiBC,SAAQ,CACtBC,MAAO,CACH5B,YACA6B,iBAAkB/B,EACZP,EACIO,EAAe,EACfA,OACJgC,EACNC,kBAnEc,CAACpC,EAAYqC,KACnC1B,GAAc2B,GAAS7C,OAAAC,OAAAD,OAAAC,OAAA,GAAM4C,GAAI,CAAEtC,CAACA,GAAKqC,KAAc,EAmE/CE,iBAhEcvC,IACtBW,GAAc2B,IACV,MAAME,EAAQ/C,OAAAC,OAAA,CAAA,EAAQ4C,GAEtB,cADOE,EAASxC,GACTwC,CAAQ,GACjB,EA4DM9B,aACHf,SAED8C,EAAAA,KAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAAA,QAAKC,mBAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAAA,KAAA,MAAA,CACIvC,UAAWwC,EAAAA,QACPE,EAAAA,cACC7C,IACIF,GACDgD,EAAAA,oBACPlD,SAAA,CAEAC,GACGkC,EAAAA,IAAA,KAAA,CACI5B,UAAWwC,EAAAA,QACPI,EAAAA,OACC/C,GAAqBgD,EAAAA,aACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAAAA,IAACkB,EAAAA,OAAM,CACH9C,UAAW+C,EAAAA,mBAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,GAIkB,CAClD2D,KAAMC,EAAAA"}
+{"version":3,"file":"accordion.js","sources":["../../../src/accordion/accordion.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport * as styles from \"./accordion.styles\";\nimport { AccordionContext } from \"./accordion-context\";\nimport { AccordionItem } from \"./accordion-item\";\nimport type { AccordionProps } from \"./types\";\n\nconst AccordionBase = ({\n    children,\n    title,\n    enableExpandAll = true,\n    initialDisplay = \"expand-all\",\n    showTitleInMobile = false,\n    id,\n    \"data-testid\": testId,\n    className,\n    headingLevel = 2,\n    onExpandCollapseChange,\n}: AccordionProps): JSX.Element => {\n    const [expandAll, setExpandAll] = useState<boolean>(\n        initialDisplay === \"expand-all\"\n    );\n    const [hasFirstLoad, setHasFirstLoad] = useState<boolean>(false);\n    const [itemState, setItemState] = useState<Record<string, boolean>>({});\n\n    useEffect(() => {\n        setHasFirstLoad(true);\n    }, []);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            onExpandCollapseChange?.(expandAll);\n        }\n    }, [expandAll, hasFirstLoad]);\n\n    useEffect(() => {\n        if (hasFirstLoad) {\n            const itemStates = Object.values(itemState);\n            if (itemStates.length > 0) {\n                const allExpanded = itemStates.every((state) => state === true);\n                const allCollapsed = itemStates.every(\n                    (state) => state === false\n                );\n\n                if (allExpanded && !expandAll) {\n                    setExpandAll(true);\n                } else if (allCollapsed && expandAll) {\n                    setExpandAll(false);\n                }\n            }\n        }\n    }, [itemState, expandAll, hasFirstLoad]);\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => {\n            const expandValue = !prevExpandValue;\n\n            const updatedChildState = Object.keys(itemState).reduce(\n                (acc, key) => {\n                    acc[key] = expandValue;\n                    return acc;\n                },\n                {} as typeof itemState\n            );\n\n            setItemState(updatedChildState);\n            return expandValue;\n        });\n    };\n\n    const onItemStateChange = (id: string, isExpanded: boolean) => {\n        setItemState((prev) => ({ ...prev, [id]: isExpanded }));\n    };\n\n    const onItemDeregister = (id: string) => {\n        setItemState((prev) => {\n            const newState = { ...prev };\n            delete newState[id];\n            return newState;\n        });\n    };\n\n    const renderCollapseExpandAll = () => {\n        return (\n            <Button\n                className={styles.expandCollapseLink}\n                data-testid=\"accordion-expand-collapse-button\"\n                onClick={handleExpandCollapseClick}\n                styleType=\"link\"\n                type=\"button\"\n                sizeType=\"small\"\n            >\n                {expandAll ? \"Hide all\" : \"Show all\"}\n            </Button>\n        );\n    };\n\n    const renderTitleWrapper = () => {\n        if (!title && !enableExpandAll) {\n            return null;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.titleWrapper,\n                    !showTitleInMobile &&\n                        !enableExpandAll &&\n                        styles.titleWrapperHidden\n                )}\n            >\n                {title && (\n                    <h2\n                        className={clsx(\n                            styles.title,\n                            !showTitleInMobile && styles.titleHidden\n                        )}\n                        data-testid=\"accordion-title\"\n                        aria-level={headingLevel}\n                    >\n                        {title}\n                    </h2>\n                )}\n                {enableExpandAll && renderCollapseExpandAll()}\n            </div>\n        );\n    };\n\n    return (\n        <AccordionContext.Provider\n            value={{\n                expandAll,\n                itemHeadingLevel: headingLevel\n                    ? title\n                        ? headingLevel + 1\n                        : headingLevel\n                    : undefined,\n                onItemStateChange,\n                onItemDeregister,\n                itemState,\n            }}\n        >\n            <div\n                id={id}\n                data-testid={testId}\n                className={clsx(styles.accordionWrapper, className)}\n            >\n                {renderTitleWrapper()}\n                {children}\n            </div>\n        </AccordionContext.Provider>\n    );\n};\n\n/**\n * A vertically stacked set of collapsible content panels.\n *\n * Use `Accordion` to organise related content into independently expandable\n * sections with shared expand/collapse state. The container synchronises item\n * states and maintains correct heading-level hierarchy.\n *\n * Sub-components:\n * - `Accordion.Item` — a single collapsible panel with an imperative ref handle.\n */\nexport const Accordion = Object.assign(AccordionBase, {\n    /**\n     * Renders an individual collapsible section within an `Accordion`.\n     *\n     * Each item has a clickable header that toggles its content panel. The expanded\n     * state can be individually controlled via the `expanded` prop, or left to the\n     * parent `Accordion` to manage through its \"Show all\" / \"Hide all\" mechanism.\n     * Exposes an imperative ref handle (`AccordionItemHandle`) for programmatic\n     * expand/collapse control.\n     */\n    Item: AccordionItem,\n});\n"],"names":["Accordion","Object","assign","children","title","enableExpandAll","initialDisplay","showTitleInMobile","id","testId","className","headingLevel","onExpandCollapseChange","expandAll","setExpandAll","useState","hasFirstLoad","setHasFirstLoad","itemState","setItemState","useEffect","itemStates","values","length","allExpanded","every","state","allCollapsed","handleExpandCollapseClick","event","preventDefault","prevExpandValue","expandValue","updatedChildState","keys","reduce","acc","key","_jsx","AccordionContext","Provider","value","itemHeadingLevel","undefined","onItemStateChange","isExpanded","prev","onItemDeregister","newState","_jsxs","clsx","styles.accordionWrapper","styles.titleWrapper","styles.titleWrapperHidden","styles.title","styles.titleHidden","Button","styles.expandCollapseLink","onClick","styleType","type","sizeType","Item","AccordionItem"],"mappings":"iTAUA,MA8JaA,EAAYC,OAAOC,QA9JV,EAClBC,WACAC,QACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EAAAA,SACX,eAAnBT,IAEGU,EAAcC,GAAmBF,EAAAA,UAAkB,IACnDG,EAAWC,GAAgBJ,EAAAA,SAAkC,CAAA,GAEpEK,EAAAA,WAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,EAAAA,WAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,EAAAA,WAAU,KACN,GAAIJ,EAAc,CACd,MAAMK,EAAapB,OAAOqB,OAAOJ,GACjC,GAAIG,EAAWE,OAAS,EAAG,CACvB,MAAMC,EAAcH,EAAWI,OAAOC,IAAoB,IAAVA,IAC1CC,EAAeN,EAAWI,OAC3BC,IAAoB,IAAVA,IAGXF,IAAgBX,EAChBC,GAAa,GACNa,GAAgBd,GACvBC,GAAa,EAErB,CACJ,IACD,CAACI,EAAWL,EAAWG,IAE1B,MAAMY,EAA6BC,IAC/BA,EAAMC,iBACNhB,GAAciB,IACV,MAAMC,GAAeD,EAEfE,EAAoBhC,OAAOiC,KAAKhB,GAAWiB,QAC7C,CAACC,EAAKC,KACFD,EAAIC,GAAOL,EACJI,IAEX,CAAA,GAIJ,OADAjB,EAAac,GACND,CAAW,GACpB,EA6DN,OACIM,MAACC,EAAAA,iBAAiBC,SAAQ,CACtBC,MAAO,CACH5B,YACA6B,iBAAkB/B,EACZP,EACIO,EAAe,EACfA,OACJgC,EACNC,kBAnEc,CAACpC,EAAYqC,KACnC1B,GAAc2B,GAAS7C,OAAAC,OAAAD,OAAAC,OAAA,GAAM4C,GAAI,CAAEtC,CAACA,GAAKqC,KAAc,EAmE/CE,iBAhEcvC,IACtBW,GAAc2B,IACV,MAAME,EAAQ/C,OAAAC,OAAA,CAAA,EAAQ4C,GAEtB,cADOE,EAASxC,GACTwC,CAAQ,GACjB,EA4DM9B,aACHf,SAED8C,EAAAA,KAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAAA,QAAKC,mBAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAAA,KAAA,MAAA,CACIvC,UAAWwC,EAAAA,QACPE,EAAAA,cACC7C,IACIF,GACDgD,EAAAA,oBACPlD,SAAA,CAEAC,GACGkC,EAAAA,IAAA,KAAA,CACI5B,UAAWwC,EAAAA,QACPI,EAAAA,OACC/C,GAAqBgD,EAAAA,aACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAAAA,IAACkB,EAAAA,OAAM,CACH9C,UAAW+C,EAAAA,mBAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,GAckB,CAUlD2D,KAAMC,EAAAA"}

package/cjs/accordion/accordion.styles_bzrfrs.css

@@ -1,6 +1,6 @@
-.a1tkz57u{width:100%;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+@layer fds{.a1tkz57u{width:100%;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
 .txz4s1p{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding-bottom:var(--fds-spacing-16);}
 :where(body.fds-breakpoint-sm-max) .t1pllc04{display:none;}
 .texr0v4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-flex:1;-ms-flex:1;flex:1;font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .texr0v4{text-align:left;}
 :where(body.fds-breakpoint-sm-max) .t8054ua{display:none;visibility:hidden;}
-.e1e1ok07{margin:calc(var(--fds-spacing-16) * -1);margin-left:0px;white-space:nowrap;}
+.e1e1ok07{margin:calc(var(--fds-spacing-16) * -1);margin-left:0px;white-space:nowrap;}}

package/cjs/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../src/alert/alert.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Markup } from \"../markup\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./alert.styles\";\nimport type { AlertProps } from \"./types\";\n\nconst TYPE_CLASS_MAP = {\n    error: {\n        wrapperTypeClass: styles.wrapperError,\n        iconColorClass: styles.alertIconError,\n    },\n    success: {\n        wrapperTypeClass: styles.wrapperSuccess,\n        iconColorClass: styles.alertIconSuccess,\n    },\n    warning: {\n        wrapperTypeClass: styles.wrapperWarning,\n        iconColorClass: styles.alertIconWarning,\n    },\n    info: {\n        wrapperTypeClass: styles.wrapperInfo,\n        iconColorClass: styles.alertIconInfo,\n    },\n    description: {\n        wrapperTypeClass: styles.wrapperDescription,\n        iconColorClass: styles.alertIconDescription,\n    },\n};\n\nexport const Alert = ({\n    type,\n    className,\n    children,\n    actionLink,\n    actionLinkIcon,\n    sizeType = \"default\",\n    showIcon = false,\n    customIcon,\n    maxCollapsedHeight,\n    role,\n    ...otherProps\n}: AlertProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n    const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n    const { height: contentHeight, ref: contentRef } =\n        useResizeDetector<HTMLDivElement>();\n    const contentId = useId();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isCollapsed = isContentOutsideCollapsibleZone();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const getAlertLabel = () => {\n        switch (type) {\n            case \"success\":\n                return \"Success\";\n            case \"warning\":\n                return \"Warning\";\n            case \"error\":\n                return \"Error\";\n            case \"info\":\n                return \"Information\";\n            case \"description\":\n                return \"Description\";\n            default:\n                return \"Alert\";\n        }\n    };\n\n    const setCollapsedState = useCallback(() => {\n        setShowHiddenContent(!maxCollapsedHeight);\n        setRenderShowMore(isContentOutsideCollapsibleZone());\n    }, [maxCollapsedHeight, contentHeight]);\n\n    function isContentOutsideCollapsibleZone() {\n        if (contentHeight && maxCollapsedHeight) {\n            return contentHeight > maxCollapsedHeight;\n        }\n        return false;\n    }\n\n    const isInert = () => {\n        return !!maxCollapsedHeight && !showHiddenContent;\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        setCollapsedState();\n    }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.maxCollapsedHeight]:\n            !showHiddenContent && isCollapsed && maxCollapsedHeight\n                ? `${maxCollapsedHeight}px`\n                : null,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderShowMoreButton = () => (\n        <button\n            className={clsx(\n                styles.showMoreButton,\n                sizeType === \"small\"\n                    ? styles.showMoreButtonSmall\n                    : styles.showMoreButtonDefault\n            )}\n            type=\"button\"\n            aria-expanded={showHiddenContent}\n            aria-controls={contentId}\n            onClick={() => setShowHiddenContent(!showHiddenContent)}\n        >\n            Show {showHiddenContent ? \"less\" : \"more\"}\n            <ChevronDownIcon\n                className={clsx(\n                    styles.chevronIcon,\n                    showHiddenContent\n                        ? styles.chevronIconExpanded\n                        : styles.chevronIconCollapsed\n                )}\n            />\n        </button>\n    );\n\n    const renderLinkType = () => {\n        if (actionLinkIcon) return actionLinkIcon;\n        return <ArrowRightIcon />;\n    };\n\n    const renderLink = () => {\n        if (!actionLink) return null;\n\n        return (\n            <Typography.LinkSM\n                data-testid=\"action-link\"\n                className={clsx(\n                    styles.actionLinkText,\n                    sizeType === \"small\"\n                        ? styles.actionLinkTextSmall\n                        : styles.actionLinkTextDefault\n                )}\n                underlineStyle=\"none\"\n                {...actionLink}\n            >\n                {actionLink.children}\n                {renderLinkType()}\n            </Typography.LinkSM>\n        );\n    };\n\n    const renderIcon = () => {\n        if (type && customIcon) return customIcon;\n        switch (type) {\n            case \"success\":\n                return <TickCircleFillIcon aria-hidden />;\n            case \"warning\":\n                return <ExclamationTriangleFillIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"info\":\n                return <ICircleFillIcon aria-hidden />;\n            case \"description\":\n                return <ICircleFillIcon aria-hidden />;\n            default:\n                return null;\n        }\n    };\n\n    const renderContent = () => {\n        return (\n            <div\n                id={contentId}\n                className={clsx(\n                    styles.textWrapperContainer,\n                    showHiddenContent &&\n                        actionLink &&\n                        styles.textWrapperContainerShowMoreWithLink,\n                    !showHiddenContent &&\n                        isCollapsed &&\n                        styles.textWrapperContainerCollapsed\n                )}\n                inert={inertValue(isInert())}\n                ref={containerRef}\n            >\n                <Markup\n                    ref={contentRef}\n                    className={styles.textWrapper}\n                    baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n                >\n                    {children}\n                </Markup>\n                {renderLink()}\n            </div>\n        );\n    };\n\n    const {\n        wrapperTypeClass = styles.wrapperWarning,\n        iconColorClass = styles.alertIconWarning,\n    } = TYPE_CLASS_MAP[type] || {};\n\n    return (\n        <div\n            className={clsx(styles.wrapper, wrapperTypeClass, className)}\n            aria-label={`${getAlertLabel()}`}\n            data-testid={otherProps[\"data-testid\"]}\n            role={role}\n        >\n            {showIcon && (\n                <div\n                    className={clsx(\n                        styles.alertIconWrapper,\n                        sizeType === \"small\"\n                            ? styles.alertIconWrapperSmall\n                            : styles.alertIconWrapperDefault,\n                        iconColorClass\n                    )}\n                >\n                    {renderIcon()}\n                </div>\n            )}\n            {/* \n                CSS-BASED TAB ORDER IMPLEMENTATION:\n                - DOM order: button → link → content (natural tab order)\n                - Visual order: content → button (via CSS order property)\n            */}\n            <div className={styles.contentContainer}>\n                {renderShowMore && renderShowMoreButton()}\n                {renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","useId","containerRef","useRef","isCollapsed","isContentOutsideCollapsibleZone","setCollapsedState","useCallback","useEffect","useApplyStyle","styles.tokens","_jsxs","clsx","styles.wrapper","getAlertLabel","_jsx","styles.alertIconWrapper","styles.alertIconWrapperSmall","styles.alertIconWrapperDefault","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","styles.contentContainer","styles.showMoreButton","styles.showMoreButtonSmall","styles.showMoreButtonDefault","onClick","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","styles.chevronIconCollapsed","id","styles.textWrapperContainer","styles.textWrapperContainerShowMoreWithLink","styles.textWrapperContainerCollapsed","inert","inertValue","Markup","styles.textWrapper","baseTextSize","Typography","LinkSM","Object","assign","styles.actionLinkText","styles.actionLinkTextSmall","styles.actionLinkTextDefault","underlineStyle","ArrowRightIcon"],"mappings":"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"}
+{"version":3,"file":"alert.js","sources":["../../../src/alert/alert.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Markup } from \"../markup\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./alert.styles\";\nimport type { AlertProps } from \"./types\";\n\nconst TYPE_CLASS_MAP = {\n    error: {\n        wrapperTypeClass: styles.wrapperError,\n        iconColorClass: styles.alertIconError,\n    },\n    success: {\n        wrapperTypeClass: styles.wrapperSuccess,\n        iconColorClass: styles.alertIconSuccess,\n    },\n    warning: {\n        wrapperTypeClass: styles.wrapperWarning,\n        iconColorClass: styles.alertIconWarning,\n    },\n    info: {\n        wrapperTypeClass: styles.wrapperInfo,\n        iconColorClass: styles.alertIconInfo,\n    },\n    description: {\n        wrapperTypeClass: styles.wrapperDescription,\n        iconColorClass: styles.alertIconDescription,\n    },\n};\n\n/**\n * Displays an inline contextual banner with a severity-coded message.\n *\n * Use `Alert` to surface feedback, status, or supplementary information without\n * interrupting the user's workflow. Supports five severity tones, an optional\n * icon, a call-to-action link, and a collapsible content area for lengthy\n * messages.\n */\nexport const Alert = ({\n    type,\n    className,\n    children,\n    actionLink,\n    actionLinkIcon,\n    sizeType = \"default\",\n    showIcon = false,\n    customIcon,\n    maxCollapsedHeight,\n    role,\n    ...otherProps\n}: AlertProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n    const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n    const { height: contentHeight, ref: contentRef } =\n        useResizeDetector<HTMLDivElement>();\n    const contentId = useId();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const isCollapsed = isContentOutsideCollapsibleZone();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const getAlertLabel = () => {\n        switch (type) {\n            case \"success\":\n                return \"Success\";\n            case \"warning\":\n                return \"Warning\";\n            case \"error\":\n                return \"Error\";\n            case \"info\":\n                return \"Information\";\n            case \"description\":\n                return \"Description\";\n            default:\n                return \"Alert\";\n        }\n    };\n\n    const setCollapsedState = useCallback(() => {\n        setShowHiddenContent(!maxCollapsedHeight);\n        setRenderShowMore(isContentOutsideCollapsibleZone());\n    }, [maxCollapsedHeight, contentHeight]);\n\n    function isContentOutsideCollapsibleZone() {\n        if (contentHeight && maxCollapsedHeight) {\n            return contentHeight > maxCollapsedHeight;\n        }\n        return false;\n    }\n\n    const isInert = () => {\n        return !!maxCollapsedHeight && !showHiddenContent;\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        setCollapsedState();\n    }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.maxCollapsedHeight]:\n            !showHiddenContent && isCollapsed && maxCollapsedHeight\n                ? `${maxCollapsedHeight}px`\n                : null,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderShowMoreButton = () => (\n        <button\n            className={clsx(\n                styles.showMoreButton,\n                sizeType === \"small\"\n                    ? styles.showMoreButtonSmall\n                    : styles.showMoreButtonDefault\n            )}\n            type=\"button\"\n            aria-expanded={showHiddenContent}\n            aria-controls={contentId}\n            onClick={() => setShowHiddenContent(!showHiddenContent)}\n        >\n            Show {showHiddenContent ? \"less\" : \"more\"}\n            <ChevronDownIcon\n                className={clsx(\n                    styles.chevronIcon,\n                    showHiddenContent\n                        ? styles.chevronIconExpanded\n                        : styles.chevronIconCollapsed\n                )}\n            />\n        </button>\n    );\n\n    const renderLinkType = () => {\n        if (actionLinkIcon) return actionLinkIcon;\n        return <ArrowRightIcon />;\n    };\n\n    const renderLink = () => {\n        if (!actionLink) return null;\n\n        return (\n            <Typography.LinkSM\n                data-testid=\"action-link\"\n                className={clsx(\n                    styles.actionLinkText,\n                    sizeType === \"small\"\n                        ? styles.actionLinkTextSmall\n                        : styles.actionLinkTextDefault\n                )}\n                underlineStyle=\"none\"\n                {...actionLink}\n            >\n                {actionLink.children}\n                {renderLinkType()}\n            </Typography.LinkSM>\n        );\n    };\n\n    const renderIcon = () => {\n        if (type && customIcon) return customIcon;\n        switch (type) {\n            case \"success\":\n                return <TickCircleFillIcon aria-hidden />;\n            case \"warning\":\n                return <ExclamationTriangleFillIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"info\":\n                return <ICircleFillIcon aria-hidden />;\n            case \"description\":\n                return <ICircleFillIcon aria-hidden />;\n            default:\n                return null;\n        }\n    };\n\n    const renderContent = () => {\n        return (\n            <div\n                id={contentId}\n                className={clsx(\n                    styles.textWrapperContainer,\n                    showHiddenContent &&\n                        actionLink &&\n                        styles.textWrapperContainerShowMoreWithLink,\n                    !showHiddenContent &&\n                        isCollapsed &&\n                        styles.textWrapperContainerCollapsed\n                )}\n                inert={inertValue(isInert())}\n                ref={containerRef}\n            >\n                <Markup\n                    ref={contentRef}\n                    className={styles.textWrapper}\n                    baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n                >\n                    {children}\n                </Markup>\n                {renderLink()}\n            </div>\n        );\n    };\n\n    const {\n        wrapperTypeClass = styles.wrapperWarning,\n        iconColorClass = styles.alertIconWarning,\n    } = TYPE_CLASS_MAP[type] || {};\n\n    return (\n        <div\n            className={clsx(styles.wrapper, wrapperTypeClass, className)}\n            aria-label={`${getAlertLabel()}`}\n            data-testid={otherProps[\"data-testid\"]}\n            role={role}\n        >\n            {showIcon && (\n                <div\n                    className={clsx(\n                        styles.alertIconWrapper,\n                        sizeType === \"small\"\n                            ? styles.alertIconWrapperSmall\n                            : styles.alertIconWrapperDefault,\n                        iconColorClass\n                    )}\n                >\n                    {renderIcon()}\n                </div>\n            )}\n            {/* \n                CSS-BASED TAB ORDER IMPLEMENTATION:\n                - DOM order: button → link → content (natural tab order)\n                - Visual order: content → button (via CSS order property)\n            */}\n            <div className={styles.contentContainer}>\n                {renderShowMore && renderShowMoreButton()}\n                {renderContent()}\n            </div>\n        </div>\n    );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","useId","containerRef","useRef","isCollapsed","isContentOutsideCollapsibleZone","setCollapsedState","useCallback","useEffect","useApplyStyle","styles.tokens","_jsxs","clsx","styles.wrapper","getAlertLabel","_jsx","styles.alertIconWrapper","styles.alertIconWrapperSmall","styles.alertIconWrapperDefault","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","styles.contentContainer","styles.showMoreButton","styles.showMoreButtonSmall","styles.showMoreButtonDefault","onClick","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","styles.chevronIconCollapsed","id","styles.textWrapperContainer","styles.textWrapperContainerShowMoreWithLink","styles.textWrapperContainerCollapsed","inert","inertValue","Markup","styles.textWrapper","baseTextSize","Typography","LinkSM","Object","assign","styles.actionLinkText","styles.actionLinkTextSmall","styles.actionLinkTextDefault","underlineStyle","ArrowRightIcon"],"mappings":"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"}

package/cjs/alert/alert.styles_patwo2.css

@@ -1,4 +1,4 @@
-.wa04j5f{padding:var(--fds-spacing-8) var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-left:var(--fds-border-width-020) var(--fds-border-style-solid);}
+@layer fds{.wa04j5f{padding:var(--fds-spacing-8) var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-left:var(--fds-border-width-020) var(--fds-border-style-solid);}
 .we966c0{background:var(--fds-colour-bg-error);border-left-color:var(--fds-colour-border-error);}
 .wiv49ur{background:var(--fds-colour-bg-success);border-left-color:var(--fds-colour-border-success);}
 .w1rjxx7d{background:var(--fds-colour-bg-warning);border-left-color:var(--fds-colour-border-warning);}
@@ -25,4 +25,4 @@
 .sxtdaq0{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}
 .c19cf4gt{-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);}
 .cnxzujv{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
-.c1u44bt8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.c1u44bt8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}}

package/cjs/animations/loading-dots/loading-dots.styles_1rgrrmw.css

@@ -1,2 +1,2 @@
-.c18cuuv6{margin:0 auto;}
-.p182s5k4{height:16px;width:64px;}
+@layer fds{.c18cuuv6{margin:0 auto;}
+.p182s5k4{height:16px;width:64px;}}

package/cjs/animations/loading-dots/lottie-animation.styles_1m15v69.css

@@ -1 +1 @@
-.v15yka8m{height:16px;width:64px;}
+@layer fds{.v15yka8m{height:16px;width:64px;}}

package/cjs/animations/loading-dots-spinner/loading-dots-spinner.styles_1hcqkhs.css

@@ -1,2 +1,2 @@
-.cw28mbd{--fds-internal-loadingDotsSpinner-container-colour:initial;margin:0 auto;}
-.pvakuuw{height:200px;width:200px;}
+@layer fds{.cw28mbd{--fds-internal-loadingDotsSpinner-container-colour:initial;margin:0 auto;}
+.pvakuuw{height:200px;width:200px;}}

package/cjs/animations/loading-dots-spinner/lottie-animation.styles_13d1unb.css

@@ -1 +1 @@
-.v1n5n6pc{height:200px;width:200px;}
+@layer fds{.v1n5n6pc{height:200px;width:200px;}}

package/cjs/animations/loading-spinner/loading-spinner.styles_n6xoft.css

@@ -1,2 +1,2 @@
-.c1ea41s2{margin:0 auto;padding:var(--fds-spacing-32) var(--fds-spacing-16);}
-.p16u2leb{height:200px;width:200px;}
+@layer fds{.c1ea41s2{margin:0 auto;padding:var(--fds-spacing-32) var(--fds-spacing-16);}
+.p16u2leb{height:200px;width:200px;}}

package/cjs/animations/loading-spinner/lottie-animation.styles_bnn4qt.css

@@ -1 +1 @@
-.vlg9767{height:200px;width:200px;}
+@layer fds{.vlg9767{height:200px;width:200px;}}

package/cjs/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../src/avatar/avatar.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./avatar.styles\";\nimport type { AvatarProps } from \"./types\";\n\nexport const Avatar = ({\n    children,\n    sizeType = \"default\",\n    \"data-testid\": testId = \"avatar\",\n    className,\n    ...otherProps\n}: AvatarProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () => {\n        if (!children) {\n            return <></>;\n        }\n\n        if (typeof children === \"string\") {\n            const TextComponent =\n                sizeType === \"small\" ? Typography.BodySM : Typography.BodyBL;\n            return (\n                <TextComponent\n                    weight=\"semibold\"\n                    className={styles.avatarBaselineText}\n                >\n                    {String.fromCodePoint(\n                        children.codePointAt(0) ?? 0\n                    ).toUpperCase()}\n                </TextComponent>\n            );\n        }\n\n        return children;\n    };\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={testId}\n            className={clsx(\n                styles.avatarDisplay,\n                sizeType === \"small\"\n                    ? styles.avatarDisplaySmall\n                    : styles.avatarDisplayDefault,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["_a","children","sizeType","testId","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.avatarDisplay","styles.avatarDisplaySmall","styles.avatarDisplayDefault","TextComponent","Typography","BodySM","BodyBL","weight","styles.avatarBaselineText","String","fromCodePoint","codePointAt","toUpperCase","renderContent"],"mappings":"2QAMuBA,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALM,mDAiCnB,OACIO,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EAAAA,QACPC,EAAAA,cACa,UAAbT,EACMU,EAAAA,mBACAC,EAAAA,qBACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,EAAAA,mBAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAAA,WAAWC,OAASD,EAAAA,WAAWE,OAC1D,OACIV,MAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,EAAAA,4BAEVC,OAAOC,cACmB,QAAvBrB,EAAAC,EAASqB,YAAY,UAAE,IAAAtB,EAAAA,EAAI,GAC7BuB,eAGd,CAEA,OAAOtB,CAAQ,EAeVuB,KACC"}
+{"version":3,"file":"avatar.js","sources":["../../../src/avatar/avatar.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Typography } from \"../typography\";\nimport * as styles from \"./avatar.styles\";\nimport type { AvatarProps } from \"./types\";\n\n/**\n * Displays a circular avatar representing a user or entity.\n *\n * Use when you need a compact visual identity marker in lists, headers, or\n * cards. Accepts a string (rendered as an initial) or a JSX element such as an\n * image or icon.\n */\nexport const Avatar = ({\n    children,\n    sizeType = \"default\",\n    \"data-testid\": testId = \"avatar\",\n    className,\n    ...otherProps\n}: AvatarProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () => {\n        if (!children) {\n            return <></>;\n        }\n\n        if (typeof children === \"string\") {\n            const TextComponent =\n                sizeType === \"small\" ? Typography.BodySM : Typography.BodyBL;\n            return (\n                <TextComponent\n                    weight=\"semibold\"\n                    className={styles.avatarBaselineText}\n                >\n                    {String.fromCodePoint(\n                        children.codePointAt(0) ?? 0\n                    ).toUpperCase()}\n                </TextComponent>\n            );\n        }\n\n        return children;\n    };\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={testId}\n            className={clsx(\n                styles.avatarDisplay,\n                sizeType === \"small\"\n                    ? styles.avatarDisplaySmall\n                    : styles.avatarDisplayDefault,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["_a","children","sizeType","testId","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.avatarDisplay","styles.avatarDisplaySmall","styles.avatarDisplayDefault","TextComponent","Typography","BodySM","BodyBL","weight","styles.avatarBaselineText","String","fromCodePoint","codePointAt","toUpperCase","renderContent"],"mappings":"2QAauBA,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALM,mDAiCnB,OACIO,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EAAAA,QACPC,EAAAA,cACa,UAAbT,EACMU,EAAAA,mBACAC,EAAAA,qBACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,EAAAA,mBAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAAA,WAAWC,OAASD,EAAAA,WAAWE,OAC1D,OACIV,MAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,EAAAA,4BAEVC,OAAOC,cACmB,QAAvBrB,EAAAC,EAASqB,YAAY,UAAE,IAAAtB,EAAAA,EAAI,GAC7BuB,eAGd,CAEA,OAAOtB,CAAQ,EAeVuB,KACC"}

package/cjs/avatar/avatar.styles_16efw4.css

@@ -1,4 +1,4 @@
-.a1mqk4w8{border-radius:50%;background-color:var(--fds-colour-bg-primary-subtler);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+@layer fds{.a1mqk4w8{border-radius:50%;background-color:var(--fds-colour-bg-primary-subtler);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
 .a11siwsi{width:2.5rem;height:2.5rem;}
 .a1m51nni{width:1.5rem;height:1.5rem;}
-.a12u9rhz{color:var(--fds-colour-text-primary);}
+.a12u9rhz{color:var(--fds-colour-text-primary);}}

package/cjs/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n    if (count <= 999) return count.toString();\n    if (count === 1000) return \"1K\";\n    return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n    \"number\",\n    \"number-with-border\",\n    \"square-number\",\n]);\n\nexport const Badge = ({\n    badgeOffset,\n    children,\n    className,\n    color = \"default\",\n    count = 0,\n    \"data-testid\": testId = \"badge\",\n    variant = \"number\",\n    ...otherProps\n}: BadgeProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const displayCount = getDisplayCount(count);\n    const shouldShowCount = variantsToShowCount.has(variant);\n\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const wrapperRef = useRef<HTMLSpanElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n        [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <span className={clsx(children !== undefined && styles.badgeOverlay)}>\n            <span\n                ref={wrapperRef}\n                className={clsx(\n                    styles.badgeWrapper,\n                    children !== undefined && styles.badgeWrapperIsOverlay\n                )}\n            >\n                <span\n                    data-testid={testId}\n                    data-variant={variant}\n                    data-color={color}\n                    className={clsx(styles.badge, className)}\n                    {...otherProps}\n                >\n                    {shouldShowCount ? displayCount : null}\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["variantsToShowCount","Set","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"gkBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,gCAGkBC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,SAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EAxBV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CAoByBO,CAAgBP,GAC/BQ,EAAkBf,EAAoBgB,IAAIP,GAK1CQ,EAAaC,EAAAA,OAAwB,MAU3C,OARAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,SAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,SAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,OAAA,OAAA,CAAMnB,UAAWoB,EAAAA,aAAkBC,IAAbtB,GAA0BuB,EAAAA,wBAC5CC,EAAAA,IAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,UACPK,EAAAA,kBACaJ,IAAbtB,GAA0B2B,EAAAA,uBAC7B3B,SAEDwB,EAAAA,IAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAAA,QAAKS,EAAAA,MAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}
+{"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n    if (count <= 999) return count.toString();\n    if (count === 1000) return \"1K\";\n    return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n    \"number\",\n    \"number-with-border\",\n    \"square-number\",\n]);\n\n/**\n * Displays a small indicator badge for notifications or status.\n *\n * Use `Badge` to surface counts or status dots on icons, avatars, and\n * navigation items. Renders as an overlay on a child element or as a standalone\n * inline indicator when no child is provided.\n */\nexport const Badge = ({\n    badgeOffset,\n    children,\n    className,\n    color = \"default\",\n    count = 0,\n    \"data-testid\": testId = \"badge\",\n    variant = \"number\",\n    ...otherProps\n}: BadgeProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const displayCount = getDisplayCount(count);\n    const shouldShowCount = variantsToShowCount.has(variant);\n\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const wrapperRef = useRef<HTMLSpanElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n        [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <span className={clsx(children !== undefined && styles.badgeOverlay)}>\n            <span\n                ref={wrapperRef}\n                className={clsx(\n                    styles.badgeWrapper,\n                    children !== undefined && styles.badgeWrapperIsOverlay\n                )}\n            >\n                <span\n                    data-testid={testId}\n                    data-variant={variant}\n                    data-color={color}\n                    className={clsx(styles.badge, className)}\n                    {...otherProps}\n                >\n                    {shouldShowCount ? displayCount : null}\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["variantsToShowCount","Set","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"gkBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,gCAUkBC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,SAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EA/BV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CA2ByBO,CAAgBP,GAC/BQ,EAAkBf,EAAoBgB,IAAIP,GAK1CQ,EAAaC,EAAAA,OAAwB,MAU3C,OARAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,SAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,SAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,OAAA,OAAA,CAAMnB,UAAWoB,EAAAA,aAAkBC,IAAbtB,GAA0BuB,EAAAA,wBAC5CC,EAAAA,IAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,UACPK,EAAAA,kBACaJ,IAAbtB,GAA0B2B,EAAAA,uBAC7B3B,SAEDwB,EAAAA,IAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAAA,QAAKS,EAAAA,MAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}

package/cjs/badge/badge.styles_1c3c6wj.css

@@ -1,4 +1,4 @@
-.b12fiya5{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}
+@layer fds{.b12fiya5{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}
 
 .bt512pc{position:absolute;top:0;right:0;-webkit-transform:translate(50%, -25%) translate(
             var(--fds-internal-badge-wrapper-offsetX, 0px),
@@ -13,4 +13,4 @@
             var(--fds-internal-badge-wrapper-offsetX, 0px),
             var(--fds-internal-badge-wrapper-offsetY, 0px)
         );}
-.bnm5diy{background-color:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}.bnm5diy[data-variant="number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);}.bnm5diy[data-variant="number-with-border"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="dot"]{border-radius:50%;width:0.5rem;height:0.5rem;}.bnm5diy[data-variant="dot-with-border"]{border-radius:50%;width:0.5rem;height:0.5rem;box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="square-number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-sm);padding:0.25rem 0.4375rem;}.bnm5diy[data-variant="square-number"][data-color="default"]{background-color:var(--fds-colour-bg-primary-subtler);color:var(--fds-colour-text-primary);}.bnm5diy[data-color="important"]{background-color:var(--fds-colour-icon-error);}
+.bnm5diy{background-color:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}.bnm5diy[data-variant="number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);}.bnm5diy[data-variant="number-with-border"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-full);box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="dot"]{border-radius:50%;width:0.5rem;height:0.5rem;}.bnm5diy[data-variant="dot-with-border"]{border-radius:50%;width:0.5rem;height:0.5rem;box-shadow:0 0 0 var(--fds-border-width-020) var(--fds-colour-bg);}.bnm5diy[data-variant="square-number"]{min-width:1.25rem;padding:0.25rem 0.375rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);line-height:1;border-radius:var(--fds-radius-sm);padding:0.25rem 0.4375rem;}.bnm5diy[data-variant="square-number"][data-color="default"]{background-color:var(--fds-colour-bg-primary-subtler);color:var(--fds-colour-text-primary);}.bnm5diy[data-color="important"]{background-color:var(--fds-colour-icon-error);}}

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

@@ -1 +1 @@
-{"version":3,"file":"box-container.js","sources":["../../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\nexport const BoxContainer = ({\n    children,\n    title,\n    collapsible = true,\n    expanded = false,\n    callToActionComponent,\n    displayState = \"default\",\n    subComponentTestIds,\n    clickableHeader,\n    className,\n    ...otherProps\n}: BoxContainerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showExpanded, setShowExpanded] = useState<boolean>(\n        !collapsible ? true : expanded\n    );\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const headerId = `${internalId}-header`;\n    const handleIconRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const onHandleClick = (event: React.MouseEvent) => {\n        // to prevent it triggers twice when click on button as clickableHeader enable\n        event.stopPropagation();\n        setShowExpanded(!showExpanded);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showExpanded ? resizeDetector.height : 0,\n    });\n\n    const renderChildContent = () => {\n        if (collapsible) {\n            return (\n                <animated.div\n                    className={styles.expandable}\n                    style={expandableStyles}\n                    data-testid={\"expandable-container\"}\n                    id={contentId}\n                >\n                    <div\n                        className={styles.childContainer}\n                        ref={childRef}\n                        inert={inertValue(!showExpanded)}\n                    >\n                        {children}\n                    </div>\n                </animated.div>\n            );\n        }\n\n        return (\n            <div\n                className={styles.nonExpandable}\n                data-testid=\"non-expandable-container\"\n            >\n                <div className={styles.childContainer}>{children}</div>\n            </div>\n        );\n    };\n\n    const renderDisplayIcon = () => {\n        switch (displayState) {\n            case \"error\":\n            case \"warning\":\n                return (\n                    <ExclamationCircleFillIcon\n                        className={clsx(\n                            styles.alertIcon,\n                            displayState === \"error\" && styles.alertIconError,\n                            displayState === \"warning\" &&\n                                styles.alertIconWarning\n                        )}\n                        data-testid={\n                            subComponentTestIds?.displayStateIcon ||\n                            `${displayState}-icon`\n                        }\n                        aria-label={displayState}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    const renderHandleIcon = () => {\n        return (\n            collapsible && (\n                <button\n                    className={styles.handle}\n                    onClick={onHandleClick}\n                    type=\"button\"\n                    aria-labelledby={headerId}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={showExpanded}\n                    data-testid={subComponentTestIds?.handle || \"handle\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.handleIconContainer,\n                            showExpanded\n                                ? styles.handleIconContainerExpanded\n                                : styles.handleIconContainerCollapsed\n                        )}\n                        ref={handleIconRef}\n                        aria-hidden\n                    >\n                        <ChevronDownIcon className={styles.handleIcon} />\n                    </div>\n                </button>\n            )\n        );\n    };\n\n    return (\n        <section\n            {...otherProps}\n            className={clsx(styles.container, className)}\n            aria-labelledby={headerId}\n            role=\"region\"\n            title={typeof title === \"string\" ? title : undefined}\n        >\n            <div\n                className={clsx(\n                    styles.header,\n                    interactiveHeader && styles.headerInteractive\n                )}\n                data-testid=\"header\"\n                onClick={interactiveHeader ? onHandleClick : undefined}\n            >\n                <div\n                    className={styles.labelWrapper}\n                    role={\"status\"}\n                    id={headerId}\n                >\n                    <div\n                        className={styles.labelText}\n                        data-testid={subComponentTestIds?.title || \"title\"}\n                    >\n                        {title}\n                        {displayState !== \"default\" && (\n                            <>\n                                <VisuallyHidden>{displayState}</VisuallyHidden>\n                            </>\n                        )}\n                    </div>\n                    {renderDisplayIcon()}\n                    {isMobile && renderHandleIcon()}\n                </div>\n                {callToActionComponent && (\n                    <div\n                        className={clsx(\n                            styles.callToActionContainer,\n                            collapsible &&\n                                styles.callToActionContainerCollapsible\n                        )}\n                        data-testid=\"call-to-action-container\"\n                    >\n                        {callToActionComponent}\n                    </div>\n                )}\n\n                {!isMobile && renderHandleIcon()}\n            </div>\n            {renderChildContent()}\n        </section>\n    );\n};\n"],"names":["_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","isMobile","useMaxWidthMediaQuery","interactiveHeader","internalId","useId","contentId","headerId","handleIconRef","useRef","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","styles.handle","onClick","type","handle","clsx","styles.handleIconContainer","styles.handleIconContainerExpanded","styles.handleIconContainerCollapsed","ChevronDownIcon","styles.handleIcon","_jsxs","Object","assign","styles.container","role","undefined","styles.header","styles.headerInteractive","styles.labelWrapper","id","styles.labelText","_Fragment","VisuallyHidden","ExclamationCircleFillIcon","styles.alertIcon","styles.alertIconError","styles.alertIconWarning","displayStateIcon","renderDisplayIcon","styles.callToActionContainer","styles.callToActionContainerCollapsible","animated","div","styles.expandable","style","styles.childContainer","inert","inertValue","styles.nonExpandable"],"mappings":"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"}
+{"version":3,"file":"box-container.js","sources":["../../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\n/**\n * A titled, collapsible section container that groups related content behind a\n * labelled header.\n *\n * Use `BoxContainer` when you need to visually separate a block of content\n * under a heading and optionally allow users to collapse it. The header supports\n * a call-to-action slot and a visual status indicator.\n */\nexport const BoxContainer = ({\n    children,\n    title,\n    collapsible = true,\n    expanded = false,\n    callToActionComponent,\n    displayState = \"default\",\n    subComponentTestIds,\n    clickableHeader,\n    className,\n    ...otherProps\n}: BoxContainerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showExpanded, setShowExpanded] = useState<boolean>(\n        !collapsible ? true : expanded\n    );\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const headerId = `${internalId}-header`;\n    const handleIconRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const onHandleClick = (event: React.MouseEvent) => {\n        // to prevent it triggers twice when click on button as clickableHeader enable\n        event.stopPropagation();\n        setShowExpanded(!showExpanded);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showExpanded ? resizeDetector.height : 0,\n    });\n\n    const renderChildContent = () => {\n        if (collapsible) {\n            return (\n                <animated.div\n                    className={styles.expandable}\n                    style={expandableStyles}\n                    data-testid={\"expandable-container\"}\n                    id={contentId}\n                >\n                    <div\n                        className={styles.childContainer}\n                        ref={childRef}\n                        inert={inertValue(!showExpanded)}\n                    >\n                        {children}\n                    </div>\n                </animated.div>\n            );\n        }\n\n        return (\n            <div\n                className={styles.nonExpandable}\n                data-testid=\"non-expandable-container\"\n            >\n                <div className={styles.childContainer}>{children}</div>\n            </div>\n        );\n    };\n\n    const renderDisplayIcon = () => {\n        switch (displayState) {\n            case \"error\":\n            case \"warning\":\n                return (\n                    <ExclamationCircleFillIcon\n                        className={clsx(\n                            styles.alertIcon,\n                            displayState === \"error\" && styles.alertIconError,\n                            displayState === \"warning\" &&\n                                styles.alertIconWarning\n                        )}\n                        data-testid={\n                            subComponentTestIds?.displayStateIcon ||\n                            `${displayState}-icon`\n                        }\n                        aria-label={displayState}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    const renderHandleIcon = () => {\n        return (\n            collapsible && (\n                <button\n                    className={styles.handle}\n                    onClick={onHandleClick}\n                    type=\"button\"\n                    aria-labelledby={headerId}\n                    aria-controls={contentId}\n                    aria-disabled={!collapsible} // remains focusable\n                    aria-expanded={showExpanded}\n                    data-testid={subComponentTestIds?.handle || \"handle\"}\n                >\n                    <div\n                        className={clsx(\n                            styles.handleIconContainer,\n                            showExpanded\n                                ? styles.handleIconContainerExpanded\n                                : styles.handleIconContainerCollapsed\n                        )}\n                        ref={handleIconRef}\n                        aria-hidden\n                    >\n                        <ChevronDownIcon className={styles.handleIcon} />\n                    </div>\n                </button>\n            )\n        );\n    };\n\n    return (\n        <section\n            {...otherProps}\n            className={clsx(styles.container, className)}\n            aria-labelledby={headerId}\n            role=\"region\"\n            title={typeof title === \"string\" ? title : undefined}\n        >\n            <div\n                className={clsx(\n                    styles.header,\n                    interactiveHeader && styles.headerInteractive\n                )}\n                data-testid=\"header\"\n                onClick={interactiveHeader ? onHandleClick : undefined}\n            >\n                <div\n                    className={styles.labelWrapper}\n                    role={\"status\"}\n                    id={headerId}\n                >\n                    <div\n                        className={styles.labelText}\n                        data-testid={subComponentTestIds?.title || \"title\"}\n                    >\n                        {title}\n                        {displayState !== \"default\" && (\n                            <>\n                                <VisuallyHidden>{displayState}</VisuallyHidden>\n                            </>\n                        )}\n                    </div>\n                    {renderDisplayIcon()}\n                    {isMobile && renderHandleIcon()}\n                </div>\n                {callToActionComponent && (\n                    <div\n                        className={clsx(\n                            styles.callToActionContainer,\n                            collapsible &&\n                                styles.callToActionContainerCollapsible\n                        )}\n                        data-testid=\"call-to-action-container\"\n                    >\n                        {callToActionComponent}\n                    </div>\n                )}\n\n                {!isMobile && renderHandleIcon()}\n            </div>\n            {renderChildContent()}\n        </section>\n    );\n};\n"],"names":["_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","isMobile","useMaxWidthMediaQuery","interactiveHeader","internalId","useId","contentId","headerId","handleIconRef","useRef","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","styles.handle","onClick","type","handle","clsx","styles.handleIconContainer","styles.handleIconContainerExpanded","styles.handleIconContainerCollapsed","ChevronDownIcon","styles.handleIcon","_jsxs","Object","assign","styles.container","role","undefined","styles.header","styles.headerInteractive","styles.labelWrapper","id","styles.labelText","_Fragment","VisuallyHidden","ExclamationCircleFillIcon","styles.alertIcon","styles.alertIconError","styles.alertIconWarning","displayStateIcon","renderDisplayIcon","styles.callToActionContainer","styles.callToActionContainerCollapsible","animated","div","styles.expandable","style","styles.childContainer","inert","inertValue","styles.nonExpandable"],"mappings":"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"}

package/cjs/box-container/box-container.styles_5t2j9k.css

@@ -1,4 +1,4 @@
-.h3376de{-webkit-transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
+@layer fds{.h3376de{-webkit-transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
 .hjzhcqf{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
 .h1v9raz8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
 .c12d5ktd{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}
@@ -15,4 +15,4 @@
 .c1u9hocq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:auto;}:where(body.fds-breakpoint-sm-max) .c1u9hocq{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 .cwzrcxq{margin-right:var(--fds-spacing-40);}:where(body.fds-breakpoint-sm-max) .cwzrcxq{margin-right:0;margin-top:var(--fds-spacing-16);}
 .hsq8tc7{background:transparent;border:none;cursor:pointer;padding:var(--fds-spacing-16);margin:calc(var(--fds-spacing-16) * -1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-sm-max) .hsq8tc7{margin:calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) 0;margin-left:auto;}
-.h97jf81{color:var(--fds-colour-icon);height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);}
+.h97jf81{color:var(--fds-colour-icon);height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);}}

package/cjs/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    parsePxOrRemValue,\n    useApplyStyle,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const tabletBreakpoint = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    // =============================================================================\n    // FADE COLOR CALCULATION\n    // =============================================================================\n    let fadeColorSet: FadeColorSet;\n\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        fadeColorSet = {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    } else if (fadeColor) {\n        fadeColorSet = fadeColor as FadeColorSet;\n    } else {\n        fadeColorSet = {\n            left: undefined,\n            right: undefined,\n        };\n    }\n\n    // =============================================================================\n    // CSS VARIABLES\n    // =============================================================================\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n    });\n\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n    });\n\n    const onResize = useEvent(() => {\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n\n        if (\n            content &&\n            wrapper &&\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        }\n    });\n\n    const handleShowFadeToggle = useEvent(() => {\n        const nextShowFade = window.innerWidth <= tabletBreakpoint;\n        setShowFade(nextShowFade);\n\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n        if (content && wrapper && nextShowFade) {\n            if (content.scrollWidth > wrapper.offsetWidth) {\n                // set 1px margin of error to handle sub-pixel differences\n                setShowFadeLeft(content.scrollLeft >= 1);\n                setShowFadeRight(\n                    content.scrollWidth - content.scrollLeft - 1 >\n                        wrapper.offsetWidth\n                );\n                return;\n            }\n        }\n\n        setShowFadeLeft(false);\n        setShowFadeRight(false);\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"resize\", handleShowFadeToggle);\n    useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n    useIsomorphicLayoutEffect(() => {\n        onResize();\n        handleShowFadeToggle();\n    }, [onResize, handleShowFadeToggle, tabletBreakpoint]);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n        skipOnMount: true,\n    });\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        as=\"span\"\n                        className={styles.currentLabel}\n                    >\n                        {link.children}\n                    </Typography.BodyMD>\n                );\n            } else {\n                element = (\n                    <Typography.LinkMD\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                        className={styles.previousLink}\n                    />\n                );\n            }\n\n            return (\n                <li\n                    key={index}\n                    className={styles.item}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <ChevronRightIcon\n                                aria-hidden\n                                className={styles.caret}\n                            />\n                        ) : (\n                            <Typography.BodyMD\n                                inline\n                                aria-hidden\n                                className={styles.slash}\n                            >\n                                /\n                            </Typography.BodyMD>\n                        ))}\n                </li>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            id={id || \"breadcrumb\"}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <ul ref={contentRef} className={styles.content}>\n                    {renderLinks()}\n                </ul>\n            </nav>\n            {showFade && renderFade()}\n        </div>\n    );\n};\n"],"names":["_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    parsePxOrRemValue,\n    useApplyStyle,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\n/**\n * Horizontal breadcrumb navigation trail.\n *\n * Use `Breadcrumb` to show the user's position within a page hierarchy and\n * allow navigation to parent pages. On tablet and below, the trail scrolls\n * horizontally with optional edge fade overlays to indicate clipped content.\n */\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const tabletBreakpoint = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    // =============================================================================\n    // FADE COLOR CALCULATION\n    // =============================================================================\n    let fadeColorSet: FadeColorSet;\n\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        fadeColorSet = {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    } else if (fadeColor) {\n        fadeColorSet = fadeColor as FadeColorSet;\n    } else {\n        fadeColorSet = {\n            left: undefined,\n            right: undefined,\n        };\n    }\n\n    // =============================================================================\n    // CSS VARIABLES\n    // =============================================================================\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n    });\n\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n    });\n\n    const onResize = useEvent(() => {\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n\n        if (\n            content &&\n            wrapper &&\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        }\n    });\n\n    const handleShowFadeToggle = useEvent(() => {\n        const nextShowFade = window.innerWidth <= tabletBreakpoint;\n        setShowFade(nextShowFade);\n\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n        if (content && wrapper && nextShowFade) {\n            if (content.scrollWidth > wrapper.offsetWidth) {\n                // set 1px margin of error to handle sub-pixel differences\n                setShowFadeLeft(content.scrollLeft >= 1);\n                setShowFadeRight(\n                    content.scrollWidth - content.scrollLeft - 1 >\n                        wrapper.offsetWidth\n                );\n                return;\n            }\n        }\n\n        setShowFadeLeft(false);\n        setShowFadeRight(false);\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"resize\", handleShowFadeToggle);\n    useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n    useIsomorphicLayoutEffect(() => {\n        onResize();\n        handleShowFadeToggle();\n    }, [onResize, handleShowFadeToggle, tabletBreakpoint]);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n        skipOnMount: true,\n    });\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        as=\"span\"\n                        className={styles.currentLabel}\n                    >\n                        {link.children}\n                    </Typography.BodyMD>\n                );\n            } else {\n                element = (\n                    <Typography.LinkMD\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                        className={styles.previousLink}\n                    />\n                );\n            }\n\n            return (\n                <li\n                    key={index}\n                    className={styles.item}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <ChevronRightIcon\n                                aria-hidden\n                                className={styles.caret}\n                            />\n                        ) : (\n                            <Typography.BodyMD\n                                inline\n                                aria-hidden\n                                className={styles.slash}\n                            >\n                                /\n                            </Typography.BodyMD>\n                        ))}\n                </li>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            id={id || \"breadcrumb\"}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <ul ref={contentRef} className={styles.content}>\n                    {renderLinks()}\n                </ul>\n            </nav>\n            {showFade && renderFade()}\n        </div>\n    );\n};\n"],"names":["_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"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"}

package/cjs/breadcrumb/breadcrumb.styles_1nl4aua.css

@@ -1,4 +1,4 @@
-.wcpniaz{position:relative;width:100%;z-index:1;margin:var(--fds-spacing-32) 0;}:where(body.fds-breakpoint-xl-max) .wcpniaz{margin:var(--fds-spacing-24) 0;}:where(body.fds-breakpoint-lg-max) .wcpniaz{margin:var(--fds-spacing-16) 0;}
+@layer fds{.wcpniaz{position:relative;width:100%;z-index:1;margin:var(--fds-spacing-32) 0;}:where(body.fds-breakpoint-xl-max) .wcpniaz{margin:var(--fds-spacing-24) 0;}:where(body.fds-breakpoint-lg-max) .wcpniaz{margin:var(--fds-spacing-16) 0;}
 .c10gatr7{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:100%;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;white-space:nowrap;margin-left:calc(var(--fds-spacing-8) * -1);font-size:var(--fds-font-body-size-md);overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}.c10gatr7::-webkit-scrollbar{display:none;}:where(body.fds-breakpoint-lg-max) .c10gatr7{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}
 .fbyhxo7{--fds-internal-breadcrumb-fade-backgroundColor:initial;width:var(--fds-spacing-64);height:calc(1lh + var(--fds-spacing-4));position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none;}
 :where(body.fds-breakpoint-lg-max) .f1xa0lk7{left:calc(var(--fds-spacing-8) * -1);background-image:linear-gradient(
@@ -15,4 +15,4 @@
 .co9wmrd{height:1em;width:1em;color:var(--fds-colour-icon-subtle);}
 .spyv6ve{display:inline-block;color:var(--fds-colour-text-subtlest);}
 .c1mfqdvn{margin:var(--fds-spacing-8)!important;}
-.pm022dc{margin:var(--fds-spacing-8)!important;}
+.pm022dc{margin:var(--fds-spacing-8)!important;}}

package/cjs/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/button/button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport * as styles from \"./button.styles\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\nconst styleClassMap: Record<string, Record<string, string>> = {\n    disabled: {\n        base: styles.mainStyleDisabled,\n        danger: styles.mainStyleDisabled,\n    },\n    default: {\n        base: styles.mainStyleDefault,\n        danger: styles.mainStyleDefaultDanger,\n    },\n    secondary: {\n        base: styles.mainStyleSecondary,\n        danger: styles.mainStyleSecondaryDanger,\n    },\n    light: { base: styles.mainStyleLight, danger: styles.mainStyleLightDanger },\n    link: { base: styles.mainStyleLink, danger: styles.mainStyleLinkDanger },\n};\n\nconst sizeClassMap: Record<string, { base: string; iconOnly: string }> = {\n    default: {\n        base: styles.mainSizeDefault,\n        iconOnly: styles.mainSizeDefaultIconOnly,\n    },\n    small: {\n        base: styles.mainSizeSmall,\n        iconOnly: styles.mainSizeSmallIconOnly,\n    },\n    large: {\n        base: styles.mainSizeLarge,\n        iconOnly: styles.mainSizeLargeIconOnly,\n    },\n};\n\nconst getStyleClass = (effectiveStyle: string, danger: boolean) =>\n    danger\n        ? styleClassMap[effectiveStyle]?.danger\n        : styleClassMap[effectiveStyle]?.base;\n\nconst getSizeClass = (sizeType: string, iconOnly: boolean) =>\n    iconOnly\n        ? clsx(sizeClassMap[sizeType]?.base, sizeClassMap[sizeType]?.iconOnly)\n        : sizeClassMap[sizeType]?.base;\n\nconst Component = (props: ButtonProps, ref: ButtonRef) => {\n    const {\n        children,\n        className,\n        disabled = false,\n        loading = false,\n        styleType = \"default\",\n        sizeType = \"default\",\n        danger = false,\n        focusableWhenDisabled = false,\n        icon,\n        iconPosition = \"left\",\n        onClick,\n        ...otherProps\n    } = props;\n\n    const hasChildren = hasValidChildren(children);\n    const iconOnly = !!icon && !hasChildren;\n    const effectiveStyle = disabled ? \"disabled\" : styleType;\n\n    return (\n        <button\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            className={clsx(\n                styles.main,\n                icon &&\n                    iconPosition === \"right\" &&\n                    styles.mainIconPositionRight,\n                !iconOnly && styles.mainHasMinWidth,\n                getStyleClass(effectiveStyle, danger),\n                getSizeClass(sizeType, iconOnly),\n                className\n            )}\n            {...otherProps}\n        >\n            {loading ? (\n                <ComponentLoadingSpinner\n                    className={clsx(\n                        styles.spinner,\n                        hasChildren && styles.spinnerHasChildren\n                    )}\n                />\n            ) : icon ? (\n                React.cloneElement(icon, { \"aria-hidden\": true })\n            ) : null}\n            {hasChildren && <span>{children}</span>}\n        </button>\n    );\n};\n\nComponent.displayName = \"Button\";\n\nconst BaseButton = React.forwardRef(Component);\n\nconst DefaultButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType={props.sizeType ?? \"default\"} ref={ref} />\n);\nDefaultButtonComponent.displayName = \"Button.Default\";\n\nconst SmallButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"small\" ref={ref} />\n);\nSmallButtonComponent.displayName = \"Button.Small\";\n\nconst LargeButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"large\" ref={ref} />\n);\nLargeButtonComponent.displayName = \"Button.Large\";\n\nexport const Button = Object.assign(BaseButton, {\n    /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType=\"default\">` */\n    Default: React.forwardRef(DefaultButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"small\">` */\n    Small: React.forwardRef(SmallButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"large\">` */\n    Large: React.forwardRef(LargeButtonComponent),\n});\n"],"names":["styleClassMap","disabled","base","styles.mainStyleDisabled","danger","default","styles.mainStyleDefault","styles.mainStyleDefaultDanger","secondary","styles.mainStyleSecondary","styles.mainStyleSecondaryDanger","light","styles.mainStyleLight","styles.mainStyleLightDanger","link","styles.mainStyleLink","styles.mainStyleLinkDanger","sizeClassMap","styles.mainSizeDefault","iconOnly","styles.mainSizeDefaultIconOnly","small","styles.mainSizeSmall","styles.mainSizeSmallIconOnly","large","styles.mainSizeLarge","styles.mainSizeLargeIconOnly","getStyleClass","effectiveStyle","_a","_b","getSizeClass","sizeType","clsx","_c","Component","props","ref","children","className","loading","styleType","focusableWhenDisabled","icon","iconPosition","onClick","otherProps","hasChildren","hasValidChildren","_jsxs","undefined","styles.main","styles.mainIconPositionRight","styles.mainHasMinWidth","_jsx","ComponentLoadingSpinner","styles.spinner","styles.spinnerHasChildren","React","cloneElement","displayName","BaseButton","forwardRef","DefaultButtonComponent","Object","assign","SmallButtonComponent","LargeButtonComponent","Button","Default","Small","Large"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../src/button/button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport * as styles from \"./button.styles\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\nconst styleClassMap: Record<string, Record<string, string>> = {\n    disabled: {\n        base: styles.mainStyleDisabled,\n        danger: styles.mainStyleDisabled,\n    },\n    default: {\n        base: styles.mainStyleDefault,\n        danger: styles.mainStyleDefaultDanger,\n    },\n    secondary: {\n        base: styles.mainStyleSecondary,\n        danger: styles.mainStyleSecondaryDanger,\n    },\n    light: { base: styles.mainStyleLight, danger: styles.mainStyleLightDanger },\n    link: { base: styles.mainStyleLink, danger: styles.mainStyleLinkDanger },\n};\n\nconst sizeClassMap: Record<string, { base: string; iconOnly: string }> = {\n    default: {\n        base: styles.mainSizeDefault,\n        iconOnly: styles.mainSizeDefaultIconOnly,\n    },\n    small: {\n        base: styles.mainSizeSmall,\n        iconOnly: styles.mainSizeSmallIconOnly,\n    },\n    large: {\n        base: styles.mainSizeLarge,\n        iconOnly: styles.mainSizeLargeIconOnly,\n    },\n};\n\nconst getStyleClass = (effectiveStyle: string, danger: boolean) =>\n    danger\n        ? styleClassMap[effectiveStyle]?.danger\n        : styleClassMap[effectiveStyle]?.base;\n\nconst getSizeClass = (sizeType: string, iconOnly: boolean) =>\n    iconOnly\n        ? clsx(sizeClassMap[sizeType]?.base, sizeClassMap[sizeType]?.iconOnly)\n        : sizeClassMap[sizeType]?.base;\n\nconst Component = (props: ButtonProps, ref: ButtonRef) => {\n    const {\n        children,\n        className,\n        disabled = false,\n        loading = false,\n        styleType = \"default\",\n        sizeType = \"default\",\n        danger = false,\n        focusableWhenDisabled = false,\n        icon,\n        iconPosition = \"left\",\n        onClick,\n        ...otherProps\n    } = props;\n\n    const hasChildren = hasValidChildren(children);\n    const iconOnly = !!icon && !hasChildren;\n    const effectiveStyle = disabled ? \"disabled\" : styleType;\n\n    return (\n        <button\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            className={clsx(\n                styles.main,\n                icon &&\n                    iconPosition === \"right\" &&\n                    styles.mainIconPositionRight,\n                !iconOnly && styles.mainHasMinWidth,\n                getStyleClass(effectiveStyle, danger),\n                getSizeClass(sizeType, iconOnly),\n                className\n            )}\n            {...otherProps}\n        >\n            {loading ? (\n                <ComponentLoadingSpinner\n                    className={clsx(\n                        styles.spinner,\n                        hasChildren && styles.spinnerHasChildren\n                    )}\n                />\n            ) : icon ? (\n                React.cloneElement(icon, { \"aria-hidden\": true })\n            ) : null}\n            {hasChildren && <span>{children}</span>}\n        </button>\n    );\n};\n\nComponent.displayName = \"Button\";\n\nconst BaseButton = React.forwardRef(Component);\n\nconst DefaultButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType={props.sizeType ?? \"default\"} ref={ref} />\n);\nDefaultButtonComponent.displayName = \"Button.Default\";\n\nconst SmallButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"small\" ref={ref} />\n);\nSmallButtonComponent.displayName = \"Button.Small\";\n\nconst LargeButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"large\" ref={ref} />\n);\nLargeButtonComponent.displayName = \"Button.Large\";\n\n/** A call-to-action that triggers an action when activated by the user */\nexport const Button = Object.assign(BaseButton, {\n    /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType=\"default\">` */\n    Default: React.forwardRef(DefaultButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"small\">` */\n    Small: React.forwardRef(SmallButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"large\">` */\n    Large: React.forwardRef(LargeButtonComponent),\n});\n"],"names":["styleClassMap","disabled","base","styles.mainStyleDisabled","danger","default","styles.mainStyleDefault","styles.mainStyleDefaultDanger","secondary","styles.mainStyleSecondary","styles.mainStyleSecondaryDanger","light","styles.mainStyleLight","styles.mainStyleLightDanger","link","styles.mainStyleLink","styles.mainStyleLinkDanger","sizeClassMap","styles.mainSizeDefault","iconOnly","styles.mainSizeDefaultIconOnly","small","styles.mainSizeSmall","styles.mainSizeSmallIconOnly","large","styles.mainSizeLarge","styles.mainSizeLargeIconOnly","getStyleClass","effectiveStyle","_a","_b","getSizeClass","sizeType","clsx","_c","Component","props","ref","children","className","loading","styleType","focusableWhenDisabled","icon","iconPosition","onClick","otherProps","hasChildren","hasValidChildren","_jsxs","undefined","styles.main","styles.mainIconPositionRight","styles.mainHasMinWidth","_jsx","ComponentLoadingSpinner","styles.spinner","styles.spinnerHasChildren","React","cloneElement","displayName","BaseButton","forwardRef","DefaultButtonComponent","Object","assign","SmallButtonComponent","LargeButtonComponent","Button","Default","Small","Large"],"mappings":"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"}

package/cjs/button/button.styles_1pxy0co.css

@@ -1,4 +1,4 @@
-.mf6do54{border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:var(--fds-spacing-8) var(--fds-spacing-16);gap:0.5rem;border-radius:var(--fds-radius-sm);}.mf6do54 svg,.mf6do54 img{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}
+@layer fds{.mf6do54{border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:var(--fds-spacing-8) var(--fds-spacing-16);gap:0.5rem;border-radius:var(--fds-radius-sm);}.mf6do54 svg,.mf6do54 img{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}
 .moaxzdy{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
 .m1en642a{min-width:4rem;}
 .m1jxbf2q{background-color:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);}@media (pointer: fine){.m1jxbf2q:hover,.m1jxbf2q:active{background-color:var(--fds-colour-bg-primary-hover);}}
@@ -17,4 +17,4 @@
 .m1c1mlhm{height:4rem;font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);}:where(body.fds-breakpoint-xxs-max) .m1c1mlhm{height:auto;}
 .me78sau{height:4rem;width:4rem;}
 .s17i3scc{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
-.s1joklnz{margin-right:0.5rem;}
+.s1joklnz{margin-right:0.5rem;}}

package/cjs/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sources":["../../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\nexport const Calendar = (props: CalendarProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        styleType = \"bordered\",\n        variant = \"single\",\n        id,\n        minDate,\n        maxDate,\n        disabledDates,\n        allowDisabledSelection,\n        showActiveMonthDaysOnly,\n        onHover,\n        onYearMonthDisplayChange,\n        \"data-testid\": dataTestId,\n    } = props;\n\n    const isMultiVariant = props.variant === \"multi\";\n    const controlledValue = isMultiVariant ? undefined : props.value;\n    const controlledValues = isMultiVariant ? props.values : undefined;\n    const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n    const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n    const resolveValues = (): string[] => {\n        if (controlledValues !== undefined) return controlledValues;\n        if (controlledValue !== undefined) return [controlledValue];\n        return [];\n    };\n\n    const [selectedValues, setSelectedValues] =\n        useState<string[]>(resolveValues);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (controlledValues !== undefined) {\n            setSelectedValues(controlledValues);\n            return;\n        }\n\n        if (controlledValue !== undefined) {\n            setSelectedValues([controlledValue]);\n            return;\n        }\n\n        setSelectedValues([]);\n    }, [controlledValue, controlledValues]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelect = (date: string) => {\n        setSelectedValues([date]);\n        if (props.variant === \"multi\") {\n            return;\n        }\n\n        props.onChange?.(date);\n        props.onSelect?.(date);\n    };\n\n    const handleMultiSelect = (nextValues: string[]) => {\n        setSelectedValues(nextValues);\n        if (props.variant === \"multi\") {\n            props.onChange?.(nextValues);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    return (\n        <div\n            className={clsx(\n                styles.wrapper,\n                styleType === \"bordered\" && styles.wrapperBordered,\n                className\n            )}\n            id={id}\n            data-testid={dataTestId}\n        >\n            <InternalCalendar\n                value={selectedValues[0]}\n                values={selectedValues}\n                initialCalendarDate={selectedValues[0]}\n                isFocusable={true}\n                variant={variant}\n                minDate={minDate}\n                maxDate={maxDate}\n                disabledDates={disabledDates}\n                allowDisabledSelection={allowDisabledSelection}\n                showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n                onHover={onHover}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                onSelect={handleSelect}\n                onChange={handleMultiSelect}\n                minSelectable={minSelectable}\n                maxSelectable={maxSelectable}\n            />\n        </div>\n    );\n};\n"],"names":["props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"yVAOyBA,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,EAAU,SAAQC,GAClBA,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,EAAAA,UAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,EAAAA,WAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,EAAAA,WACIxB,UAAWyB,EAAAA,QACPC,EAAAA,QACc,aAAdzB,GAA4B0B,EAAAA,gBAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAAAA,IAACK,mBAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}
+{"version":3,"file":"calendar.js","sources":["../../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\n/**\n * Date picker calendar for single-date or multi-date selection.\n */\nexport const Calendar = (props: CalendarProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        className,\n        styleType = \"bordered\",\n        variant = \"single\",\n        id,\n        minDate,\n        maxDate,\n        disabledDates,\n        allowDisabledSelection,\n        showActiveMonthDaysOnly,\n        onHover,\n        onYearMonthDisplayChange,\n        \"data-testid\": dataTestId,\n    } = props;\n\n    const isMultiVariant = props.variant === \"multi\";\n    const controlledValue = isMultiVariant ? undefined : props.value;\n    const controlledValues = isMultiVariant ? props.values : undefined;\n    const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n    const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n    const resolveValues = (): string[] => {\n        if (controlledValues !== undefined) return controlledValues;\n        if (controlledValue !== undefined) return [controlledValue];\n        return [];\n    };\n\n    const [selectedValues, setSelectedValues] =\n        useState<string[]>(resolveValues);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (controlledValues !== undefined) {\n            setSelectedValues(controlledValues);\n            return;\n        }\n\n        if (controlledValue !== undefined) {\n            setSelectedValues([controlledValue]);\n            return;\n        }\n\n        setSelectedValues([]);\n    }, [controlledValue, controlledValues]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelect = (date: string) => {\n        setSelectedValues([date]);\n        if (props.variant === \"multi\") {\n            return;\n        }\n\n        props.onChange?.(date);\n        props.onSelect?.(date);\n    };\n\n    const handleMultiSelect = (nextValues: string[]) => {\n        setSelectedValues(nextValues);\n        if (props.variant === \"multi\") {\n            props.onChange?.(nextValues);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    return (\n        <div\n            className={clsx(\n                styles.wrapper,\n                styleType === \"bordered\" && styles.wrapperBordered,\n                className\n            )}\n            id={id}\n            data-testid={dataTestId}\n        >\n            <InternalCalendar\n                value={selectedValues[0]}\n                values={selectedValues}\n                initialCalendarDate={selectedValues[0]}\n                isFocusable={true}\n                variant={variant}\n                minDate={minDate}\n                maxDate={maxDate}\n                disabledDates={disabledDates}\n                allowDisabledSelection={allowDisabledSelection}\n                showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n                onHover={onHover}\n                onYearMonthDisplayChange={onYearMonthDisplayChange}\n                onSelect={handleSelect}\n                onChange={handleMultiSelect}\n                minSelectable={minSelectable}\n                maxSelectable={maxSelectable}\n            />\n        </div>\n    );\n};\n"],"names":["props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"yVAUyBA,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,EAAU,SAAQC,GAClBA,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,EAAAA,UAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,EAAAA,WAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,EAAAA,WACIxB,UAAWyB,EAAAA,QACPC,EAAAA,QACc,aAAdzB,GAA4B0B,EAAAA,gBAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAAAA,IAACK,mBAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}

package/cjs/calendar/calendar.styles_11ho5x8.css

@@ -1,2 +1,2 @@
-.wavc298{--fds-internal-calendarDropdown-verticalInset:var(--fds-spacing-24);--fds-internal-calendarDropdown-horizontalInset:var(--fds-spacing-32);--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);width:41rem;}
-.w1incl4u{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-lg);overflow:hidden;}
+@layer fds{.wavc298{--fds-internal-calendarDropdown-verticalInset:var(--fds-spacing-24);--fds-internal-calendarDropdown-horizontalInset:var(--fds-spacing-32);--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);width:41rem;}
+.w1incl4u{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-lg);overflow:hidden;}}

package/cjs/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../src/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./card.styles\";\nimport type { CardProps } from \"./types\";\n\nexport const Card = ({\n    children,\n    className,\n    \"data-testid\": dataTestId = \"card\",\n    ...otherProps\n}: CardProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.mode === \"dark\";\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyBL>{children}</Typography.BodyBL>\n        ) : (\n            children\n        );\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.card,\n                isDarkMode ? styles.cardDarkMode : styles.cardLightMode,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"0UAQqBA,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAA,OAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAAA,WAAWC,gBACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EAAAA,QACPC,EAAAA,KACAN,EAAaO,EAAAA,aAAsBC,EAAAA,cACnCf,GACHD,SAde,iBAAbA,EACHU,EAAAA,IAACO,aAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}
+{"version":3,"file":"card.js","sources":["../../../src/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./card.styles\";\nimport type { CardProps } from \"./types\";\n\n/** A themed container surface for grouping related content. */\nexport const Card = ({\n    children,\n    className,\n    \"data-testid\": dataTestId = \"card\",\n    ...otherProps\n}: CardProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.mode === \"dark\";\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyBL>{children}</Typography.BodyBL>\n        ) : (\n            children\n        );\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.card,\n                isDarkMode ? styles.cardDarkMode : styles.cardLightMode,\n                className\n            )}\n        >\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["_a","children","className","dataTestId","otherProps","__rest","theme","useContext","ThemeContext","isDarkMode","mode","_jsx","Object","assign","clsx","styles.card","styles.cardDarkMode","styles.cardLightMode","Typography","BodyBL"],"mappings":"0UASqBA,IAAA,IAAAC,SACjBA,EAAQC,UACRA,EACA,cAAeC,EAAa,QAAMH,EAC/BI,EAAUC,EAAAA,OAAAL,EAJI,wCASjB,MAAMM,EAAQC,EAAAA,WAAWC,gBACnBC,EAA6B,UAAhBH,aAAK,EAALA,EAAOI,MAY1B,OACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQT,EAAU,CAAA,cACDD,EACbD,UAAWY,EAAAA,QACPC,EAAAA,KACAN,EAAaO,EAAAA,aAAsBC,EAAAA,cACnCf,GACHD,SAde,iBAAbA,EACHU,EAAAA,IAACO,aAAWC,OAAM,CAAAlB,SAAEA,IAA6B,IAgB/C"}

package/cjs/card/card.styles_1gh9gs3.css

@@ -1,3 +1,3 @@
-.c13vbbsi{border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);padding:var(--fds-spacing-16) var(--fds-spacing-32);}
+@layer fds{.c13vbbsi{border-radius:var(--fds-radius-md);background:var(--fds-colour-bg);padding:var(--fds-spacing-16) var(--fds-spacing-32);}
 .c10ivu5q{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
-.c13s9i3s{box-shadow:var(--fds-shadow-md-subtle);}
+.c13s9i3s{box-shadow:var(--fds-shadow-md-subtle);}}

package/cjs/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/checkbox/checkbox.tsx"],"sourcesContent":["import {\n    MinusSquareFillIcon,\n    SquareFillIcon,\n    SquareIcon,\n    SquareTickFillIcon,\n} from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef } from \"react\";\n\nimport * as styles from \"./checkbox.styles\";\nimport type { CheckboxProps } from \"./types\";\n\nexport const Checkbox = ({\n    className,\n    checked,\n    disabled,\n    focusableWhenDisabled,\n    indeterminate,\n    displaySize = \"default\",\n    onChange,\n    id,\n    tabIndex,\n    ...otherProps\n}: CheckboxProps): JSX.Element => {\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const checkRef = useRef<HTMLInputElement>(null);\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        if (checkRef.current) {\n            checkRef.current.indeterminate = indeterminate ?? false;\n        }\n    }, [indeterminate]);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        if (indeterminate) {\n            return (\n                <MinusSquareFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"indeterminate\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (checked) {\n            return (\n                <SquareTickFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"checkmark\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (disabled) {\n            return (\n                <SquareFillIcon\n                    className={clsx(styles.icon, styles.iconDisabled)}\n                    data-testid=\"empty-disabled-checkbox\"\n                    aria-hidden\n                />\n            );\n        }\n\n        return (\n            <SquareIcon\n                className={clsx(styles.icon, styles.uncheckedIcon)}\n                data-testid=\"empty-checkbox\"\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                displaySize === \"small\" && styles.containerSmall,\n                className\n            )}\n            data-testid=\"checkbox\"\n        >\n            <input\n                id={id}\n                className={clsx(\n                    styles.input,\n                    !disabled && styles.inputActive,\n                    disabled && styles.inputDisabledVisual\n                )}\n                data-testid=\"checkbox-input\"\n                type=\"checkbox\"\n                checked={checked}\n                ref={checkRef}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                aria-checked={indeterminate ? \"mixed\" : checked}\n                onChange={handleOnChange}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["_a","className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","onChange","id","tabIndex","otherProps","__rest","checkRef","useRef","isFocusableWhenDisabled","isNativeDisabled","useEffect","current","_jsxs","clsx","styles.container","styles.containerSmall","children","_jsx","Object","assign","styles.input","styles.inputActive","styles.inputDisabledVisual","type","ref","event","preventDefault","MinusSquareFillIcon","styles.icon","styles.selectedIcon","styles.iconDisabled","SquareTickFillIcon","SquareFillIcon","SquareIcon","styles.uncheckedIcon"],"mappings":"+RAYyBA,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,SACvBA,EAAQC,GACRA,EAAEC,SACFA,KACGC,EAAUC,EAAAA,OAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,WAAA,KAAA,aAerB,MAAMY,EAAWC,EAAAA,OAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAiBxCY,EAAAA,WAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAqDJ,OACIa,EAAAA,YACIjB,UAAWkB,EAAAA,QACPC,EAAAA,UACgB,UAAhBd,GAA2Be,EAAAA,eAC3BpB,GACH,cACW,WAAUqB,SAAA,CAEtBC,EAAAA,IAAA,QAAAC,OAAAC,OAAA,CACIjB,GAAIA,EACJP,UAAWkB,EAAAA,QACPO,EAAAA,OACCvB,GAAYwB,EAAAA,YACbxB,GAAYyB,EAAAA,qBACf,cACW,iBACZC,KAAK,WACL3B,QAASA,EACT4B,IAAKlB,EACLH,SAAUK,EAA0B,EAAIL,EACxCN,SAAUY,EAAgB,gBACXD,iBACDT,EAAgB,QAAUH,EACxCK,SA7FYwB,IAChB5B,EACA4B,EAAMC,iBAGVzB,SAAAA,EAAWwB,EAAM,GAyFLrB,IAxERL,EAEIkB,EAAAA,IAACU,EAAAA,oBAAmB,CAChBhC,UAAWkB,EAAAA,QACPe,EAAAA,KACAC,EAAAA,aACAhC,GAAYiC,EAAAA,cACf,cACW,gBAAe,eAAA,IAMnClC,EAEIqB,EAAAA,IAACc,EAAAA,mBAAkB,CACfpC,UAAWkB,EAAAA,QACPe,EAAAA,KACAC,EAAAA,aACAhC,GAAYiC,EAAAA,cACf,cACW,YAAW,eAAA,IAM/BjC,EAEIoB,MAACe,EAAAA,eAAc,CACXrC,UAAWkB,EAAAA,QAAKe,EAAAA,KAAaE,EAAAA,4BACjB,0BAAyB,eAAA,IAO7Cb,MAACgB,EAAAA,WAAU,CACPtC,UAAWkB,EAAAA,QAAKe,EAAAA,KAAaM,EAAAA,6BACjB,iBAAgB,eAAA,MAkC9B"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/checkbox/checkbox.tsx"],"sourcesContent":["import {\n    MinusSquareFillIcon,\n    SquareFillIcon,\n    SquareIcon,\n    SquareTickFillIcon,\n} from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef } from \"react\";\n\nimport * as styles from \"./checkbox.styles\";\nimport type { CheckboxProps } from \"./types\";\n\n/**\n * A styled checkbox input with indeterminate state support.\n */\nexport const Checkbox = ({\n    className,\n    checked,\n    disabled,\n    focusableWhenDisabled,\n    indeterminate,\n    displaySize = \"default\",\n    onChange,\n    id,\n    tabIndex,\n    ...otherProps\n}: CheckboxProps): JSX.Element => {\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const checkRef = useRef<HTMLInputElement>(null);\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        if (checkRef.current) {\n            checkRef.current.indeterminate = indeterminate ?? false;\n        }\n    }, [indeterminate]);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        if (indeterminate) {\n            return (\n                <MinusSquareFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"indeterminate\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (checked) {\n            return (\n                <SquareTickFillIcon\n                    className={clsx(\n                        styles.icon,\n                        styles.selectedIcon,\n                        disabled && styles.iconDisabled\n                    )}\n                    data-testid=\"checkmark\"\n                    aria-hidden\n                />\n            );\n        }\n\n        if (disabled) {\n            return (\n                <SquareFillIcon\n                    className={clsx(styles.icon, styles.iconDisabled)}\n                    data-testid=\"empty-disabled-checkbox\"\n                    aria-hidden\n                />\n            );\n        }\n\n        return (\n            <SquareIcon\n                className={clsx(styles.icon, styles.uncheckedIcon)}\n                data-testid=\"empty-checkbox\"\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                displaySize === \"small\" && styles.containerSmall,\n                className\n            )}\n            data-testid=\"checkbox\"\n        >\n            <input\n                id={id}\n                className={clsx(\n                    styles.input,\n                    !disabled && styles.inputActive,\n                    disabled && styles.inputDisabledVisual\n                )}\n                data-testid=\"checkbox-input\"\n                type=\"checkbox\"\n                checked={checked}\n                ref={checkRef}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                aria-checked={indeterminate ? \"mixed\" : checked}\n                onChange={handleOnChange}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["_a","className","checked","disabled","focusableWhenDisabled","indeterminate","displaySize","onChange","id","tabIndex","otherProps","__rest","checkRef","useRef","isFocusableWhenDisabled","isNativeDisabled","useEffect","current","_jsxs","clsx","styles.container","styles.containerSmall","children","_jsx","Object","assign","styles.input","styles.inputActive","styles.inputDisabledVisual","type","ref","event","preventDefault","MinusSquareFillIcon","styles.icon","styles.selectedIcon","styles.iconDisabled","SquareTickFillIcon","SquareFillIcon","SquareIcon","styles.uncheckedIcon"],"mappings":"+RAeyBA,QAAAC,UACrBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,sBACRA,EAAqBC,cACrBA,EAAaC,YACbA,EAAc,UAASC,SACvBA,EAAQC,GACRA,EAAEC,SACFA,KACGC,EAAUC,EAAAA,OAAAX,EAVQ,CAAA,YAAA,UAAA,WAAA,wBAAA,gBAAA,cAAA,WAAA,KAAA,aAerB,MAAMY,EAAWC,EAAAA,OAAyB,MAEpCC,IAA4BX,KAAcC,EAC1CW,IAAqBZ,IAAaC,EAiBxCY,EAAAA,WAAU,KACFJ,EAASK,UACTL,EAASK,QAAQZ,cAAgBA,SAAAA,EACrC,GACD,CAACA,IAqDJ,OACIa,EAAAA,YACIjB,UAAWkB,EAAAA,QACPC,EAAAA,UACgB,UAAhBd,GAA2Be,EAAAA,eAC3BpB,GACH,cACW,WAAUqB,SAAA,CAEtBC,EAAAA,IAAA,QAAAC,OAAAC,OAAA,CACIjB,GAAIA,EACJP,UAAWkB,EAAAA,QACPO,EAAAA,OACCvB,GAAYwB,EAAAA,YACbxB,GAAYyB,EAAAA,qBACf,cACW,iBACZC,KAAK,WACL3B,QAASA,EACT4B,IAAKlB,EACLH,SAAUK,EAA0B,EAAIL,EACxCN,SAAUY,EAAgB,gBACXD,iBACDT,EAAgB,QAAUH,EACxCK,SA7FYwB,IAChB5B,EACA4B,EAAMC,iBAGVzB,SAAAA,EAAWwB,EAAM,GAyFLrB,IAxERL,EAEIkB,EAAAA,IAACU,EAAAA,oBAAmB,CAChBhC,UAAWkB,EAAAA,QACPe,EAAAA,KACAC,EAAAA,aACAhC,GAAYiC,EAAAA,cACf,cACW,gBAAe,eAAA,IAMnClC,EAEIqB,EAAAA,IAACc,EAAAA,mBAAkB,CACfpC,UAAWkB,EAAAA,QACPe,EAAAA,KACAC,EAAAA,aACAhC,GAAYiC,EAAAA,cACf,cACW,YAAW,eAAA,IAM/BjC,EAEIoB,MAACe,EAAAA,eAAc,CACXrC,UAAWkB,EAAAA,QAAKe,EAAAA,KAAaE,EAAAA,4BACjB,0BAAyB,eAAA,IAO7Cb,MAACgB,EAAAA,WAAU,CACPtC,UAAWkB,EAAAA,QAAKe,EAAAA,KAAaM,EAAAA,6BACjB,iBAAgB,eAAA,MAkC9B"}