@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/badge/types.d.ts

@@ -1,10 +1,41 @@
+/** Visual style of the badge indicator. */
 export type BadgeVariant = "number" | "number-with-border" | "dot" | "dot-with-border" | "square-number";
+/** Color scheme applied to the badge. */
 export type BadgeColor = "default" | "important";
+/** Props for the `Badge` component. */
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Horizontal and vertical offset applied to the badge when it overlays a
+     * child element. Provided as a `[x, y]` tuple of CSS length values (e.g.
+     * `["-4px", "-4px"]`). Ignored when no child is rendered.
+     */
     badgeOffset?: [string, string] | undefined;
+    /**
+     * Element that the badge overlays. When provided, the badge is positioned
+     * absolutely over the top-right corner of this child. Omit to render the
+     * badge as a standalone indicator.
+     */
     children?: JSX.Element | undefined;
-    count?: number | undefined;
-    variant?: BadgeVariant | undefined;
+    /**
+     * Color scheme applied to the badge.
+     *
+     * @default "default"
+     */
     color?: BadgeColor | undefined;
+    /**
+     * Numeric value displayed inside `number`, `number-with-border`, and
+     * `square-number` variants. Values above 1000 are capped and shown as
+     * `"1K"` or `"1K+"`. Has no effect on dot variants.
+     */
+    count?: number | undefined;
+    /**
+     * @default "badge"
+     */
     "data-testid"?: string | undefined;
+    /**
+     * Visual style of the badge indicator.
+     *
+     * @default "number"
+     */
+    variant?: BadgeVariant | undefined;
 }

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

@@ -1,2 +1,11 @@
-import { BoxContainerProps } from "./types";
-export declare const BoxContainer: ({ children, title, collapsible, expanded, callToActionComponent, displayState, subComponentTestIds, clickableHeader, ...otherProps }: BoxContainerProps) => import("react/jsx-runtime").JSX.Element;
+import type { BoxContainerProps } from "./types";
+/**
+ * A titled, collapsible section container that groups related content behind a
+ * labelled header.
+ *
+ * Use `BoxContainer` when you need to visually separate a block of content
+ * under a heading and optionally allow users to collapse it. The header supports
+ * a call-to-action slot and a visual status indicator.
+ * @keywords collapsible, expandable, panel, section
+ */
+export declare const BoxContainer: ({ children, title, collapsible, expanded, callToActionComponent, displayState, subComponentTestIds, clickableHeader, className, ...otherProps }: BoxContainerProps) => import("react/jsx-runtime").JSX.Element;

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}from"react";import{useResizeDetector as d}from"../external/react-resize-detector/build/index.esm.js";import{r as o}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as s}from"styled-components";import{VisuallyHidden as c,inertValue as p}from"../shared/accessibility/index.js";import{Breakpoint as m}from"../theme/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as h}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{Container as u,Header as b,LabelWrapper as f,LabelText as x,CallToActionContainer as j,AlertIcon as y,Handle as v,HandleIconContainer as g,HandleIcon as $,Expandable as C,ChildContainer as k,NonExpandable as S}from"./box-container.styles.js";const T=T=>{var{children:w,title:I,collapsible:A=!0,expanded:H=!1,callToActionComponent:_,displayState:z="default",subComponentTestIds:M,clickableHeader:O}=T,P=e(T,["children","title","collapsible","expanded","callToActionComponent","displayState","subComponentTestIds","clickableHeader"]);const[Q,W]=l(!A||H),q=d(),B=q.ref,D=n(s),E=m["sm-max"]({theme:D}),F=o.useMediaQuery({maxWidth:E}),G=O&&A,J=h(),K=`${J}-content`,L=`${J}-header`,N=e=>{e.stopPropagation(),W(!Q)},R=a({height:Q?q.height:0}),U=()=>A&&i(v,{onClick:N,type:"button","aria-labelledby":L,"aria-controls":K,"aria-disabled":!A,"aria-expanded":Q,"data-testid":(null==M?void 0:M.handle)||"handle",children:i(g,{$expanded:Q,"aria-hidden":!0,children:i($,{})})});return t(u,Object.assign({},P,{"aria-labelledby":L,role:"region",title:"string"==typeof I?I:void 0,children:[t(b,{"data-testid":"header",onClick:G?N:void 0,$interactive:G,children:[t(f,{role:"status",id:L,children:[t(x,{"data-testid":(null==M?void 0:M.title)||"title",children:[I,"default"!==z&&i(r,{children:i(c,{children:z})})]}),(()=>{switch(z){case"error":case"warning":return i(y,{$displayState:z,"data-testid":(null==M?void 0:M.displayStateIcon)||`${z}-icon`,"aria-label":z});default:return null}})(),F&&U()]}),_&&i(j,{$collapsible:A,"data-testid":"call-to-action-container",children:_}),!F&&U()]}),A?i(C,{style:R,"data-testid":"expandable-container",id:K,children:i(k,{ref:B,inert:p(!Q),children:w})}):i(S,{"data-testid":"non-expandable-container",children:i(k,{children:w})})]}))};export{T 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, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { VisuallyHidden, inertValue } from \"../shared/accessibility\";\nimport { Breakpoint } from \"../theme\";\nimport { useId } from \"../util\";\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 { 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 = Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const interactiveHeader = clickableHeader && collapsible;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const headerId = `${internalId}-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","Breakpoint","isMobile","useMediaQuery","maxWidth","interactiveHeader","internalId","useId","contentId","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":"8/BAwBO,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,EAAW,UAAU,CAAEJ,UAC1CK,EAAWC,EAAAA,cAAc,CAAEC,SAAUJ,IACrCK,EAAoBlB,GAAmBL,EACvCwB,EAAaC,IACbC,EAAY,GAAGF,YACfG,EAAW,GAAGH,WAKdI,EAAiBC,IAEnBA,EAAMC,kBACNrB,GAAiBD,EAAa,EAO5BuB,EAAmBC,EAAU,CAC/BC,OAAQzB,EAAeG,EAAesB,OAAS,IA+C7CC,EAAmB,IAEjBlC,GACImC,EAACC,EAAM,CACHC,QAAST,EACTU,KAAK,SAAQ,kBACIX,kBACFD,EAAS,iBACR1B,EAAW,gBACZQ,iBACFJ,aAAmB,EAAnBA,EAAqBmC,SAAU,SAAQzC,SAEpDqC,EAACK,EAAmB,CAAAC,UAAYjC,4BAC5B2B,EAACO,UAOrB,OACIC,EAACC,EAASC,OAAAC,OAAA,GACFxC,EAAU,CAAA,kBACGqB,EACjBoB,KAAK,SACLhD,MAAwB,iBAAVA,EAAqBA,OAAQiD,EAASlD,SAAA,CAEpD6C,EAACM,EAAM,CAAA,cACS,SACZZ,QAASd,EAAoBK,OAAgBoB,EAASE,aACxC3B,EAAiBzB,SAAA,CAE/B6C,EAACQ,EAAY,CAACJ,KAAM,SAAUK,GAAIzB,EAAQ7B,SAAA,CACtC6C,EAACU,EAAS,CAAA,eACOjD,aAAmB,EAAnBA,EAAqBL,QAAS,QAAOD,SAAA,CAEjDC,EACiB,YAAjBI,GACGgC,EAAAmB,EAAA,CAAAxD,SACIqC,EAACoB,EAAc,CAAAzD,SAAEK,SA1DnB,MACtB,OAAQA,GACJ,IAAK,QACL,IAAK,UACD,OACIgC,EAACqB,EAAS,CAAAC,cACStD,EAAY,eAEvBC,aAAmB,EAAnBA,EAAqBsD,mBACrB,GAAGvD,SAAmB,aAEdA,IAGxB,QACI,OAAO,OA+CFwD,GACAvC,GAAYc,OAEhBhC,GACGiC,EAACyB,EAAqB,CAAAC,aACJ7D,EAAW,cACb,2BAA0BF,SAErCI,KAIPkB,GAAYc,OAlGlBlC,EAEImC,EAAC2B,EAAU,CACPC,MAAOhC,EAAgB,cACV,uBACbqB,GAAI1B,WAEJS,EAAC6B,EAAc,CACXlD,IAAKD,EACLoD,MAAOC,GAAY1D,GAAaV,SAE/BA,MAObqC,EAACgC,EAAa,CAAA,cAAa,2BAA0BrE,SACjDqC,EAAC6B,EAAc,CAAAlE,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,38 +1,18 @@
-import { 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> & Partial<Pick<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> & Partial<Pick<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> & Partial<Pick<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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$interactive"> & HeaderStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$interactive"> & HeaderStyleProps, never>>> & 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> & Partial<Pick<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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const AlertIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "$displayState"> & LabelIconStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "$displayState"> & LabelIconStyleProps, never>>> & 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").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & 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> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
-export declare const HandleIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & 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> & Partial<Pick<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,85 +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{Border as t,Colour as o,Radius as s,Spacing as d,MediaQuery as c,Font as g,Motion as p}from"../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\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Spacing,\n} from \"../theme\";\nimport { 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: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    margin-bottom: ${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: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const Header = styled.div<HeaderStyleProps>`\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    ${(props) => {\n        if (props.$interactive) {\n            return css`\n                cursor: pointer;\n            `;\n        }\n    }}\n`;\n\nexport const LabelText = styled.div`\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 = styled.div`\n    display: flex;\n`;\n\nexport const AlertIcon = styled(ExclamationCircleFillIcon)<LabelIconStyleProps>`\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    ${(props) => {\n        switch (props.$displayState) {\n            case \"error\":\n                return css`\n                    color: ${Colour[\"icon-error\"]};\n                `;\n            case \"warning\":\n                return css`\n                    color: ${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    ${MediaQuery.MaxWidth.sm} {\n        flex-direction: column;\n    }\n    ${(props) => {\n        if (props.$collapsible) {\n            return css`\n                margin-right: ${Spacing[\"spacing-40\"]};\n                ${MediaQuery.MaxWidth.sm} {\n                    margin-right: 0;\n                    margin-top: ${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: ${Spacing[\"spacing-16\"]};\n    margin: -${Spacing[\"spacing-16\"]};\n    display: flex;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.sm} {\n        margin: -${Spacing[\"spacing-16\"]} -${Spacing[\"spacing-16\"]} -${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: ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const HandleIcon = styled(ChevronDownIcon)`\n    color: ${Colour[\"icon\"]};\n    height: ${Font.Spec[\"heading-size-sm\"]};\n    width: ${Font.Spec[\"heading-size-sm\"]};\n`;\n"],"names":["Container","styled","section","Border","Colour","Radius","Spacing","Expandable","animated","div","NonExpandable","ChildContainer","Header","MediaQuery","MaxWidth","sm","props","$interactive","css","LabelText","Font","LabelWrapper","AlertIcon","ExclamationCircleFillIcon","Spec","$displayState","CallToActionContainer","$collapsible","Handle","button","HandleIconContainer","$expanded","Motion","HandleIcon","ChevronDownIcon"],"mappings":"yWAmCO,MAAMA,EAAYC,EAAOC,OAAO;cACzBC,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;qBAClDC,EAAW;qBACXC,EAAQ;EAGhBC,EAAaC,EAASP,EAAOQ,GAAG;;GAIhCC,EAAgBT,EAAOQ,GAAG;;EAI1BE,EAAiBV,EAAOQ,GAAG;kBACtBN,EAAO,gBAAgBA,EAAc,SAAKC,EAAe;EAG9DQ,EAASX,EAAOQ,GAAqB;eACnCH,EAAQ,iBAAiBA,EAAQ;;;;;MAK1CO,EAAWC,SAASC;mBACPT,EAAQ,iBAAiBA,EAAQ;;;;MAI7CU,IACC,GAAIA,EAAMC,aACN,OAAOC,CAAG;;aAGd;EAIKC,EAAYlB,EAAOQ,GAAG;MAC7BW,EAAK;aACEhB,EAAa;;;;;oBAKNE,EAAQ;EAGfe,EAAepB,EAAOQ,GAAG;;EAIzBa,EAAYrB,EAAOsB,EAA+C;cACjEH,EAAKI,KAAK;aACXJ,EAAKI,KAAK;;oBAEHlB,EAAQ;;;MAGtBO,EAAWC,SAASC;;;;MAInBC,IACC,OAAQA,EAAMS,eACV,IAAK,QACD,OAAOP,CAAG;6BACGd,EAAO;kBAExB,IAAK,UACD,OAAOc,CAAG;6BACGd,EAAO;;EAQvBsB,EAAwBzB,EAAOQ,GAAe;;;MAGrDI,EAAWC,SAASC;;;MAGnBC,IACC,GAAIA,EAAMW,aACN,OAAOT,CAAG;gCACUZ,EAAQ;kBACtBO,EAAWC,SAASC;;kCAEJT,EAAQ;;aAGlC;EAIKsB,EAAS3B,EAAO4B,MAAM;;;;eAIpBvB,EAAQ;eACRA,EAAQ;;;;MAIjBO,EAAWC,SAASC;mBACPT,EAAQ,kBAAkBA,EAAQ,kBAAkBA,EACvD;;;EAMHwB,EAAsB7B,EAAOQ,GAAe;wBAChCO,GAAWA,EAAMe,UAAY,IAAM;kBAC1CC,EAAO,mBAAmBA,EAAO;EAGtCC,EAAahC,EAAOiC,EAAgB;aACpC9B,EAAa;cACZgB,EAAKI,KAAK;aACXJ,EAAKI,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 { BreadcrumbProps } from "./types";
-export declare const Breadcrumb: ({ links, fadeColor, fadePosition, itemStyle, id, separatorStyle, ...otherProps }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+import type { BreadcrumbProps } from "./types";
+/**
+ * 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 l,useContext as n}from"react";import{useResizeDetector as s}from"../external/react-resize-detector/build/index.esm.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as d}from"../util/use-event.js";import{useEventListener as a}from"../util/use-event-listener.js";import{useIsomorphicLayoutEffect as c}from"../util/use-isomorphic-layout-effect.js";import{Wrapper as h,Content as m,CurrentLabel as u,PreviousLink as f,Item as p,Caret as g,Slash as b,Fade as j}from"./breadcrumb.style.js";import{ThemeContext as v}from"styled-components";import{Breakpoint as y}from"../theme/index.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,M]=o(!1),_="left"===k||"both"===k,B="right"===k||"both"===k,q=l(null),D=l(null),E=n(v),F=y["lg-max"]({theme:E}),G=d((()=>{const e=D.current,r=q.current;e&&r&&w&&w.length>1&&window.innerWidth<=F&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),H=d((()=>{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 M(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);P(!1),M(!1)}));if(a("resize",H),a("scroll",H,D.current),c((()=>{G(),H()}),[G,H]),s({onResize:G,targetRef:q,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!w)return null;return r(h,Object.assign({ref:q,id:$||"breadcrumb"},O,{children:[t("nav",{"aria-label":"Breadcrumb",children:t(m,{ref:D,children:w.map(((e,i)=>{let o;return e.children?(o=i!==w.length-1&&e.href?t(f,Object.assign({},e,{weight:"semibold",underlineStyle:"none"})):t(u,{weight:"semibold",forwardedAs:"span",children:e.children}),r(p,Object.assign({$styleProps:S},i===w.length-1&&{"aria-current":"page"},{children:[o,i<w.length-1&&("chevron"===C?t(g,{"aria-hidden":!0}):t(b,{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&&_&&t(j,{$backgroundColor:e.left,$position:"left"}),R&&B&&t(j,{$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 { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport {\n    Caret,\n    Content,\n    CurrentLabel,\n    Fade,\n    Item,\n    PreviousLink,\n    Slash,\n    Wrapper,\n} from \"./breadcrumb.style\";\nimport { BreadcrumbProps, FadeColorSet } from \"./types\";\nimport { ThemeContext } from \"styled-components\";\nimport { Breakpoint } from \"../theme\";\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 = 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","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":"u4BAiBO,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,EAAW,UAAU,CAAEJ,UAE1CK,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;}}