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

package/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\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":"waAUA,MA8JaA,EAAYC,OAAOC,QA9JV,EAClBC,WAAQC,MACRA,EACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EACX,eAAnBT,IAEGU,EAAcC,GAAmBF,GAAkB,IACnDG,EAAWC,GAAgBJ,EAAkC,CAAA,GAEpEK,GAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,GAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,GAAU,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,EAACC,EAAiBC,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,EAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAKC,EAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAA,MAAA,CACIvC,UAAWwC,EACPE,GACC7C,IACIF,GACDgD,GACPlD,SAAA,CAEAC,GACGkC,EAAA,KAAA,CACI5B,UAAWwC,EACPI,GACC/C,GAAqBgD,GACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAACkB,EAAM,CACH9C,UAAW+C,EAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,GAckB,CAUlD2D,KAAMC"}
+{"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// @catalog\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":"waAUA,MA+JaA,EAAYC,OAAOC,QA/JV,EAClBC,WAAQC,MACRA,EACAC,mBAAkB,EAClBC,iBAAiB,aACjBC,qBAAoB,EACpBC,KACA,cAAeC,EACfC,YACAC,eAAe,EACfC,6BAEA,MAAOC,EAAWC,GAAgBC,EACX,eAAnBT,IAEGU,EAAcC,GAAmBF,GAAkB,IACnDG,EAAWC,GAAgBJ,EAAkC,CAAA,GAEpEK,GAAU,KACNH,GAAgB,EAAK,GACtB,IAEHG,GAAU,KACFJ,IACAJ,SAAAA,EAAyBC,GAC7B,GACD,CAACA,EAAWG,IAEfI,GAAU,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,EAACC,EAAiBC,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,EAAA,MAAA,CACIzC,GAAIA,EAAE,cACOC,EACbC,UAAWwC,EAAKC,EAAyBzC,GAAUP,SAAA,CA/CtDC,GAAUC,EAKX4C,EAAA,MAAA,CACIvC,UAAWwC,EACPE,GACC7C,IACIF,GACDgD,GACPlD,SAAA,CAEAC,GACGkC,EAAA,KAAA,CACI5B,UAAWwC,EACPI,GACC/C,GAAqBgD,GACzB,cACW,kBAAiB,aACjB5C,EAAYR,SAEvBC,IAGRC,GAvCLiC,EAACkB,EAAM,CACH9C,UAAW+C,EAAyB,cACxB,mCACZC,QAAS9B,EACT+B,UAAU,OACVC,KAAK,SACLC,SAAS,iBAERhD,EAAY,WAAa,gBAOvB,KAiDFV,MAEmB,GAekB,CAUlD2D,KAAMC"}

package/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\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","Alert","_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// @catalog\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","Alert","_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/alert/types.d.ts

@@ -23,6 +23,8 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Replaces the default trailing arrow on the action link. Only visible when
      * `actionLink` is also provided.
+     *
+     * @default <ArrowRightIcon />
      */
     actionLinkIcon?: JSX.Element | undefined;
     /** Controls the overall size of the alert, affecting typography and icon dimensions. */

package/animations/loading-dots/loading-dots.d.ts

@@ -1,2 +1,5 @@
-import type { BaseAnimationProps } from "../types";
-export declare const LoadingDots: ({ className, ...otherProps }: BaseAnimationProps) => import("react/jsx-runtime").JSX.Element;
+import type { AnimationProps } from "../types";
+/**
+ * An animated loading indicator with bouncing dots.
+ */
+export declare const LoadingDots: ({ className, ...otherProps }: AnimationProps) => import("react/jsx-runtime").JSX.Element;

package/animations/loading-dots/loading-dots.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-dots.js","sources":["../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { BaseAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\nexport const LoadingDots = ({\n    className,\n    ...otherProps\n}: BaseAnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","import","LoadingDots","_a","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"8OAOA,MAAMA,EAAoBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,OAAO,0BAAuBJ,kBAChD,MAEWK,EAAeC,IAAA,IAAAC,UACxBA,GAASD,EACNE,EAAUC,EAAAH,EAFW,eAIxB,OACII,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,EAAU,CAAED,UAAWM,EAAKC,EAAkBP,GAAUQ,SAC7DL,EAACM,EAAQ,CAACC,SAAUP,EAACQ,EAAW,CAAA,GAAGH,SAC/BL,EAACV,EAAiB,CAAA,OAEpB,EAIRkB,EAAc,IACTR,SAAKH,UAAWY"}
+{"version":3,"file":"loading-dots.js","sources":["../../../src/animations/loading-dots/loading-dots.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { AnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDots = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDots,\n}));\n\n// @catalog\n/**\n * An animated loading indicator with bouncing dots.\n */\nexport const LoadingDots = ({ className, ...otherProps }: AnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDots />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDots","lazy","__awaiter","default","import","LoadingDots","_a","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"8OAOA,MAAMA,EAAoBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACvCC,eAAgBC,OAAO,0BAAuBJ,kBAChD,MAMWK,EAAeC,IAAA,IAAAC,UAAEA,GAASD,EAAKE,EAAUC,EAAAH,EAA1B,eACxB,OACII,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,EAAU,CAAED,UAAWM,EAAKC,EAAkBP,GAAUQ,SAC7DL,EAACM,EAAQ,CAACC,SAAUP,EAACQ,EAAW,CAAA,GAAGH,SAC/BL,EAACV,EAAiB,CAAA,OAEpB,EAIRkB,EAAc,IACTR,SAAKH,UAAWY"}

package/animations/loading-dots-spinner/loading-dots-spinner.d.ts

@@ -1,2 +1,5 @@
 import type { CustomisableAnimationProps } from "../types";
+/**
+ * An animated loading indicator combining dots with a spinning motion.
+ */
 export declare const LoadingDotsSpinner: ({ className, color, ...otherProps }: CustomisableAnimationProps) => import("react/jsx-runtime").JSX.Element;

package/animations/loading-dots-spinner/loading-dots-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-dots-spinner.js","sources":["../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n    className,\n    color,\n    ...otherProps\n}: CustomisableAnimationProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [resolvedColor, setResolvedColor] = useState<string | undefined>(\n        undefined\n    );\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.containerColor]:\n            color || ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n    });\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n\n        const computedColor = getComputedStyle(element)\n            .getPropertyValue(styles.tokens.containerColor)\n            .trim();\n\n        setResolvedColor(computedColor || undefined);\n    }, [color]);\n\n    return (\n        <div\n            ref={containerRef}\n            {...otherProps}\n            className={clsx(styles.container, className)}\n        >\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDotsSpinner color={resolvedColor} />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","import","LoadingDotsSpinner","_a","className","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","_jsx","Object","assign","ref","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"gtBAQA,MAAMA,EAA2BC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,OAAO,0BAAuBJ,yBAChD,MAEWK,EAAsBC,QAAAC,UAC/BA,EAASC,MACTA,GAAKF,EACFG,EAAUC,EAAAJ,EAHkB,uBAK/B,MAAMK,EAAeC,EAAuB,OACrCC,EAAeC,GAAoBC,OACtCC,GAmBJ,OAhBAC,EAAcN,EAAc,CACxB,CAACO,EAAcC,gBACXX,GAASY,EAAeC,UAAU,iCAG1CC,GAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAqB,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKrB,GACDF,EAAU,CACdF,UAAW0B,EAAKC,EAAkB3B,GAAU4B,SAE5CN,EAACO,GAASC,SAAUR,EAACS,MAAcH,SAC/BN,EAAC7B,EAAwB,CAACQ,MAAOK,QAEnC,EAIRyB,EAAc,IACTT,SAAKtB,UAAWgC"}
+{"version":3,"file":"loading-dots-spinner.js","sources":["../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\n// @catalog\n/**\n * An animated loading indicator combining dots with a spinning motion.\n */\nexport const LoadingDotsSpinner = ({\n    className,\n    color,\n    ...otherProps\n}: CustomisableAnimationProps) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [resolvedColor, setResolvedColor] = useState<string | undefined>(\n        undefined\n    );\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.containerColor]:\n            color || ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n    });\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n\n        const computedColor = getComputedStyle(element)\n            .getPropertyValue(styles.tokens.containerColor)\n            .trim();\n\n        setResolvedColor(computedColor || undefined);\n    }, [color]);\n\n    return (\n        <div\n            ref={containerRef}\n            {...otherProps}\n            className={clsx(styles.container, className)}\n        >\n            <Suspense fallback={<Placeholder />}>\n                <LottieLoadingDotsSpinner color={resolvedColor} />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","import","LoadingDotsSpinner","_a","className","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","_jsx","Object","assign","ref","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"gtBAQA,MAAMA,EAA2BC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,OAAO,0BAAuBJ,yBAChD,MAMWK,EAAsBC,QAAAC,UAC/BA,EAASC,MACTA,GAAKF,EACFG,EAAUC,EAAAJ,EAHkB,uBAK/B,MAAMK,EAAeC,EAAuB,OACrCC,EAAeC,GAAoBC,OACtCC,GAmBJ,OAhBAC,EAAcN,EAAc,CACxB,CAACO,EAAcC,gBACXX,GAASY,EAAeC,UAAU,iCAG1CC,GAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAqB,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKrB,GACDF,EAAU,CACdF,UAAW0B,EAAKC,EAAkB3B,GAAU4B,SAE5CN,EAACO,GAASC,SAAUR,EAACS,MAAcH,SAC/BN,EAAC7B,EAAwB,CAACQ,MAAOK,QAEnC,EAIRyB,EAAc,IACTT,SAAKtB,UAAWgC"}

package/animations/loading-dots-spinner/lottie-animation.d.ts

@@ -1,2 +1,2 @@
-import type { CustomisedProps } from "../types";
-export declare const LottieLoadingDotsSpinner: ({ color, }: CustomisedProps) => import("react/jsx-runtime").JSX.Element;
+import type { CustomisableAnimationProps } from "../types";
+export declare const LottieLoadingDotsSpinner: ({ color, }: CustomisableAnimationProps) => import("react/jsx-runtime").JSX.Element;

package/animations/loading-dots-spinner/lottie-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"lottie-animation.js","sources":["../../../src/animations/loading-dots-spinner/lottie-animation.tsx"],"sourcesContent":["import { flatten, getColors } from \"lottie-colorify\";\nimport type { LottieOptions } from \"lottie-react\";\nimport { useLottie } from \"lottie-react\";\n\nimport type { CustomisedProps } from \"../types\";\nimport animationData from \"./data.json\";\nimport * as styles from \"./lottie-animation.styles\";\n\nexport const LottieLoadingDotsSpinner = ({\n    color = getColors(animationData)[0],\n}: CustomisedProps) => {\n    const options: LottieOptions = {\n        animationData: flatten(color, animationData),\n        loop: true,\n        autoplay: true,\n        className: styles.view,\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["LottieLoadingDotsSpinner","color","getColors","animationData","options","flatten","loop","autoplay","className","styles.view","View","useLottie","_jsx","_Fragment","children"],"mappings":"gSAQO,MAAMA,EAA2B,EACpCC,QAAQC,EAAUC,GAAe,OAEjC,MAAMC,EAAyB,CAC3BD,cAAeE,EAAQJ,EAAOE,GAC9BG,MAAM,EACNC,UAAU,EACVC,UAAWC,IAGTC,KAAEA,GAASC,EAAAA,UAAUP,GAE3B,OAAOQ,EAAAC,EAAA,CAAAC,SAAGJ,GAAQ"}
+{"version":3,"file":"lottie-animation.js","sources":["../../../src/animations/loading-dots-spinner/lottie-animation.tsx"],"sourcesContent":["import { flatten, getColors } from \"lottie-colorify\";\nimport type { LottieOptions } from \"lottie-react\";\nimport { useLottie } from \"lottie-react\";\n\nimport type { CustomisableAnimationProps } from \"../types\";\nimport animationData from \"./data.json\";\nimport * as styles from \"./lottie-animation.styles\";\n\nexport const LottieLoadingDotsSpinner = ({\n    color = getColors(animationData)[0],\n}: CustomisableAnimationProps) => {\n    const options: LottieOptions = {\n        animationData: flatten(color, animationData),\n        loop: true,\n        autoplay: true,\n        className: styles.view,\n    };\n\n    const { View } = useLottie(options);\n\n    return <>{View}</>;\n};\n"],"names":["LottieLoadingDotsSpinner","color","getColors","animationData","options","flatten","loop","autoplay","className","styles.view","View","useLottie","_jsx","_Fragment","children"],"mappings":"gSAQO,MAAMA,EAA2B,EACpCC,QAAQC,EAAUC,GAAe,OAEjC,MAAMC,EAAyB,CAC3BD,cAAeE,EAAQJ,EAAOE,GAC9BG,MAAM,EACNC,UAAU,EACVC,UAAWC,IAGTC,KAAEA,GAASC,EAAAA,UAAUP,GAE3B,OAAOQ,EAAAC,EAAA,CAAAC,SAAGJ,GAAQ"}

package/animations/loading-spinner/loading-spinner.d.ts

@@ -1,2 +1,5 @@
-import type { BaseAnimationProps } from "../types";
-export declare const LoadingSpinner: ({ className, ...otherProps }: BaseAnimationProps) => import("react/jsx-runtime").JSX.Element;
+import type { AnimationProps } from "../types";
+/**
+ * An animation of a flying rocket.
+ */
+export declare const LoadingSpinner: ({ className, ...otherProps }: AnimationProps) => import("react/jsx-runtime").JSX.Element;

package/animations/loading-spinner/loading-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-spinner.js","sources":["../../../src/animations/loading-spinner/loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { BaseAnimationProps } from \"../types\";\nimport * as styles from \"./loading-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieSpinner,\n}));\n\nexport const LoadingSpinner = ({\n    className,\n    ...otherProps\n}: BaseAnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieSpinner />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieSpinner","lazy","__awaiter","default","import","LoadingSpinner","_a","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"iPAOA,MAAMA,EAAgBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACnCC,eAAgBC,OAAO,0BAAuBJ,cAChD,MAEWK,EAAkBC,IAAA,IAAAC,UAC3BA,GAASD,EACNE,EAAUC,EAAAH,EAFc,eAI3B,OACII,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,EAAU,CAAED,UAAWM,EAAKC,EAAkBP,GAAUQ,SAC7DL,EAACM,EAAQ,CAACC,SAAUP,EAACQ,EAAW,CAAA,GAAGH,SAC/BL,EAACV,EAAa,CAAA,OAEhB,EAIRkB,EAAc,IACTR,SAAKH,UAAWY"}
+{"version":3,"file":"loading-spinner.js","sources":["../../../src/animations/loading-spinner/loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense } from \"react\";\n\nimport type { AnimationProps } from \"../types\";\nimport * as styles from \"./loading-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieSpinner = lazy(async () => ({\n    default: (await import(\"./lottie-animation\")).LottieSpinner,\n}));\n\n// @catalog\n/**\n * An animation of a flying rocket.\n */\nexport const LoadingSpinner = ({\n    className,\n    ...otherProps\n}: AnimationProps) => {\n    return (\n        <div {...otherProps} className={clsx(styles.container, className)}>\n            <Suspense fallback={<Placeholder />}>\n                <LottieSpinner />\n            </Suspense>\n        </div>\n    );\n};\n\nconst Placeholder = () => {\n    return <div className={styles.placeholder} />;\n};\n"],"names":["LottieSpinner","lazy","__awaiter","default","import","LoadingSpinner","_a","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","children","Suspense","fallback","Placeholder","styles.placeholder"],"mappings":"iPAOA,MAAMA,EAAgBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACnCC,eAAgBC,OAAO,0BAAuBJ,cAChD,MAMWK,EAAkBC,IAAA,IAAAC,UAC3BA,GAASD,EACNE,EAAUC,EAAAH,EAFc,eAI3B,OACII,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,EAAU,CAAED,UAAWM,EAAKC,EAAkBP,GAAUQ,SAC7DL,EAACM,EAAQ,CAACC,SAAUP,EAACQ,EAAW,CAAA,GAAGH,SAC/BL,EAACV,EAAa,CAAA,OAEhB,EAIRkB,EAAc,IACTR,SAAKH,UAAWY"}

package/animations/themed-loading-spinner/themed-loading-spinner.d.ts

@@ -1,2 +1,5 @@
-import type { BaseAnimationProps } from "../types";
-export declare const ThemedLoadingSpinner: (props: BaseAnimationProps) => import("react/jsx-runtime").JSX.Element;
+import type { AnimationProps } from "../types";
+/**
+ * A loading spinner that automatically adapts to the current theme.
+ */
+export declare const ThemedLoadingSpinner: (props: AnimationProps) => import("react/jsx-runtime").JSX.Element;

package/animations/themed-loading-spinner/themed-loading-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"themed-loading-spinner.js","sources":["../../../src/animations/themed-loading-spinner/themed-loading-spinner.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ThemeContext } from \"../../theme/theme-provider/context\";\nimport { LoadingDotsSpinner } from \"../loading-dots-spinner/loading-dots-spinner\";\nimport { LoadingSpinner } from \"../loading-spinner/loading-spinner\";\nimport type { BaseAnimationProps } from \"../types\";\n\nexport const ThemedLoadingSpinner = (props: BaseAnimationProps) => {\n    const fdsThemeContext = useContext(ThemeContext);\n\n    const isLifesgTheme = fdsThemeContext?.theme === \"lifesg\";\n\n    if (isLifesgTheme) {\n        return <LoadingSpinner {...props} />;\n    }\n\n    return <LoadingDotsSpinner {...props} />;\n};\n"],"names":["ThemedLoadingSpinner","props","fdsThemeContext","useContext","ThemeContext","isLifesgTheme","theme","_jsx","LoadingSpinner","LoadingDotsSpinner","Object","assign"],"mappings":"4SAOO,MAAMA,EAAwBC,IACjC,MAAMC,EAAkBC,EAAWC,GAE7BC,EAA2C,YAA3BH,aAAe,EAAfA,EAAiBI,OAEvC,OACWC,EADPF,EACQG,EAGJC,EAHkBC,OAAAC,OAAA,CAAA,EAAKV,GAGS"}
+{"version":3,"file":"themed-loading-spinner.js","sources":["../../../src/animations/themed-loading-spinner/themed-loading-spinner.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { ThemeContext } from \"../../theme/theme-provider/context\";\nimport { LoadingDotsSpinner } from \"../loading-dots-spinner/loading-dots-spinner\";\nimport { LoadingSpinner } from \"../loading-spinner/loading-spinner\";\nimport type { AnimationProps } from \"../types\";\n\n// @catalog\n/**\n * A loading spinner that automatically adapts to the current theme.\n */\nexport const ThemedLoadingSpinner = (props: AnimationProps) => {\n    const fdsThemeContext = useContext(ThemeContext);\n\n    const isLifesgTheme = fdsThemeContext?.theme === \"lifesg\";\n\n    if (isLifesgTheme) {\n        return <LoadingSpinner {...props} />;\n    }\n\n    return <LoadingDotsSpinner {...props} />;\n};\n"],"names":["ThemedLoadingSpinner","props","fdsThemeContext","useContext","ThemeContext","isLifesgTheme","theme","_jsx","LoadingSpinner","LoadingDotsSpinner","Object","assign"],"mappings":"4SAWO,MAAMA,EAAwBC,IACjC,MAAMC,EAAkBC,EAAWC,GAE7BC,EAA2C,YAA3BH,aAAe,EAAfA,EAAiBI,OAEvC,OACWC,EADPF,EACQG,EAGJC,EAHkBC,OAAAC,OAAA,CAAA,EAAKV,GAGS"}

package/animations/types.d.ts

@@ -1,11 +1,18 @@
 import type { ColourCSSVariableString, ComponentTokenCSSVariableString } from "../theme";
-export interface BaseAnimationProps {
+/**
+ * Props for the animations component.
+ */
+export type AnimationProps = {
     id?: string;
     "data-testid"?: string | undefined;
     className?: string;
-}
-export interface CustomisedProps {
+};
+/**
+ * Props for any customisable animations component.
+ */
+export type CustomisableAnimationProps = AnimationProps & {
+    /**
+     * The color that is to be applied on the animated elements
+     */
     color?: string | ColourCSSVariableString | ComponentTokenCSSVariableString | undefined;
-}
-export interface CustomisableAnimationProps extends BaseAnimationProps, CustomisedProps {
-}
+};

package/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\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":["Avatar","_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":"0SAaO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAN,EALM,mDAiCnB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EACPC,EACa,UAAbT,EACMU,EACAC,EACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,QAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAWC,OAASD,EAAWE,OAC1D,OACIV,EAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,WAEVC,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// @catalog\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":["Avatar","_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":"0SAcO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,SACRA,EAAW,UACX,cAAeC,EAAS,SAAQC,UAChCA,GAASJ,EACNK,EAAUC,EAAAN,EALM,mDAiCnB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQJ,EAAU,CAAA,cACDF,EACbC,UAAWM,EACPC,EACa,UAAbT,EACMU,EACAC,EACNT,GACHH,SAjCa,YAClB,IAAKA,EACD,OAAOM,QAGX,GAAwB,iBAAbN,EAAuB,CAC9B,MAAMa,EACW,UAAbZ,EAAuBa,EAAWC,OAASD,EAAWE,OAC1D,OACIV,EAACO,EAAa,CACVI,OAAO,WACPd,UAAWe,WAEVC,OAAOC,cACmB,QAAvBrB,EAAAC,EAASqB,YAAY,UAAE,IAAAtB,EAAAA,EAAI,GAC7BuB,eAGd,CAEA,OAAOtB,CAAQ,EAeVuB,KACC"}

package/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\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","Badge","_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":"qlBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,kBAUSC,EAASC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,EAAAT,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,EAAkBhB,EAAoBiB,IAAIP,GAK1CQ,EAAaC,EAAwB,MAU3C,OARAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,EAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,EAAA,OAAA,CAAMnB,UAAWoB,OAAkBC,IAAbtB,GAA0BuB,aAC5CC,EAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,EACPK,OACaJ,IAAbtB,GAA0B2B,GAC7B3B,SAEDwB,EAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAKS,EAAc7B,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// @catalog\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","Badge","_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":"qlBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,kBAWSC,EAASC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,EAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EAhCV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CA4ByBO,CAAgBP,GAC/BQ,EAAkBhB,EAAoBiB,IAAIP,GAK1CQ,EAAaC,EAAwB,MAU3C,OARAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,EAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,EAAA,OAAA,CAAMnB,UAAWoB,OAAkBC,IAAbtB,GAA0BuB,aAC5CC,EAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,EACPK,OACaJ,IAAbtB,GAA0B2B,GAC7B3B,SAEDwB,EAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAKS,EAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}

package/badge/types.d.ts

@@ -16,7 +16,11 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
      * badge as a standalone indicator.
      */
     children?: JSX.Element | undefined;
-    /** Color scheme applied to the badge. */
+    /**
+     * Color scheme applied to the badge.
+     *
+     * @default "default"
+     */
     color?: BadgeColor | undefined;
     /**
      * Numeric value displayed inside `number`, `number-with-border`, and
@@ -24,7 +28,14 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
      * `"1K"` or `"1K+"`. Has no effect on dot variants.
      */
     count?: number | undefined;
+    /**
+     * @default "badge"
+     */
     "data-testid"?: string | undefined;
-    /** Visual style of the badge indicator. */
+    /**
+     * Visual style of the badge indicator.
+     *
+     * @default "number"
+     */
     variant?: BadgeVariant | undefined;
 }

package/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\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":["BoxContainer","_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":"m8CAqBO,MAAMA,EAAgBC,IAAA,IAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,EAAeC,UACfA,GAAST,EACNU,EAAUC,EAAAX,EAVY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,kBAAA,cAezB,MAAOY,EAAcC,GAAmBC,GACnCX,GAAqBC,GAEpBW,EAAiBC,IACjBC,EAAWF,EAAeG,IAC1BC,EAAWC,EAAsB,MACjCC,EAAoBb,GAAmBL,EACvCmB,EAAaC,IACbC,EAAY,GAAGF,YACfG,EAAW,GAAGH,WACdI,GAAgBC,EAAuB,MAKvCC,GAAiBC,IAEnBA,EAAMC,kBACNjB,GAAiBD,EAAa,EAO5BmB,GAAmBC,EAAU,CAC/BC,OAAQrB,EAAeG,EAAekB,OAAS,IAyD7CC,GAAmB,IAEjB/B,GACIgC,YACI1B,UAAW2B,EACXC,QAAST,GACTU,KAAK,SAAQ,kBACIb,EAAQ,gBACVD,EAAS,iBACRrB,EAAW,gBACZS,iBACFL,aAAmB,EAAnBA,EAAqBgC,SAAU,SAAQtC,SAEpDkC,EAAA,MAAA,CACI1B,UAAW+B,EACPC,EACA7B,EACM8B,EACAC,GAEVzB,IAAKQ,GAAa,eAAA,EAAAzB,SAGlBkC,EAACS,EAAe,CAACnC,UAAWoC,QAOhD,OACIC,EAAA,UAAAC,OAAAC,OAAA,GACQtC,EAAU,CACdD,UAAW+B,EAAKS,EAAkBxC,GAAU,kBAC3BgB,EACjByB,KAAK,SACLhD,MAAwB,iBAAVA,EAAqBA,OAAQiD,EAASlD,SAAA,CAEpD6C,EAAA,MAAA,CACIrC,UAAW+B,EACPY,EACA/B,GAAqBgC,GACxB,cACW,SACZhB,QAAShB,EAAoBO,QAAgBuB,YAE7CL,EAAA,MAAA,CACIrC,UAAW6C,EACXJ,KAAM,SACNK,GAAI9B,EAAQxB,SAAA,CAEZ6C,EAAA,MAAA,CACIrC,UAAW+C,EAAgB,eACdjD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACG6B,EAAAsB,EAAA,CAAAxD,SACIkC,EAACuB,YAAgBpD,SAlFnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACI6B,EAACwB,EAAyB,CACtBlD,UAAW+B,EACPoB,EACiB,UAAjBtD,GAA4BuD,EACX,YAAjBvD,GACIwD,GACP,eAEGvD,aAAmB,EAAnBA,EAAqBwD,mBACrB,GAAGzD,SAAmB,aAEdA,IAGxB,QACI,OAAO,OAkEF0D,GACA7C,GAAYe,QAEhB7B,GACG8B,EAAA,MAAA,CACI1B,UAAW+B,EACPyB,EACA9D,GACI+D,GACP,cACW,2BAA0BjE,SAErCI,KAIPc,GAAYe,QAnIlB/B,EAEIgC,EAACgC,EAASC,IAAG,CACT3D,UAAW4D,EACXC,MAAOvC,GAAgB,cACV,uBACbwB,GAAI/B,EAASvB,SAEbkC,SACI1B,UAAW8D,EACXrD,IAAKD,EACLuD,MAAOC,GAAY7D,YAElBX,MAObkC,SACI1B,UAAWiE,gBACC,2BAA0BzE,SAEtCkC,SAAK1B,UAAW8D,WAAwBtE,SA8GtC"}
+{"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// @catalog\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":["BoxContainer","_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":"m8CAsBO,MAAMA,EAAgBC,IAAA,IAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,EAAeC,UACfA,GAAST,EACNU,EAAUC,EAAAX,EAVY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,kBAAA,cAezB,MAAOY,EAAcC,GAAmBC,GACnCX,GAAqBC,GAEpBW,EAAiBC,IACjBC,EAAWF,EAAeG,IAC1BC,EAAWC,EAAsB,MACjCC,EAAoBb,GAAmBL,EACvCmB,EAAaC,IACbC,EAAY,GAAGF,YACfG,EAAW,GAAGH,WACdI,GAAgBC,EAAuB,MAKvCC,GAAiBC,IAEnBA,EAAMC,kBACNjB,GAAiBD,EAAa,EAO5BmB,GAAmBC,EAAU,CAC/BC,OAAQrB,EAAeG,EAAekB,OAAS,IAyD7CC,GAAmB,IAEjB/B,GACIgC,YACI1B,UAAW2B,EACXC,QAAST,GACTU,KAAK,SAAQ,kBACIb,EAAQ,gBACVD,EAAS,iBACRrB,EAAW,gBACZS,iBACFL,aAAmB,EAAnBA,EAAqBgC,SAAU,SAAQtC,SAEpDkC,EAAA,MAAA,CACI1B,UAAW+B,EACPC,EACA7B,EACM8B,EACAC,GAEVzB,IAAKQ,GAAa,eAAA,EAAAzB,SAGlBkC,EAACS,EAAe,CAACnC,UAAWoC,QAOhD,OACIC,EAAA,UAAAC,OAAAC,OAAA,GACQtC,EAAU,CACdD,UAAW+B,EAAKS,EAAkBxC,GAAU,kBAC3BgB,EACjByB,KAAK,SACLhD,MAAwB,iBAAVA,EAAqBA,OAAQiD,EAASlD,SAAA,CAEpD6C,EAAA,MAAA,CACIrC,UAAW+B,EACPY,EACA/B,GAAqBgC,GACxB,cACW,SACZhB,QAAShB,EAAoBO,QAAgBuB,YAE7CL,EAAA,MAAA,CACIrC,UAAW6C,EACXJ,KAAM,SACNK,GAAI9B,EAAQxB,SAAA,CAEZ6C,EAAA,MAAA,CACIrC,UAAW+C,EAAgB,eACdjD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACG6B,EAAAsB,EAAA,CAAAxD,SACIkC,EAACuB,YAAgBpD,SAlFnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACI6B,EAACwB,EAAyB,CACtBlD,UAAW+B,EACPoB,EACiB,UAAjBtD,GAA4BuD,EACX,YAAjBvD,GACIwD,GACP,eAEGvD,aAAmB,EAAnBA,EAAqBwD,mBACrB,GAAGzD,SAAmB,aAEdA,IAGxB,QACI,OAAO,OAkEF0D,GACA7C,GAAYe,QAEhB7B,GACG8B,EAAA,MAAA,CACI1B,UAAW+B,EACPyB,EACA9D,GACI+D,GACP,cACW,2BAA0BjE,SAErCI,KAIPc,GAAYe,QAnIlB/B,EAEIgC,EAACgC,EAASC,IAAG,CACT3D,UAAW4D,EACXC,MAAOvC,GAAgB,cACV,uBACbwB,GAAI/B,EAASvB,SAEbkC,SACI1B,UAAW8D,EACXrD,IAAKD,EACLuD,MAAOC,GAAY7D,YAElBX,MAObkC,SACI1B,UAAWiE,gBACC,2BAA0BzE,SAEtCkC,SAAK1B,UAAW8D,WAAwBtE,SA8GtC"}

package/box-container/types.d.ts

@@ -28,6 +28,8 @@ export interface BoxContainerProps {
     /**
      * Renders an inline alert icon next to the title and announces the state to
      * screen readers. Has no effect when set to `"default"`.
+     *
+     * @default "default"
      */
     displayState?: BoxContainerDisplayState | undefined;
     className?: string | undefined;

package/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\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":["Breadcrumb","_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// @catalog\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":["Breadcrumb","_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/breadcrumb/types.d.ts

@@ -1,11 +1,16 @@
 export type FadePosition = "left" | "right" | "both";
 export type SeparatorStyle = "chevron" | "slash";
 /**
- * Gradient color values for the left and right fade overlays in the
- * breadcrumb scroll container.
+ * Gradient color values for the fade overlays in the breadcrumb scroll container.
  */
 export interface FadeColorSet {
+    /**
+     * Gradient color stops for the left fade overlay.
+     */
     left?: string[] | undefined;
+    /**
+     * Gradient color stops for the right fade overlay.
+     */
     right?: string[] | undefined;
 }
 /** Props for the `Breadcrumb` component */

package/button/button.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as n}from"react/jsx-runtime";import i from"clsx";import s from"react";import{ComponentLoadingSpinner as l}from"../shared/component-loading-spinner/component-loading-spinner.js";import{main as o,mainIconPositionRight as t,mainHasMinWidth as r,spinner as d,spinnerHasChildren as c,mainStyleLinkDanger as b,mainStyleLink as u,mainStyleLightDanger as m,mainStyleLight as f,mainStyleSecondaryDanger as p,mainStyleSecondary as g,mainStyleDefaultDanger as y,mainStyleDefault as v,mainStyleDisabled as h,mainSizeLargeIconOnly as j,mainSizeLarge as O,mainSizeSmallIconOnly as N,mainSizeSmall as T,mainSizeDefaultIconOnly as z,mainSizeDefault as k}from"./button.styles.js";import{hasValidChildren as w}from"./button-helper.js";const B={disabled:{base:h,danger:h},default:{base:v,danger:y},secondary:{base:g,danger:p},light:{base:f,danger:m},link:{base:u,danger:b}},D={default:{base:k,iconOnly:z},small:{base:T,iconOnly:N},large:{base:O,iconOnly:j}},R=(e,a)=>{var n,i;return a?null===(n=B[e])||void 0===n?void 0:n.danger:null===(i=B[e])||void 0===i?void 0:i.base},x=(e,a)=>{var n,s,l;return a?i(null===(n=D[e])||void 0===n?void 0:n.base,null===(s=D[e])||void 0===s?void 0:s.iconOnly):null===(l=D[e])||void 0===l?void 0:l.base},C=(b,u)=>{const{children:m,className:f,disabled:p=!1,loading:g=!1,styleType:y="default",sizeType:v="default",danger:h=!1,focusableWhenDisabled:j=!1,icon:O,iconPosition:N="left",onClick:T}=b,z=e(b,["children","className","disabled","loading","styleType","sizeType","danger","focusableWhenDisabled","icon","iconPosition","onClick"]),k=w(m),B=!!O&&!k,D=p?"disabled":y;return a("button",Object.assign({ref:u,"data-testid":z["data-testid"]||"button",disabled:p&&!j,"aria-disabled":p,"aria-busy":g,onClick:p?void 0:T,className:i(o,O&&"right"===N&&t,!B&&r,R(D,h),x(v,B),f)},z,{children:[g?n(l,{className:i(d,k&&c)}):O?s.cloneElement(O,{"aria-hidden":!0}):null,k&&n("span",{children:m})]}))};C.displayName="Button";const L=s.forwardRef(C),P=(e,a)=>{var i;return n(L,Object.assign({},e,{sizeType:null!==(i=e.sizeType)&&void 0!==i?i:"default",ref:a}))};P.displayName="Button.Default";const S=(e,a)=>n(L,Object.assign({},e,{sizeType:"small",ref:a}));S.displayName="Button.Small";const W=(e,a)=>n(L,Object.assign({},e,{sizeType:"large",ref:a}));W.displayName="Button.Large";const _=Object.assign(L,{Default:s.forwardRef(P),Small:s.forwardRef(S),Large:s.forwardRef(W)});export{_ as Button};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as n}from"react/jsx-runtime";import i from"clsx";import s from"react";import{ComponentLoadingSpinner as l}from"../shared/component-loading-spinner/component-loading-spinner.js";import{main as o,mainIconPositionRight as t,mainHasMinWidth as r,spinner as d,spinnerHasChildren as c,mainStyleLinkDanger as b,mainStyleLink as u,mainStyleLightDanger as m,mainStyleLight as f,mainStyleSecondaryDanger as p,mainStyleSecondary as g,mainStyleDefaultDanger as y,mainStyleDefault as v,mainStyleDisabled as h,mainIconOnly as j,mainSizeLargeIconOnly as O,mainSizeLarge as N,mainSizeSmallIconOnly as T,mainSizeSmall as z,mainSizeDefaultIconOnly as k,mainSizeDefault as w}from"./button.styles.js";import{hasValidChildren as B}from"./button-helper.js";const D={disabled:{base:h,danger:h},default:{base:v,danger:y},secondary:{base:g,danger:p},light:{base:f,danger:m},link:{base:u,danger:b}},R={default:{base:w,iconOnly:k},small:{base:z,iconOnly:T},large:{base:N,iconOnly:O}},x=(e,a)=>{var n,i;return a?null===(n=D[e])||void 0===n?void 0:n.danger:null===(i=D[e])||void 0===i?void 0:i.base},C=(e,a)=>{var n,s,l;return a?i(j,null===(n=R[e])||void 0===n?void 0:n.base,null===(s=R[e])||void 0===s?void 0:s.iconOnly):null===(l=R[e])||void 0===l?void 0:l.base},L=(b,u)=>{const{children:m,className:f,disabled:p=!1,loading:g=!1,styleType:y="default",sizeType:v="default",danger:h=!1,focusableWhenDisabled:j=!1,icon:O,iconPosition:N="left",onClick:T}=b,z=e(b,["children","className","disabled","loading","styleType","sizeType","danger","focusableWhenDisabled","icon","iconPosition","onClick"]),k=B(m),w=!!O&&!k,D=p?"disabled":y;return a("button",Object.assign({ref:u,"data-testid":z["data-testid"]||"button",disabled:p&&!j,"aria-disabled":p,"aria-busy":g,onClick:p?void 0:T,className:i(o,O&&"right"===N&&t,!w&&r,x(D,h),C(v,w),f)},z,{children:[g?n(l,{className:i(d,k&&c)}):O?s.cloneElement(O,{"aria-hidden":!0}):null,k&&n("span",{children:m})]}))};L.displayName="Button";const P=s.forwardRef(L),S=(e,a)=>{var i;return n(P,Object.assign({},e,{sizeType:null!==(i=e.sizeType)&&void 0!==i?i:"default",ref:a}))};S.displayName="Button.Default";const W=(e,a)=>n(P,Object.assign({},e,{sizeType:"small",ref:a}));W.displayName="Button.Small";const _=(e,a)=>n(P,Object.assign({},e,{sizeType:"large",ref:a}));_.displayName="Button.Large";const E=Object.assign(P,{Default:s.forwardRef(S),Small:s.forwardRef(W),Large:s.forwardRef(_)});export{E as Button};
 //# sourceMappingURL=button.js.map

package/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\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":"ixBAQA,MAAMA,EAAwD,CAC1DC,SAAU,CACNC,KAAMC,EACNC,OAAQD,GAEZE,QAAS,CACLH,KAAMI,EACNF,OAAQG,GAEZC,UAAW,CACPN,KAAMO,EACNL,OAAQM,GAEZC,MAAO,CAAET,KAAMU,EAAuBR,OAAQS,GAC9CC,KAAM,CAAEZ,KAAMa,EAAsBX,OAAQY,IAG1CC,EAAmE,CACrEZ,QAAS,CACLH,KAAMgB,EACNC,SAAUC,GAEdC,MAAO,CACHnB,KAAMoB,EACNH,SAAUI,GAEdC,MAAO,CACHtB,KAAMuB,EACNN,SAAUO,IAIZC,EAAgB,CAACC,EAAwBxB,aAC3C,OAAAA,UACMyB,EAAA7B,EAAc4B,yBAAiBxB,OACF,UAA7BJ,EAAc4B,UAAe,IAAAE,OAAA,EAAAA,EAAE5B,IAAI,EAEvC6B,EAAe,CAACC,EAAkBb,eACpC,OAAAA,EACMc,EAA2B,UAAtBhB,EAAae,UAAS,IAAAH,OAAA,EAAAA,EAAE3B,KAA4B,UAAtBe,EAAae,UAAS,IAAAF,OAAA,EAAAA,EAAEX,UACrC,UAAtBF,EAAae,UAAS,IAAAE,OAAA,EAAAA,EAAEhC,IAAI,EAEhCiC,EAAY,CAACC,EAAoBC,KACnC,MAAMC,SACFA,EAAQC,UACRA,EAAStC,SACTA,GAAW,EAAKuC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAAST,SACrBA,EAAW,UAAS5B,OACpBA,GAAS,EAAKsC,sBACdA,GAAwB,EAAKC,KAC7BA,EAAIC,aACJA,EAAe,OAAMC,QACrBA,GAEAT,EADGU,IACHV,EAbE,CAAA,WAAA,YAAA,WAAA,UAAA,YAAA,WAAA,SAAA,wBAAA,OAAA,eAAA,YAeAW,EAAcC,EAAiBV,GAC/BnB,IAAawB,IAASI,EACtBnB,EAAiB3B,EAAW,WAAawC,EAE/C,OACIQ,0BACIZ,IAAKA,EAAG,cACKS,EAAW,gBAAkB,SAC1C7C,SAAUA,IAAayC,kBACRzC,EAAQ,YACZuC,EACXK,QAAS5C,OAAWiD,EAAYL,EAChCN,UAAWN,EACPkB,EACAR,GACqB,UAAjBC,GACAQ,GACHjC,GAAYkC,EACb1B,EAAcC,EAAgBxB,GAC9B2B,EAAaC,EAAUb,GACvBoB,IAEAO,aAEHN,EACGc,EAACC,EAAuB,CACpBhB,UAAWN,EACPuB,EACAT,GAAeU,KAGvBd,EACAe,EAAMC,aAAahB,EAAM,CAAE,eAAe,IAC1C,KACHI,GAAeO,EAAA,OAAA,CAAAhB,SAAOA,OAClB,EAIjBH,EAAUyB,YAAc,SAExB,MAAMC,EAAaH,EAAMI,WAAW3B,GAE9B4B,EAAyB,CAAC3B,EAAoBC,WAAmB,OACnEiB,EAACO,EAAUG,OAAAC,OAAA,CAAA,EAAK7B,EAAK,CAAEJ,SAAwB,QAAdH,EAAAO,EAAMJ,gBAAQ,IAAAH,EAAAA,EAAI,UAAWQ,IAAKA,IAAO,EAE9E0B,EAAuBH,YAAc,iBAErC,MAAMM,EAAuB,CAAC9B,EAAoBC,IAC9CiB,EAACO,mBAAezB,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,KAEjD6B,EAAqBN,YAAc,eAEnC,MAAMO,EAAuB,CAAC/B,EAAoBC,IAC9CiB,EAACO,mBAAezB,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,KAEjD8B,EAAqBP,YAAc,qBAGtBQ,EAASJ,OAAOC,OAAOJ,EAAY,CAE5CQ,QAASX,EAAMI,WAAWC,GAE1BO,MAAOZ,EAAMI,WAAWI,GAExBK,MAAOb,EAAMI,WAAWK"}
+{"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(\n              styles.mainIconOnly,\n              sizeClassMap[sizeType]?.base,\n              sizeClassMap[sizeType]?.iconOnly\n          )\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// @catalog\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","styles.mainIconOnly","_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":"myBAQA,MAAMA,EAAwD,CAC1DC,SAAU,CACNC,KAAMC,EACNC,OAAQD,GAEZE,QAAS,CACLH,KAAMI,EACNF,OAAQG,GAEZC,UAAW,CACPN,KAAMO,EACNL,OAAQM,GAEZC,MAAO,CAAET,KAAMU,EAAuBR,OAAQS,GAC9CC,KAAM,CAAEZ,KAAMa,EAAsBX,OAAQY,IAG1CC,EAAmE,CACrEZ,QAAS,CACLH,KAAMgB,EACNC,SAAUC,GAEdC,MAAO,CACHnB,KAAMoB,EACNH,SAAUI,GAEdC,MAAO,CACHtB,KAAMuB,EACNN,SAAUO,IAIZC,EAAgB,CAACC,EAAwBxB,aAC3C,OAAAA,UACMyB,EAAA7B,EAAc4B,yBAAiBxB,OACF,UAA7BJ,EAAc4B,UAAe,IAAAE,OAAA,EAAAA,EAAE5B,IAAI,EAEvC6B,EAAe,CAACC,EAAkBb,eACpC,OAAAA,EACMc,EACIC,EACsB,QAAtBL,EAAAZ,EAAae,UAAS,IAAAH,OAAA,EAAAA,EAAE3B,KACF,QAAtB4B,EAAAb,EAAae,UAAS,IAAAF,OAAA,EAAAA,EAAEX,UAEN,UAAtBF,EAAae,UAAS,IAAAG,OAAA,EAAAA,EAAEjC,IAAI,EAEhCkC,EAAY,CAACC,EAAoBC,KACnC,MAAMC,SACFA,EAAQC,UACRA,EAASvC,SACTA,GAAW,EAAKwC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAASV,SACrBA,EAAW,UAAS5B,OACpBA,GAAS,EAAKuC,sBACdA,GAAwB,EAAKC,KAC7BA,EAAIC,aACJA,EAAe,OAAMC,QACrBA,GAEAT,EADGU,IACHV,EAbE,CAAA,WAAA,YAAA,WAAA,UAAA,YAAA,WAAA,SAAA,wBAAA,OAAA,eAAA,YAeAW,EAAcC,EAAiBV,GAC/BpB,IAAayB,IAASI,EACtBpB,EAAiB3B,EAAW,WAAayC,EAE/C,OACIQ,0BACIZ,IAAKA,EAAG,cACKS,EAAW,gBAAkB,SAC1C9C,SAAUA,IAAa0C,kBACR1C,EAAQ,YACZwC,EACXK,QAAS7C,OAAWkD,EAAYL,EAChCN,UAAWP,EACPmB,EACAR,GACqB,UAAjBC,GACAQ,GACHlC,GAAYmC,EACb3B,EAAcC,EAAgBxB,GAC9B2B,EAAaC,EAAUb,GACvBqB,IAEAO,aAEHN,EACGc,EAACC,EAAuB,CACpBhB,UAAWP,EACPwB,EACAT,GAAeU,KAGvBd,EACAe,EAAMC,aAAahB,EAAM,CAAE,eAAe,IAC1C,KACHI,GAAeO,EAAA,OAAA,CAAAhB,SAAOA,OAClB,EAIjBH,EAAUyB,YAAc,SAExB,MAAMC,EAAaH,EAAMI,WAAW3B,GAE9B4B,EAAyB,CAAC3B,EAAoBC,WAAmB,OACnEiB,EAACO,EAAUG,OAAAC,OAAA,CAAA,EAAK7B,EAAK,CAAEL,SAAwB,QAAdH,EAAAQ,EAAML,gBAAQ,IAAAH,EAAAA,EAAI,UAAWS,IAAKA,IAAO,EAE9E0B,EAAuBH,YAAc,iBAErC,MAAMM,EAAuB,CAAC9B,EAAoBC,IAC9CiB,EAACO,mBAAezB,EAAK,CAAEL,SAAS,QAAQM,IAAKA,KAEjD6B,EAAqBN,YAAc,eAEnC,MAAMO,EAAuB,CAAC/B,EAAoBC,IAC9CiB,EAACO,mBAAezB,EAAK,CAAEL,SAAS,QAAQM,IAAKA,KAEjD8B,EAAqBP,YAAc,qBAItBQ,EAASJ,OAAOC,OAAOJ,EAAY,CAE5CQ,QAASX,EAAMI,WAAWC,GAE1BO,MAAOZ,EAAMI,WAAWI,GAExBK,MAAOb,EAAMI,WAAWK"}

package/button/button.styles.d.ts

@@ -1,5 +1,6 @@
 export declare const main: import("@linaria/core").LinariaClassName;
 export declare const mainIconPositionRight: import("@linaria/core").LinariaClassName;
+export declare const mainIconOnly: import("@linaria/core").LinariaClassName;
 export declare const mainHasMinWidth: import("@linaria/core").LinariaClassName;
 export declare const mainStyleDefault: import("@linaria/core").LinariaClassName;
 export declare const mainStyleDefaultDanger: import("@linaria/core").LinariaClassName;

package/button/button.styles.js

@@ -1,2 +1,2 @@
-import"./button.styles_1pxy0co.css";const m="mf6do54",n="moaxzdy",o="m1en642a",t="m1jxbf2q",s="mharb8i",c="mbs4ndg",a="m1taerhv",b="m8hnmz5",e="m53fwwa",x="m1557ko0",y="m70z5yw",r="mc532iy",f="m1knftbn",h="m18n5exw",i="m3n7mqo",k="m1ytkx3r",w="m1c1mlhm",z="me78sau",_="s17i3scc",d="s1joklnz";export{m as main,o as mainHasMinWidth,n as mainIconPositionRight,f as mainSizeDefault,h as mainSizeDefaultIconOnly,w as mainSizeLarge,z as mainSizeLargeIconOnly,i as mainSizeSmall,k as mainSizeSmallIconOnly,t as mainStyleDefault,s as mainStyleDefaultDanger,r as mainStyleDisabled,b as mainStyleLight,e as mainStyleLightDanger,x as mainStyleLink,y as mainStyleLinkDanger,c as mainStyleSecondary,a as mainStyleSecondaryDanger,_ as spinner,d as spinnerHasChildren};
+import"./button.styles_19i4dfq.css";const m="mf6do54",n="moaxzdy",o="m1en642a",t="m1jxbf2q",s="mharb8i",a="mbs4ndg",b="m1taerhv",c="m8hnmz5",e="m53fwwa",f="m1557ko0",x="m70z5yw",i="mc532iy",r="m1knftbn",y="m18n5exw",d="m3n7mqo",h="m1ytkx3r",k="m1c1mlhm",w="me78sau",z="m17i3scc",_="s1joklnz",l="sv7ox5f";export{m as main,t as mainHasMinWidth,o as mainIconOnly,n as mainIconPositionRight,y as mainSizeDefault,d as mainSizeDefaultIconOnly,w as mainSizeLarge,z as mainSizeLargeIconOnly,h as mainSizeSmall,k as mainSizeSmallIconOnly,s as mainStyleDefault,a as mainStyleDefaultDanger,r as mainStyleDisabled,e as mainStyleLight,f as mainStyleLightDanger,x as mainStyleLink,i as mainStyleLinkDanger,b as mainStyleSecondary,c as mainStyleSecondaryDanger,_ as spinner,l as spinnerHasChildren};
 //# sourceMappingURL=button.styles.js.map