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

package/_virtual/index.js

@@ -1,2 +1,2 @@
-var e={exports:{}};export{e as __module};
+var r={};export{r as __exports};
 //# sourceMappingURL=index.js.map

package/_virtual/index3.js

@@ -1,2 +1,2 @@
-var r={};export{r as __exports};
+var e={exports:{}};export{e as __module};
 //# sourceMappingURL=index3.js.map

package/alert/alert.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{ChevronDownIcon as s}from"@lifesg/react-icons";import{ArrowRightIcon as t}from"@lifesg/react-icons/arrow-right";import{ExclamationCircleFillIcon as o}from"@lifesg/react-icons/exclamation-circle-fill";import{ExclamationTriangleFillIcon as a}from"@lifesg/react-icons/exclamation-triangle-fill";import{ICircleFillIcon as n}from"@lifesg/react-icons/i-circle-fill";import{TickCircleFillIcon as l}from"@lifesg/react-icons/tick-circle-fill";import c from"clsx";import{useState as m,useRef as p,useCallback as d,useEffect as u}from"react";import{useResizeDetector as f}from"../external/react-resize-detector/build/index.esm.js";import{Markup as h}from"../markup/markup.js";import{inertValue as y}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as C}from"../theme/utils/use-apply-styles.js";import{Typography as j}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as g}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as x,alertIconDescription as w,wrapperDescription as k,alertIconInfo as b,wrapperInfo as N,alertIconWarning as v,wrapperWarning as T,alertIconSuccess as I,wrapperSuccess as L,alertIconError as S,wrapperError as z,alertIconWrapper as H,alertIconWrapperSmall as $,alertIconWrapperDefault as _,contentContainer as q,wrapper as A,chevronIcon as D,chevronIconExpanded as E,chevronIconCollapsed as M,showMoreButton as O,showMoreButtonSmall as W,showMoreButtonDefault as B,textWrapper as F,textWrapperContainer as G,textWrapperContainerShowMoreWithLink as J,textWrapperContainerCollapsed as K,actionLinkText as P,actionLinkTextSmall as Q,actionLinkTextDefault as R}from"./alert.styles.js";const U={error:{wrapperTypeClass:z,iconColorClass:S},success:{wrapperTypeClass:L,iconColorClass:I},warning:{wrapperTypeClass:T,iconColorClass:v},info:{wrapperTypeClass:N,iconColorClass:b},description:{wrapperTypeClass:k,iconColorClass:w}},V=w=>{var{type:k,className:b,children:N,actionLink:I,actionLinkIcon:L,sizeType:S="default",showIcon:z=!1,customIcon:V,maxCollapsedHeight:X,role:Y}=w,Z=e(w,["type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role"]);const[ee,re]=m(!1),[ie,se]=m(!1),{height:te,ref:oe}=f(),ae=g(),ne=p(null),le=me(),ce=d((()=>{re(!X),se(me())}),[X,te]);function me(){return!(!te||!X)&&te>X}u((()=>{ce()}),[X,te,ce]),C(ne,{[x.maxCollapsedHeight]:!ee&&le&&X?`${X}px`:null});const{wrapperTypeClass:pe=T,iconColorClass:de=v}=U[k]||{};return r("div",{className:c(A,pe,b),"aria-label":`${(()=>{switch(k){case"success":return"Success";case"warning":return"Warning";case"error":return"Error";case"info":return"Information";case"description":return"Description";default:return"Alert"}})()}`,"data-testid":Z["data-testid"],role:Y,children:[z&&i("div",{className:c(H,"small"===S?$:_,de),children:(()=>{if(k&&V)return V;switch(k){case"success":return i(l,{"aria-hidden":!0});case"warning":return i(a,{"aria-hidden":!0});case"error":return i(o,{"aria-hidden":!0});case"info":case"description":return i(n,{"aria-hidden":!0});default:return null}})()}),r("div",{className:q,children:[ie&&r("button",{className:c(O,"small"===S?W:B),type:"button","aria-expanded":ee,"aria-controls":ae,onClick:()=>re(!ee),children:["Show ",ee?"less":"more",i(s,{className:c(D,ee?E:M)})]}),r("div",{id:ae,className:c(G,ee&&I&&J,!ee&&le&&K),inert:y(!!X&&!ee),ref:ne,children:[i(h,{ref:oe,className:F,baseTextSize:"small"===S?"body-sm":"body-md",children:N}),I?r(j.LinkSM,Object.assign({"data-testid":"action-link",className:c(P,"small"===S?Q:R),underlineStyle:"none"},I,{children:[I.children,L||i(t,{})]})):null]})]})]})};export{V as Alert};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{ChevronDownIcon as s}from"@lifesg/react-icons";import{ArrowRightIcon as t}from"@lifesg/react-icons/arrow-right";import{ExclamationCircleFillIcon as o}from"@lifesg/react-icons/exclamation-circle-fill";import{ExclamationTriangleFillIcon as a}from"@lifesg/react-icons/exclamation-triangle-fill";import{ICircleFillIcon as l}from"@lifesg/react-icons/i-circle-fill";import{TickCircleFillIcon as n}from"@lifesg/react-icons/tick-circle-fill";import c from"clsx";import{useState as m,useRef as p,useCallback as d,useEffect as u}from"react";import{useResizeDetector as f}from"../external/react-resize-detector/build/index.esm.js";import{Markup as h}from"../markup/markup.js";import{inertValue as y}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as j}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as C}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as g}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as x,alertIconDescription as w,wrapperDescription as k,alertIconInfo as b,wrapperInfo as N,alertIconWarning as v,wrapperWarning as T,alertIconSuccess as I,wrapperSuccess as L,alertIconError as S,wrapperError as z,alertIconWrapper as H,alertIconWrapperSmall as q,alertIconWrapperDefault as $,contentContainer as _,wrapper as A,chevronIcon as D,chevronIconExpanded as E,chevronIconCollapsed as M,showMoreButton as O,showMoreButtonSmall as W,showMoreButtonDefault as B,textWrapper as F,textWrapperContainer as G,textWrapperContainerShowMoreWithLink as J,textWrapperContainerCollapsed as K,actionLinkText as P,actionLinkTextSmall as Q,actionLinkTextDefault as R}from"./alert.styles.js";const U={error:{wrapperTypeClass:z,iconColorClass:S},success:{wrapperTypeClass:L,iconColorClass:I},warning:{wrapperTypeClass:T,iconColorClass:v},info:{wrapperTypeClass:N,iconColorClass:b},description:{wrapperTypeClass:k,iconColorClass:w}},V=w=>{var{type:k,className:b,children:N,actionLink:I,actionLinkIcon:L,sizeType:S="default",showIcon:z=!1,customIcon:V,maxCollapsedHeight:X,role:Y}=w,Z=e(w,["type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role"]);const[ee,re]=m(!1),[ie,se]=m(!1),{height:te,ref:oe}=f(),ae=g(),le=p(null),ne=me(),ce=d((()=>{re(!X),se(me())}),[X,te]);function me(){return!(!te||!X)&&te>X}u((()=>{ce()}),[X,te,ce]),j(le,{[x.maxCollapsedHeight]:!ee&&ne&&X?`${X}px`:null});const{wrapperTypeClass:pe=T,iconColorClass:de=v}=U[k]||{};return r("div",{className:c(A,pe,b),"aria-label":`${(()=>{switch(k){case"success":return"Success";case"warning":return"Warning";case"error":return"Error";case"info":return"Information";case"description":return"Description";default:return"Alert"}})()}`,"data-testid":Z["data-testid"],role:Y,children:[z&&i("div",{className:c(H,"small"===S?q:$,de),children:(()=>{if(k&&V)return V;switch(k){case"success":return i(n,{"aria-hidden":!0});case"warning":return i(a,{"aria-hidden":!0});case"error":return i(o,{"aria-hidden":!0});case"info":case"description":return i(l,{"aria-hidden":!0});default:return null}})()}),r("div",{className:_,children:[ie&&r("button",{className:c(O,"small"===S?W:B),type:"button","aria-expanded":ee,"aria-controls":ae,onClick:()=>re(!ee),children:["Show ",ee?"less":"more",i(s,{className:c(D,ee?E:M)})]}),r("div",{id:ae,className:c(G,ee&&I&&J,!ee&&ne&&K),inert:y(!!X&&!ee),ref:le,children:[i(h,{ref:oe,className:F,baseTextSize:"small"===S?"body-sm":"body-md",children:N}),I?r(C.LinkSM,Object.assign({"data-testid":"action-link",className:c(P,"small"===S?Q:R),underlineStyle:"none"},I,{children:[I.children,L||i(t,{})]})):null]})]})]})};export{V as Alert};
 //# sourceMappingURL=alert.js.map

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\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\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":"4jEAkBA,MAAMA,EAAiB,CACnBC,MAAO,CACHC,iBAAkBC,EAClBC,eAAgBC,GAEpBC,QAAS,CACLJ,iBAAkBK,EAClBH,eAAgBI,GAEpBC,QAAS,CACLP,iBAAkBQ,EAClBN,eAAgBO,GAEpBC,KAAM,CACFV,iBAAkBW,EAClBT,eAAgBU,GAEpBC,YAAa,CACTb,iBAAkBc,EAClBZ,eAAgBa,IAIXC,EAASC,IAAA,IAAAC,KAClBA,EAAIC,UACJA,EAASC,SACTA,EAAQC,WACRA,EAAUC,eACVA,EAAcC,SACdA,EAAW,UAASC,SACpBA,GAAW,EAAKC,WAChBA,EAAUC,mBACVA,EAAkBC,KAClBA,GAAIV,EACDW,EAAUC,EAAAZ,EAXK,CAAA,OAAA,YAAA,WAAA,aAAA,iBAAA,WAAA,WAAA,aAAA,qBAAA,SAgBlB,MAAOa,GAAmBC,IAAwBC,GAAkB,IAC7DC,GAAgBC,IAAqBF,GAAkB,IACtDG,OAAQC,GAAeC,IAAKC,IAChCC,IACEC,GAAYC,IACZC,GAAeC,EAAuB,MACtCC,GAAcC,KAuBdC,GAAoBC,GAAY,KAClChB,IAAsBL,GACtBQ,GAAkBW,KAAkC,GACrD,CAACnB,EAAoBU,KAExB,SAASS,KACL,SAAIT,KAAiBV,IACVU,GAAgBV,CAG/B,CAUAsB,GAAU,KACNF,IAAmB,GACpB,CAACpB,EAAoBU,GAAeU,KAEvCG,EAAcP,GAAc,CACxB,CAACQ,EAAcxB,qBACVI,IAAqBc,IAAelB,EAC/B,GAAGA,MACH,OAOd,MAiGM1B,iBACFA,GAAmBQ,EAAqBN,eACxCA,GAAiBO,GACjBX,EAAeoB,IAAS,CAAA,EAE5B,OACIiC,EAAA,MAAA,CACIhC,UAAWiC,EAAKC,EAAgBrD,GAAkBmB,GAAU,aAChD,GA7JE,MAClB,OAAQD,GACJ,IAAK,UACD,MAAO,UACX,IAAK,UACD,MAAO,UACX,IAAK,QACD,MAAO,QACX,IAAK,OACD,MAAO,cACX,IAAK,cACD,MAAO,cACX,QACI,MAAO,UAgJIoC,KAAiB,cACnB1B,EAAW,eACxBD,KAAMA,EAAIP,SAAA,CAETI,GACG+B,EAAA,MAAA,CACIpC,UAAWiC,EACPI,EACa,UAAbjC,EACMkC,EACAC,EACNxD,IACHkB,SAlEE,MACf,GAAIF,GAAQO,EAAY,OAAOA,EAC/B,OAAQP,GACJ,IAAK,UACD,OAAOqC,EAACI,EAAkB,CAAA,eAAA,IAC9B,IAAK,UACD,OAAOJ,EAACK,EAA2B,CAAA,eAAA,IACvC,IAAK,QACD,OAAOL,EAACM,EAAyB,CAAA,eAAA,IACrC,IAAK,OAEL,IAAK,cACD,OAAON,EAACO,EAAe,CAAA,eAAA,IAC3B,QACI,OAAO,OAsDFC,KAQTZ,EAAA,MAAA,CAAKhC,UAAW6C,EAAuB5C,SAAA,CAClCa,IA/HTkB,EAAA,SAAA,CACIhC,UAAWiC,EACPa,EACa,UAAb1C,EACM2C,EACAC,GAEVjD,KAAK,SAAQ,gBACEY,GAAiB,gBACjBU,GACf4B,QAAS,IAAMrC,IAAsBD,IAAkBV,SAAA,CAAA,QAEjDU,GAAoB,OAAS,OACnCyB,EAACc,EAAe,CACZlD,UAAWiC,EACPkB,EACAxC,GACMyC,EACAC,QAoDdrB,EAAA,MAAA,CACIsB,GAAIjC,GACJrB,UAAWiC,EACPsB,EACA5C,IACIT,GACAsD,GACH7C,IACGc,IACAgC,GAERC,MAAOC,IAxGNpD,IAAuBI,IAyGxBO,IAAKK,GAAYtB,SAAA,CAEjBmC,EAACwB,GACG1C,IAAKC,GACLnB,UAAW6D,EACXC,aAA2B,UAAb1D,EAAuB,UAAY,UAASH,SAEzDA,IA3DRC,EAGD8B,EAAC+B,EAAWC,OAAMC,OAAAC,OAAA,CAAA,cACF,cACZlE,UAAWiC,EACPkC,EACa,UAAb/D,EACMgE,EACAC,GAEVC,eAAe,QACXpE,EAAU,CAAAD,SAAA,CAEbC,EAAWD,SAnBhBE,GACGiC,EAACmC,EAAc,QAIE,aAoGlB"}

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

@@ -1,2 +1,2 @@
-import{__awaiter as o,__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import r from"clsx";import{lazy as i,useRef as s,useState as m,useEffect as n,Suspense as l}from"react";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import{ComponentToken as a}from"../../theme/tokens/component.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as c}from"../../theme/utils/use-apply-styles.js";import{tokens as p,container as d,placeholder as u}from"./loading-dots-spinner.styles.js";const f=i((()=>o(void 0,void 0,void 0,(function*(){return{default:(yield import("./lottie-animation.js")).LottieLoadingDotsSpinner}})))),j=o=>{var{className:i,color:u}=o,j=t(o,["className","color"]);const v=s(null),[y,g]=m(void 0);return c(v,{[p.containerColor]:u||a.Animation["loading-dots-spinner-colour"]}),n((()=>{const o=v.current;if(!o)return;const t=getComputedStyle(o).getPropertyValue(p.containerColor).trim();g(t||void 0)}),[u]),e("div",Object.assign({ref:v},j,{className:r(d,i),children:e(l,{fallback:e(h,{}),children:e(f,{color:y})})}))},h=()=>e("div",{className:u});export{j as LoadingDotsSpinner};
+import{__awaiter as o,__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import r from"clsx";import{lazy as i,useRef as s,useState as m,useEffect as n,Suspense as l}from"react";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import{ComponentToken as a}from"../../theme/tokens/component.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as c}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{tokens as p,container as d,placeholder as u}from"./loading-dots-spinner.styles.js";const j=i((()=>o(void 0,void 0,void 0,(function*(){return{default:(yield import("./lottie-animation.js")).LottieLoadingDotsSpinner}})))),f=o=>{var{className:i,color:u}=o,f=t(o,["className","color"]);const v=s(null),[y,g]=m(void 0);return c(v,{[p.containerColor]:u||a.Animation["loading-dots-spinner-colour"]}),n((()=>{const o=v.current;if(!o)return;const t=getComputedStyle(o).getPropertyValue(p.containerColor).trim();g(t||void 0)}),[u]),e("div",Object.assign({ref:v},f,{className:r(d,i),children:e(l,{fallback:e(h,{}),children:e(j,{color:y})})}))},h=()=>e("div",{className:u});export{f as LoadingDotsSpinner};
 //# sourceMappingURL=loading-dots-spinner.js.map

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":"mqBAQA,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\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"}

package/badge/badge.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import o from"clsx";import{useRef as s}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as a}from"../theme/utils/use-apply-styles.js";import{tokens as i,badge as m,badgeWrapper as n,badgeWrapperIsOverlay as d,badgeOverlay as l}from"./badge.styles.js";const c=new Set(["number","number-with-border","square-number"]),p=p=>{var{badgeOffset:u,children:f,className:h,color:v="default",count:b=0,"data-testid":j="badge",variant:g="number"}=p,x=e(p,["badgeOffset","children","className","color","count","data-testid","variant"]);const N=function(e){return e<=999?e.toString():1e3===e?"1K":"1K+"}(b),k=c.has(g),w=s(null);return a(w,{[i.wrapper.offsetX]:null==u?void 0:u[0],[i.wrapper.offsetY]:null==u?void 0:u[1]}),t("div",{className:o(void 0!==f&&l),children:[r("div",{ref:w,className:o(n,void 0!==f&&d),children:r("div",Object.assign({"data-testid":j,"data-variant":g,"data-color":v,className:o(m,h)},x,{children:k?N:null}))}),f]})};export{p as Badge};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as r}from"react/jsx-runtime";import o from"clsx";import{useRef as s}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as i}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as a,badge as m,badgeWrapper as n,badgeWrapperIsOverlay as d,badgeOverlay as l}from"./badge.styles.js";const c=new Set(["number","number-with-border","square-number"]),u=u=>{var{badgeOffset:p,children:f,className:h,color:v="default",count:b=0,"data-testid":j="badge",variant:g="number"}=u,x=e(u,["badgeOffset","children","className","color","count","data-testid","variant"]);const y=function(e){return e<=999?e.toString():1e3===e?"1K":"1K+"}(b),N=c.has(g),k=s(null);return i(k,{[a.wrapper.offsetX]:null==p?void 0:p[0],[a.wrapper.offsetY]:null==p?void 0:p[1]}),t("div",{className:o(void 0!==f&&l),children:[r("div",{ref:k,className:o(n,void 0!==f&&d),children:r("div",Object.assign({"data-testid":j,"data-variant":g,"data-color":v,className:o(m,h)},x,{children:N?y:null}))}),f]})};export{u as Badge};
 //# sourceMappingURL=badge.js.map

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\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<HTMLDivElement>(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        <div className={clsx(children !== undefined && styles.badgeOverlay)}>\n            <div\n                ref={wrapperRef}\n                className={clsx(\n                    styles.badgeWrapper,\n                    children !== undefined && styles.badgeWrapperIsOverlay\n                )}\n            >\n                <div\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                </div>\n            </div>\n            {children}\n        </div>\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":"2iBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,kBAGSC,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,EAxBV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CAoByBO,CAAgBP,GAC/BQ,EAAkBhB,EAAoBiB,IAAIP,GAK1CQ,EAAaC,EAAuB,MAU1C,OARAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,EAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,EAAA,MAAA,CAAKnB,UAAWoB,OAAkBC,IAAbtB,GAA0BuB,aAC3CC,EAAA,MAAA,CACIC,IAAKZ,EACLZ,UAAWoB,EACPK,OACaJ,IAAbtB,GAA0B2B,GAC7B3B,SAEDwB,EAAA,MAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAKS,EAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACC"}
+{"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n    if (count <= 999) return count.toString();\n    if (count === 1000) return \"1K\";\n    return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n    \"number\",\n    \"number-with-border\",\n    \"square-number\",\n]);\n\nexport const Badge = ({\n    badgeOffset,\n    children,\n    className,\n    color = \"default\",\n    count = 0,\n    \"data-testid\": testId = \"badge\",\n    variant = \"number\",\n    ...otherProps\n}: BadgeProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const displayCount = getDisplayCount(count);\n    const shouldShowCount = variantsToShowCount.has(variant);\n\n    // =============================================================================\n    // REFS\n    // =============================================================================\n    const wrapperRef = useRef<HTMLDivElement>(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        <div className={clsx(children !== undefined && styles.badgeOverlay)}>\n            <div\n                ref={wrapperRef}\n                className={clsx(\n                    styles.badgeWrapper,\n                    children !== undefined && styles.badgeWrapperIsOverlay\n                )}\n            >\n                <div\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                </div>\n            </div>\n            {children}\n        </div>\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,kBAGSC,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,EAxBV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CAoByBO,CAAgBP,GAC/BQ,EAAkBhB,EAAoBiB,IAAIP,GAK1CQ,EAAaC,EAAuB,MAU1C,OARAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,EAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,EAAA,MAAA,CAAKnB,UAAWoB,OAAkBC,IAAbtB,GAA0BuB,aAC3CC,EAAA,MAAA,CACIC,IAAKZ,EACLZ,UAAWoB,EACPK,OACaJ,IAAbtB,GAA0B2B,GAC7B3B,SAEDwB,EAAA,MAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAKS,EAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACC"}

package/box-container/box-container.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i,Fragment as a}from"react/jsx-runtime";import{ChevronDownIcon as r}from"@lifesg/react-icons/chevron-down";import{ExclamationCircleFillIcon as l}from"@lifesg/react-icons/exclamation-circle-fill";import{useSpring as o,animated as s}from"@react-spring/web";import n from"clsx";import{useState as d,useRef as c}from"react";import{useResizeDetector as m}from"../external/react-resize-detector/build/index.esm.js";import{VisuallyHidden as p,inertValue as h}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as u}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useSafeMaxWidthMediaQuery as f}from"../theme/utils/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as b}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useDesignToken as j}from"../theme/utils/use-design-token.js";import{labelWrapper as v,labelText as x,callToActionContainer as N,callToActionContainerCollapsible as g,header as y,headerInteractive as k,container as C,alertIcon as w,alertIconError as T,alertIconWarning as I,handle as S,handleIcon as $,handleIconContainer as q,handleIconContainerExpanded as A,handleIconContainerCollapsed as H,expandable as _,childContainer as z,nonExpandable as O}from"./box-container.styles.js";const P=P=>{var{children:B,title:D,collapsible:E=!0,expanded:F=!1,callToActionComponent:G,displayState:J="default",subComponentTestIds:K,clickableHeader:L,className:M}=P,Q=e(P,["children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className"]);const[R,U]=d(!E||F),V=m(),W=V.ref,X=j(u["sm-max"]),Y=f(X),Z=L&&E,ee=b(),te=`${ee}-content`,ie=`${ee}-header`,ae=c(null),re=e=>{e.stopPropagation(),U(!R)},le=o({height:R?V.height:0}),oe=()=>E&&i("button",{className:S,onClick:re,type:"button","aria-labelledby":ie,"aria-controls":te,"aria-disabled":!E,"aria-expanded":R,"data-testid":(null==K?void 0:K.handle)||"handle",children:i("div",{className:n(q,R?A:H),ref:ae,"aria-hidden":!0,children:i(r,{className:$})})});return t("section",Object.assign({},Q,{className:n(C,M),"aria-labelledby":ie,role:"region",title:"string"==typeof D?D:void 0,children:[t("div",{className:n(y,Z&&k),"data-testid":"header",onClick:Z?re:void 0,children:[t("div",{className:v,role:"status",id:ie,children:[t("div",{className:x,"data-testid":(null==K?void 0:K.title)||"title",children:[D,"default"!==J&&i(a,{children:i(p,{children:J})})]}),(()=>{switch(J){case"error":case"warning":return i(l,{className:n(w,"error"===J&&T,"warning"===J&&I),"data-testid":(null==K?void 0:K.displayStateIcon)||`${J}-icon`,"aria-label":J});default:return null}})(),Y&&oe()]}),G&&i("div",{className:n(N,E&&g),"data-testid":"call-to-action-container",children:G}),!Y&&oe()]}),E?i(s.div,{className:_,style:le,"data-testid":"expandable-container",id:te,children:i("div",{className:z,ref:W,inert:h(!R),children:B})}):i("div",{className:O,"data-testid":"non-expandable-container",children:i("div",{className:z,children:B})})]}))};export{P as BoxContainer};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i,Fragment as a}from"react/jsx-runtime";import{ChevronDownIcon as r}from"@lifesg/react-icons/chevron-down";import{ExclamationCircleFillIcon as l}from"@lifesg/react-icons/exclamation-circle-fill";import{useSpring as s,animated as o}from"@react-spring/web";import n from"clsx";import{useState as d,useRef as c}from"react";import{useResizeDetector as m}from"../external/react-resize-detector/build/index.esm.js";import{VisuallyHidden as p,inertValue as h}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as u}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as b}from"../theme/utils/use-media-query.js";import{labelWrapper as f,labelText as v,callToActionContainer as j,callToActionContainerCollapsible as x,header as N,headerInteractive as y,container as g,alertIcon as k,alertIconError as C,alertIconWarning as w,handle as T,handleIcon as I,handleIconContainer as S,handleIconContainerExpanded as $,handleIconContainerCollapsed as q,expandable as A,childContainer as H,nonExpandable as _}from"./box-container.styles.js";const z=z=>{var{children:O,title:P,collapsible:B=!0,expanded:D=!1,callToActionComponent:E,displayState:F="default",subComponentTestIds:G,clickableHeader:J,className:K}=z,L=e(z,["children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","className"]);const[M,Q]=d(!B||D),R=m(),U=R.ref,V=b("sm"),W=J&&B,X=u(),Y=`${X}-content`,Z=`${X}-header`,ee=c(null),te=e=>{e.stopPropagation(),Q(!M)},ie=s({height:M?R.height:0}),ae=()=>B&&i("button",{className:T,onClick:te,type:"button","aria-labelledby":Z,"aria-controls":Y,"aria-disabled":!B,"aria-expanded":M,"data-testid":(null==G?void 0:G.handle)||"handle",children:i("div",{className:n(S,M?$:q),ref:ee,"aria-hidden":!0,children:i(r,{className:I})})});return t("section",Object.assign({},L,{className:n(g,K),"aria-labelledby":Z,role:"region",title:"string"==typeof P?P:void 0,children:[t("div",{className:n(N,W&&y),"data-testid":"header",onClick:W?te:void 0,children:[t("div",{className:f,role:"status",id:Z,children:[t("div",{className:v,"data-testid":(null==G?void 0:G.title)||"title",children:[P,"default"!==F&&i(a,{children:i(p,{children:F})})]}),(()=>{switch(F){case"error":case"warning":return i(l,{className:n(k,"error"===F&&C,"warning"===F&&w),"data-testid":(null==G?void 0:G.displayStateIcon)||`${F}-icon`,"aria-label":F});default:return null}})(),V&&ae()]}),E&&i("div",{className:n(j,B&&x),"data-testid":"call-to-action-container",children:E}),!V&&ae()]}),B?i(o.div,{className:A,style:ie,"data-testid":"expandable-container",id:Y,children:i("div",{className:H,ref:U,inert:h(!M),children:O})}):i("div",{className:_,"data-testid":"non-expandable-container",children:i("div",{className:H,children:O})})]}))};export{z as BoxContainer};
 //# sourceMappingURL=box-container.js.map

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 {\n    Breakpoint,\n    useDesignToken,\n    useSafeMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\nexport const BoxContainer = ({\n    children,\n    title,\n    collapsible = true,\n    expanded = false,\n    callToActionComponent,\n    displayState = \"default\",\n    subComponentTestIds,\n    clickableHeader,\n    className,\n    ...otherProps\n}: BoxContainerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [showExpanded, setShowExpanded] = useState<boolean>(\n        !collapsible ? true : expanded\n    );\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n    const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\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","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","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":"kkDAiBO,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,EAAmBC,EAAeC,EAAW,WAC7CC,EAAWC,EAA0BJ,GACrCK,EAAoBhB,GAAmBL,EACvCsB,GAAaC,IACbC,GAAY,GAAGF,aACfG,GAAW,GAAGH,YACdI,GAAgBC,EAAuB,MAKvCC,GAAiBC,IAEnBA,EAAMC,kBACNpB,GAAiBD,EAAa,EAO5BsB,GAAmBC,EAAU,CAC/BC,OAAQxB,EAAeG,EAAeqB,OAAS,IAyD7CC,GAAmB,IAEjBlC,GACImC,YACI7B,UAAW8B,EACXC,QAAST,GACTU,KAAK,SAAQ,kBACIb,GAAQ,gBACVD,GAAS,iBACRxB,EAAW,gBACZS,iBACFL,aAAmB,EAAnBA,EAAqBmC,SAAU,SAAQzC,SAEpDqC,EAAA,MAAA,CACI7B,UAAWkC,EACPC,EACAhC,EACMiC,EACAC,GAEV5B,IAAKW,GAAa,eAAA,EAAA5B,SAGlBqC,EAACS,EAAe,CAACtC,UAAWuC,QAOhD,OACIC,EAAA,UAAAC,OAAAC,OAAA,GACQzC,EAAU,CACdD,UAAWkC,EAAKS,EAAkB3C,GAAU,kBAC3BmB,GACjByB,KAAK,SACLnD,MAAwB,iBAAVA,EAAqBA,OAAQoD,EAASrD,SAAA,CAEpDgD,EAAA,MAAA,CACIxC,UAAWkC,EACPY,EACA/B,GAAqBgC,GACxB,cACW,SACZhB,QAAShB,EAAoBO,QAAgBuB,YAE7CL,EAAA,MAAA,CACIxC,UAAWgD,EACXJ,KAAM,SACNK,GAAI9B,GAAQ3B,SAAA,CAEZgD,EAAA,MAAA,CACIxC,UAAWkD,EAAgB,eACdpD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACGgC,EAAAsB,EAAA,CAAA3D,SACIqC,EAACuB,YAAgBvD,SAlFnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACIgC,EAACwB,EAAyB,CACtBrD,UAAWkC,EACPoB,EACiB,UAAjBzD,GAA4B0D,EACX,YAAjB1D,GACI2D,GACP,eAEG1D,aAAmB,EAAnBA,EAAqB2D,mBACrB,GAAG5D,SAAmB,aAEdA,IAGxB,QACI,OAAO,OAkEF6D,GACA7C,GAAYe,QAEhBhC,GACGiC,EAAA,MAAA,CACI7B,UAAWkC,EACPyB,EACAjE,GACIkE,GACP,cACW,2BAA0BpE,SAErCI,KAIPiB,GAAYe,QAnIlBlC,EAEImC,EAACgC,EAASC,IAAG,CACT9D,UAAW+D,EACXC,MAAOvC,GAAgB,cACV,uBACbwB,GAAI/B,GAAS1B,SAEbqC,SACI7B,UAAWiE,EACXxD,IAAKD,EACL0D,MAAOC,GAAYhE,YAElBX,MAObqC,SACI7B,UAAWoE,gBACC,2BAA0B5E,SAEtCqC,SAAK7B,UAAWiE,WAAwBzE,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\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":"m8CAaO,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/breadcrumb/breadcrumb.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as i}from"react/jsx-runtime";import{ChevronRightIcon as o}from"@lifesg/react-icons/chevron-right";import s from"clsx";import{useState as l,useRef as n}from"react";import{useResizeDetector as a}from"../external/react-resize-detector/build/index.esm.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as m}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as d}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as c}from"../theme/utils/use-apply-styles.js";import{useDesignToken as h}from"../theme/utils/use-design-token.js";import{Typography as u}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as f}from"../util/use-event.js";import{useEventListener as p}from"../util/use-event-listener.js";import{useIsomorphicLayoutEffect as j}from"../util/use-isomorphic-layout-effect.js";import{tokens as g,wrapper as v,content as b,currentLabel as y,previousLink as k,item as x,caret as N,slash as W,fade as w,fadeLeft as M,fadeRight as C}from"./breadcrumb.styles.js";const L=L=>{var O,z,{links:B,fadeColor:D,fadePosition:R="both",id:S,separatorStyle:A="chevron",className:P}=L,_=e(L,["links","fadeColor","fadePosition","id","separatorStyle","className"]);const[q,E]=l(!1),[F,G]=l(!1),[H,I]=l(!1),J="left"===R||"both"===R,K="right"===R||"both"===R,Q=n(null),T=n(null),U=n(null),V=n(null),X=h(d["lg-max"]),Y=m(X||"1200px");let Z;Z=Array.isArray(D)&&D.length>0?{left:D,right:D}:D||{left:void 0,right:void 0},c(U,{[g.fade.backgroundColor]:null===(O=null==Z?void 0:Z.left)||void 0===O?void 0:O.join(", ")}),c(V,{[g.fade.backgroundColor]:null===(z=null==Z?void 0:Z.right)||void 0===z?void 0:z.join(", ")});const $=f((()=>{const e=T.current,r=Q.current;e&&r&&B&&B.length>1&&window.innerWidth<=Y&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),ee=f((()=>{const e=window.innerWidth<=Y;E(e);const r=T.current,t=Q.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return G(r.scrollLeft>=1),void I(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);G(!1),I(!1)}));if(p("resize",ee),p("scroll",ee,T.current),j((()=>{$(),ee()}),[$,ee]),a({onResize:$,targetRef:Q,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!B)return null;return r("div",Object.assign({ref:Q,id:S||"breadcrumb",className:s(v,P)},_,{children:[t("nav",{"aria-label":"Breadcrumb",children:t("ul",{ref:T,className:b,children:B.map(((e,i)=>{let s;return e.children?(s=i!==B.length-1&&e.href?t(u.LinkMD,Object.assign({},e,{weight:"semibold",underlineStyle:"none",className:k})):t(u.BodyMD,{weight:"semibold",as:"span",className:y,children:e.children}),r("li",Object.assign({className:x},i===B.length-1&&{"aria-current":"page"},{children:[s,i<B.length-1&&("chevron"===A?t(o,{"aria-hidden":!0,className:N}):t(u.BodyMD,{inline:!0,"aria-hidden":!0,className:W,children:"/"}))]}),i)):null}))})}),q&&r(i,{children:[F&&J&&t("div",{ref:U,className:s(w,M)}),H&&K&&t("div",{ref:V,className:s(w,C)})]})]}))};export{L as Breadcrumb};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as i}from"react/jsx-runtime";import{ChevronRightIcon as o}from"@lifesg/react-icons/chevron-right";import s from"clsx";import{useState as l,useRef as n}from"react";import{useResizeDetector as a}from"../external/react-resize-detector/build/index.esm.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as m}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as d}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as c}from"../theme/utils/use-apply-styles.js";import{useDesignToken as h}from"../theme/utils/use-design-token.js";import"../theme/utils/use-media-query.js";import{Typography as u}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as f}from"../util/use-event.js";import{useEventListener as p}from"../util/use-event-listener.js";import{useIsomorphicLayoutEffect as j}from"../util/use-isomorphic-layout-effect.js";import{tokens as g,wrapper as v,content as b,currentLabel as y,previousLink as k,item as x,caret as N,slash as W,fade as w,fadeLeft as M,fadeRight as C}from"./breadcrumb.styles.js";const L=L=>{var O,z,{links:B,fadeColor:D,fadePosition:R="both",id:S,separatorStyle:q="chevron",className:A}=L,P=e(L,["links","fadeColor","fadePosition","id","separatorStyle","className"]);const[_,E]=l(!1),[F,G]=l(!1),[H,I]=l(!1),J="left"===R||"both"===R,K="right"===R||"both"===R,Q=n(null),T=n(null),U=n(null),V=n(null),X=h(d["lg-max"]),Y=m(X||"1200px");let Z;Z=Array.isArray(D)&&D.length>0?{left:D,right:D}:D||{left:void 0,right:void 0},c(U,{[g.fade.backgroundColor]:null===(O=null==Z?void 0:Z.left)||void 0===O?void 0:O.join(", ")}),c(V,{[g.fade.backgroundColor]:null===(z=null==Z?void 0:Z.right)||void 0===z?void 0:z.join(", ")});const $=f((()=>{const e=T.current,r=Q.current;e&&r&&B&&B.length>1&&window.innerWidth<=Y&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),ee=f((()=>{const e=window.innerWidth<=Y;E(e);const r=T.current,t=Q.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return G(r.scrollLeft>=1),void I(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);G(!1),I(!1)}));if(p("resize",ee),p("scroll",ee,T.current),j((()=>{$(),ee()}),[$,ee]),a({onResize:$,targetRef:Q,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!B)return null;return r("div",Object.assign({ref:Q,id:S||"breadcrumb",className:s(v,A)},P,{children:[t("nav",{"aria-label":"Breadcrumb",children:t("ul",{ref:T,className:b,children:B.map(((e,i)=>{let s;return e.children?(s=i!==B.length-1&&e.href?t(u.LinkMD,Object.assign({},e,{weight:"semibold",underlineStyle:"none",className:k})):t(u.BodyMD,{weight:"semibold",as:"span",className:y,children:e.children}),r("li",Object.assign({className:x},i===B.length-1&&{"aria-current":"page"},{children:[s,i<B.length-1&&("chevron"===q?t(o,{"aria-hidden":!0,className:N}):t(u.BodyMD,{inline:!0,"aria-hidden":!0,className:W,children:"/"}))]}),i)):null}))})}),_&&r(i,{children:[F&&J&&t("div",{ref:U,className:s(w,M)}),H&&K&&t("div",{ref:V,className:s(w,C)})]})]}))};export{L as Breadcrumb};
 //# sourceMappingURL=breadcrumb.js.map

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 { parsePxOrRemValue, useApplyStyle, useDesignToken } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const tabletBreakpointToken = useDesignToken(Breakpoint[\"lg-max\"]);\n    const tabletBreakpoint = parsePxOrRemValue(\n        tabletBreakpointToken || \"1200px\"\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]);\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","tabletBreakpointToken","useDesignToken","Breakpoint","tabletBreakpoint","parsePxOrRemValue","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 { parsePxOrRemValue, useApplyStyle, useDesignToken } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const tabletBreakpointToken = useDesignToken(Breakpoint[\"lg-max\"]);\n    const tabletBreakpoint = parsePxOrRemValue(\n        tabletBreakpointToken || \"1200px\"\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]);\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","tabletBreakpointToken","useDesignToken","Breakpoint","tabletBreakpoint","parsePxOrRemValue","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/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,spinnerHasChildren as d,mainStyleLinkDanger as c,mainStyleLink as b,mainStyleLightDanger as u,mainStyleLight as m,mainStyleSecondaryDanger as f,mainStyleSecondary as p,mainStyleDefaultDanger as g,mainStyleDefault as y,mainStyleDisabled as v,mainSizeLargeIconOnly as h,mainSizeLarge as j,mainSizeSmallIconOnly as O,mainSizeSmall as N,mainSizeDefaultIconOnly as T,mainSizeDefault as z}from"./button.styles.js";import{hasValidChildren as k}from"./button-helper.js";const w={disabled:{base:v,danger:v},default:{base:y,danger:g},secondary:{base:p,danger:f},light:{base:m,danger:u},link:{base:b,danger:c}},B={default:{base:z,iconOnly:T},small:{base:N,iconOnly:O},large:{base:j,iconOnly:h}},D=(e,a)=>{var n,i;return a?null===(n=w[e])||void 0===n?void 0:n.danger:null===(i=w[e])||void 0===i?void 0:i.base},R=(e,a)=>{var n,s,l;return a?i(null===(n=B[e])||void 0===n?void 0:n.base,null===(s=B[e])||void 0===s?void 0:s.iconOnly):null===(l=B[e])||void 0===l?void 0:l.base},x=(c,b)=>{const{children:u,className:m,disabled:f=!1,loading:p=!1,styleType:g="default",sizeType:y="default",danger:v=!1,focusableWhenDisabled:h=!1,icon:j,iconPosition:O="left",onClick:N}=c,T=e(c,["children","className","disabled","loading","styleType","sizeType","danger","focusableWhenDisabled","icon","iconPosition","onClick"]),z=k(u),w=!!j&&!z,B=f?"disabled":g;return a("button",Object.assign({ref:b,"data-testid":T["data-testid"]||"button",disabled:f&&!h,"aria-disabled":f,"aria-busy":p,onClick:f?void 0:N,className:i(o,j&&"right"===O&&t,!w&&r,D(B,v),R(y,w),m)},T,{children:[p?n(l,{className:i(z&&d)}):j?s.cloneElement(j,{"aria-hidden":!0}):null,z&&n("span",{children:u})]}))};x.displayName="Button";const C=s.forwardRef(x),L=(e,a)=>{var i;return n(C,Object.assign({},e,{sizeType:null!==(i=e.sizeType)&&void 0!==i?i:"default",ref:a}))};L.displayName="Button.Default";const P=(e,a)=>n(C,Object.assign({},e,{sizeType:"small",ref:a}));P.displayName="Button.Small";const S=(e,a)=>n(C,Object.assign({},e,{sizeType:"large",ref:a}));S.displayName="Button.Large";const W=Object.assign(C,{Default:s.forwardRef(L),Small:s.forwardRef(P),Large:s.forwardRef(S)});export{W 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,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};
 //# 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(hasChildren && styles.spinnerHasChildren)}\n                />\n            ) : icon ? (\n                React.cloneElement(icon, { \"aria-hidden\": true })\n            ) : null}\n            {hasChildren && <span>{children}</span>}\n        </button>\n    );\n};\n\nComponent.displayName = \"Button\";\n\nconst BaseButton = React.forwardRef(Component);\n\nconst DefaultButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType={props.sizeType ?? \"default\"} ref={ref} />\n);\nDefaultButtonComponent.displayName = \"Button.Default\";\n\nconst SmallButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"small\" ref={ref} />\n);\nSmallButtonComponent.displayName = \"Button.Small\";\n\nconst LargeButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"large\" ref={ref} />\n);\nLargeButtonComponent.displayName = \"Button.Large\";\n\nexport const Button = Object.assign(BaseButton, {\n    /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType=\"default\">` */\n    Default: React.forwardRef(DefaultButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"small\">` */\n    Small: React.forwardRef(SmallButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"large\">` */\n    Large: React.forwardRef(LargeButtonComponent),\n});\n"],"names":["styleClassMap","disabled","base","styles.mainStyleDisabled","danger","default","styles.mainStyleDefault","styles.mainStyleDefaultDanger","secondary","styles.mainStyleSecondary","styles.mainStyleSecondaryDanger","light","styles.mainStyleLight","styles.mainStyleLightDanger","link","styles.mainStyleLink","styles.mainStyleLinkDanger","sizeClassMap","styles.mainSizeDefault","iconOnly","styles.mainSizeDefaultIconOnly","small","styles.mainSizeSmall","styles.mainSizeSmallIconOnly","large","styles.mainSizeLarge","styles.mainSizeLargeIconOnly","getStyleClass","effectiveStyle","_a","_b","getSizeClass","sizeType","clsx","_c","Component","props","ref","children","className","loading","styleType","focusableWhenDisabled","icon","iconPosition","onClick","otherProps","hasChildren","hasValidChildren","_jsxs","undefined","styles.main","styles.mainIconPositionRight","styles.mainHasMinWidth","_jsx","ComponentLoadingSpinner","styles.spinnerHasChildren","React","cloneElement","displayName","BaseButton","forwardRef","DefaultButtonComponent","Object","assign","SmallButtonComponent","LargeButtonComponent","Button","Default","Small","Large"],"mappings":"owBAQA,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,EAAU,CAAAR,SAAA,CAEbE,EACGc,EAACC,EAAuB,CACpBhB,UAAWN,EAAKc,GAAeS,KAEnCb,EACAc,EAAMC,aAAaf,EAAM,CAAE,eAAe,IAC1C,KACHI,GAAeO,EAAA,OAAA,CAAAhB,SAAOA,OAClB,EAIjBH,EAAUwB,YAAc,SAExB,MAAMC,EAAaH,EAAMI,WAAW1B,GAE9B2B,EAAyB,CAAC1B,EAAoBC,WAAmB,OACnEiB,EAACM,EAAUG,OAAAC,OAAA,CAAA,EAAK5B,EAAK,CAAEJ,SAAwB,QAAdH,EAAAO,EAAMJ,gBAAQ,IAAAH,EAAAA,EAAI,UAAWQ,IAAKA,IAAO,EAE9EyB,EAAuBH,YAAc,iBAErC,MAAMM,EAAuB,CAAC7B,EAAoBC,IAC9CiB,EAACM,mBAAexB,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,KAEjD4B,EAAqBN,YAAc,eAEnC,MAAMO,EAAuB,CAAC9B,EAAoBC,IAC9CiB,EAACM,mBAAexB,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,KAEjD6B,EAAqBP,YAAc,qBAEtBQ,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(sizeClassMap[sizeType]?.base, sizeClassMap[sizeType]?.iconOnly)\n        : sizeClassMap[sizeType]?.base;\n\nconst Component = (props: ButtonProps, ref: ButtonRef) => {\n    const {\n        children,\n        className,\n        disabled = false,\n        loading = false,\n        styleType = \"default\",\n        sizeType = \"default\",\n        danger = false,\n        focusableWhenDisabled = false,\n        icon,\n        iconPosition = \"left\",\n        onClick,\n        ...otherProps\n    } = props;\n\n    const hasChildren = hasValidChildren(children);\n    const iconOnly = !!icon && !hasChildren;\n    const effectiveStyle = disabled ? \"disabled\" : styleType;\n\n    return (\n        <button\n            ref={ref}\n            data-testid={otherProps[\"data-testid\"] || \"button\"}\n            disabled={disabled && !focusableWhenDisabled}\n            aria-disabled={disabled}\n            aria-busy={loading}\n            onClick={disabled ? undefined : onClick}\n            className={clsx(\n                styles.main,\n                icon &&\n                    iconPosition === \"right\" &&\n                    styles.mainIconPositionRight,\n                !iconOnly && styles.mainHasMinWidth,\n                getStyleClass(effectiveStyle, danger),\n                getSizeClass(sizeType, iconOnly),\n                className\n            )}\n            {...otherProps}\n        >\n            {loading ? (\n                <ComponentLoadingSpinner\n                    className={clsx(\n                        styles.spinner,\n                        hasChildren && styles.spinnerHasChildren\n                    )}\n                />\n            ) : icon ? (\n                React.cloneElement(icon, { \"aria-hidden\": true })\n            ) : null}\n            {hasChildren && <span>{children}</span>}\n        </button>\n    );\n};\n\nComponent.displayName = \"Button\";\n\nconst BaseButton = React.forwardRef(Component);\n\nconst DefaultButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType={props.sizeType ?? \"default\"} ref={ref} />\n);\nDefaultButtonComponent.displayName = \"Button.Default\";\n\nconst SmallButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"small\" ref={ref} />\n);\nSmallButtonComponent.displayName = \"Button.Small\";\n\nconst LargeButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n    <BaseButton {...props} sizeType=\"large\" ref={ref} />\n);\nLargeButtonComponent.displayName = \"Button.Large\";\n\nexport const Button = Object.assign(BaseButton, {\n    /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType=\"default\">` */\n    Default: React.forwardRef(DefaultButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"small\">` */\n    Small: React.forwardRef(SmallButtonComponent),\n    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"large\">` */\n    Large: React.forwardRef(LargeButtonComponent),\n});\n"],"names":["styleClassMap","disabled","base","styles.mainStyleDisabled","danger","default","styles.mainStyleDefault","styles.mainStyleDefaultDanger","secondary","styles.mainStyleSecondary","styles.mainStyleSecondaryDanger","light","styles.mainStyleLight","styles.mainStyleLightDanger","link","styles.mainStyleLink","styles.mainStyleLinkDanger","sizeClassMap","styles.mainSizeDefault","iconOnly","styles.mainSizeDefaultIconOnly","small","styles.mainSizeSmall","styles.mainSizeSmallIconOnly","large","styles.mainSizeLarge","styles.mainSizeLargeIconOnly","getStyleClass","effectiveStyle","_a","_b","getSizeClass","sizeType","clsx","_c","Component","props","ref","children","className","loading","styleType","focusableWhenDisabled","icon","iconPosition","onClick","otherProps","hasChildren","hasValidChildren","_jsxs","undefined","styles.main","styles.mainIconPositionRight","styles.mainHasMinWidth","_jsx","ComponentLoadingSpinner","styles.spinner","styles.spinnerHasChildren","React","cloneElement","displayName","BaseButton","forwardRef","DefaultButtonComponent","Object","assign","SmallButtonComponent","LargeButtonComponent","Button","Default","Small","Large"],"mappings":"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,qBAEtBQ,EAASJ,OAAOC,OAAOJ,EAAY,CAE5CQ,QAASX,EAAMI,WAAWC,GAE1BO,MAAOZ,EAAMI,WAAWI,GAExBK,MAAOb,EAAMI,WAAWK"}

package/button/button.styles.d.ts

@@ -16,4 +16,5 @@ export declare const mainSizeSmall: import("@linaria/core").LinariaClassName;
 export declare const mainSizeSmallIconOnly: import("@linaria/core").LinariaClassName;
 export declare const mainSizeLarge: import("@linaria/core").LinariaClassName;
 export declare const mainSizeLargeIconOnly: import("@linaria/core").LinariaClassName;
+export declare const spinner: import("@linaria/core").LinariaClassName;
 export declare const spinnerHasChildren: import("@linaria/core").LinariaClassName;

package/button/button.styles.js

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

package/button/button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.styles.js","sources":["../../src/button/button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\nexport const main = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    gap: 0.5rem;\n    border-radius: ${Radius.sm};\n\n    svg,\n    img {\n        flex-shrink: 0;\n        height: 1em;\n        width: 1em;\n    }\n`;\n\nexport const mainIconPositionRight = css`\n    flex-direction: row-reverse;\n`;\n\nexport const mainHasMinWidth = css`\n    min-width: 4rem;\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON STYLE + TEXT COLOR\n// -------------------------------------------------------------------------\nexport const mainStyleDefault = css`\n    background-color: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-primary-hover\"]};\n        }\n    }\n`;\n\nexport const mainStyleDefaultDanger = css`\n    background-color: ${Colour[\"bg-error-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-error-strong-hover\"]};\n        }\n    }\n`;\n\nexport const mainStyleSecondary = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour[\"border-primary\"]};\n    color: ${Colour[\"text-primary\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleSecondaryDanger = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour[\"border-error-strong\"]};\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLight = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour[\"text-primary\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLightDanger = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLink = css`\n    background-color: transparent;\n    color: ${Colour[\"text-primary\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLinkDanger = css`\n    background-color: transparent;\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n    color: ${Colour[\"text-disabled\"]};\n    &:hover {\n        box-shadow: none;\n    }\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON SIZE\n// -------------------------------------------------------------------------\nexport const mainSizeDefault = css`\n    height: 3rem;\n    ${Font[\"heading-xs-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeDefaultIconOnly = css`\n    height: 3rem;\n    width: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n    height: 2.5rem;\n    ${Font[\"body-md-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeSmallIconOnly = css`\n    height: 2.5rem;\n    width: 2.5rem;\n`;\n\nexport const mainSizeLarge = css`\n    height: 4rem;\n    ${Font[\"heading-md-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeLargeIconOnly = css`\n    height: 4rem;\n    width: 4rem;\n`;\n\nexport const spinnerHasChildren = css`\n    margin-right: 0.5rem;\n`;\n"],"names":["main","mainIconPositionRight","mainHasMinWidth","mainStyleDefault","mainStyleDefaultDanger","mainStyleSecondary","mainStyleSecondaryDanger","mainStyleLight","mainStyleLightDanger","mainStyleLink","mainStyleLinkDanger","mainStyleDisabled","mainSizeDefault","mainSizeDefaultIconOnly","mainSizeSmall","mainSizeSmallIconOnly","mainSizeLarge","mainSizeLargeIconOnly","spinnerHasChildren"],"mappings":"0DAYO,MAAMA,EAAI,UAmBJC,EAAqB,UAIrBC,EAAe,WAOfC,EAAgB,WAWhBC,EAAsB,UAWtBC,EAAkB,UAYlBC,EAAwB,WAYxBC,EAAc,UAYdC,EAAoB,UAYpBC,EAAa,WAWbC,EAAmB,UAWnBC,EAAiB,UAYjBC,EAAe,WAQfC,EAAuB,WAKvBC,EAAa,UAQbC,EAAqB,WAKrBC,EAAa,WAQbC,EAAqB,UAKrBC,EAAkB"}
+{"version":3,"file":"button.styles.js","sources":["../../src/button/button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\nexport const main = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n    gap: 0.5rem;\n    border-radius: ${Radius.sm};\n\n    svg,\n    img {\n        flex-shrink: 0;\n        height: 1em;\n        width: 1em;\n    }\n`;\n\nexport const mainIconPositionRight = css`\n    flex-direction: row-reverse;\n`;\n\nexport const mainHasMinWidth = css`\n    min-width: 4rem;\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON STYLE + TEXT COLOR\n// -------------------------------------------------------------------------\nexport const mainStyleDefault = css`\n    background-color: ${Colour[\"bg-primary\"]};\n    color: ${Colour[\"text-inverse\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-primary-hover\"]};\n        }\n    }\n`;\n\nexport const mainStyleDefaultDanger = css`\n    background-color: ${Colour[\"bg-error-strong\"]};\n    color: ${Colour[\"text-inverse\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-error-strong-hover\"]};\n        }\n    }\n`;\n\nexport const mainStyleSecondary = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour[\"border-primary\"]};\n    color: ${Colour[\"text-primary\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleSecondaryDanger = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour[\"border-error-strong\"]};\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLight = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour[\"text-primary\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLightDanger = css`\n    background-color: ${Colour.bg};\n    border-color: ${Colour.border};\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLink = css`\n    background-color: transparent;\n    color: ${Colour[\"text-primary\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleLinkDanger = css`\n    background-color: transparent;\n    color: ${Colour[\"text-error\"]};\n    &:hover,\n    &:active {\n        @media (pointer: fine) {\n            background-color: ${Colour[\"bg-hover-neutral\"]};\n        }\n    }\n`;\n\nexport const mainStyleDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n    color: ${Colour[\"text-disabled\"]};\n    &:hover {\n        box-shadow: none;\n    }\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON SIZE\n// -------------------------------------------------------------------------\nexport const mainSizeDefault = css`\n    height: 3rem;\n    ${Font[\"heading-xs-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeDefaultIconOnly = css`\n    height: 3rem;\n    width: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n    height: 2.5rem;\n    ${Font[\"body-md-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeSmallIconOnly = css`\n    height: 2.5rem;\n    width: 2.5rem;\n`;\n\nexport const mainSizeLarge = css`\n    height: 4rem;\n    ${Font[\"heading-md-semibold\"]}\n    ${MediaQuery.MaxWidth.xxs} {\n        height: auto;\n    }\n`;\n\nexport const mainSizeLargeIconOnly = css`\n    height: 4rem;\n    width: 4rem;\n`;\n\nexport const spinner = css`\n    flex-shrink: 0;\n`;\n\nexport const spinnerHasChildren = css`\n    margin-right: 0.5rem;\n`;\n"],"names":["main","mainIconPositionRight","mainHasMinWidth","mainStyleDefault","mainStyleDefaultDanger","mainStyleSecondary","mainStyleSecondaryDanger","mainStyleLight","mainStyleLightDanger","mainStyleLink","mainStyleLinkDanger","mainStyleDisabled","mainSizeDefault","mainSizeDefaultIconOnly","mainSizeSmall","mainSizeSmallIconOnly","mainSizeLarge","mainSizeLargeIconOnly","spinner","spinnerHasChildren"],"mappings":"yDAYO,MAAMA,EAAI,UAmBJC,EAAqB,UAIrBC,EAAe,WAOfC,EAAgB,WAWhBC,EAAsB,UAWtBC,EAAkB,UAYlBC,EAAwB,WAYxBC,EAAc,UAYdC,EAAoB,UAYpBC,EAAa,WAWbC,EAAmB,UAWnBC,EAAiB,UAYjBC,EAAe,WAQfC,EAAuB,WAKvBC,EAAa,UAQbC,EAAqB,WAKrBC,EAAa,WAQbC,EAAqB,UAKrBC,EAAO,WAIPC,EAAkB"}

package/{cjs/button/button.styles_142m6cx.css → button/button.styles_bcpkzm.css}

@@ -16,4 +16,5 @@
 .m1ytkx3r{height:2.5rem;width:2.5rem;}
 .m1c1mlhm{height:4rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);}:where(body.fds-breakpoint-xxs-max) .m1c1mlhm{height:auto;}
 .me78sau{height:4rem;width:4rem;}
-.s17i3scc{margin-right:0.5rem;}
+.s17i3scc{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.s1joklnz{margin-right:0.5rem;}

package/cjs/_virtual/index.js

@@ -1,2 +1,2 @@
-"use strict";exports.__module={exports:{}};
+"use strict";exports.__exports={};
 //# sourceMappingURL=index.js.map

package/cjs/_virtual/index3.js

@@ -1,2 +1,2 @@
-"use strict";exports.__exports={};
+"use strict";exports.__module={exports:{}};
 //# sourceMappingURL=index3.js.map

package/cjs/alert/alert.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons"),i=require("@lifesg/react-icons/arrow-right"),s=require("@lifesg/react-icons/exclamation-circle-fill"),n=require("@lifesg/react-icons/exclamation-triangle-fill"),t=require("@lifesg/react-icons/i-circle-fill"),l=require("@lifesg/react-icons/tick-circle-fill"),o=require("clsx"),c=require("react"),u=require("../external/react-resize-detector/build/index.esm.js"),p=require("../markup/markup.js"),d=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var h=require("../theme/utils/use-apply-styles.js"),m=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var f=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var x=require("./alert.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=j(o);const I={error:{wrapperTypeClass:x.wrapperError,iconColorClass:x.alertIconError},success:{wrapperTypeClass:x.wrapperSuccess,iconColorClass:x.alertIconSuccess},warning:{wrapperTypeClass:x.wrapperWarning,iconColorClass:x.alertIconWarning},info:{wrapperTypeClass:x.wrapperInfo,iconColorClass:x.alertIconInfo},description:{wrapperTypeClass:x.wrapperDescription,iconColorClass:x.alertIconDescription}};exports.Alert=o=>{var{type:j,className:q,children:w,actionLink:y,actionLinkIcon:g,sizeType:k="default",showIcon:v=!1,customIcon:T,maxCollapsedHeight:S,role:b}=o,W=e.__rest(o,["type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role"]);const[N,L]=c.useState(!1),[D,E]=c.useState(!1),{height:M,ref:z}=u.useResizeDetector(),A=f.useId(),F=c.useRef(null),_=H(),B=c.useCallback((()=>{L(!S),E(H())}),[S,M]);function H(){return!(!M||!S)&&M>S}c.useEffect((()=>{B()}),[S,M,B]),h.useApplyStyle(F,{[x.tokens.maxCollapsedHeight]:!N&&_&&S?`${S}px`:null});const{wrapperTypeClass:R=x.wrapperWarning,iconColorClass:$=x.alertIconWarning}=I[j]||{};return r.jsxs("div",{className:C.default(x.wrapper,R,q),"aria-label":`${(()=>{switch(j){case"success":return"Success";case"warning":return"Warning";case"error":return"Error";case"info":return"Information";case"description":return"Description";default:return"Alert"}})()}`,"data-testid":W["data-testid"],role:b,children:[v&&r.jsx("div",{className:C.default(x.alertIconWrapper,"small"===k?x.alertIconWrapperSmall:x.alertIconWrapperDefault,$),children:(()=>{if(j&&T)return T;switch(j){case"success":return r.jsx(l.TickCircleFillIcon,{"aria-hidden":!0});case"warning":return r.jsx(n.ExclamationTriangleFillIcon,{"aria-hidden":!0});case"error":return r.jsx(s.ExclamationCircleFillIcon,{"aria-hidden":!0});case"info":case"description":return r.jsx(t.ICircleFillIcon,{"aria-hidden":!0});default:return null}})()}),r.jsxs("div",{className:x.contentContainer,children:[D&&r.jsxs("button",{className:C.default(x.showMoreButton,"small"===k?x.showMoreButtonSmall:x.showMoreButtonDefault),type:"button","aria-expanded":N,"aria-controls":A,onClick:()=>L(!N),children:["Show ",N?"less":"more",r.jsx(a.ChevronDownIcon,{className:C.default(x.chevronIcon,N?x.chevronIconExpanded:x.chevronIconCollapsed)})]}),r.jsxs("div",{id:A,className:C.default(x.textWrapperContainer,N&&y&&x.textWrapperContainerShowMoreWithLink,!N&&_&&x.textWrapperContainerCollapsed),inert:d.inertValue(!!S&&!N),ref:F,children:[r.jsx(p.Markup,{ref:z,className:x.textWrapper,baseTextSize:"small"===k?"body-sm":"body-md",children:w}),y?r.jsxs(m.Typography.LinkSM,Object.assign({"data-testid":"action-link",className:C.default(x.actionLinkText,"small"===k?x.actionLinkTextSmall:x.actionLinkTextDefault),underlineStyle:"none"},y,{children:[y.children,g||r.jsx(i.ArrowRightIcon,{})]})):null]})]})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons"),i=require("@lifesg/react-icons/arrow-right"),s=require("@lifesg/react-icons/exclamation-circle-fill"),t=require("@lifesg/react-icons/exclamation-triangle-fill"),n=require("@lifesg/react-icons/i-circle-fill"),l=require("@lifesg/react-icons/tick-circle-fill"),o=require("clsx"),c=require("react"),u=require("../external/react-resize-detector/build/index.esm.js"),p=require("../markup/markup.js"),d=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var h=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var m=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var f=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var x=require("./alert.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=j(o);const q={error:{wrapperTypeClass:x.wrapperError,iconColorClass:x.alertIconError},success:{wrapperTypeClass:x.wrapperSuccess,iconColorClass:x.alertIconSuccess},warning:{wrapperTypeClass:x.wrapperWarning,iconColorClass:x.alertIconWarning},info:{wrapperTypeClass:x.wrapperInfo,iconColorClass:x.alertIconInfo},description:{wrapperTypeClass:x.wrapperDescription,iconColorClass:x.alertIconDescription}};exports.Alert=o=>{var{type:j,className:y,children:I,actionLink:w,actionLinkIcon:g,sizeType:k="default",showIcon:v=!1,customIcon:T,maxCollapsedHeight:S,role:b}=o,W=e.__rest(o,["type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role"]);const[N,L]=c.useState(!1),[D,E]=c.useState(!1),{height:M,ref:z}=u.useResizeDetector(),A=f.useId(),F=c.useRef(null),_=H(),B=c.useCallback((()=>{L(!S),E(H())}),[S,M]);function H(){return!(!M||!S)&&M>S}c.useEffect((()=>{B()}),[S,M,B]),h.useApplyStyle(F,{[x.tokens.maxCollapsedHeight]:!N&&_&&S?`${S}px`:null});const{wrapperTypeClass:R=x.wrapperWarning,iconColorClass:$=x.alertIconWarning}=q[j]||{};return r.jsxs("div",{className:C.default(x.wrapper,R,y),"aria-label":`${(()=>{switch(j){case"success":return"Success";case"warning":return"Warning";case"error":return"Error";case"info":return"Information";case"description":return"Description";default:return"Alert"}})()}`,"data-testid":W["data-testid"],role:b,children:[v&&r.jsx("div",{className:C.default(x.alertIconWrapper,"small"===k?x.alertIconWrapperSmall:x.alertIconWrapperDefault,$),children:(()=>{if(j&&T)return T;switch(j){case"success":return r.jsx(l.TickCircleFillIcon,{"aria-hidden":!0});case"warning":return r.jsx(t.ExclamationTriangleFillIcon,{"aria-hidden":!0});case"error":return r.jsx(s.ExclamationCircleFillIcon,{"aria-hidden":!0});case"info":case"description":return r.jsx(n.ICircleFillIcon,{"aria-hidden":!0});default:return null}})()}),r.jsxs("div",{className:x.contentContainer,children:[D&&r.jsxs("button",{className:C.default(x.showMoreButton,"small"===k?x.showMoreButtonSmall:x.showMoreButtonDefault),type:"button","aria-expanded":N,"aria-controls":A,onClick:()=>L(!N),children:["Show ",N?"less":"more",r.jsx(a.ChevronDownIcon,{className:C.default(x.chevronIcon,N?x.chevronIconExpanded:x.chevronIconCollapsed)})]}),r.jsxs("div",{id:A,className:C.default(x.textWrapperContainer,N&&w&&x.textWrapperContainerShowMoreWithLink,!N&&_&&x.textWrapperContainerCollapsed),inert:d.inertValue(!!S&&!N),ref:F,children:[r.jsx(p.Markup,{ref:z,className:x.textWrapper,baseTextSize:"small"===k?"body-sm":"body-md",children:I}),w?r.jsxs(m.Typography.LinkSM,Object.assign({"data-testid":"action-link",className:C.default(x.actionLinkText,"small"===k?x.actionLinkTextSmall:x.actionLinkTextDefault),underlineStyle:"none"},w,{children:[w.children,g||r.jsx(i.ArrowRightIcon,{})]})):null]})]})]})};
 //# sourceMappingURL=alert.js.map