@lifesg/react-design-system 3.5.0 → 3.6.0-canary.1

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{jsx as r,jsxs as i}from"react/jsx-runtime";import{useRef as t,useContext as l}from"react";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 n}from"../util/use-event.js";import{useIsomorphicLayoutEffect as o}from"../util/use-isomorphic-layout-effect.js";import{Wrapper as a,Content as s,CurrentLabel as d,PreviousLink as m,Item as c,Caret as p,Slash as h}from"./breadcrumb.style.js";import{ThemeContext as u}from"styled-components";import{Breakpoint as f}from"../theme/index.js";const j=j=>{var{links:b,fadeColor:g,fadePosition:v="both",itemStyle:y,id:w,separatorStyle:S="chevron"}=j,x=e(j,["links","fadeColor","fadePosition","itemStyle","id","separatorStyle"]);const P=t(null),C=l(u),O=f["lg-max"]({theme:C}),k=n((()=>{var e;b&&b.length>1&&window.innerWidth<=O&&(null===(e=P.current)||void 0===e||e.scrollToEnd())}));if(o((()=>{k()}),[k,O]),!b)return null;return r(a,Object.assign({ref:P,id:w||"breadcrumb",fadeColor:g,fadePosition:v,onResize:k},x,{children:r("nav",{"aria-label":"Breadcrumb",children:r(s,{children:b.map(((e,t)=>{let l;return e.children?(l=t!==b.length-1&&e.href?r(m,Object.assign({},e,{weight:"semibold",underlineStyle:"none"})):r(d,{weight:"semibold",forwardedAs:"span",children:e.children}),i(c,Object.assign({$styleProps:y},t===b.length-1&&{"aria-current":"page"},{children:[l,t<b.length-1&&("chevron"===S?r(p,{"aria-hidden":!0}):r(h,{inline:!0,"aria-hidden":!0,children:"/"}))]}),t)):null}))})})}))};export{j 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 { useContext, useRef } from \"react\";\nimport { useEvent, useIsomorphicLayoutEffect } from \"../util\";\nimport {\n    Caret,\n    Content,\n    CurrentLabel,\n    Item,\n    PreviousLink,\n    Slash,\n    Wrapper,\n} from \"./breadcrumb.style\";\nimport { BreadcrumbProps } from \"./types\";\nimport { ThemeContext } from \"styled-components\";\nimport { Breakpoint } from \"../theme\";\nimport { FadeWrapperRef } from \"../shared/fade-wrapper\";\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 fadeWrapperRef = useRef<FadeWrapperRef>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = Breakpoint[\"lg-max\"]({ theme });\n\n    const handleResize = useEvent(() => {\n        if (\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            fadeWrapperRef.current?.scrollToEnd();\n        }\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useIsomorphicLayoutEffect(() => {\n        handleResize();\n    }, [handleResize, tabletBreakpoint]);\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    return (\n        <Wrapper\n            ref={fadeWrapperRef}\n            id={id || \"breadcrumb\"}\n            fadeColor={fadeColor}\n            fadePosition={fadePosition}\n            onResize={handleResize}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <Content>{renderLinks()}</Content>\n            </nav>\n        </Wrapper>\n    );\n};\n"],"names":["Breadcrumb","_a","links","fadeColor","fadePosition","itemStyle","id","separatorStyle","otherProps","__rest","fadeWrapperRef","useRef","theme","useContext","ThemeContext","tabletBreakpoint","Breakpoint","handleResize","useEvent","length","window","innerWidth","current","scrollToEnd","useIsomorphicLayoutEffect","_jsx","Wrapper","ref","onResize","children","Content","map","link","index","element","href","PreviousLink","Object","assign","weight","underlineStyle","CurrentLabel","forwardedAs","_jsxs","Item","$styleProps","Caret","Slash","inline"],"mappings":"usBAgBO,MAAMA,EAAcC,QAAAC,MACvBA,EAAKC,UACLA,EAASC,aACTA,EAAe,OAAMC,UACrBA,EAASC,GACTA,EAAEC,eACFA,EAAiB,WAASN,EACvBO,EAAUC,EAAAR,EAPU,wEAYvB,MAAMS,EAAiBC,EAAuB,MAMxCC,EAAQC,EAAWC,GACnBC,EAAmBC,EAAW,UAAU,CAAEJ,UAE1CK,EAAeC,GAAS,WAEtBhB,GACAA,EAAMiB,OAAS,GACfC,OAAOC,YAAcN,IAEC,QAAtBd,EAAAS,EAAeY,eAAO,IAAArB,GAAAA,EAAEsB,cAC5B,IAaJ,GAPAC,GAA0B,KACtBP,GAAc,GACf,CAACA,EAAcF,KAKbb,EAAO,OAAO,KA+CnB,OACIuB,EAACC,iBACGC,IAAKjB,EACLJ,GAAIA,GAAM,aACVH,UAAWA,EACXC,aAAcA,EACdwB,SAAUX,GACNT,EAAU,CAAAqB,SAEdJ,sBAAgB,aAAYI,SACxBJ,EAACK,YAtDF5B,EAAM6B,KAAI,CAACC,EAAMC,KACpB,IAAIC,EACJ,OAAKF,EAAKH,UAWNK,EAPAD,IAAU/B,EAAMiB,OAAS,GAAMa,EAAKG,KAQhCV,EAACW,EAAYC,OAAAC,OAAA,CAAA,EACLN,EAAI,CACRO,OAAO,WACPC,eAAe,UATnBf,EAACgB,EAAY,CAACF,OAAO,WAAWG,YAAY,OAAMb,SAC7CG,EAAKH,WAcdc,EAACC,EAAIP,OAAAC,OAAA,CAAAO,YAEYxC,GACR4B,IAAU/B,EAAMiB,OAAS,GAAK,CAC/B,eAAgB,QAClB,CAAAU,SAAA,CAEDK,EACAD,EAAQ/B,EAAMiB,OAAS,IACA,YAAnBZ,EACGkB,EAACqB,EAAK,CAAA,eAAA,IAENrB,EAACsB,EAAK,CAACC,QAAM,EAAA,eAAA,EAAAnB,SAAA,UAXhBI,IArBF,IAoCA,UAiBL"}

package/breadcrumb/breadcrumb.style.d.ts

@@ -1,13 +1,8 @@
-interface FadeProps {
-    $backgroundColor?: string[];
-    $position?: "left" | "right";
-}
 interface ItemStyleProps {
     $styleProps?: string;
 }
-export declare const Wrapper: 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 Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/fade-wrapper").FadeWrapperProps & import("react").RefAttributes<import("../shared/fade-wrapper").FadeWrapperRef>, never> & Partial<Pick<import("../shared/fade-wrapper").FadeWrapperProps & import("react").RefAttributes<import("../shared/fade-wrapper").FadeWrapperRef>, never>>> & string & Omit<(props: import("../shared/fade-wrapper").FadeWrapperProps & import("react").RefAttributes<import("../shared/fade-wrapper").FadeWrapperRef>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>> & string;
-export declare const Fade: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof FadeProps> & FadeProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof FadeProps> & FadeProps, never>>> & string;
 export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$styleProps"> & ItemStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "$styleProps"> & ItemStyleProps, never>>> & string;
 export declare const Caret: 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;

package/breadcrumb/breadcrumb.style.js

@@ -1,64 +1,48 @@
-import{ChevronRightIcon as t}from"@lifesg/react-icons/chevron-right";import i,{css as n}from"styled-components";import{Spacing as e,MediaQuery as o,Font as r,Colour as a}from"../theme/index.js";import{Typography as l}from"../typography/typography.js";const s=i.div`
-    position: relative;
-    width: 100%;
+import{ChevronRightIcon as i}from"@lifesg/react-icons/chevron-right";import e from"styled-components";import{Spacing as t,MediaQuery as a,Font as r,Colour as n}from"../theme/index.js";import{Typography as o}from"../typography/typography.js";import{FadeWrapper as p}from"../shared/fade-wrapper/fade-wrapper.js";const s=e(p)`
     z-index: 1;
-    margin: ${e["spacing-32"]} 0;
+    margin: ${t["spacing-32"]} 0;
+
+    ${a.MaxWidth.xl} {
+        margin: ${t["spacing-24"]} 0;
+    }
 
-    ${o.MaxWidth.xl} {
-        margin: ${e["spacing-24"]} 0;
+    ${a.MaxWidth.lg} {
+        margin: ${t["spacing-16"]} 0;
     }
 
-    ${o.MaxWidth.lg} {
-        margin: ${e["spacing-16"]} 0;
+    [data-id="left-fade"],
+    [data-id="right-fade"] {
+        height: calc(1lh + ${t["spacing-4"]});
+        top: 50%;
+        transform: translateY(-50%);
     }
-`,p=i.ul`
+`,l=e.ul`
     display: inline-flex;
     width: 100%;
     flex-wrap: wrap;
     white-space: nowrap;
-    margin-left: -${e["spacing-8"]};
+    margin-left: -${t["spacing-8"]};
     font-size: ${r.Spec["body-size-md"]};
-    overflow-x: scroll;
-    overflow-y: hidden;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-    &::-webkit-scrollbar {
-        display: none; /* Chrome/Safari/Webkit */
-    }
-
-    ${o.MaxWidth.lg} {
+    ${a.MaxWidth.lg} {
         flex-wrap: nowrap;
     }
-`,g=i.div`
-    width: ${e["spacing-64"]};
-    height: calc(1lh + ${e["spacing-4"]});
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-
-    ${t=>{let i;const e="rgba(255,255,255,0.001)",r=a.bg(t);return i="left"===t.$position?`\n\t\t\t\tleft: -8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto right, \n\t\t\t\t\t${t.$backgroundColor||r}, \n\t\t\t\t\t${e}\n\t\t\t\t);\n\t\t\t`:`\n\t\t\t\tright: 8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t${t.$backgroundColor||r},\n\t\t\t\t\t${e}\n\t\t\t\t);\n\t\t\t`,n`
-            ${o.MaxWidth.lg} {
-                ${i}
-            }
-        `}};
-`,c=i.li`
+`,d=e.li`
     display: flex;
     flex-direction: row;
     align-items: center;
     line-height: inherit;
     font-size: inherit;
-    ${t=>t.$styleProps||""};
-`,d=i(t)`
+    ${i=>i.$styleProps||""};
+`,m=e(i)`
     height: 1em;
     width: 1em;
-    color: ${a["icon-subtle"]};
-`,h=i(l.BodyMD)`
+    color: ${n["icon-subtle"]};
+`,g=e(o.BodyMD)`
     display: inline-block;
-    color: ${a["text-subtlest"]};
-`,m=i(l.BodyMD)`
-    margin: ${e["spacing-8"]} !important;
-`,$=i(l.LinkMD)`
-    margin: ${e["spacing-8"]} !important;
-`;export{d as Caret,p as Content,m as CurrentLabel,g as Fade,c as Item,$ as PreviousLink,h as Slash,s as Wrapper};
+    color: ${n["text-subtlest"]};
+`,c=e(o.BodyMD)`
+    margin: ${t["spacing-8"]} !important;
+`,h=e(o.LinkMD)`
+    margin: ${t["spacing-8"]} !important;
+`;export{m as Caret,l as Content,c as CurrentLabel,d as Item,h as PreviousLink,g as Slash,s as Wrapper};
 //# sourceMappingURL=breadcrumb.style.js.map

package/breadcrumb/breadcrumb.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.style.js","sources":["../../src/breadcrumb/breadcrumb.style.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport styled, { css } from \"styled-components\";\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\nimport { Typography } from \"../typography/typography\";\n\n// =============================================================================\n// STYLE TYPES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface FadeProps {\n    $backgroundColor?: string[];\n    $position?: \"left\" | \"right\";\n}\n\ninterface ItemStyleProps {\n    $styleProps?: string;\n}\n\n// =============================================================================\n// STYLE COMPONENTS\n// =============================================================================\nexport const Wrapper = styled.div`\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 = styled.ul`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: -${Spacing[\"spacing-8\"]};\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 = styled.div<FadeProps>`\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    ${(props) => {\n        let positionStyle: string;\n        const transparentColor = \"rgba(255,255,255,0.001)\";\n        const fadeColor = Colour.bg(props);\n\n        if (props.$position === \"left\") {\n            positionStyle = `\n\t\t\t\tleft: -8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto right, \n\t\t\t\t\t${props.$backgroundColor || fadeColor}, \n\t\t\t\t\t${transparentColor}\n\t\t\t\t);\n\t\t\t`;\n        } else {\n            positionStyle = `\n\t\t\t\tright: 8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t${props.$backgroundColor || fadeColor},\n\t\t\t\t\t${transparentColor}\n\t\t\t\t);\n\t\t\t`;\n        }\n\n        return css`\n            ${MediaQuery.MaxWidth.lg} {\n                ${positionStyle}\n            }\n        `;\n    }};\n`;\n\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n    ${(props) => {\n        return props.$styleProps || ``;\n    }};\n`;\n\nexport const Caret = styled(ChevronRightIcon)`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const Slash = styled(Typography.BodyMD)`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const CurrentLabel = styled(Typography.BodyMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const PreviousLink = styled(Typography.LinkMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["Wrapper","styled","div","Spacing","MediaQuery","MaxWidth","xl","lg","Content","ul","Font","Spec","Fade","props","positionStyle","transparentColor","fadeColor","Colour","bg","$position","$backgroundColor","css","Item","li","$styleProps","Caret","ChevronRightIcon","Slash","Typography","BodyMD","CurrentLabel","PreviousLink","LinkMD"],"mappings":"2PAqBO,MAAMA,EAAUC,EAAOC,GAAG;;;;cAInBC,EAAQ;;MAEhBC,EAAWC,SAASC;kBACRH,EAAQ;;;MAGpBC,EAAWC,SAASE;kBACRJ,EAAQ;;EAIbK,EAAUP,EAAOQ,EAAE;;;;;oBAKZN,EAAQ;iBACXO,EAAKC,KAAK;;;;;;;;;MASrBP,EAAWC,SAASE;;;EAKbK,EAAOX,EAAOC,GAAc;aAC5BC,EAAQ;yBACIA,EAAQ;;;;;;MAM1BU,IACC,IAAIC,EACJ,MAAMC,EAAmB,0BACnBC,EAAYC,EAAOC,GAAGL,GAsB5B,OAnBIC,EADoB,SAApBD,EAAMM,UACU,sGAIrBN,EAAMO,kBAAoBJ,kBAC1BD,wBAIqB,oGAIrBF,EAAMO,kBAAoBJ,iBAC1BD,wBAKQM,CAAG;cACJjB,EAAWC,SAASE;kBAChBO;;SAET;EAIIQ,EAAOrB,EAAOsB,EAAkB;;;;;;MAMtCV,GACQA,EAAMW,aAAe;EAIvBC,EAAQxB,EAAOyB,EAAiB;;;aAGhCT,EAAO;EAGPU,EAAQ1B,EAAO2B,EAAWC,OAAO;;aAEjCZ,EAAO;EAGPa,EAAe7B,EAAO2B,EAAWC,OAAO;cACvC1B,EAAQ;EAGT4B,EAAe9B,EAAO2B,EAAWI,OAAO;cACvC7B,EAAQ;"}
+{"version":3,"file":"breadcrumb.style.js","sources":["../../src/breadcrumb/breadcrumb.style.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport styled from \"styled-components\";\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\nimport { Typography } from \"../typography/typography\";\nimport { FadeWrapper } from \"../shared/fade-wrapper\";\n\n// =============================================================================\n// STYLE TYPES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface ItemStyleProps {\n    $styleProps?: string;\n}\n\n// =============================================================================\n// STYLE COMPONENTS\n// =============================================================================\nexport const Wrapper = styled(FadeWrapper)`\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    [data-id=\"left-fade\"],\n    [data-id=\"right-fade\"] {\n        height: calc(1lh + ${Spacing[\"spacing-4\"]});\n        top: 50%;\n        transform: translateY(-50%);\n    }\n`;\n\nexport const Content = styled.ul`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: -${Spacing[\"spacing-8\"]};\n    font-size: ${Font.Spec[\"body-size-md\"]};\n    ${MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n    ${(props) => {\n        return props.$styleProps || ``;\n    }};\n`;\n\nexport const Caret = styled(ChevronRightIcon)`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const Slash = styled(Typography.BodyMD)`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const CurrentLabel = styled(Typography.BodyMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const PreviousLink = styled(Typography.LinkMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["Wrapper","styled","FadeWrapper","Spacing","MediaQuery","MaxWidth","xl","lg","Content","ul","Font","Spec","Item","li","props","$styleProps","Caret","ChevronRightIcon","Colour","Slash","Typography","BodyMD","CurrentLabel","PreviousLink","LinkMD"],"mappings":"4TAiBaA,EAAUC,EAAOC,EAAY;;cAE5BC,EAAQ;;MAEhBC,EAAWC,SAASC;kBACRH,EAAQ;;;MAGpBC,EAAWC,SAASE;kBACRJ,EAAQ;;;;;6BAKGA,EAAQ;;;;EAMxBK,EAAUP,EAAOQ,EAAE;;;;;oBAKZN,EAAQ;iBACXO,EAAKC,KAAK;MACrBP,EAAWC,SAASE;;;EAKbK,EAAOX,EAAOY,EAAkB;;;;;;MAMtCC,GACQA,EAAMC,aAAe;EAIvBC,EAAQf,EAAOgB,EAAiB;;;aAGhCC,EAAO;EAGPC,EAAQlB,EAAOmB,EAAWC,OAAO;;aAEjCH,EAAO;EAGPI,EAAerB,EAAOmB,EAAWC,OAAO;cACvClB,EAAQ;EAGToB,EAAetB,EAAOmB,EAAWI,OAAO;cACvCrB,EAAQ;"}

package/breadcrumb/types.d.ts

@@ -1,9 +1,6 @@
-export type FadePosition = "left" | "right" | "both";
+import { FadeColorSet, FadePosition } from "../shared/fade-wrapper";
+export type { FadeColorSet, FadePosition };
 export type SeparatorStyle = "chevron" | "slash";
-export interface FadeColorSet {
-    left?: string[] | undefined;
-    right?: string[] | undefined;
-}
 export interface BreadcrumbProps {
     links: React.AnchorHTMLAttributes<HTMLAnchorElement>[];
     fadeColor?: string[] | FadeColorSet | undefined;

package/cjs/breadcrumb/breadcrumb.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("../external/react-resize-detector/build/index.esm.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("../util/use-event.js"),n=require("../util/use-event-listener.js"),l=require("../util/use-isomorphic-layout-effect.js"),u=require("./breadcrumb.style.js"),o=require("styled-components"),a=require("../theme/index.js");exports.Breadcrumb=d=>{var{links:c,fadeColor:h,fadePosition:f="both",itemStyle:j,id:g,separatorStyle:p="chevron"}=d,b=e.__rest(d,["links","fadeColor","fadePosition","itemStyle","id","separatorStyle"]);const[m,x]=t.useState(!1),[v,q]=t.useState(!1),[y,C]=t.useState(!1),S="left"===f||"both"===f,W="right"===f||"both"===f,L=t.useRef(null),k=t.useRef(null),w=t.useContext(o.ThemeContext),R=a.Breakpoint["lg-max"]({theme:w}),E=s.useEvent((()=>{const e=k.current,r=L.current;e&&r&&c&&c.length>1&&window.innerWidth<=R&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),$=s.useEvent((()=>{const e=window.innerWidth<=R;x(e);const r=k.current,t=L.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return q(r.scrollLeft>=1),void C(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);q(!1),C(!1)}));if(n.useEventListener("resize",$),n.useEventListener("scroll",$,k.current),l.useIsomorphicLayoutEffect((()=>{E(),$()}),[E,$]),i.useResizeDetector({onResize:E,targetRef:L,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!c)return null;return r.jsxs(u.Wrapper,Object.assign({ref:L,id:g||"breadcrumb"},b,{children:[r.jsx("nav",{"aria-label":"Breadcrumb",children:r.jsx(u.Content,{ref:k,children:c.map(((e,t)=>{let i;return e.children?(i=t!==c.length-1&&e.href?r.jsx(u.PreviousLink,Object.assign({},e,{weight:"semibold",underlineStyle:"none"})):r.jsx(u.CurrentLabel,{weight:"semibold",forwardedAs:"span",children:e.children}),r.jsxs(u.Item,Object.assign({$styleProps:j},t===c.length-1&&{"aria-current":"page"},{children:[i,t<c.length-1&&("chevron"===p?r.jsx(u.Caret,{"aria-hidden":!0}):r.jsx(u.Slash,{inline:!0,"aria-hidden":!0,children:"/"}))]}),t)):null}))})}),m&&(()=>{let e;return e=Array.isArray(h)&&h.length>0?{left:h,right:h}:h||{left:void 0,right:void 0},r.jsxs(r.Fragment,{children:[v&&S&&r.jsx(u.Fade,{$backgroundColor:e.left,$position:"left"}),y&&W&&r.jsx(u.Fade,{$backgroundColor:e.right,$position:"right"})]})})()]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("react");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var t=require("../util/use-event.js"),n=require("../util/use-isomorphic-layout-effect.js"),l=require("./breadcrumb.style.js"),s=require("styled-components"),a=require("../theme/index.js");exports.Breadcrumb=u=>{var{links:o,fadeColor:d,fadePosition:c="both",itemStyle:h,id:j,separatorStyle:m="chevron"}=u,p=e.__rest(u,["links","fadeColor","fadePosition","itemStyle","id","separatorStyle"]);const b=i.useRef(null),f=i.useContext(s.ThemeContext),q=a.Breakpoint["lg-max"]({theme:f}),x=t.useEvent((()=>{var e;o&&o.length>1&&window.innerWidth<=q&&(null===(e=b.current)||void 0===e||e.scrollToEnd())}));if(n.useIsomorphicLayoutEffect((()=>{x()}),[x,q]),!o)return null;return r.jsx(l.Wrapper,Object.assign({ref:b,id:j||"breadcrumb",fadeColor:d,fadePosition:c,onResize:x},p,{children:r.jsx("nav",{"aria-label":"Breadcrumb",children:r.jsx(l.Content,{children:o.map(((e,i)=>{let t;return e.children?(t=i!==o.length-1&&e.href?r.jsx(l.PreviousLink,Object.assign({},e,{weight:"semibold",underlineStyle:"none"})):r.jsx(l.CurrentLabel,{weight:"semibold",forwardedAs:"span",children:e.children}),r.jsxs(l.Item,Object.assign({$styleProps:h},i===o.length-1&&{"aria-current":"page"},{children:[t,i<o.length-1&&("chevron"===m?r.jsx(l.Caret,{"aria-hidden":!0}):r.jsx(l.Slash,{inline:!0,"aria-hidden":!0,children:"/"}))]}),i)):null}))})})}))};
 //# sourceMappingURL=breadcrumb.js.map

package/cjs/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":["_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":"soBAiB2BA,QAAAC,MACvBA,EAAKC,UACLA,EAASC,aACTA,EAAe,OAAMC,UACrBA,EAASC,GACTA,EAAEC,eACFA,EAAiB,WAASN,EACvBO,EAAUC,EAAAA,OAAAR,EAPU,wEAYvB,MAAOS,EAAUC,GAAeC,EAAAA,UAAkB,IAC3CC,EAAcC,GAAmBF,EAAAA,UAAkB,IACnDG,EAAeC,GAAoBJ,EAAAA,UAAkB,GACtDK,EACe,SAAjBb,GAA4C,SAAjBA,EACzBc,EACe,UAAjBd,GAA6C,SAAjBA,EAE1Be,EAAaC,EAAAA,OAAuB,MACpCC,EAAaD,EAAAA,OAAyB,MAMtCE,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,WAAW,UAAU,CAAEJ,UAE1CK,EAAWC,EAAAA,UAAS,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,EAAAA,UAAS,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,EAAAA,iBAAiB,SAAUF,GAC3BE,EAAAA,iBAAiB,SAAUF,EAAsBjB,EAAWS,SAE5DW,EAAAA,2BAA0B,KACtBd,IACAW,GAAsB,GACvB,CAACX,EAAUW,IAGdI,oBAAkB,CACdf,WACAgB,UAAWxB,EACXyB,YAAa,WACbC,YAAa,GACbC,aAAa,KAMZ5C,EAAO,OAAO,KAmFnB,OACI6C,EAAAA,KAACC,EAAAA,QAAOC,OAAAC,OAAA,CAACC,IAAKhC,EAAYb,GAAIA,GAAM,cAAkBE,aAClD4C,EAAAA,IAAA,MAAA,CAAA,aAAgB,aAAYC,SACxBD,EAAAA,IAACE,EAAAA,QAAO,CAACH,IAAK9B,WAnFfnB,EAAMqD,KAAI,CAACC,EAAMC,KACpB,IAAIC,EACJ,OAAKF,EAAKH,UAWNK,EAPAD,IAAUvD,EAAM8B,OAAS,GAAMwB,EAAKG,KAQhCP,EAAAA,IAACQ,EAAAA,aAAYX,OAAAC,OAAA,CAAA,EACLM,EAAI,CACRK,OAAO,WACPC,eAAe,UATnBV,EAAAA,IAACW,eAAY,CAACF,OAAO,WAAWG,YAAY,OAAMX,SAC7CG,EAAKH,WAcdN,OAACkB,EAAAA,KAAIhB,OAAAC,OAAA,CAAAgB,YAEY7D,GACRoD,IAAUvD,EAAM8B,OAAS,GAAK,CAC/B,eAAgB,QAClB,CAAAqB,SAAA,CAEDK,EACAD,EAAQvD,EAAM8B,OAAS,IACA,YAAnBzB,EACG6C,EAAAA,IAACe,QAAK,CAAA,eAAA,IAENf,EAAAA,IAACgB,QAAK,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,EAAAA,KAAA6B,EAAAA,SAAA,CAAAvB,SAAA,CACKxC,GAAgBI,GACbmC,EAAAA,IAACyB,EAAAA,uBACqBP,EAAaG,KAAIK,UACzB,SAGjB/D,GAAiBG,GACdkC,EAAAA,IAACyB,EAAAA,KAAI,CAAAE,iBACiBT,EAAaI,gBACrB,YAGnB,EASUM,MACP"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { useContext, useRef } from \"react\";\nimport { useEvent, useIsomorphicLayoutEffect } from \"../util\";\nimport {\n    Caret,\n    Content,\n    CurrentLabel,\n    Item,\n    PreviousLink,\n    Slash,\n    Wrapper,\n} from \"./breadcrumb.style\";\nimport { BreadcrumbProps } from \"./types\";\nimport { ThemeContext } from \"styled-components\";\nimport { Breakpoint } from \"../theme\";\nimport { FadeWrapperRef } from \"../shared/fade-wrapper\";\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 fadeWrapperRef = useRef<FadeWrapperRef>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = Breakpoint[\"lg-max\"]({ theme });\n\n    const handleResize = useEvent(() => {\n        if (\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            fadeWrapperRef.current?.scrollToEnd();\n        }\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useIsomorphicLayoutEffect(() => {\n        handleResize();\n    }, [handleResize, tabletBreakpoint]);\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    return (\n        <Wrapper\n            ref={fadeWrapperRef}\n            id={id || \"breadcrumb\"}\n            fadeColor={fadeColor}\n            fadePosition={fadePosition}\n            onResize={handleResize}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <Content>{renderLinks()}</Content>\n            </nav>\n        </Wrapper>\n    );\n};\n"],"names":["_a","links","fadeColor","fadePosition","itemStyle","id","separatorStyle","otherProps","__rest","fadeWrapperRef","useRef","theme","useContext","ThemeContext","tabletBreakpoint","Breakpoint","handleResize","useEvent","length","window","innerWidth","current","scrollToEnd","useIsomorphicLayoutEffect","_jsx","Wrapper","ref","onResize","children","Content","map","link","index","element","href","PreviousLink","Object","assign","weight","underlineStyle","CurrentLabel","forwardedAs","_jsxs","Item","$styleProps","Caret","Slash","inline"],"mappings":"yhBAgB2BA,QAAAC,MACvBA,EAAKC,UACLA,EAASC,aACTA,EAAe,OAAMC,UACrBA,EAASC,GACTA,EAAEC,eACFA,EAAiB,WAASN,EACvBO,EAAUC,EAAAA,OAAAR,EAPU,wEAYvB,MAAMS,EAAiBC,EAAAA,OAAuB,MAMxCC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,WAAW,UAAU,CAAEJ,UAE1CK,EAAeC,EAAAA,UAAS,WAEtBhB,GACAA,EAAMiB,OAAS,GACfC,OAAOC,YAAcN,IAEC,QAAtBd,EAAAS,EAAeY,eAAO,IAAArB,GAAAA,EAAEsB,cAC5B,IAaJ,GAPAC,EAAAA,2BAA0B,KACtBP,GAAc,GACf,CAACA,EAAcF,KAKbb,EAAO,OAAO,KA+CnB,OACIuB,EAAAA,IAACC,EAAAA,uBACGC,IAAKjB,EACLJ,GAAIA,GAAM,aACVH,UAAWA,EACXC,aAAcA,EACdwB,SAAUX,GACNT,EAAU,CAAAqB,SAEdJ,EAAAA,wBAAgB,aAAYI,SACxBJ,EAAAA,IAACK,EAAAA,kBAtDF5B,EAAM6B,KAAI,CAACC,EAAMC,KACpB,IAAIC,EACJ,OAAKF,EAAKH,UAWNK,EAPAD,IAAU/B,EAAMiB,OAAS,GAAMa,EAAKG,KAQhCV,EAAAA,IAACW,EAAAA,aAAYC,OAAAC,OAAA,CAAA,EACLN,EAAI,CACRO,OAAO,WACPC,eAAe,UATnBf,EAAAA,IAACgB,eAAY,CAACF,OAAO,WAAWG,YAAY,OAAMb,SAC7CG,EAAKH,WAcdc,OAACC,EAAAA,KAAIP,OAAAC,OAAA,CAAAO,YAEYxC,GACR4B,IAAU/B,EAAMiB,OAAS,GAAK,CAC/B,eAAgB,QAClB,CAAAU,SAAA,CAEDK,EACAD,EAAQ/B,EAAMiB,OAAS,IACA,YAAnBZ,EACGkB,EAAAA,IAACqB,QAAK,CAAA,eAAA,IAENrB,EAAAA,IAACsB,QAAK,CAACC,QAAM,EAAA,eAAA,EAAAnB,SAAA,UAXhBI,IArBF,IAoCA,UAiBL"}

package/cjs/breadcrumb/breadcrumb.style.js

@@ -1,6 +1,4 @@
-"use strict";var t=require("@lifesg/react-icons/chevron-right"),e=require("styled-components"),i=require("../theme/index.js"),n=require("../typography/typography.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=r(e);const o=a.default.div`
-    position: relative;
-    width: 100%;
+"use strict";var e=require("@lifesg/react-icons/chevron-right"),a=require("styled-components"),i=require("../theme/index.js"),r=require("../typography/typography.js"),t=require("../shared/fade-wrapper/fade-wrapper.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=n(a);const o=p.default(t.FadeWrapper)`
     z-index: 1;
     margin: ${i.Spacing["spacing-32"]} 0;
 
@@ -11,54 +9,40 @@
     ${i.MediaQuery.MaxWidth.lg} {
         margin: ${i.Spacing["spacing-16"]} 0;
     }
-`,l=a.default.ul`
+
+    [data-id="left-fade"],
+    [data-id="right-fade"] {
+        height: calc(1lh + ${i.Spacing["spacing-4"]});
+        top: 50%;
+        transform: translateY(-50%);
+    }
+`,l=p.default.ul`
     display: inline-flex;
     width: 100%;
     flex-wrap: wrap;
     white-space: nowrap;
     margin-left: -${i.Spacing["spacing-8"]};
     font-size: ${i.Font.Spec["body-size-md"]};
-    overflow-x: scroll;
-    overflow-y: hidden;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-    &::-webkit-scrollbar {
-        display: none; /* Chrome/Safari/Webkit */
-    }
-
     ${i.MediaQuery.MaxWidth.lg} {
         flex-wrap: nowrap;
     }
-`,p=a.default.div`
-    width: ${i.Spacing["spacing-64"]};
-    height: calc(1lh + ${i.Spacing["spacing-4"]});
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-
-    ${t=>{let n;const r="rgba(255,255,255,0.001)",a=i.Colour.bg(t);return n="left"===t.$position?`\n\t\t\t\tleft: -8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto right, \n\t\t\t\t\t${t.$backgroundColor||a}, \n\t\t\t\t\t${r}\n\t\t\t\t);\n\t\t\t`:`\n\t\t\t\tright: 8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t${t.$backgroundColor||a},\n\t\t\t\t\t${r}\n\t\t\t\t);\n\t\t\t`,e.css`
-            ${i.MediaQuery.MaxWidth.lg} {
-                ${n}
-            }
-        `}};
-`,s=a.default.li`
+`,s=p.default.li`
     display: flex;
     flex-direction: row;
     align-items: center;
     line-height: inherit;
     font-size: inherit;
-    ${t=>t.$styleProps||""};
-`,g=a.default(t.ChevronRightIcon)`
+    ${e=>e.$styleProps||""};
+`,d=p.default(e.ChevronRightIcon)`
     height: 1em;
     width: 1em;
     color: ${i.Colour["icon-subtle"]};
-`,d=a.default(n.Typography.BodyMD)`
+`,g=p.default(r.Typography.BodyMD)`
     display: inline-block;
     color: ${i.Colour["text-subtlest"]};
-`,c=a.default(n.Typography.BodyMD)`
+`,c=p.default(r.Typography.BodyMD)`
     margin: ${i.Spacing["spacing-8"]} !important;
-`,u=a.default(n.Typography.LinkMD)`
+`,h=p.default(r.Typography.LinkMD)`
     margin: ${i.Spacing["spacing-8"]} !important;
-`;exports.Caret=g,exports.Content=l,exports.CurrentLabel=c,exports.Fade=p,exports.Item=s,exports.PreviousLink=u,exports.Slash=d,exports.Wrapper=o;
+`;exports.Caret=d,exports.Content=l,exports.CurrentLabel=c,exports.Item=s,exports.PreviousLink=h,exports.Slash=g,exports.Wrapper=o;
 //# sourceMappingURL=breadcrumb.style.js.map

package/cjs/breadcrumb/breadcrumb.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.style.js","sources":["../../../src/breadcrumb/breadcrumb.style.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport styled, { css } from \"styled-components\";\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\nimport { Typography } from \"../typography/typography\";\n\n// =============================================================================\n// STYLE TYPES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface FadeProps {\n    $backgroundColor?: string[];\n    $position?: \"left\" | \"right\";\n}\n\ninterface ItemStyleProps {\n    $styleProps?: string;\n}\n\n// =============================================================================\n// STYLE COMPONENTS\n// =============================================================================\nexport const Wrapper = styled.div`\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 = styled.ul`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: -${Spacing[\"spacing-8\"]};\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 = styled.div<FadeProps>`\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    ${(props) => {\n        let positionStyle: string;\n        const transparentColor = \"rgba(255,255,255,0.001)\";\n        const fadeColor = Colour.bg(props);\n\n        if (props.$position === \"left\") {\n            positionStyle = `\n\t\t\t\tleft: -8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto right, \n\t\t\t\t\t${props.$backgroundColor || fadeColor}, \n\t\t\t\t\t${transparentColor}\n\t\t\t\t);\n\t\t\t`;\n        } else {\n            positionStyle = `\n\t\t\t\tright: 8px;\n\t\t\t\tbackground-image: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t${props.$backgroundColor || fadeColor},\n\t\t\t\t\t${transparentColor}\n\t\t\t\t);\n\t\t\t`;\n        }\n\n        return css`\n            ${MediaQuery.MaxWidth.lg} {\n                ${positionStyle}\n            }\n        `;\n    }};\n`;\n\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n    ${(props) => {\n        return props.$styleProps || ``;\n    }};\n`;\n\nexport const Caret = styled(ChevronRightIcon)`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const Slash = styled(Typography.BodyMD)`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const CurrentLabel = styled(Typography.BodyMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const PreviousLink = styled(Typography.LinkMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["Wrapper","styled","div","Spacing","MediaQuery","MaxWidth","xl","lg","Content","ul","Font","Spec","Fade","props","positionStyle","transparentColor","fadeColor","Colour","bg","$position","$backgroundColor","css","Item","li","$styleProps","Caret","ChevronRightIcon","Slash","Typography","BodyMD","CurrentLabel","PreviousLink","LinkMD"],"mappings":"0PAqBO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;;;cAInBC,EAAAA,QAAQ;;MAEhBC,EAAAA,WAAWC,SAASC;kBACRH,EAAAA,QAAQ;;;MAGpBC,EAAAA,WAAWC,SAASE;kBACRJ,EAAAA,QAAQ;;EAIbK,EAAUP,EAAAA,QAAOQ,EAAE;;;;;oBAKZN,EAAAA,QAAQ;iBACXO,EAAAA,KAAKC,KAAK;;;;;;;;;MASrBP,EAAAA,WAAWC,SAASE;;;EAKbK,EAAOX,EAAAA,QAAOC,GAAc;aAC5BC,EAAAA,QAAQ;yBACIA,EAAAA,QAAQ;;;;;;MAM1BU,IACC,IAAIC,EACJ,MAAMC,EAAmB,0BACnBC,EAAYC,EAAAA,OAAOC,GAAGL,GAsB5B,OAnBIC,EADoB,SAApBD,EAAMM,UACU,sGAIrBN,EAAMO,kBAAoBJ,kBAC1BD,wBAIqB,oGAIrBF,EAAMO,kBAAoBJ,iBAC1BD,wBAKQM,KAAG;cACJjB,EAAAA,WAAWC,SAASE;kBAChBO;;SAET;EAIIQ,EAAOrB,EAAAA,QAAOsB,EAAkB;;;;;;MAMtCV,GACQA,EAAMW,aAAe;EAIvBC,EAAQxB,EAAAA,QAAOyB,EAAAA,iBAAiB;;;aAGhCT,EAAAA,OAAO;EAGPU,EAAQ1B,EAAAA,QAAO2B,aAAWC,OAAO;;aAEjCZ,EAAAA,OAAO;EAGPa,EAAe7B,EAAAA,QAAO2B,aAAWC,OAAO;cACvC1B,EAAAA,QAAQ;EAGT4B,EAAe9B,EAAAA,QAAO2B,aAAWI,OAAO;cACvC7B,EAAAA,QAAQ;"}
+{"version":3,"file":"breadcrumb.style.js","sources":["../../../src/breadcrumb/breadcrumb.style.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport styled from \"styled-components\";\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\nimport { Typography } from \"../typography/typography\";\nimport { FadeWrapper } from \"../shared/fade-wrapper\";\n\n// =============================================================================\n// STYLE TYPES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface ItemStyleProps {\n    $styleProps?: string;\n}\n\n// =============================================================================\n// STYLE COMPONENTS\n// =============================================================================\nexport const Wrapper = styled(FadeWrapper)`\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    [data-id=\"left-fade\"],\n    [data-id=\"right-fade\"] {\n        height: calc(1lh + ${Spacing[\"spacing-4\"]});\n        top: 50%;\n        transform: translateY(-50%);\n    }\n`;\n\nexport const Content = styled.ul`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: -${Spacing[\"spacing-8\"]};\n    font-size: ${Font.Spec[\"body-size-md\"]};\n    ${MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n    ${(props) => {\n        return props.$styleProps || ``;\n    }};\n`;\n\nexport const Caret = styled(ChevronRightIcon)`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const Slash = styled(Typography.BodyMD)`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const CurrentLabel = styled(Typography.BodyMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const PreviousLink = styled(Typography.LinkMD)`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["Wrapper","styled","FadeWrapper","Spacing","MediaQuery","MaxWidth","xl","lg","Content","ul","Font","Spec","Item","li","props","$styleProps","Caret","ChevronRightIcon","Colour","Slash","Typography","BodyMD","CurrentLabel","PreviousLink","LinkMD"],"mappings":"oTAiBaA,EAAUC,EAAAA,QAAOC,EAAAA,YAAY;;cAE5BC,EAAAA,QAAQ;;MAEhBC,EAAAA,WAAWC,SAASC;kBACRH,EAAAA,QAAQ;;;MAGpBC,EAAAA,WAAWC,SAASE;kBACRJ,EAAAA,QAAQ;;;;;6BAKGA,EAAAA,QAAQ;;;;EAMxBK,EAAUP,EAAAA,QAAOQ,EAAE;;;;;oBAKZN,EAAAA,QAAQ;iBACXO,EAAAA,KAAKC,KAAK;MACrBP,EAAAA,WAAWC,SAASE;;;EAKbK,EAAOX,EAAAA,QAAOY,EAAkB;;;;;;MAMtCC,GACQA,EAAMC,aAAe;EAIvBC,EAAQf,EAAAA,QAAOgB,EAAAA,iBAAiB;;;aAGhCC,EAAAA,OAAO;EAGPC,EAAQlB,EAAAA,QAAOmB,aAAWC,OAAO;;aAEjCH,EAAAA,OAAO;EAGPI,EAAerB,EAAAA,QAAOmB,aAAWC,OAAO;cACvClB,EAAAA,QAAQ;EAGToB,EAAetB,EAAAA,QAAOmB,aAAWI,OAAO;cACvCrB,EAAAA,QAAQ;"}

package/cjs/drawer/drawer.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@floating-ui/react"),s=require("@lifesg/react-icons/cross"),a=require("react"),t=require("../overlay/overlay.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var n=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./drawer.styles.js");exports.Drawer=o=>{var{children:u,heading:c,show:d,onClose:h,onOverlayClick:g}=o,j=e.__rest(o,["children","heading","show","onClose","onOverlayClick"]);const[v,p]=a.useState(d),C=n.useId(),q=a.useRef(null),{context:x,refs:f}=i.useFloating({open:d,onOpenChange:e=>{!e&&h&&h()}}),y=i.useDismiss(x,{escapeKey:!0,outsidePress:!1}),{getFloatingProps:w}=i.useInteractions([y]),{isMounted:b,status:m}=i.useTransitionStatus(x,{duration:800});a.useEffect((()=>{if(!d){const e=setTimeout((()=>p(!1)),800);return()=>clearTimeout(e)}p(!0)}),[d]);return r.jsx(t.Overlay,{show:v,enableOverlayClick:!0,onOverlayClick:g,children:b?r.jsx(i.FloatingFocusManager,{context:x,initialFocus:-1,returnFocus:!0,children:r.jsxs(l.Container,Object.assign({ref:f.setFloating,$show:d,"data-status":m,"data-testid":"drawer",onClick:e=>{e.stopPropagation()},"aria-modal":!0,role:"dialog","aria-labelledby":C,onTransitionEnd:e=>{var r;"visibility"===e.propertyName&&d&&(null===(r=q.current)||void 0===r||r.focus())}},w(),j,{children:[r.jsx(l.Header,{children:r.jsx(l.Heading,{id:C,ref:q,tabIndex:-1,weight:"bold",forwardedAs:"h2",children:c})}),r.jsx(l.Content,{children:u}),r.jsx(l.CloseButton,{"aria-label":"Close drawer",onClick:h,focusHighlight:!1,children:r.jsx(s.CrossIcon,{"aria-hidden":!0})})]}))}):void 0})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@floating-ui/react"),i=require("@lifesg/react-icons/cross"),s=require("react"),a=require("../external/react-resize-detector/build/index.esm.js"),o=require("styled-components"),n=require("../overlay/overlay.js"),l=require("../theme/index.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var u=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("./drawer.styles.js");exports.Drawer=d=>{var{children:h,heading:f,show:g,onClose:j,onOverlayClick:v,customCallToAction:x}=d,p=e.__rest(d,["children","heading","show","onClose","onOverlayClick","customCallToAction"]);const[C,m]=s.useState(g),[q,y]=s.useState(),w=u.useId(),b=s.useContext(o.ThemeContext),k=l.Breakpoint["sm-max"]({theme:b}),T=s.useRef(null),{width:F,ref:O}=a.useResizeDetector({refreshMode:"throttle",refreshRate:300,onResize:()=>{const e=T.current;e&&y(e.offsetTop+e.offsetHeight/2)}}),A=void 0!==F&&F<=k,{context:H,refs:I}=t.useFloating({open:g,onOpenChange:e=>{!e&&j&&j()}}),R=t.useDismiss(H,{escapeKey:!0,outsidePress:!1}),{getFloatingProps:_}=t.useInteractions([R]),{isMounted:z,status:D}=t.useTransitionStatus(H,{duration:800});s.useEffect((()=>{if(!g){const e=setTimeout((()=>m(!1)),800);return()=>clearTimeout(e)}m(!0)}),[g]);return r.jsx(n.Overlay,{show:C,enableOverlayClick:!0,onOverlayClick:v,children:z?r.jsx(t.FloatingFocusManager,{context:H,initialFocus:-1,returnFocus:!0,children:r.jsxs(c.Container,Object.assign({ref:I.setFloating,$show:g,"data-status":D,"data-testid":"drawer",onClick:e=>{e.stopPropagation()},"aria-modal":!0,role:"dialog","aria-labelledby":w,onTransitionEnd:e=>{var r;"visibility"===e.propertyName&&g&&(null===(r=T.current)||void 0===r||r.focus())}},_(),p,{children:[r.jsxs(c.Header,{ref:O,$stacked:!!x&&A,children:[r.jsx(c.Heading,{id:w,ref:T,tabIndex:-1,weight:"bold",forwardedAs:"h2",children:f}),x?r.jsx(c.CallToAction,{$stacked:A,children:x}):null]}),r.jsx(c.Content,{children:h}),r.jsx(c.CloseButton,{"aria-label":"Close drawer",onClick:j,focusHighlight:!1,style:void 0!==q?{top:q,transform:"translateY(-50%)"}:void 0,children:r.jsx(i.CrossIcon,{"aria-hidden":!0})})]}))}):void 0})};
 //# sourceMappingURL=drawer.js.map

package/cjs/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../../src/drawer/drawer.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Overlay } from \"../overlay\";\nimport { useId } from \"../util\";\nimport {\n    CloseButton,\n    Container,\n    Content,\n    Header,\n    Heading,\n} from \"./drawer.styles\";\nimport { DrawerProps } from \"./types\";\n\nexport const Drawer = ({\n    children,\n    heading,\n    show,\n    onClose,\n    onOverlayClick,\n    ...otherProps\n}: DrawerProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showOverlay, setShowOverlay] = useState(show);\n    const id = useId();\n    const initialFocusRef = useRef<HTMLHeadingElement>(null);\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { context, refs } = useFloating({\n        open: show,\n        onOpenChange: (open) => {\n            if (!open && onClose) {\n                onClose();\n            }\n        },\n    });\n\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        outsidePress: false, // defer to Overlay click\n    });\n\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 800,\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!show) {\n            const timer = setTimeout(() => setShowOverlay(false), 800);\n            return () => clearTimeout(timer);\n        } else {\n            setShowOverlay(true);\n        }\n    }, [show]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDialogVisibility = (e: React.TransitionEvent) => {\n        if (e.propertyName === \"visibility\" && show) {\n            // focus the first element so that the screenreader enters the dialog\n            initialFocusRef.current?.focus();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={onOverlayClick}\n        >\n            {isMounted ? (\n                <FloatingFocusManager\n                    context={context}\n                    initialFocus={-1}\n                    returnFocus={true}\n                >\n                    <Container\n                        ref={refs.setFloating}\n                        $show={show}\n                        data-status={status}\n                        data-testid=\"drawer\"\n                        onClick={handleClick}\n                        aria-modal\n                        role=\"dialog\"\n                        aria-labelledby={id}\n                        onTransitionEnd={handleDialogVisibility}\n                        {...getFloatingProps()}\n                        {...otherProps}\n                    >\n                        <Header>\n                            <Heading\n                                id={id}\n                                ref={initialFocusRef}\n                                tabIndex={-1}\n                                weight=\"bold\"\n                                forwardedAs=\"h2\"\n                            >\n                                {heading}\n                            </Heading>\n                        </Header>\n                        <Content>{children}</Content>\n                        <CloseButton\n                            aria-label=\"Close drawer\"\n                            onClick={onClose}\n                            focusHighlight={false}\n                        >\n                            <CrossIcon aria-hidden />\n                        </CloseButton>\n                    </Container>\n                </FloatingFocusManager>\n            ) : undefined}\n        </Overlay>\n    );\n};\n"],"names":["_a","children","heading","show","onClose","onOverlayClick","otherProps","__rest","showOverlay","setShowOverlay","useState","id","useId","initialFocusRef","useRef","context","refs","useFloating","open","onOpenChange","dismiss","useDismiss","escapeKey","outsidePress","getFloatingProps","useInteractions","isMounted","status","useTransitionStatus","duration","useEffect","timer","setTimeout","clearTimeout","_jsx","Overlay","enableOverlayClick","FloatingFocusManager","initialFocus","returnFocus","_jsxs","Container","Object","assign","ref","setFloating","$show","onClick","event","stopPropagation","role","onTransitionEnd","e","propertyName","current","focus","Header","Heading","tabIndex","weight","forwardedAs","Content","CloseButton","focusHighlight","CrossIcon","undefined"],"mappings":"6eAoBuBA,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,GAAcL,EACXM,EAAUC,EAAAA,OAAAP,EANM,0DAWnB,MAAOQ,EAAaC,GAAkBC,EAAAA,SAASP,GACzCQ,EAAKC,EAAAA,QACLC,EAAkBC,EAAAA,OAA2B,OAK7CC,QAAEA,EAAOC,KAAEA,GAASC,cAAY,CAClCC,KAAMf,EACNgB,aAAeD,KACNA,GAAQd,GACTA,GACJ,IAIFgB,EAAUC,EAAAA,WAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,kBAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBb,EAAS,CACvDc,SAAU,MAMdC,EAAAA,WAAU,KACN,IAAK3B,EAAM,CACP,MAAM4B,EAAQC,YAAW,IAAMvB,GAAe,IAAQ,KACtD,MAAO,IAAMwB,aAAaF,EAC9B,CACItB,GAAe,EACnB,GACD,CAACN,IAmBJ,OACI+B,MAACC,EAAAA,QAAO,CACJhC,KAAMK,EACN4B,oBAAkB,EAClB/B,eAAgBA,EAAcJ,SAE7ByB,EACGQ,MAACG,EAAAA,qBAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAItC,SAEjBuC,EAAAA,KAACC,YAASC,OAAAC,OAAA,CACNC,IAAK5B,EAAK6B,YAAWC,MACd3C,EAAI,cACEwB,EAAM,cACP,SACZoB,QAxBCC,IACjBA,EAAMC,iBAAiB,EAuBa,cAAA,EAEpBC,KAAK,SAAQ,kBACIvC,EACjBwC,gBAnCYC,UACL,eAAnBA,EAAEC,cAAiClD,IAEZ,QAAvBH,EAAAa,EAAgByC,eAAO,IAAAtD,GAAAA,EAAEuD,QAC7B,GAgCoB/B,IACAlB,EAAU,CAAAL,SAAA,CAEdiC,EAAAA,IAACsB,SAAM,CAAAvD,SACHiC,EAAAA,IAACuB,EAAAA,QAAO,CACJ9C,GAAIA,EACJiC,IAAK/B,EACL6C,UAAU,EACVC,OAAO,OACPC,YAAY,KAAI3D,SAEfC,MAGTgC,EAAAA,IAAC2B,EAAAA,QAAO,CAAA5D,SAAEA,IACViC,EAAAA,IAAC4B,cAAW,CAAA,aACG,eACXf,QAAS3C,EACT2D,gBAAgB,EAAK9D,SAErBiC,EAAAA,IAAC8B,EAAAA,UAAS,CAAA,eAAA,iBAItBC,GACE"}
+{"version":3,"file":"drawer.js","sources":["../../../src/drawer/drawer.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\nimport { Overlay } from \"../overlay\";\nimport { Breakpoint } from \"../theme\";\nimport { useId } from \"../util\";\nimport {\n    CallToAction,\n    CloseButton,\n    Container,\n    Content,\n    Header,\n    Heading,\n} from \"./drawer.styles\";\nimport { DrawerProps } from \"./types\";\n\nexport const Drawer = ({\n    children,\n    heading,\n    show,\n    onClose,\n    onOverlayClick,\n    customCallToAction,\n    ...otherProps\n}: DrawerProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showOverlay, setShowOverlay] = useState(show);\n    // Vertical centre of the heading, used to align the (last-in-DOM,\n    // absolutely positioned) close button with it. A custom call-to-action can\n    // make the header taller than the heading, so a fixed offset would leave\n    // the close button misaligned.\n    const [closeButtonTop, setCloseButtonTop] = useState<number>();\n    const id = useId();\n    const theme = useContext(ThemeContext);\n    const stackWidth = Breakpoint[\"sm-max\"]({ theme });\n    const initialFocusRef = useRef<HTMLHeadingElement>(null);\n    // Observe the header (whose size tracks the drawer's actual width, which\n    // consumers may override) to drive layout in one pass: the width decides\n    // call-to-action stacking, and each resize re-centres the close button on\n    // the heading. offsetTop/offsetHeight are relative to the drawer (the\n    // positioned ancestor), so they share the close button's coordinate space.\n    const { width: headerWidth, ref: headerRef } =\n        useResizeDetector<HTMLDivElement>({\n            refreshMode: \"throttle\",\n            refreshRate: 300,\n            onResize: () => {\n                const headingEl = initialFocusRef.current;\n                if (headingEl) {\n                    setCloseButtonTop(\n                        headingEl.offsetTop + headingEl.offsetHeight / 2\n                    );\n                }\n            },\n        });\n    const stackCallToAction =\n        headerWidth !== undefined && headerWidth <= stackWidth;\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { context, refs } = useFloating({\n        open: show,\n        onOpenChange: (open) => {\n            if (!open && onClose) {\n                onClose();\n            }\n        },\n    });\n\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        outsidePress: false, // defer to Overlay click\n    });\n\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 800,\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!show) {\n            const timer = setTimeout(() => setShowOverlay(false), 800);\n            return () => clearTimeout(timer);\n        } else {\n            setShowOverlay(true);\n        }\n    }, [show]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDialogVisibility = (e: React.TransitionEvent) => {\n        if (e.propertyName === \"visibility\" && show) {\n            // focus the first element so that the screenreader enters the dialog\n            initialFocusRef.current?.focus();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={onOverlayClick}\n        >\n            {isMounted ? (\n                <FloatingFocusManager\n                    context={context}\n                    initialFocus={-1}\n                    returnFocus={true}\n                >\n                    <Container\n                        ref={refs.setFloating}\n                        $show={show}\n                        data-status={status}\n                        data-testid=\"drawer\"\n                        onClick={handleClick}\n                        aria-modal\n                        role=\"dialog\"\n                        aria-labelledby={id}\n                        onTransitionEnd={handleDialogVisibility}\n                        {...getFloatingProps()}\n                        {...otherProps}\n                    >\n                        <Header\n                            ref={headerRef}\n                            $stacked={!!customCallToAction && stackCallToAction}\n                        >\n                            <Heading\n                                id={id}\n                                ref={initialFocusRef}\n                                tabIndex={-1}\n                                weight=\"bold\"\n                                forwardedAs=\"h2\"\n                            >\n                                {heading}\n                            </Heading>\n                            {customCallToAction ? (\n                                <CallToAction $stacked={stackCallToAction}>\n                                    {customCallToAction}\n                                </CallToAction>\n                            ) : null}\n                        </Header>\n                        <Content>{children}</Content>\n                        {/* Rendered last so assistive tech reaches the heading\n                            and content before the close button; centred against\n                            the heading via its measured position. */}\n                        <CloseButton\n                            aria-label=\"Close drawer\"\n                            onClick={onClose}\n                            focusHighlight={false}\n                            style={\n                                closeButtonTop !== undefined\n                                    ? {\n                                          top: closeButtonTop,\n                                          transform: \"translateY(-50%)\",\n                                      }\n                                    : undefined\n                            }\n                        >\n                            <CrossIcon aria-hidden />\n                        </CloseButton>\n                    </Container>\n                </FloatingFocusManager>\n            ) : undefined}\n        </Overlay>\n    );\n};\n"],"names":["_a","children","heading","show","onClose","onOverlayClick","customCallToAction","otherProps","__rest","showOverlay","setShowOverlay","useState","closeButtonTop","setCloseButtonTop","id","useId","theme","useContext","ThemeContext","stackWidth","Breakpoint","initialFocusRef","useRef","width","headerWidth","ref","headerRef","useResizeDetector","refreshMode","refreshRate","onResize","headingEl","current","offsetTop","offsetHeight","stackCallToAction","undefined","context","refs","useFloating","open","onOpenChange","dismiss","useDismiss","escapeKey","outsidePress","getFloatingProps","useInteractions","isMounted","status","useTransitionStatus","duration","useEffect","timer","setTimeout","clearTimeout","_jsx","Overlay","enableOverlayClick","FloatingFocusManager","initialFocus","returnFocus","_jsxs","Container","Object","assign","setFloating","$show","onClick","event","stopPropagation","role","onTransitionEnd","e","propertyName","focus","Header","$stacked","Heading","tabIndex","weight","forwardedAs","CallToAction","Content","CloseButton","focusHighlight","style","top","transform","CrossIcon"],"mappings":"6mBAwBuBA,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,EAAcC,mBACdA,GAAkBN,EACfO,EAAUC,EAAAA,OAAAR,EAPM,+EAYnB,MAAOS,EAAaC,GAAkBC,EAAAA,SAASR,IAKxCS,EAAgBC,GAAqBF,aACtCG,EAAKC,EAAAA,QACLC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAaC,EAAAA,WAAW,UAAU,CAAEJ,UACpCK,EAAkBC,EAAAA,OAA2B,OAM3CC,MAAOC,EAAaC,IAAKC,GAC7BC,EAAAA,kBAAkC,CAC9BC,YAAa,WACbC,YAAa,IACbC,SAAU,KACN,MAAMC,EAAYV,EAAgBW,QAC9BD,GACAlB,EACIkB,EAAUE,UAAYF,EAAUG,aAAe,EAEvD,IAGNC,OACcC,IAAhBZ,GAA6BA,GAAeL,GAK1CkB,QAAEA,EAAOC,KAAEA,GAASC,cAAY,CAClCC,KAAMrC,EACNsC,aAAeD,KACNA,GAAQpC,GACTA,GACJ,IAIFsC,EAAUC,EAAAA,WAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,kBAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBb,EAAS,CACvDc,SAAU,MAMdC,EAAAA,WAAU,KACN,IAAKjD,EAAM,CACP,MAAMkD,EAAQC,YAAW,IAAM5C,GAAe,IAAQ,KACtD,MAAO,IAAM6C,aAAaF,EAC9B,CACI3C,GAAe,EACnB,GACD,CAACP,IAmBJ,OACIqD,MAACC,EAAAA,QAAO,CACJtD,KAAMM,EACNiD,sBACArD,eAAgBA,EAAcJ,SAE7B+C,EACGQ,EAAAA,IAACG,EAAAA,qBAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAI5D,SAEjB6D,EAAAA,KAACC,EAAAA,UAASC,OAAAC,OAAA,CACNxC,IAAKa,EAAK4B,YAAWC,MACdhE,EAAI,cACE8C,gBACD,SACZmB,QAxBCC,IACjBA,EAAMC,iBAAiB,EAuBa,cAAA,EAEpBC,KAAK,2BACYzD,EACjB0D,gBAnCYC,UACL,eAAnBA,EAAEC,cAAiCvE,IAEZ,QAAvBH,EAAAqB,EAAgBW,eAAO,IAAAhC,GAAAA,EAAE2E,QAC7B,GAgCoB7B,IACAvC,EAAU,CAAAN,SAAA,CAEd6D,EAAAA,KAACc,EAAAA,OAAM,CACHnD,IAAKC,EAASmD,WACFvE,GAAsB6B,YAElCqB,EAAAA,IAACsB,EAAAA,QAAO,CACJhE,GAAIA,EACJW,IAAKJ,EACL0D,UAAU,EACVC,OAAO,OACPC,YAAY,KAAIhF,SAEfC,IAEJI,EACGkD,EAAAA,IAAC0B,EAAAA,aAAY,CAAAL,SAAW1C,EAAiBlC,SACpCK,IAEL,QAERkD,MAAC2B,EAAAA,kBAASlF,IAIVuD,EAAAA,IAAC4B,cAAW,CAAA,aACG,eACXhB,QAAShE,EACTiF,gBAAgB,EAChBC,WACuBlD,IAAnBxB,EACM,CACI2E,IAAK3E,EACL4E,UAAW,yBAEfpD,EAASnC,SAGnBuD,EAAAA,IAACiC,EAAAA,2CAIbrD,GACE"}

package/cjs/drawer/drawer.styles.js

@@ -1,4 +1,4 @@
-"use strict";var i=require("styled-components"),t=require("../shared/clickable-icon/clickable-icon.js"),o=require("../theme/index.js"),e=require("../typography/typography.js");function a(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}var n=a(i);const d=i.css`
+"use strict";var i=require("styled-components"),t=require("../shared/clickable-icon/clickable-icon.js"),e=require("../theme/index.js"),o=require("../typography/typography.js");function a(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}var n=a(i);const d=i.css`
     transition-property: right, visibility;
 
     &[data-status="initial"] {
@@ -7,15 +7,15 @@
     }
 
     &[data-status="open"] {
-        transition-duration: ${o.Motion["duration-800"]};
-        transition-timing-function: ${o.Motion["ease-entrance"]};
+        transition-duration: ${e.Motion["duration-800"]};
+        transition-timing-function: ${e.Motion["ease-entrance"]};
         right: 0;
         visibility: visible;
     }
 
     &[data-status="close"] {
-        transition-duration: ${o.Motion["duration-800"]};
-        transition-timing-function: ${o.Motion["ease-exit"]};
+        transition-duration: ${e.Motion["duration-800"]};
+        transition-timing-function: ${e.Motion["ease-exit"]};
         right: -100%;
         visibility: hidden;
     }
@@ -27,22 +27,22 @@
     flex-direction: column;
     height: 100%;
 
-    background-color: ${o.Colour.bg};
-    box-shadow: ${o.Shadow["lg-subtle"]};
+    background-color: ${e.Colour.bg};
+    box-shadow: ${e.Shadow["lg-subtle"]};
 
     ${d}
 
     width: 40%;
-    border-top-left-radius: ${o.Radius.md};
-    border-bottom-left-radius: ${o.Radius.md};
+    border-top-left-radius: ${e.Radius.md};
+    border-bottom-left-radius: ${e.Radius.md};
     overflow: hidden;
 
-    ${o.MediaQuery.MaxWidth.xl} {
+    ${e.MediaQuery.MaxWidth.xl} {
         width: 50%;
         min-width: 700px;
     }
 
-    ${o.MediaQuery.MaxWidth.lg} {
+    ${e.MediaQuery.MaxWidth.lg} {
         width: 100%;
         min-width: unset;
         border-top-left-radius: 0;
@@ -52,40 +52,57 @@
     top: 0;
     display: flex;
     align-items: center;
-    gap: ${o.Spacing["spacing-16"]};
-    padding: ${o.Spacing["spacing-32"]} ${o.Spacing["spacing-16"]}
-        ${o.Spacing["spacing-16"]}
-        calc(${o.Font.Spec["heading-lh-md"]} + ${o.Spacing["spacing-32"]});
-    background-color: ${o.Colour.bg};
-    border-bottom: ${o.Border["width-010"]} ${o.Border.solid} ${o.Colour.border};
+    gap: ${e.Spacing["spacing-16"]};
+    padding: ${e.Spacing["spacing-32"]} ${e.Spacing["spacing-16"]}
+        ${e.Spacing["spacing-16"]}
+        calc(${e.Font.Spec["heading-lh-md"]} + ${e.Spacing["spacing-32"]});
+    background-color: ${e.Colour.bg};
+    border-bottom: ${e.Border["width-010"]} ${e.Border.solid} ${e.Colour.border};
 
-    ${o.MediaQuery.MaxWidth.lg} {
-        gap: ${o.Spacing["spacing-8"]};
-        padding: ${o.Spacing["spacing-32"]} ${o.Spacing["spacing-20"]}
-            ${o.Spacing["spacing-16"]}
-            calc(${o.Font.Spec["heading-lh-md"]} + ${o.Spacing["spacing-24"]});
+    ${t=>t.$stacked&&i.css`
+            /* Stack the call-to-action below the heading when the drawer is too
+               narrow to fit both on one line. */
+            flex-direction: column;
+            align-items: stretch;
+            gap: ${e.Spacing["spacing-16"]};
+        `}
+
+    ${e.MediaQuery.MaxWidth.lg} {
+        padding: ${e.Spacing["spacing-32"]} ${e.Spacing["spacing-20"]}
+            ${e.Spacing["spacing-16"]}
+            calc(${e.Font.Spec["heading-lh-md"]} + ${e.Spacing["spacing-24"]});
     }
+`,l=n.default.div`
+    display: flex;
+    /* Flush right, beside the heading. */
+    margin-left: auto;
+
+    ${t=>t.$stacked&&i.css`
+            /* When stacked, flush left so the buttons line up with the heading
+               (the header's left padding already clears the close icon). */
+            margin-left: 0;
+        `}
 `,c=n.default(t.ClickableIcon)`
-    color: ${o.Colour.icon};
+    color: ${e.Colour.icon};
     padding: 0;
     position: absolute;
-    top: ${o.Spacing["spacing-32"]};
-    left: ${o.Spacing["spacing-16"]};
+    top: ${e.Spacing["spacing-32"]};
+    left: ${e.Spacing["spacing-16"]};
     &:active,
     &:focus {
-        color: ${o.Colour["icon-hover"]};
+        color: ${e.Colour["icon-hover"]};
     }
 
     svg {
-        height: ${o.Font.Spec["heading-lh-md"]};
-        width: ${o.Font.Spec["heading-lh-md"]};
+        height: ${e.Font.Spec["heading-lh-md"]};
+        width: ${e.Font.Spec["heading-lh-md"]};
     }
-`,l=n.default(e.Typography.HeadingMD)`
+`,p=n.default(o.Typography.HeadingMD)`
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-`,p=n.default.div`
+`,g=n.default.div`
     flex: 1;
     overflow-y: auto;
-`;exports.CloseButton=c,exports.Container=r,exports.Content=p,exports.Header=s,exports.Heading=l;
+`;exports.CallToAction=l,exports.CloseButton=c,exports.Container=r,exports.Content=g,exports.Header=s,exports.Heading=p;
 //# sourceMappingURL=drawer.styles.js.map