@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.10

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 r}from"react/jsx-runtime";import{useSpring as a}from"@react-spring/web";import{useState as l,useContext as n,useRef as d}from"react";import{useResizeDetector as o}from"../external/react-resize-detector/build/index.esm.js";import{r as s}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as c}from"styled-components";import{VisuallyHidden as p,inertValue as m}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as h}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{V3_Breakpoint as u}from"../v3_theme/index.js";import{Container as b,Header as f,LabelWrapper as x,LabelText as y,CallToActionContainer as j,AlertIcon as g,Handle as v,HandleIconContainer as $,HandleIcon as C,Expandable as k,ChildContainer as S,NonExpandable as T}from"./box-container.styles.js";const w=w=>{var{children:I,title:_,collapsible:A=!0,expanded:H=!1,callToActionComponent:z,displayState:M="default",subComponentTestIds:O,clickableHeader:P}=w,Q=e(w,["children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader"]);const[W,q]=l(!A||H),B=o(),D=B.ref,E=n(c),F=u["sm-max"]({theme:E}),G=s.useMediaQuery({maxWidth:F}),J=P&&A,K=d(h.generate()),L=`${K.current}-content`,N=`${K.current}-header`,R=e=>{e.stopPropagation(),q(!W)},U=a({height:W?B.height:0}),V=()=>A&&i(v,{onClick:R,type:"button","aria-labelledby":N,"aria-controls":L,"aria-disabled":!A,"aria-expanded":W,"data-testid":(null==O?void 0:O.handle)||"handle",children:i($,{$expanded:W,"aria-hidden":!0,children:i(C,{})})});return t(b,Object.assign({},Q,{"aria-labelledby":N,role:"region",title:"string"==typeof _?_:void 0,children:[t(f,{"data-testid":"header",onClick:J?R:void 0,$interactive:J,children:[t(x,{role:"status",id:N,children:[t(y,{"data-testid":(null==O?void 0:O.title)||"title",children:[_,"default"!==M&&i(r,{children:i(p,{children:M})})]}),(()=>{switch(M){case"error":case"warning":return i(g,{$displayState:M,"data-testid":(null==O?void 0:O.displayStateIcon)||`${M}-icon`,"aria-label":M});default:return null}})(),G&&V()]}),z&&i(j,{$collapsible:A,"data-testid":"call-to-action-container",children:z}),!G&&V()]}),A?i(k,{style:U,"data-testid":"expandable-container",id:L,children:i(S,{ref:D,inert:m(!W),children:I})}):i(T,{"data-testid":"non-expandable-container",children:i(S,{children:I})})]}))};export{w 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 { useSpring } from \"@react-spring/web\";\nimport { useContext, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    AlertIcon,\n    CallToActionContainer,\n    ChildContainer,\n    Container,\n    Expandable,\n    Handle,\n    HandleIcon,\n    HandleIconContainer,\n    Header,\n    LabelText,\n    LabelWrapper,\n    NonExpandable,\n} 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    ...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 theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useRef(SimpleIdGenerator.generate());\n    const contentId = `${internalId.current}-content`;\n    const headerId = `${internalId.current}-header`;\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                <Expandable\n                    style={expandableStyles}\n                    data-testid={\"expandable-container\"}\n                    id={contentId}\n                >\n                    <ChildContainer\n                        ref={childRef}\n                        inert={inertValue(!showExpanded)}\n                    >\n                        {children}\n                    </ChildContainer>\n                </Expandable>\n            );\n        }\n\n        return (\n            <NonExpandable data-testid=\"non-expandable-container\">\n                <ChildContainer>{children}</ChildContainer>\n            </NonExpandable>\n        );\n    };\n\n    const renderDisplayIcon = () => {\n        switch (displayState) {\n            case \"error\":\n            case \"warning\":\n                return (\n                    <AlertIcon\n                        $displayState={displayState}\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                <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                    <HandleIconContainer $expanded={showExpanded} aria-hidden>\n                        <HandleIcon />\n                    </HandleIconContainer>\n                </Handle>\n            )\n        );\n    };\n\n    return (\n        <Container\n            {...otherProps}\n            aria-labelledby={headerId}\n            role=\"region\"\n            title={typeof title === \"string\" ? title : undefined}\n        >\n            <Header\n                data-testid=\"header\"\n                onClick={interactiveHeader ? onHandleClick : undefined}\n                $interactive={interactiveHeader}\n            >\n                <LabelWrapper role={\"status\"} id={headerId}>\n                    <LabelText\n                        data-testid={subComponentTestIds?.title || \"title\"}\n                    >\n                        {title}\n                        {displayState !== \"default\" && (\n                            <>\n                                <VisuallyHidden>{displayState}</VisuallyHidden>\n                            </>\n                        )}\n                    </LabelText>\n                    {renderDisplayIcon()}\n                    {isMobile && renderHandleIcon()}\n                </LabelWrapper>\n                {callToActionComponent && (\n                    <CallToActionContainer\n                        $collapsible={collapsible}\n                        data-testid=\"call-to-action-container\"\n                    >\n                        {callToActionComponent}\n                    </CallToActionContainer>\n                )}\n\n                {!isMobile && renderHandleIcon()}\n            </Header>\n            {renderChildContent()}\n        </Container>\n    );\n};\n"],"names":["BoxContainer","_a","children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader","otherProps","__rest","showExpanded","setShowExpanded","useState","resizeDetector","useResizeDetector","childRef","ref","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","interactiveHeader","internalId","useRef","SimpleIdGenerator","generate","contentId","current","headerId","onHandleClick","event","stopPropagation","expandableStyles","useSpring","height","renderHandleIcon","_jsx","Handle","onClick","type","handle","HandleIconContainer","$expanded","HandleIcon","_jsxs","Container","Object","assign","role","undefined","Header","$interactive","LabelWrapper","id","LabelText","_Fragment","VisuallyHidden","AlertIcon","$displayState","displayStateIcon","renderDisplayIcon","CallToActionContainer","$collapsible","Expandable","style","ChildContainer","inert","inertValue","NonExpandable"],"mappings":"49BAyBO,MAAMA,EAAgBC,QAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,GAAeR,EACZS,EAAUC,EAAAV,EATY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,oBAczB,MAAOW,EAAcC,GAAmBC,GACnCV,GAAqBC,GAEpBU,EAAiBC,IACjBC,EAAWF,EAAeG,IAC1BC,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAAEC,SAAUJ,IACrCK,EAAoBlB,GAAmBL,EACvCwB,EAAaC,EAAOC,EAAkBC,YACtCC,EAAY,GAAGJ,EAAWK,kBAC1BC,EAAW,GAAGN,EAAWK,iBAKzBE,EAAiBC,IAEnBA,EAAMC,kBACNxB,GAAiBD,EAAa,EAO5B0B,EAAmBC,EAAU,CAC/BC,OAAQ5B,EAAeG,EAAeyB,OAAS,IA+C7CC,EAAmB,IAEjBrC,GACIsC,EAACC,EAAM,CACHC,QAAST,EACTU,KAAK,SAAQ,kBACIX,kBACFF,EAAS,iBACR5B,EAAW,gBACZQ,iBACFJ,aAAmB,EAAnBA,EAAqBsC,SAAU,SAAQ5C,SAEpDwC,EAACK,EAAmB,CAAAC,UAAYpC,4BAC5B8B,EAACO,UAOrB,OACIC,EAACC,EAASC,OAAAC,OAAA,GACF3C,EAAU,CAAA,kBACGwB,EACjBoB,KAAK,SACLnD,MAAwB,iBAAVA,EAAqBA,OAAQoD,EAASrD,SAAA,CAEpDgD,EAACM,EAAM,CAAA,cACS,SACZZ,QAASjB,EAAoBQ,OAAgBoB,EAASE,aACxC9B,EAAiBzB,SAAA,CAE/BgD,EAACQ,EAAY,CAACJ,KAAM,SAAUK,GAAIzB,EAAQhC,SAAA,CACtCgD,EAACU,EAAS,CAAA,eACOpD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACGmC,EAAAmB,EAAA,CAAA3D,SACIwC,EAACoB,EAAc,CAAA5D,SAAEK,SA1DnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACImC,EAACqB,EAAS,CAAAC,cACSzD,EAAY,eAEvBC,aAAmB,EAAnBA,EAAqByD,mBACrB,GAAG1D,SAAmB,aAEdA,IAGxB,QACI,OAAO,OA+CF2D,GACA1C,GAAYiB,OAEhBnC,GACGoC,EAACyB,EAAqB,CAAAC,aACJhE,EAAW,cACb,2BAA0BF,SAErCI,KAIPkB,GAAYiB,OAlGlBrC,EAEIsC,EAAC2B,EAAU,CACPC,MAAOhC,EAAgB,cACV,uBACbqB,GAAI3B,WAEJU,EAAC6B,EAAc,CACXrD,IAAKD,EACLuD,MAAOC,GAAY7D,GAAaV,SAE/BA,MAObwC,EAACgC,EAAa,CAAA,cAAa,2BAA0BxE,SACjDwC,EAAC6B,EAAc,CAAArE,SAAEA,SAkFb"}
+{"version":3,"file":"box-container.js","sources":["../../src/box-container/box-container.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport * as styles from \"./box-container.styles\";\nimport type { BoxContainerProps } from \"./types\";\n\n// @catalog\n/**\n * A titled, collapsible section container that groups related content behind a\n * labelled header.\n *\n * Use `BoxContainer` when you need to visually separate a block of content\n * under a heading and optionally allow users to collapse it. The header supports\n * a call-to-action slot and a visual status indicator.\n * @keywords collapsible, expandable, panel, section\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":"m8CAuBO,MAAMA,EAAgBC,IAAA,IAAAC,SACzBA,EAAQC,MACRA,EAAKC,YACLA,GAAc,EAAIC,SAClBA,GAAW,EAAKC,sBAChBA,EAAqBC,aACrBA,EAAe,UAASC,oBACxBA,EAAmBC,gBACnBA,EAAeC,UACfA,GAAST,EACNU,EAAUC,EAAAX,EAVY,CAAA,WAAA,QAAA,cAAA,WAAA,wBAAA,eAAA,sBAAA,kBAAA,cAezB,MAAOY,EAAcC,GAAmBC,GACnCX,GAAqBC,GAEpBW,EAAiBC,IACjBC,EAAWF,EAAeG,IAC1BC,EAAWC,EAAsB,MACjCC,EAAoBb,GAAmBL,EACvCmB,EAAaC,IACbC,EAAY,GAAGF,YACfG,EAAW,GAAGH,WACdI,GAAgBC,EAAuB,MAKvCC,GAAiBC,IAEnBA,EAAMC,kBACNjB,GAAiBD,EAAa,EAO5BmB,GAAmBC,EAAU,CAC/BC,OAAQrB,EAAeG,EAAekB,OAAS,IAyD7CC,GAAmB,IAEjB/B,GACIgC,YACI1B,UAAW2B,EACXC,QAAST,GACTU,KAAK,SAAQ,kBACIb,EAAQ,gBACVD,EAAS,iBACRrB,EAAW,gBACZS,iBACFL,aAAmB,EAAnBA,EAAqBgC,SAAU,SAAQtC,SAEpDkC,EAAA,MAAA,CACI1B,UAAW+B,EACPC,EACA7B,EACM8B,EACAC,GAEVzB,IAAKQ,GAAa,eAAA,EAAAzB,SAGlBkC,EAACS,EAAe,CAACnC,UAAWoC,QAOhD,OACIC,EAAA,UAAAC,OAAAC,OAAA,GACQtC,EAAU,CACdD,UAAW+B,EAAKS,EAAkBxC,GAAU,kBAC3BgB,EACjByB,KAAK,SACLhD,MAAwB,iBAAVA,EAAqBA,OAAQiD,EAASlD,SAAA,CAEpD6C,EAAA,MAAA,CACIrC,UAAW+B,EACPY,EACA/B,GAAqBgC,GACxB,cACW,SACZhB,QAAShB,EAAoBO,QAAgBuB,YAE7CL,EAAA,MAAA,CACIrC,UAAW6C,EACXJ,KAAM,SACNK,GAAI9B,EAAQxB,SAAA,CAEZ6C,EAAA,MAAA,CACIrC,UAAW+C,EAAgB,eACdjD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACG6B,EAAAsB,EAAA,CAAAxD,SACIkC,EAACuB,YAAgBpD,SAlFnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACI6B,EAACwB,EAAyB,CACtBlD,UAAW+B,EACPoB,EACiB,UAAjBtD,GAA4BuD,EACX,YAAjBvD,GACIwD,GACP,eAEGvD,aAAmB,EAAnBA,EAAqBwD,mBACrB,GAAGzD,SAAmB,aAEdA,IAGxB,QACI,OAAO,OAkEF0D,GACA7C,GAAYe,QAEhB7B,GACG8B,EAAA,MAAA,CACI1B,UAAW+B,EACPyB,EACA9D,GACI+D,GACP,cACW,2BAA0BjE,SAErCI,KAIPc,GAAYe,QAnIlB/B,EAEIgC,EAACgC,EAASC,IAAG,CACT3D,UAAW4D,EACXC,MAAOvC,GAAgB,cACV,uBACbwB,GAAI/B,EAASvB,SAEbkC,SACI1B,UAAW8D,EACXrD,IAAKD,EACLuD,MAAOC,GAAY7D,YAElBX,MAObkC,SACI1B,UAAWiE,gBACC,2BAA0BzE,SAEtCkC,SAAK1B,UAAW8D,WAAwBtE,SA8GtC"}

package/box-container/box-container.styles.d.ts

@@ -1,34 +1,18 @@
-import type { BoxContainerDisplayState } from "./types";
-interface StyleProps {
-    $expanded?: boolean;
-    $collapsible?: boolean;
-}
-interface LabelIconStyleProps {
-    $displayState?: BoxContainerDisplayState;
-}
-interface HeaderStyleProps {
-    $interactive?: boolean;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export declare const Expandable: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string>;
-export declare const NonExpandable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ChildContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HeaderStyleProps>> & string;
-export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LabelWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const AlertIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, LabelIconStyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const CallToActionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const Handle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const HandleIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const HandleIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const handleIconContainer: import("@linaria/core").LinariaClassName;
+export declare const handleIconContainerExpanded: import("@linaria/core").LinariaClassName;
+export declare const handleIconContainerCollapsed: import("@linaria/core").LinariaClassName;
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const expandable: import("@linaria/core").LinariaClassName;
+export declare const nonExpandable: import("@linaria/core").LinariaClassName;
+export declare const childContainer: import("@linaria/core").LinariaClassName;
+export declare const header: import("@linaria/core").LinariaClassName;
+export declare const headerInteractive: import("@linaria/core").LinariaClassName;
+export declare const labelText: import("@linaria/core").LinariaClassName;
+export declare const labelWrapper: import("@linaria/core").LinariaClassName;
+export declare const alertIcon: import("@linaria/core").LinariaClassName;
+export declare const alertIconError: import("@linaria/core").LinariaClassName;
+export declare const alertIconWarning: import("@linaria/core").LinariaClassName;
+export declare const callToActionContainer: import("@linaria/core").LinariaClassName;
+export declare const callToActionContainerCollapsible: import("@linaria/core").LinariaClassName;
+export declare const handle: import("@linaria/core").LinariaClassName;
+export declare const handleIcon: import("@linaria/core").LinariaClassName;

package/box-container/box-container.styles.js

@@ -1,87 +1,2 @@
-import{ChevronDownIcon as i}from"@lifesg/react-icons/chevron-down";import{ExclamationCircleFillIcon as e}from"@lifesg/react-icons/exclamation-circle-fill";import{animated as r}from"@react-spring/web";import n,{css as a}from"styled-components";import{V3_Border as t,V3_Colour as o,V3_Radius as s,V3_Spacing as d,V3_MediaQuery as c,V3_Font as g,V3_Motion as p}from"../v3_theme/index.js";const $=n.section`
-    border: ${t["width-010"]} ${t.solid}
-        ${o.border};
-    border-radius: ${s.sm};
-    margin-bottom: ${d["spacing-32"]};
-`,l=r(n.div`
-    overflow: hidden;
-`),m=n.div`
-    height: max-content;
-`,h=n.div`
-    border-top: ${t["width-010"]} ${t.solid}
-        ${o.border};
-`,f=n.div`
-    padding: ${d["spacing-16"]} ${d["spacing-32"]};
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    ${c.MaxWidth.sm} {
-        padding: ${d["spacing-16"]} ${d["spacing-20"]};
-        display: block;
-    }
-
-    ${i=>{if(i.$interactive)return a`
-                cursor: pointer;
-            `}}
-`,x=n.div`
-    ${g["heading-sm-semibold"]}
-    color: ${o.text};
-    word-wrap: break-word;
-    overflow-wrap: anywhere;
-    display: flex;
-    align-items: center;
-    margin-right: ${d["spacing-16"]};
-`,w=n.div`
-    display: flex;
-`,b=n(e)`
-    height: ${g.Spec["heading-size-sm"]};
-    width: ${g.Spec["heading-size-sm"]};
-    align-self: center;
-    margin-right: ${d["spacing-40"]};
-    flex-shrink: 0;
-
-    ${c.MaxWidth.sm} {
-        margin-right: 0;
-    }
-
-    ${i=>{switch(i.$displayState){case"error":return a`
-                    color: ${o["icon-error"]};
-                `;case"warning":return a`
-                    color: ${o["icon-warning"]};
-                `}}}
-`,u=n.div`
-    display: flex;
-    margin-left: auto;
-    ${c.MaxWidth.sm} {
-        flex-direction: column;
-    }
-    ${i=>{if(i.$collapsible)return a`
-                margin-right: ${d["spacing-40"]};
-                ${c.MaxWidth.sm} {
-                    margin-right: 0;
-                    margin-top: ${d["spacing-16"]};
-                }
-            `}}
-`,v=n.button`
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    padding: ${d["spacing-16"]};
-    margin: -${d["spacing-16"]};
-    display: flex;
-    align-items: center;
-
-    ${c.MaxWidth.sm} {
-        margin: -${d["spacing-16"]} -${d["spacing-16"]} -${d["spacing-16"]} 0;
-        margin-left: auto;
-    }
-`,y=n.div`
-    transform: rotate(${i=>i.$expanded?180:0}deg);
-    transition: ${p["duration-250"]} ${p["ease-default"]};
-`,M=n(i)`
-    color: ${o.icon};
-    height: ${g.Spec["heading-size-sm"]};
-    width: ${g.Spec["heading-size-sm"]};
-`;export{b as AlertIcon,u as CallToActionContainer,h as ChildContainer,$ as Container,l as Expandable,v as Handle,M as HandleIcon,y as HandleIconContainer,f as Header,x as LabelText,w as LabelWrapper,m as NonExpandable};
+import"./box-container.styles_5t2j9k.css";const c="h3376de",h="hjzhcqf",t="h1v9raz8",a="c12d5ktd",o="e15rrad0",n="n17lxubw",r="ca1fnin",e="hobh0le",x="h145wmf6",s="lu9b4gz",u="lx78u15",b="a2tumfu",f="aaq4hg3",l="a163x1mt",q="c1u9hocq",d="cwzrcxq",i="hsq8tc7",m="h97jf81";export{b as alertIcon,f as alertIconError,l as alertIconWarning,q as callToActionContainer,d as callToActionContainerCollapsible,r as childContainer,a as container,o as expandable,i as handle,m as handleIcon,c as handleIconContainer,t as handleIconContainerCollapsed,h as handleIconContainerExpanded,e as header,x as headerInteractive,s as labelText,u as labelWrapper,n as nonExpandable};
 //# sourceMappingURL=box-container.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"box-container.styles.js","sources":["../../src/box-container/box-container.styles.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport type { BoxContainerDisplayState } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $expanded?: boolean;\n    $collapsible?: boolean;\n}\n\ninterface LabelIconStyleProps {\n    $displayState?: BoxContainerDisplayState;\n}\n\ninterface HeaderStyleProps {\n    $interactive?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.section`\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const Expandable = animated(styled.div`\n    overflow: hidden;\n`);\n\nexport const NonExpandable = styled.div`\n    height: max-content;\n`;\n\nexport const ChildContainer = styled.div`\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n`;\n\nexport const Header = styled.div<HeaderStyleProps>`\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-20\"]};\n        display: block;\n    }\n\n    ${(props) => {\n        if (props.$interactive) {\n            return css`\n                cursor: pointer;\n            `;\n        }\n    }}\n`;\n\nexport const LabelText = styled.div`\n    ${V3_Font[\"heading-sm-semibold\"]}\n    color: ${V3_Colour[\"text\"]};\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    display: flex;\n    align-items: center;\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const LabelWrapper = styled.div`\n    display: flex;\n`;\n\nexport const AlertIcon = styled(ExclamationCircleFillIcon)<LabelIconStyleProps>`\n    height: ${V3_Font.Spec[\"heading-size-sm\"]};\n    width: ${V3_Font.Spec[\"heading-size-sm\"]};\n    align-self: center;\n    margin-right: ${V3_Spacing[\"spacing-40\"]};\n    flex-shrink: 0;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin-right: 0;\n    }\n\n    ${(props) => {\n        switch (props.$displayState) {\n            case \"error\":\n                return css`\n                    color: ${V3_Colour[\"icon-error\"]};\n                `;\n            case \"warning\":\n                return css`\n                    color: ${V3_Colour[\"icon-warning\"]};\n                `;\n            default:\n                break;\n        }\n    }}\n`;\n\nexport const CallToActionContainer = styled.div<StyleProps>`\n    display: flex;\n    margin-left: auto;\n    ${V3_MediaQuery.MaxWidth.sm} {\n        flex-direction: column;\n    }\n    ${(props) => {\n        if (props.$collapsible) {\n            return css`\n                margin-right: ${V3_Spacing[\"spacing-40\"]};\n                ${V3_MediaQuery.MaxWidth.sm} {\n                    margin-right: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const Handle = styled.button`\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    margin: -${V3_Spacing[\"spacing-16\"]};\n    display: flex;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        margin: -${V3_Spacing[\"spacing-16\"]} -${V3_Spacing[\"spacing-16\"]} -${V3_Spacing[\n                \"spacing-16\"\n            ]} 0;\n        margin-left: auto;\n    }\n`;\n\nexport const HandleIconContainer = styled.div<StyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const HandleIcon = styled(ChevronDownIcon)`\n    color: ${V3_Colour[\"icon\"]};\n    height: ${V3_Font.Spec[\"heading-size-sm\"]};\n    width: ${V3_Font.Spec[\"heading-size-sm\"]};\n`;\n"],"names":["Container","styled","section","V3_Border","V3_Colour","V3_Radius","V3_Spacing","Expandable","animated","div","NonExpandable","ChildContainer","Header","V3_MediaQuery","MaxWidth","sm","props","$interactive","css","LabelText","V3_Font","LabelWrapper","AlertIcon","ExclamationCircleFillIcon","Spec","$displayState","CallToActionContainer","$collapsible","Handle","button","HandleIconContainer","$expanded","V3_Motion","HandleIcon","ChevronDownIcon"],"mappings":"iYAoCO,MAAMA,EAAYC,EAAOC,OAAO;cACzBC,EAAU,gBAAgBA,EAAiB;UAC/CC,EAAkB;qBACPC,EAAc;qBACdC,EAAW;EAGnBC,EAAaC,EAASP,EAAOQ,GAAG;;GAIhCC,EAAgBT,EAAOQ,GAAG;;EAI1BE,EAAiBV,EAAOQ,GAAG;kBACtBN,EAAU,gBAAgBA,EAAiB;UACnDC,EAAkB;EAGfQ,EAASX,EAAOQ,GAAqB;eACnCH,EAAW,iBAAiBA,EAAW;;;;;MAKhDO,EAAcC,SAASC;mBACVT,EAAW,iBAAiBA,EAAW;;;;MAInDU,IACC,GAAIA,EAAMC,aACN,OAAOC,CAAG;;aAGd;EAIKC,EAAYlB,EAAOQ,GAAG;MAC7BW,EAAQ;aACDhB,EAAgB;;;;;oBAKTE,EAAW;EAGlBe,EAAepB,EAAOQ,GAAG;;EAIzBa,EAAYrB,EAAOsB,EAA+C;cACjEH,EAAQI,KAAK;aACdJ,EAAQI,KAAK;;oBAENlB,EAAW;;;MAGzBO,EAAcC,SAASC;;;;MAItBC,IACC,OAAQA,EAAMS,eACV,IAAK,QACD,OAAOP,CAAG;6BACGd,EAAU;kBAE3B,IAAK,UACD,OAAOc,CAAG;6BACGd,EAAU;;EAQ1BsB,EAAwBzB,EAAOQ,GAAe;;;MAGrDI,EAAcC,SAASC;;;MAGtBC,IACC,GAAIA,EAAMW,aACN,OAAOT,CAAG;gCACUZ,EAAW;kBACzBO,EAAcC,SAASC;;kCAEPT,EAAW;;aAGrC;EAIKsB,EAAS3B,EAAO4B,MAAM;;;;eAIpBvB,EAAW;eACXA,EAAW;;;;MAIpBO,EAAcC,SAASC;mBACVT,EAAW,kBAAkBA,EAAW,kBAAkBA,EAC7D;;;EAMHwB,EAAsB7B,EAAOQ,GAAe;wBAChCO,GAAWA,EAAMe,UAAY,IAAM;kBAC1CC,EAAU,mBAAmBA,EAAU;EAG5CC,EAAahC,EAAOiC,EAAgB;aACpC9B,EAAgB;cACfgB,EAAQI,KAAK;aACdJ,EAAQI,KAAK;"}
+{"version":3,"file":"box-container.styles.js","sources":["../../src/box-container/box-container.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 handleIconContainer = css`\n    transition: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const handleIconContainerExpanded = css`\n    transform: rotate(180deg);\n`;\n\nexport const handleIconContainerCollapsed = css`\n    transform: rotate(0deg);\n`;\n\nexport const container = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const expandable = css`\n    overflow: hidden;\n`;\n\nexport const nonExpandable = css`\n    height: max-content;\n`;\n\nexport const childContainer = css`\n    border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const header = css`\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]};\n        display: block;\n    }\n`;\n\nexport const headerInteractive = css`\n    cursor: pointer;\n`;\n\nexport const labelText = css`\n    ${Font[\"heading-sm-semibold\"]}\n    color: ${Colour[\"text\"]};\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    display: flex;\n    align-items: center;\n    margin-right: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const labelWrapper = css`\n    display: flex;\n`;\n\nexport const alertIcon = css`\n    height: ${Font.Spec[\"heading-size-sm\"]};\n    width: ${Font.Spec[\"heading-size-sm\"]};\n    align-self: center;\n    margin-right: ${Spacing[\"spacing-40\"]};\n    flex-shrink: 0;\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: 0;\n    }\n`;\n\nexport const alertIconError = css`\n    color: ${Colour[\"icon-error\"]};\n`;\n\nexport const alertIconWarning = css`\n    color: ${Colour[\"icon-warning\"]};\n`;\n\nexport const callToActionContainer = css`\n    display: flex;\n    margin-left: auto;\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex-direction: column;\n    }\n`;\n\nexport const callToActionContainerCollapsible = css`\n    margin-right: ${Spacing[\"spacing-40\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin-right: 0;\n        margin-top: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const handle = css`\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    padding: ${Spacing[\"spacing-16\"]};\n    margin: calc(${Spacing[\"spacing-16\"]} * -1);\n    display: flex;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin: calc(${Spacing[\"spacing-16\"]} * -1)\n            calc(${Spacing[\"spacing-16\"]} * -1)\n            calc(${Spacing[\"spacing-16\"]} * -1) 0;\n        margin-left: auto;\n    }\n`;\n\nexport const handleIcon = css`\n    color: ${Colour[\"icon\"]};\n    height: ${Font.Spec[\"heading-size-sm\"]};\n    width: ${Font.Spec[\"heading-size-sm\"]};\n`;\n"],"names":["handleIconContainer","handleIconContainerExpanded","handleIconContainerCollapsed","container","expandable","nonExpandable","childContainer","header","headerInteractive","labelText","labelWrapper","alertIcon","alertIconError","alertIconWarning","callToActionContainer","callToActionContainerCollapsible","handle","handleIcon"],"mappings":"uEAYO,MAAMA,EAAmB,UAInBC,EAA2B,UAI3BC,EAA4B,WAI5BC,EAAS,WAKTC,EAAU,WAIVC,EAAa,WAIbC,EAAc,UAIdC,EAAM,UAYNC,EAAiB,WAIjBC,EAAS,UAUTC,EAAY,UAIZC,EAAS,UAYTC,EAAc,UAIdC,EAAgB,WAIhBC,EAAqB,WASrBC,EAAgC,UAShCC,EAAM,UAiBNC,EAAU"}

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

@@ -0,0 +1,18 @@
+@layer fds{.h3376de{-webkit-transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
+.hjzhcqf{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.h1v9raz8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.c12d5ktd{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}
+.e15rrad0{overflow:hidden;}
+.n17lxubw{height:-webkit-max-content;height:-moz-max-content;height:max-content;}
+.ca1fnin{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.hobh0le{padding:var(--fds-spacing-16) var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-sm-max) .hobh0le{padding:var(--fds-spacing-16) var(--fds-spacing-20);display:block;}
+.h145wmf6{cursor:pointer;}
+.lu9b4gz{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);color:var(--fds-colour-text);word-wrap:break-word;overflow-wrap:anywhere;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-16);}
+.lx78u15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.a2tumfu{height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin-right:var(--fds-spacing-40);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}:where(body.fds-breakpoint-sm-max) .a2tumfu{margin-right:0;}
+.aaq4hg3{color:var(--fds-colour-icon-error);}
+.a163x1mt{color:var(--fds-colour-icon-warning);}
+.c1u9hocq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:auto;}:where(body.fds-breakpoint-sm-max) .c1u9hocq{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.cwzrcxq{margin-right:var(--fds-spacing-40);}:where(body.fds-breakpoint-sm-max) .cwzrcxq{margin-right:0;margin-top:var(--fds-spacing-16);}
+.hsq8tc7{background:transparent;border:none;cursor:pointer;padding:var(--fds-spacing-16);margin:calc(var(--fds-spacing-16) * -1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-sm-max) .hsq8tc7{margin:calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) calc(var(--fds-spacing-16) * -1) 0;margin-left:auto;}
+.h97jf81{color:var(--fds-colour-icon);height:var(--fds-font-heading-size-sm);width:var(--fds-font-heading-size-sm);}}

package/box-container/types.d.ts

@@ -1,19 +1,45 @@
+/** Visual status applied to the box container header, reflected via an icon and accessible label. */
 export type BoxContainerDisplayState = "default" | "error" | "warning";
+/** Overrides for `data-testid` attributes on internal sub-elements. */
 export interface BoxContainerSubComponentTestIds {
     title?: string | undefined;
     handle?: string | undefined;
     displayStateIcon?: string | undefined;
 }
+/** Props for the `BoxContainer` component. */
 export interface BoxContainerProps {
     children: JSX.Element | JSX.Element[];
     title: string | JSX.Element;
+    /**
+     * When `false`, the container is always expanded and the collapse handle is
+     * hidden.
+     *
+     * @default true
+     */
     collapsible?: boolean | undefined;
+    /**
+     * Initial expanded state when `collapsible` is `true`.
+     *
+     * @default false
+     */
     expanded?: boolean | undefined;
+    /** Optional element rendered in the header alongside the title, e.g. a link or button. */
     callToActionComponent?: JSX.Element | undefined;
+    /**
+     * Renders an inline alert icon next to the title and announces the state to
+     * screen readers. Has no effect when set to `"default"`.
+     *
+     * @default "default"
+     */
     displayState?: BoxContainerDisplayState | undefined;
     className?: string | undefined;
     subComponentTestIds?: BoxContainerSubComponentTestIds | undefined;
     "data-testid"?: string | undefined;
     id?: string | undefined;
+    /**
+     * When `true` (and `collapsible` is also `true`), the entire header row
+     * becomes a click target for toggling expand/collapse, not just the chevron
+     * button.
+     */
     clickableHeader?: boolean | undefined;
 }

package/breadcrumb/breadcrumb.d.ts

@@ -1,2 +1,10 @@
 import type { BreadcrumbProps } from "./types";
-export declare const Breadcrumb: ({ links, fadeColor, fadePosition, itemStyle, id, separatorStyle, ...otherProps }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Horizontal breadcrumb navigation trail.
+ *
+ * Use `Breadcrumb` to show the user's position within a page hierarchy and
+ * allow navigation to parent pages. On tablet and below, the trail scrolls
+ * horizontally with optional edge fade overlays to indicate clipped content.
+ * @keywords hierarchy, navigation, path, trail, wayfinding
+ */
+export declare const Breadcrumb: ({ links, fadeColor, fadePosition, id, separatorStyle, className, ...otherProps }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;

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{useState as o,useRef as n,useContext as l}from"react";import{useResizeDetector as s}from"../external/react-resize-detector/build/index.esm.js";import{ThemeContext as d}from"styled-components";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/string-helper.js";import{useEvent as a}from"../util/use-event.js";import{useEventListener as c}from"../util/use-event-listener.js";import{useIsomorphicLayoutEffect as h}from"../util/use-isomorphic-layout-effect.js";import{V3_Breakpoint as f}from"../v3_theme/index.js";import{Wrapper as m,Content as u,CurrentLabel as p,PreviousLink as g,Item as b,Caret as j,Slash as y,Fade as v}from"./breadcrumb.style.js";const W=W=>{var{links:w,fadeColor:x,fadePosition:k="both",itemStyle:S,id:$,separatorStyle:C="chevron"}=W,O=e(W,["links","fadeColor","fadePosition","itemStyle","id","separatorStyle"]);const[z,A]=o(!1),[L,P]=o(!1),[R,_]=o(!1),M="left"===k||"both"===k,B="right"===k||"both"===k,q=n(null),D=n(null),E=l(d),F=f["lg-max"]({theme:E}),G=a((()=>{const e=D.current,r=q.current;e&&r&&w&&w.length>1&&window.innerWidth<=F&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),H=a((()=>{const e=window.innerWidth<=F;A(e);const r=D.current,t=q.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return P(r.scrollLeft>=1),void _(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);P(!1),_(!1)}));if(c("resize",H),c("scroll",H,D.current),h((()=>{G(),H()}),[G,H]),s({onResize:G,targetRef:q,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!w)return null;return r(m,Object.assign({ref:q,id:$||"breadcrumb"},O,{children:[t("nav",{"aria-label":"Breadcrumb",children:t(u,{ref:D,children:w.map(((e,i)=>{let o;return e.children?(o=i!==w.length-1&&e.href?t(g,Object.assign({},e,{weight:"semibold",underlineStyle:"none"})):t(p,{weight:"semibold",forwardedAs:"span",children:e.children}),r(b,Object.assign({$styleProps:S},i===w.length-1&&{"aria-current":"page"},{children:[o,i<w.length-1&&("chevron"===C?t(j,{"aria-hidden":!0}):t(y,{inline:!0,"aria-hidden":!0,children:"/"}))]}),i)):null}))})}),z&&(()=>{let e;return e=Array.isArray(x)&&x.length>0?{left:x,right:x}:x||{left:void 0,right:void 0},r(i,{children:[L&&M&&t(v,{$backgroundColor:e.left,$position:"left"}),R&&B&&t(v,{$backgroundColor:e.right,$position:"right"})]})})()]}))};export{W 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{useResolvedBreakpointToken as h}from"../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 N,caret as x,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=m(h(d["lg-max"]));let Y;Y=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==Y?void 0:Y.left)||void 0===O?void 0:O.join(", ")}),c(V,{[g.fade.backgroundColor]:null===(z=null==Y?void 0:Y.right)||void 0===z?void 0:z.join(", ")});const Z=f((()=>{const e=T.current,r=Q.current;e&&r&&B&&B.length>1&&window.innerWidth<=X&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),$=f((()=>{const e=window.innerWidth<=X;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",$),p("scroll",$,T.current),j((()=>{Z(),$()}),[Z,$,X]),a({onResize:Z,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:N},i===B.length-1&&{"aria-current":"page"},{children:[s,i<B.length-1&&("chevron"===q?t(o,{"aria-hidden":!0,className:x}):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 { useContext, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Caret,\n    Content,\n    CurrentLabel,\n    Fade,\n    Item,\n    PreviousLink,\n    Slash,\n    Wrapper,\n} from \"./breadcrumb.style\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    itemStyle,\n    id,\n    separatorStyle = \"chevron\",\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\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\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                    <CurrentLabel weight=\"semibold\" forwardedAs=\"span\">\n                        {link.children}\n                    </CurrentLabel>\n                );\n            } else {\n                element = (\n                    <PreviousLink\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                    />\n                );\n            }\n\n            return (\n                <Item\n                    key={index}\n                    $styleProps={itemStyle}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <Caret aria-hidden />\n                        ) : (\n                            <Slash inline aria-hidden>\n                                /\n                            </Slash>\n                        ))}\n                </Item>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        let fadeColorSet: FadeColorSet;\n\n        if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n            // Single array, apply same color\n            fadeColorSet = {\n                left: fadeColor,\n                right: fadeColor,\n            };\n        } else if (!fadeColor) {\n            fadeColorSet = {\n                left: undefined,\n                right: undefined,\n            };\n        } else {\n            fadeColorSet = fadeColor as FadeColorSet;\n        }\n\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.left}\n                        $position=\"left\"\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.right}\n                        $position=\"right\"\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <Wrapper ref={wrapperRef} id={id || \"breadcrumb\"} {...otherProps}>\n            <nav aria-label=\"Breadcrumb\">\n                <Content ref={contentRef}>{renderLinks()}</Content>\n            </nav>\n            {showFade && renderFade()}\n        </Wrapper>\n    );\n};\n"],"names":["Breadcrumb","_a","links","fadeColor","fadePosition","itemStyle","id","separatorStyle","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","theme","useContext","ThemeContext","tabletBreakpoint","V3_Breakpoint","onResize","useEvent","content","current","wrapper","length","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","Wrapper","Object","assign","ref","_jsx","children","Content","map","link","index","element","href","PreviousLink","weight","underlineStyle","CurrentLabel","forwardedAs","Item","$styleProps","Caret","Slash","inline","fadeColorSet","Array","isArray","left","right","undefined","_Fragment","Fade","$position","$backgroundColor","renderFade"],"mappings":"syBAkBO,MAAMA,EAAcC,QAAAC,MACvBA,EAAKC,UACLA,EAASC,aACTA,EAAe,OAAMC,UACrBA,EAASC,GACTA,EAAEC,eACFA,EAAiB,WAASN,EACvBO,EAAUC,EAAAR,EAPU,wEAYvB,MAAOS,EAAUC,GAAeC,GAAkB,IAC3CC,EAAcC,GAAmBF,GAAkB,IACnDG,EAAeC,GAAoBJ,GAAkB,GACtDK,EACe,SAAjBb,GAA4C,SAAjBA,EACzBc,EACe,UAAjBd,GAA6C,SAAjBA,EAE1Be,EAAaC,EAAuB,MACpCC,EAAaD,EAAyB,MAMtCE,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAE7CK,EAAWC,GAAS,KACtB,MAAMC,EAAUR,EAAWS,QACrBC,EAAUZ,EAAWW,QAGvBD,GACAE,GACA7B,GACAA,EAAM8B,OAAS,GACfC,OAAOC,YAAcT,IAErBI,EAAQM,WAAaN,EAAQO,YAAcL,EAAQM,YACvD,IAGEC,EAAuBV,GAAS,KAClC,MAAMW,EAAeN,OAAOC,YAAcT,EAC1Cd,EAAY4B,GAEZ,MAAMV,EAAUR,EAAWS,QACrBC,EAAUZ,EAAWW,QAC3B,GAAID,GAAWE,GAAWQ,GAClBV,EAAQO,YAAcL,EAAQM,YAO9B,OALAvB,EAAgBe,EAAQM,YAAc,QACtCnB,EACIa,EAAQO,YAAcP,EAAQM,WAAa,EACvCJ,EAAQM,aAMxBvB,GAAgB,GAChBE,GAAiB,EAAM,IA0B3B,GApBAwB,EAAiB,SAAUF,GAC3BE,EAAiB,SAAUF,EAAsBjB,EAAWS,SAE5DW,GAA0B,KACtBd,IACAW,GAAsB,GACvB,CAACX,EAAUW,IAGdI,EAAkB,CACdf,WACAgB,UAAWxB,EACXyB,YAAa,WACbC,YAAa,GACbC,aAAa,KAMZ5C,EAAO,OAAO,KAmFnB,OACI6C,EAACC,EAAOC,OAAAC,OAAA,CAACC,IAAKhC,EAAYb,GAAIA,GAAM,cAAkBE,aAClD4C,EAAA,MAAA,CAAA,aAAgB,aAAYC,SACxBD,EAACE,EAAO,CAACH,IAAK9B,WAnFfnB,EAAMqD,KAAI,CAACC,EAAMC,KACpB,IAAIC,EACJ,OAAKF,EAAKH,UAWNK,EAPAD,IAAUvD,EAAM8B,OAAS,GAAMwB,EAAKG,KAQhCP,EAACQ,EAAYX,OAAAC,OAAA,CAAA,EACLM,EAAI,CACRK,OAAO,WACPC,eAAe,UATnBV,EAACW,EAAY,CAACF,OAAO,WAAWG,YAAY,OAAMX,SAC7CG,EAAKH,WAcdN,EAACkB,EAAIhB,OAAAC,OAAA,CAAAgB,YAEY7D,GACRoD,IAAUvD,EAAM8B,OAAS,GAAK,CAC/B,eAAgB,QAClB,CAAAqB,SAAA,CAEDK,EACAD,EAAQvD,EAAM8B,OAAS,IACA,YAAnBzB,EACG6C,EAACe,EAAK,CAAA,eAAA,IAENf,EAACgB,EAAK,CAACC,QAAM,EAAA,eAAA,EAAAhB,SAAA,UAXhBI,IArBF,IAoCA,QA8CV/C,GAzCU,MACf,IAAI4D,EAiBJ,OAbIA,EAFAC,MAAMC,QAAQrE,IAAcA,EAAU6B,OAAS,EAEhC,CACXyC,KAAMtE,EACNuE,MAAOvE,GAEHA,GACO,CACXsE,UAAME,EACND,WAAOC,GAOX5B,EAAA6B,EAAA,CAAAvB,SAAA,CACKxC,GAAgBI,GACbmC,EAACyB,oBACqBP,EAAaG,KAAIK,UACzB,SAGjB/D,GAAiBG,GACdkC,EAACyB,EAAI,CAAAE,iBACiBT,EAAaI,gBACrB,YAGnB,EASUM,MACP"}
+{"version":3,"file":"breadcrumb.js","sources":["../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    parsePxOrRemValue,\n    useApplyStyle,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\n// @catalog\n/**\n * Horizontal breadcrumb navigation trail.\n *\n * Use `Breadcrumb` to show the user's position within a page hierarchy and\n * allow navigation to parent pages. On tablet and below, the trail scrolls\n * horizontally with optional edge fade overlays to indicate clipped content.\n * @keywords hierarchy, navigation, path, trail, wayfinding\n */\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const tabletBreakpoint = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    // =============================================================================\n    // FADE COLOR CALCULATION\n    // =============================================================================\n    let fadeColorSet: FadeColorSet;\n\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        fadeColorSet = {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    } else if (fadeColor) {\n        fadeColorSet = fadeColor as FadeColorSet;\n    } else {\n        fadeColorSet = {\n            left: undefined,\n            right: undefined,\n        };\n    }\n\n    // =============================================================================\n    // CSS VARIABLES\n    // =============================================================================\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n    });\n\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n    });\n\n    const onResize = useEvent(() => {\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n\n        if (\n            content &&\n            wrapper &&\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        }\n    });\n\n    const handleShowFadeToggle = useEvent(() => {\n        const nextShowFade = window.innerWidth <= tabletBreakpoint;\n        setShowFade(nextShowFade);\n\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n        if (content && wrapper && nextShowFade) {\n            if (content.scrollWidth > wrapper.offsetWidth) {\n                // set 1px margin of error to handle sub-pixel differences\n                setShowFadeLeft(content.scrollLeft >= 1);\n                setShowFadeRight(\n                    content.scrollWidth - content.scrollLeft - 1 >\n                        wrapper.offsetWidth\n                );\n                return;\n            }\n        }\n\n        setShowFadeLeft(false);\n        setShowFadeRight(false);\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"resize\", handleShowFadeToggle);\n    useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n    useIsomorphicLayoutEffect(() => {\n        onResize();\n        handleShowFadeToggle();\n    }, [onResize, handleShowFadeToggle, tabletBreakpoint]);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n        skipOnMount: true,\n    });\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        as=\"span\"\n                        className={styles.currentLabel}\n                    >\n                        {link.children}\n                    </Typography.BodyMD>\n                );\n            } else {\n                element = (\n                    <Typography.LinkMD\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                        className={styles.previousLink}\n                    />\n                );\n            }\n\n            return (\n                <li\n                    key={index}\n                    className={styles.item}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <ChevronRightIcon\n                                aria-hidden\n                                className={styles.caret}\n                            />\n                        ) : (\n                            <Typography.BodyMD\n                                inline\n                                aria-hidden\n                                className={styles.slash}\n                            >\n                                /\n                            </Typography.BodyMD>\n                        ))}\n                </li>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            id={id || \"breadcrumb\"}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <ul ref={contentRef} className={styles.content}>\n                    {renderLinks()}\n                </ul>\n            </nav>\n            {showFade && renderFade()}\n        </div>\n    );\n};\n"],"names":["Breadcrumb","_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"g6CAyBO,MAAMA,EAAcC,aAAAC,MACvBA,EAAKC,UACLA,EAASC,aACTA,EAAe,OAAMC,GACrBA,EAAEC,eACFA,EAAiB,UAASC,UAC1BA,GAASN,EACNO,EAAUC,EAAAR,EAPU,wEAYvB,MAAOS,EAAUC,GAAeC,GAAkB,IAC3CC,EAAcC,GAAmBF,GAAkB,IACnDG,EAAeC,GAAoBJ,GAAkB,GACtDK,EACe,SAAjBb,GAA4C,SAAjBA,EACzBc,EACe,UAAjBd,GAA6C,SAAjBA,EAE1Be,EAAaC,EAAuB,MACpCC,EAAaD,EAAyB,MACtCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAMtCI,EAAmBC,EACrBC,EAA2BC,EAAW,YAM1C,IAAIC,EAGAA,EADAC,MAAMC,QAAQ3B,IAAcA,EAAU4B,OAAS,EAChC,CACXC,KAAM7B,EACN8B,MAAO9B,GAEJA,GAGQ,CACX6B,UAAME,EACND,WAAOC,GAOfC,EAAcb,EAAa,CACvB,CAACc,EAAcC,KAAKC,iBAAoC,QAAlBC,EAAAX,eAAAA,EAAcI,YAAI,IAAAO,OAAA,EAAAA,EAAEC,KAAK,QAGnEL,EAAcZ,EAAc,CACxB,CAACa,EAAcC,KAAKC,iBAAqC,QAAnBG,EAAAb,eAAAA,EAAcK,aAAK,IAAAQ,OAAA,EAAAA,EAAED,KAAK,QAGpE,MAAME,EAAWC,GAAS,KACtB,MAAMC,EAAUvB,EAAWwB,QACrBC,EAAU3B,EAAW0B,QAGvBD,GACAE,GACA5C,GACAA,EAAM6B,OAAS,GACfgB,OAAOC,YAAcxB,IAErBoB,EAAQK,WAAaL,EAAQM,YAAcJ,EAAQK,YACvD,IAGEC,EAAuBT,GAAS,KAClC,MAAMU,EAAeN,OAAOC,YAAcxB,EAC1Cb,EAAY0C,GAEZ,MAAMT,EAAUvB,EAAWwB,QACrBC,EAAU3B,EAAW0B,QAC3B,GAAID,GAAWE,GAAWO,GAClBT,EAAQM,YAAcJ,EAAQK,YAO9B,OALArC,EAAgB8B,EAAQK,YAAc,QACtCjC,EACI4B,EAAQM,YAAcN,EAAQK,WAAa,EACvCH,EAAQK,aAMxBrC,GAAgB,GAChBE,GAAiB,EAAM,IA0B3B,GApBAsC,EAAiB,SAAUF,GAC3BE,EAAiB,SAAUF,EAAsB/B,EAAWwB,SAE5DU,GAA0B,KACtBb,IACAU,GAAsB,GACvB,CAACV,EAAUU,EAAsB5B,IAGpCgC,EAAkB,CACdd,WACAe,UAAWtC,EACXuC,YAAa,WACbC,YAAa,GACbC,aAAa,KAMZ1D,EAAO,OAAO,KA8EnB,OACI2D,uBACIC,IAAK3C,EACLd,GAAIA,GAAM,aACVE,UAAWwD,EAAKC,EAAgBzD,IAC5BC,EAAU,CAAAyD,SAAA,CAEdC,sBAAgB,aAAYD,SACxBC,QAAIJ,IAAKzC,EAAYd,UAAW4D,WAnFjCjE,EAAMkE,KAAI,CAACC,EAAMC,KACpB,IAAIC,EACJ,OAAKF,EAAKJ,UAeNM,EAXAD,IAAUpE,EAAM6B,OAAS,GAAMsC,EAAKG,KAYhCN,EAACO,EAAWC,OAAMC,OAAAC,OAAA,GACVP,EAAI,CACRQ,OAAO,WACPC,eAAe,OACfvE,UAAWwE,KAdfb,EAACO,EAAWO,OAAM,CACdH,OAAO,WACPI,GAAG,OACH1E,UAAW2E,EAAmBjB,SAE7BI,EAAKJ,WAedJ,EAAA,KAAAc,OAAAC,OAAA,CAEIrE,UAAW4E,GACNb,IAAUpE,EAAM6B,OAAS,GAAK,CAC/B,eAAgB,QAClB,CAAAkC,SAAA,CAEDM,EACAD,EAAQpE,EAAM6B,OAAS,IACA,YAAnBzB,EACG4D,EAACkB,EAAgB,CAAA,eAAA,EAEb7E,UAAW8E,IAGfnB,EAACO,EAAWO,QACRM,QAAM,EAAA,eAAA,EAEN/E,UAAWgF,qBAjBlBjB,IA1BF,IAgDF,QAoCR5D,GA7BDmD,EAAA2B,EAAA,CAAAvB,SAAA,CACKpD,GAAgBI,GACbiD,EAAA,MAAA,CACIJ,IAAKxC,EACLf,UAAWwD,EAAK0B,EAAaC,KAGpC3E,GAAiBG,GACdgD,EAAA,MAAA,CACIJ,IAAKvC,EACLhB,UAAWwD,EAAK0B,EAAaE,WAoBvC"}

package/breadcrumb/breadcrumb.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const tokens: {
+    fade: {
+        backgroundColor: string;
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const content: import("@linaria/core").LinariaClassName;
+export declare const fade: import("@linaria/core").LinariaClassName;
+export declare const fadeLeft: import("@linaria/core").LinariaClassName;
+export declare const fadeRight: import("@linaria/core").LinariaClassName;
+export declare const item: import("@linaria/core").LinariaClassName;
+export declare const caret: import("@linaria/core").LinariaClassName;
+export declare const slash: import("@linaria/core").LinariaClassName;
+export declare const currentLabel: import("@linaria/core").LinariaClassName;
+export declare const previousLink: import("@linaria/core").LinariaClassName;

package/breadcrumb/breadcrumb.styles.js

@@ -0,0 +1,2 @@
+import"./breadcrumb.styles_1nl4aua.css";const r={fade:{backgroundColor:"--fds-internal-breadcrumb-fade-backgroundColor"}},a="wcpniaz",o="c10gatr7",c="fbyhxo7",d="f1xa0lk7",b="f1oxmxuo",e="ikhkv84",m="co9wmrd",n="spyv6ve",f="c1mfqdvn",s="pm022dc";export{m as caret,o as content,f as currentLabel,c as fade,d as fadeLeft,b as fadeRight,e as item,s as previousLink,n as slash,r as tokens,a as wrapper};
+//# sourceMappingURL=breadcrumb.styles.js.map

package/breadcrumb/breadcrumb.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.styles.js","sources":["../../src/breadcrumb/breadcrumb.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\n\nexport const tokens = {\n    fade: {\n        backgroundColor: \"--fds-internal-breadcrumb-fade-backgroundColor\",\n    },\n};\n\n// =============================================================================\n// STYLE CLASSES\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    width: 100%;\n    z-index: 1;\n    margin: ${Spacing[\"spacing-32\"]} 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: ${Spacing[\"spacing-24\"]} 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n\nexport const content = css`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: calc(${Spacing[\"spacing-8\"]} * -1);\n    font-size: ${Font.Spec[\"body-size-md\"]};\n    overflow-x: scroll;\n    overflow-y: hidden;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const fade = css`\n    ${tokens.fade.backgroundColor}: initial;\n    width: ${Spacing[\"spacing-64\"]};\n    height: calc(1lh + ${Spacing[\"spacing-4\"]});\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none;\n`;\n\nexport const fadeLeft = css`\n    ${MediaQuery.MaxWidth.lg} {\n        left: calc(${Spacing[\"spacing-8\"]} * -1);\n        background-image: linear-gradient(\n            to right,\n            var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const fadeRight = css`\n    ${MediaQuery.MaxWidth.lg} {\n        right: ${Spacing[\"spacing-8\"]};\n        background-image: linear-gradient(\n            to left,\n            var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const item = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n`;\n\nexport const caret = css`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const slash = css`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const currentLabel = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const previousLink = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["tokens","fade","backgroundColor","wrapper","content","fadeLeft","fadeRight","item","caret","slash","currentLabel","previousLink"],"mappings":"kEAIO,MAAMA,EAAS,CAClBC,KAAM,CACFC,gBAAiB,mDAOZC,EAAO,UAePC,EAAO,WAoBPH,EAAI,UAUJI,EAAQ,WAWRC,EAAS,WAWTC,EAAI,UAQJC,EAAK,UAMLC,EAAK,UAKLC,EAAY,WAIZC,EAAY"}

package/breadcrumb/breadcrumb.styles_1nl4aua.css

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

package/breadcrumb/types.d.ts

@@ -1,16 +1,51 @@
 export type FadePosition = "left" | "right" | "both";
 export type SeparatorStyle = "chevron" | "slash";
+/**
+ * Gradient color values for the fade overlays in the breadcrumb scroll container.
+ */
 export interface FadeColorSet {
+    /**
+     * Gradient color stops for the left fade overlay.
+     */
     left?: string[] | undefined;
+    /**
+     * Gradient color stops for the right fade overlay.
+     */
     right?: string[] | undefined;
 }
+/** Props for the `Breadcrumb` component */
 export interface BreadcrumbProps {
+    /**
+     * Navigation items rendered as the breadcrumb trail. The last item is
+     * treated as the current page (`aria-current="page"`) and is not clickable.
+     * Items without `href` render as non-clickable labels. Items without
+     * `children` are skipped.
+     */
     links: React.AnchorHTMLAttributes<HTMLAnchorElement>[];
+    /**
+     * Gradient color stops for the fade overlays shown on horizontal scroll.
+     * Pass a `string[]` to apply the same gradient to both edges, or a
+     * `FadeColorSet` to configure each edge independently.
+     */
     fadeColor?: string[] | FadeColorSet | undefined;
+    /**
+     * Which edges display fade overlays when content overflows.
+     *
+     * @default "both"
+     */
     fadePosition?: FadePosition | undefined;
-    itemStyle?: string | undefined;
+    /**
+     * Visual separator between breadcrumb items.
+     *
+     * @default "chevron"
+     */
     separatorStyle?: SeparatorStyle | undefined;
     className?: string | undefined;
+    /**
+     * HTML `id` for the wrapper element.
+     *
+     * @default "breadcrumb"
+     */
     id?: string | undefined;
     "data-testid"?: string | undefined;
 }

package/button/button.d.ts

@@ -1,7 +1,14 @@
 import React from "react";
 import type { ButtonProps } from "./types";
-export declare const Button: {
+/**
+ * A call-to-action that triggers an action when activated by the user
+ * @keywords action, cta, submit, trigger
+ */
+export declare const Button: ((props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
+    /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType="default">` */
     Default: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType="small">` */
     Small: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    /** @deprecated Use the `sizeType` prop instead: `<Button sizeType="large">` */
     Large: (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
 };

package/button/button.js

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