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

package/cjs/menu/menu-section.styles.js

@@ -1,13 +1,27 @@
-"use strict";var e=require("styled-components"),r=require("../theme/index.js"),o=require("../typography/typography.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(e);const n=i.default.ul`
-    ${o=>o.$showDivider&&e.css`
-            border-top: ${r.Border["width-010"]} ${r.Border.solid}
-                ${r.Colour.border};
+"use strict";var r=require("styled-components"),e=require("../theme/index.js"),o=require("../typography/typography.js");function t(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var i=t(r);const a=i.default.div`
+    ${o=>o.$showDivider&&r.css`
+            border-top: ${e.Border["width-010"]} ${e.Border.solid}
+                ${e.Colour.border};
         `}
-    padding: ${r.Spacing["spacing-8"]} 0;
+    padding: ${e.Spacing["spacing-8"]} 0;
+`,s=i.default.ul`
     margin: 0;
     list-style: none;
-`,a=i.default(o.Typography.BodyXS)`
-    margin: 0 ${r.Spacing["spacing-16"]} ${r.Spacing["spacing-8"]};
-    color: ${r.Colour["text-subtler"]};
-`;exports.Label=a,exports.Section=n;
+
+    ${o=>o.$columns&&r.css`
+            display: grid;
+            grid-template-rows: repeat(${o.$gridRows}, auto);
+            grid-auto-flow: column;
+            grid-auto-columns: minmax(0, 1fr);
+            column-gap: ${e.Spacing["spacing-8"]};
+
+            ${e.MediaQuery.MaxWidth.lg} {
+                grid-template-rows: none;
+                grid-auto-flow: row;
+            }
+        `}
+`,p=i.default(o.Typography.BodyXS)`
+    margin: 0 ${e.Spacing["spacing-16"]} ${e.Spacing["spacing-8"]};
+    color: ${e.Colour["text-subtler"]};
+`;exports.GRID_COLUMN_GAP_PX=8,exports.GRID_COLUMN_WIDTH_PX=383,exports.Label=p,exports.List=s,exports.SectionWrapper=a;
 //# sourceMappingURL=menu-section.styles.js.map

package/cjs/menu/menu-section.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-section.styles.js","sources":["../../../src/menu/menu-section.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface MenuSectionStyleProps {\n    $showDivider?: boolean;\n}\n\n// =============================================================================\n// MENU SECTION STYLES\n// =============================================================================\nexport const Section = styled.ul<MenuSectionStyleProps>`\n    ${(props) =>\n        props.$showDivider &&\n        css`\n            border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n                ${Colour[\"border\"]};\n        `}\n    padding: ${Spacing[\"spacing-8\"]} 0;\n    margin: 0;\n    list-style: none;\n`;\n\nexport const Label = styled(Typography.BodyXS)`\n    margin: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["Section","styled","ul","props","$showDivider","css","Border","Colour","Spacing","Label","Typography","BodyXS"],"mappings":"2MAcO,MAAMA,EAAUC,EAAAA,QAAOC,EAAyB;MAChDC,GACCA,EAAMC,cACNC,KAAG;0BACeC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;kBAC7CC,EAAAA,OAAe;;eAElBC,EAAAA,QAAQ;;;EAKVC,EAAQR,EAAAA,QAAOS,aAAWC,OAAO;gBAC9BH,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;aACpCD,EAAAA,OAAO;"}
+{"version":3,"file":"menu-section.styles.js","sources":["../../../src/menu/menu-section.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Border, Colour, MediaQuery, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// 367px max content width (Figma) + 8px padding per side; used to cap the panel maxWidth in MenuContent\nexport const GRID_COLUMN_WIDTH_PX = 383;\n// matches Spacing[\"spacing-8\"]\nexport const GRID_COLUMN_GAP_PX = 8;\n\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface MenuSectionWrapperStyleProps {\n    $showDivider?: boolean;\n}\n\ninterface MenuSectionListStyleProps {\n    $columns?: number;\n    $gridRows?: number;\n}\n\n// =============================================================================\n// MENU SECTION STYLES\n// =============================================================================\nexport const SectionWrapper = styled.div<MenuSectionWrapperStyleProps>`\n    ${(props) =>\n        props.$showDivider &&\n        css`\n            border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n                ${Colour[\"border\"]};\n        `}\n    padding: ${Spacing[\"spacing-8\"]} 0;\n`;\n\nexport const List = styled.ul<MenuSectionListStyleProps>`\n    margin: 0;\n    list-style: none;\n\n    ${(props) =>\n        props.$columns &&\n        css`\n            display: grid;\n            grid-template-rows: repeat(${props.$gridRows}, auto);\n            grid-auto-flow: column;\n            grid-auto-columns: minmax(0, 1fr);\n            column-gap: ${Spacing[\"spacing-8\"]};\n\n            ${MediaQuery.MaxWidth.lg} {\n                grid-template-rows: none;\n                grid-auto-flow: row;\n            }\n        `}\n`;\n\nexport const Label = styled(Typography.BodyXS)`\n    margin: 0 ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["SectionWrapper","styled","div","props","$showDivider","css","Border","Colour","Spacing","List","ul","$columns","$gridRows","MediaQuery","MaxWidth","lg","Label","Typography","BodyXS"],"mappings":"2MAKO,MAmBMA,EAAiBC,EAAAA,QAAOC,GAAiC;MAC/DC,GACCA,EAAMC,cACNC,KAAG;0BACeC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;kBAC7CC,EAAAA,OAAe;;eAElBC,EAAAA,QAAQ;EAGVC,EAAOR,EAAAA,QAAOS,EAA6B;;;;MAIjDP,GACCA,EAAMQ,UACNN,KAAG;;yCAE8BF,EAAMS;;;0BAGrBJ,EAAAA,QAAQ;;cAEpBK,EAAAA,WAAWC,SAASC;;;;;EAOrBC,EAAQf,EAAAA,QAAOgB,aAAWC,OAAO;gBAC9BV,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;aACpCD,EAAAA,OAAO;6BAjDc,+BAFE"}

package/cjs/navbar/navbar-items.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),r=require("../menu/menu.js"),t=require("./menu.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:d,mobile:u=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:p})=>{const[h,j]=i.useState(null),m=i.useRef(null),x=s.useId(),b=e=>{var n;return!!(null===(n=e.subMenu)||void 0===n?void 0:n.some((e=>e.id===d)))},v=u?a.findIndex((e=>"component"!==e.itemType&&b(e))):-1,g=v<0?null:v;i.useEffect((()=>{u&&j(g)}),[u,g]),i.useEffect((()=>{if(u)return;const e=e=>{m.current&&!m.current.contains(e.target)&&j(null)};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[u]);const $=(e,n)=>i=>{i.stopPropagation(),u&&j((i=>{var r;return(null===(r=e.subMenu)||void 0===r?void 0:r.length)&&i!==n?n:null})),p(i,e)},k=(e,n)=>{e.stopPropagation(),p(e,n)},L=(e,i)=>n.jsx(r.Menu.Content,{id:i,children:n.jsx(r.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(r.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),f=e=>n.jsx(t.Menu,{items:e,selectedId:d,onItemClick:k}),I=(i,t)=>{const{children:s,options:p,subMenu:m}=i,v=e.__rest(i,["children","options","subMenu"]),g=!!(null==m?void 0:m.length),k=(e=>e.id===d||b(e))(i),I=u&&g&&h===t,q=!u&&g&&h===t||I,C=u||null===h?k:h===t,M=!c&&C,_=C?u?"bold":"semibold":"regular",E=u?`link__mobile-${t+1}`:`link__${t+1}`,O=()=>M?n.jsx(l.LinkIndicator,{"data-testid":`${E}-indicator`,$selected:C}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:g?(e=>{const a=`navbar-submenu-${x}-${i.id}`;return u?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":E,$weight:_,$selected:C},v,{"aria-current":k?"page":void 0,"aria-haspopup":"menu","aria-expanded":q,onClick:$(i,t)},p,{children:[n.jsx(l.LinkLabel,{children:s}),O(),u&&g?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${E}-expand-collapse-button`,$selected:C,$expanded:q,focusHighlight:!1,focusOutline:"browser","aria-label":q?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:C})})}):null]})),I&&f(m)]}):n.jsx(r.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:L(m,a),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>{j(t)},onPopoverDismiss:()=>{j((e=>e===t?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":E,$weight:_,$selected:C,"aria-haspopup":"menu","aria-expanded":q},p,{children:[n.jsx(l.LinkLabel,{children:s}),O(),n.jsx(l.ChevronIconDesktop,{$selected:C,$expanded:q})]}))})})(t===a.length-1):n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":E,$weight:_,$selected:C},v,{"aria-current":k?"page":void 0,onClick:$(i,t)},p,{children:[n.jsx(l.LinkLabel,{children:s}),O()]}))},t)},q=()=>a.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):I(e,i)}));return a&&a.length>0?u?n.jsx(l.MobileWrapper,{ref:m,children:q()}):n.jsx(l.Wrapper,{ref:m,$alignLeft:o,children:q()}):n.jsx(n.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),r=require("../menu/menu.js"),t=require("./menu.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:u,mobile:d=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:p})=>{const[h,m]=i.useState(null),j=i.useRef(null),x=s.useId(),b=e=>{var n;return!!(null===(n=e.subMenu)||void 0===n?void 0:n.some((e=>e.id===u)))},v=d?a.findIndex((e=>"component"!==e.itemType&&b(e))):-1,g=v<0?null:v;i.useEffect((()=>{d&&m(g)}),[d,g]),i.useEffect((()=>{if(d)return;const e=e=>{j.current&&!j.current.contains(e.target)&&m(null)};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[d]);const $=(e,n)=>i=>{i.stopPropagation(),d&&m((i=>{var r;return(null===(r=e.subMenu)||void 0===r?void 0:r.length)&&i!==n?n:null})),p(i,e)},k=(e,n)=>{e.stopPropagation(),p(e,n)},L=(e,i,t)=>n.jsx(r.Menu.Content,{id:i,children:n.jsx(r.Menu.Section,{showDivider:!1,columns:t,children:e.map(((e,i)=>n.jsx(r.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),f=e=>n.jsx(t.Menu,{items:e,selectedId:u,onItemClick:k}),I=(i,t)=>{const{children:s,options:p,subMenu:j,subMenuColumns:v}=i,g=e.__rest(i,["children","options","subMenu","subMenuColumns"]),k=!!(null==j?void 0:j.length),I=(e=>e.id===u||b(e))(i),C=d&&k&&h===t,M=!d&&k&&h===t||C,q=d||null===h?I:h===t,_=!c&&q,E=q?d?"bold":"semibold":"regular",O=d?`link__mobile-${t+1}`:`link__${t+1}`,w=()=>_?n.jsx(l.LinkIndicator,{"data-testid":`${O}-indicator`,$selected:q}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:k?(e=>{const a=`navbar-submenu-${x}-${i.id}`;return d?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":O,$weight:E,$selected:q},g,{"aria-current":I?"page":void 0,"aria-haspopup":"menu","aria-expanded":M,onClick:$(i,t)},p,{children:[n.jsx(l.LinkLabel,{children:s}),w(),d&&k?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${O}-expand-collapse-button`,$selected:q,$expanded:M,focusHighlight:!1,focusOutline:"browser","aria-label":M?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:q})})}):null]})),C&&f(j)]}):n.jsx(r.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:L(j,a,v),enableResize:!0,triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>{m(t)},onPopoverDismiss:()=>{m((e=>e===t?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":O,$weight:E,$selected:q,"aria-haspopup":"menu","aria-expanded":M},p,{children:[n.jsx(l.LinkLabel,{children:s}),w(),n.jsx(l.ChevronIconDesktop,{$selected:q,$expanded:M})]}))})})(t===a.length-1):n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":O,$weight:E,$selected:q},g,{"aria-current":I?"page":void 0,onClick:$(i,t)},p,{children:[n.jsx(l.LinkLabel,{children:s}),w()]}))},t)},C=()=>a.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):I(e,i)}));return a&&a.length>0?d?n.jsx(l.MobileWrapper,{ref:j,children:C()}):n.jsx(l.Wrapper,{ref:j,$alignLeft:o,children:C()}):n.jsx(n.Fragment,{})};
 //# sourceMappingURL=navbar-items.js.map

package/cjs/navbar/navbar-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n    ChevronIcon,\n    ChevronIconDesktop,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const hasSelectedSubMenuItem = (item: NavItemLinkProps<T>): boolean =>\n        !!item.subMenu?.some((subItem) => subItem.id === selectedId);\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean =>\n        item.id === selectedId || hasSelectedSubMenuItem(item);\n\n    const itemIndexWithSelectedSubItem = mobile\n        ? items.findIndex(\n              (item) =>\n                  item.itemType !== \"component\" &&\n                  hasSelectedSubMenuItem(item as NavItemLinkProps<T>)\n          )\n        : -1;\n    const initialExpandedItemIndex =\n        itemIndexWithSelectedSubItem < 0 ? null : itemIndexWithSelectedSubItem;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n\n    useEffect(() => {\n        if (!mobile) return;\n\n        setSelectedIndex(initialExpandedItemIndex);\n    }, [mobile, initialExpandedItemIndex]);\n\n    useEffect(() => {\n        if (mobile) return;\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                setSelectedIndex(null);\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, [mobile]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile) {\n                setSelectedIndex((prev) =>\n                    item.subMenu?.length && prev !== index ? index : null\n                );\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu\n            items={subMenu}\n            selectedId={selectedId}\n            onItemClick={handleMobileSubLinkClick}\n        />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const { children, options, subMenu, ...otherItemAttrs } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && selectedIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            !mobile && selectedIndex !== null\n                ? selectedIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={selected}\n                        $expanded={isExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                $weight={textWeight}\n                $selected={selected}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = (isLastItem: boolean) => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            $weight={textWeight}\n                            $selected={selected}\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position={isLastItem ? \"bottom-end\" : \"bottom\"}\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => {\n                        setSelectedIndex(index);\n                    }}\n                    onPopoverDismiss={() => {\n                        setSelectedIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        $weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                        <ChevronIconDesktop\n                            $selected={selected}\n                            $expanded={isExpanded}\n                        />\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu\n                    ? renderLinkWithSubmenu(index === items.length - 1)\n                    : renderLink()}\n            </LinkItem>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","listRef","useRef","instanceId","useId","hasSelectedSubMenuItem","item","_a","subMenu","some","subItem","id","itemIndexWithSelectedSubItem","findIndex","itemType","initialExpandedItemIndex","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","index","stopPropagation","prev","length","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","$weight","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","$expanded","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","LinkButton","type","tabIndex","ChevronIconDesktop","renderLinkWithSubmenu","renderItems","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}
+{"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n    ChevronIcon,\n    ChevronIconDesktop,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const hasSelectedSubMenuItem = (item: NavItemLinkProps<T>): boolean =>\n        !!item.subMenu?.some((subItem) => subItem.id === selectedId);\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean =>\n        item.id === selectedId || hasSelectedSubMenuItem(item);\n\n    const itemIndexWithSelectedSubItem = mobile\n        ? items.findIndex(\n              (item) =>\n                  item.itemType !== \"component\" &&\n                  hasSelectedSubMenuItem(item as NavItemLinkProps<T>)\n          )\n        : -1;\n    const initialExpandedItemIndex =\n        itemIndexWithSelectedSubItem < 0 ? null : itemIndexWithSelectedSubItem;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n\n    useEffect(() => {\n        if (!mobile) return;\n\n        setSelectedIndex(initialExpandedItemIndex);\n    }, [mobile, initialExpandedItemIndex]);\n\n    useEffect(() => {\n        if (mobile) return;\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                setSelectedIndex(null);\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, [mobile]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile) {\n                setSelectedIndex((prev) =>\n                    item.subMenu?.length && prev !== index ? index : null\n                );\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string,\n        columns?: number\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false} columns={columns}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu\n            items={subMenu}\n            selectedId={selectedId}\n            onItemClick={handleMobileSubLinkClick}\n        />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const {\n            children,\n            options,\n            subMenu,\n            subMenuColumns,\n            ...otherItemAttrs\n        } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && selectedIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            !mobile && selectedIndex !== null\n                ? selectedIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={selected}\n                        $expanded={isExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                $weight={textWeight}\n                $selected={selected}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = (isLastItem: boolean) => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            $weight={textWeight}\n                            $selected={selected}\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position={isLastItem ? \"bottom-end\" : \"bottom\"}\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(\n                        subMenu!,\n                        subMenuId,\n                        subMenuColumns\n                    )}\n                    enableResize\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => {\n                        setSelectedIndex(index);\n                    }}\n                    onPopoverDismiss={() => {\n                        setSelectedIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        $weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                        <ChevronIconDesktop\n                            $selected={selected}\n                            $expanded={isExpanded}\n                        />\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu\n                    ? renderLinkWithSubmenu(index === items.length - 1)\n                    : renderLink()}\n            </LinkItem>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","listRef","useRef","instanceId","useId","hasSelectedSubMenuItem","item","_a","subMenu","some","subItem","id","itemIndexWithSelectedSubItem","findIndex","itemType","initialExpandedItemIndex","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","index","stopPropagation","prev","length","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","columns","_jsx","DesktopMenu","Content","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","subMenuColumns","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","$weight","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","$expanded","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","enableResize","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","LinkButton","type","tabIndex","ChevronIconDesktop","renderLinkWithSubmenu","renderItems","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}

package/cjs/pagination/pagination.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-2-left"),a=require("@lifesg/react-icons/chevron-2-right"),t=require("@lifesg/react-icons/chevron-left"),r=require("@lifesg/react-icons/chevron-line-left"),n=require("@lifesg/react-icons/chevron-line-right"),s=require("@lifesg/react-icons/chevron-right"),l=require("@lifesg/react-icons/ellipsis-horizontal"),o=require("react"),c=require("../external/react-responsive/dist/react-responsive.js"),u=require("styled-components"),d=require("../input-select/input-select.js"),h=require("../shared/accessibility/index.js"),p=require("../theme/index.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var g=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var v=require("./pagination.styles.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const f=x(o).default.forwardRef((({id:x,"data-testid":f,className:b,pageSize:m=10,totalItems:C,activePage:q,pageSizeOptions:I=j,showFirstAndLastNav:$,showPageSizeChanger:M=!1,onPageChange:P,onPageSizeChange:S},E)=>{const y=o.useContext(u.ThemeContext),H=p.Breakpoint["sm-max"]({theme:y}),L=c.reactResponsiveExports.useMediaQuery({maxWidth:H}),[w,O]=o.useState(!1),[N,k]=o.useState(!1),[z,B]=o.useState(""),[F,R]=o.useState(I[0]),[V,W]=o.useState(!L&&M&&F?F.value:m),A=`${g.useId()}-pagination`,D=Math.ceil(C/V),Q=1===q,T=q===D,G=q>1?()=>Z(1):void 0,J=q<D?()=>Z(D):void 0,K=q>1?()=>Z(q-1):void 0,U=q<D?()=>Z(parseInt(q.toString())+1):void 0;o.useEffect((()=>{q&&X(q)}),[q]),o.useEffect((()=>{W(m),R(I.find((e=>e.value===m)))}),[m]);const X=e=>{B(e.toString())},Y=()=>{O(!1),k(!1)},Z=e=>{P&&(P(e),X(e))},_=()=>{const e=Math.min(D,q+5);Z(e),X(e),O(!0),k(!1)},ee=()=>{const e=Math.max(1,q-5);Z(e),X(e),O(!1),k(!0)},ie=e=>{const i=e.target.value;if(void 0===i||0===i.length)B("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));X(Math.max(1,Math.min(D,e)))}else B(i.replace(/[^0-9]/g,""))},ae=e=>{e.preventDefault(),z&&(null==P||P(parseInt(z)))},te=()=>{O(!0)},re=()=>{O(!1)},ne=()=>{k(!0)},se=()=>{k(!1)},le=a=>e.jsxs(v.EllipsisContainer,{children:[e.jsx(v.EllipsisButton,{focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:ne,onMouseLeave:se,onFocus:ne,onBlur:se,onClick:ee,children:N?e.jsx(i.Chevron2LeftIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),N&&e.jsx(v.Hover,{children:"Previous 5 pages"})]},a),oe=i=>e.jsxs(v.EllipsisContainer,{children:[e.jsx(v.EllipsisButton,{focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:te,onMouseLeave:re,onFocus:te,onBlur:re,onClick:_,children:w?e.jsx(a.Chevron2RightIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),w&&e.jsx(v.Hover,{children:"Next 5 pages"})]},i);return e.jsxs(v.PaginationWrapper,{className:b,ref:E,id:x||"pagination-wrapper","data-testid":f||"pagination","aria-labelledby":A,children:[e.jsx(h.VisuallyHidden,{id:A,"aria-hidden":!0,children:"pagination"}),e.jsx(v.PaginationList,{children:e.jsxs(v.PaginationMenu,{children:[$&&e.jsx(v.NavigationButton,{onClick:G,disabled:Q,focusHighlight:!1,$position:"left","aria-label":"First page",focusOutline:"browser",children:e.jsx(r.ChevronLineLeftIcon,{"aria-hidden":!0})}),e.jsx(v.NavigationButton,{onClick:K,disabled:Q,focusHighlight:!1,$position:"left","aria-label":"Previous page",focusOutline:"browser",children:e.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),L?e.jsxs(v.PaginationMobileInput,{children:[e.jsx("form",{onSubmit:ae,children:e.jsx(v.InputView,{value:z,onChange:ie,autoComplete:"off",type:"numeric",id:(x||"pagination")+"-input","data-testid":(f||"pagination")+"-input","aria-label":`Page ${q} of ${D}`})}),e.jsx(v.LabelDivider,{children:"/"}),e.jsx(v.Label,{children:D})]}):[...Array(D)].map(((i,a)=>{const t=a+1,r=D-5,n=q===t;return D<=7?e.jsx(v.PageItem,{onClick:()=>Z(t),$selected:n,"aria-label":`page ${t} of ${D}`,"aria-current":!!n&&"page",onMouseOver:Y,onFocus:Y,children:t},t):q+1>5&&2===t?le(t):q-1<=r&&t===D-1-1?oe(t):t<=5&&q+1<=5||t<=1||t===q||t<=q+1&&t>=q-1-1||t>r&&q-1>r||t>D-1?e.jsx(v.PageItem,{onClick:()=>Z(t),$selected:n,"aria-label":`page ${t} of ${D}`,"aria-current":!!n&&"page",onMouseOver:Y,onFocus:Y,children:t},t):null})),e.jsx(v.NavigationButton,{onClick:U,disabled:T,focusHighlight:!1,$position:"right","aria-label":"Next page",focusOutline:"browser",children:e.jsx(s.ChevronRightIcon,{"aria-hidden":!0})}),$&&e.jsx(v.NavigationButton,{onClick:J,disabled:T,focusHighlight:!1,$position:"right","aria-label":"Last page",focusOutline:"browser",children:e.jsx(n.ChevronLineRightIcon,{"aria-hidden":!0})})]})}),M&&!L&&e.jsxs(v.InputSelectWrapper,{children:[e.jsx(h.VisuallyHidden,{id:`${A}-page-size`,children:"Items per page"}),e.jsx(d.InputSelect,{"aria-labelledby":`${A}-page-size`,options:I,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:F,onSelectOption:e=>{R(e);const i=e.value,a=Math.ceil(C/i);W(i);S&&S(q>=a?a:q,i)}})]})]})})),j=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];exports.Pagination=f;
+"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-2-left"),a=require("@lifesg/react-icons/chevron-2-right"),t=require("@lifesg/react-icons/chevron-left"),r=require("@lifesg/react-icons/chevron-line-left"),n=require("@lifesg/react-icons/chevron-line-right"),s=require("@lifesg/react-icons/chevron-right"),l=require("@lifesg/react-icons/ellipsis-horizontal"),o=require("react"),c=require("../external/react-responsive/dist/react-responsive.js"),u=require("styled-components"),d=require("../input-select/input-select.js"),h=require("../shared/accessibility/index.js"),p=require("../theme/index.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var g=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var f=require("./pagination.styles.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const x=v(o).default.forwardRef((({id:v,"data-testid":x,className:b,pageSize:m=10,totalItems:C,activePage:q,pageSizeOptions:I=j,showFirstAndLastNav:$,showPageSizeChanger:M=!1,variant:P="default",onPageChange:E,onPageSizeChange:S},y)=>{const H=o.useContext(u.ThemeContext),L=p.Breakpoint["sm-max"]({theme:H}),w=c.reactResponsiveExports.useMediaQuery({maxWidth:L}),O="default"===P?w?"compact":"full":P,N=M&&"full"===O,[k,z]=o.useState(!1),[B,F]=o.useState(!1),[R,V]=o.useState(""),[W,A]=o.useState(m),D=((e,i)=>{var a;return null!==(a=e.find((e=>e.value===i)))&&void 0!==a?a:e[0]})(I,W),Q=`${g.useId()}-pagination`,T=Math.ceil(C/W),G=1===q,J=q===T,K=q>1?()=>ee(1):void 0,U=q<T?()=>ee(T):void 0,X=q>1?()=>ee(q-1):void 0,Y=q<T?()=>ee(parseInt(q.toString())+1):void 0;o.useEffect((()=>{q&&Z(q)}),[q]),o.useEffect((()=>{A(m)}),[m]);const Z=e=>{V(e.toString())},_=()=>{z(!1),F(!1)},ee=e=>{E&&(E(e),Z(e))},ie=()=>{const e=Math.min(T,q+5);ee(e),Z(e),z(!0),F(!1)},ae=()=>{const e=Math.max(1,q-5);ee(e),Z(e),z(!1),F(!0)},te=e=>{const i=e.target.value;if(void 0===i||0===i.length)V("");else if(/^[0-9]+$/.test(i)){const e=parseInt(i.replace(/[^0-9]/g,""));Z(Math.max(1,Math.min(T,e)))}else V(i.replace(/[^0-9]/g,""))},re=e=>{e.preventDefault(),R&&(null==E||E(parseInt(R)))},ne=()=>{z(!0)},se=()=>{z(!1)},le=()=>{F(!0)},oe=()=>{F(!1)},ce=a=>e.jsxs(f.EllipsisContainer,{children:[e.jsx(f.EllipsisButton,{focusHighlight:!1,focusOutline:"browser","aria-label":"Previous 5 pages",onMouseEnter:le,onMouseLeave:oe,onFocus:le,onBlur:oe,onClick:ae,children:B?e.jsx(i.Chevron2LeftIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),B&&e.jsx(f.Hover,{children:"Previous 5 pages"})]},a),ue=i=>e.jsxs(f.EllipsisContainer,{children:[e.jsx(f.EllipsisButton,{focusHighlight:!1,focusOutline:"browser","aria-label":"Next 5 pages",onMouseEnter:ne,onMouseLeave:se,onFocus:ne,onBlur:se,onClick:ie,children:k?e.jsx(a.Chevron2RightIcon,{"aria-hidden":!0}):e.jsx(l.EllipsisHorizontalIcon,{"aria-hidden":!0})}),k&&e.jsx(f.Hover,{children:"Next 5 pages"})]},i);return e.jsxs(f.PaginationWrapper,{className:b,ref:y,id:v||"pagination-wrapper","data-testid":x||"pagination","aria-labelledby":Q,children:[e.jsx(h.VisuallyHidden,{id:Q,"aria-hidden":!0,children:"pagination"}),e.jsx(f.PaginationList,{children:e.jsxs(f.PaginationMenu,{children:[$&&e.jsx(f.NavigationButton,{onClick:K,disabled:G,focusHighlight:!1,$position:"left","aria-label":"First page",focusOutline:"browser",children:e.jsx(r.ChevronLineLeftIcon,{"aria-hidden":!0})}),e.jsx(f.NavigationButton,{onClick:X,disabled:G,focusHighlight:!1,$position:"left","aria-label":"Previous page",focusOutline:"browser",children:e.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),"compact"===O?e.jsxs(f.PaginationMobileInput,{children:[e.jsx("form",{onSubmit:re,children:e.jsx(f.InputView,{value:R,onChange:te,autoComplete:"off",type:"numeric",id:(v||"pagination")+"-input","data-testid":(x||"pagination")+"-input","aria-label":`Page ${q} of ${T}`})}),e.jsx(f.LabelDivider,{children:"/"}),e.jsx(f.Label,{children:T})]}):[...Array(T)].map(((i,a)=>{const t=a+1,r=T-5,n=q===t;return T<=7?e.jsx(f.PageItem,{onClick:()=>ee(t),$selected:n,"aria-label":`page ${t} of ${T}`,"aria-current":!!n&&"page",onMouseOver:_,onFocus:_,children:t},t):q+1>5&&2===t?ce(t):q-1<=r&&t===T-1-1?ue(t):t<=5&&q+1<=5||t<=1||t===q||t<=q+1&&t>=q-1-1||t>r&&q-1>r||t>T-1?e.jsx(f.PageItem,{onClick:()=>ee(t),$selected:n,"aria-label":`page ${t} of ${T}`,"aria-current":!!n&&"page",onMouseOver:_,onFocus:_,children:t},t):null})),e.jsx(f.NavigationButton,{onClick:Y,disabled:J,focusHighlight:!1,$position:"right","aria-label":"Next page",focusOutline:"browser",children:e.jsx(s.ChevronRightIcon,{"aria-hidden":!0})}),$&&e.jsx(f.NavigationButton,{onClick:U,disabled:J,focusHighlight:!1,$position:"right","aria-label":"Last page",focusOutline:"browser",children:e.jsx(n.ChevronLineRightIcon,{"aria-hidden":!0})})]})}),N&&e.jsxs(f.InputSelectWrapper,{children:[e.jsx(h.VisuallyHidden,{id:`${Q}-page-size`,children:"Items per page"}),e.jsx(d.InputSelect,{"aria-labelledby":`${Q}-page-size`,options:I,valueExtractor:e=>e.value,listExtractor:e=>e.label,displayValueExtractor:e=>e.label,selectedOption:D,onSelectOption:e=>{const i=e.value,a=Math.ceil(C/i);A(i);S&&S(q>=a?a:q,i)}})]})]})})),j=[{value:10,label:"10 per page"},{value:20,label:"20 per page"},{value:30,label:"30 per page"}];exports.Pagination=x;
 //# sourceMappingURL=pagination.js.map

package/cjs/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../src/pagination/pagination.tsx"],"sourcesContent":["import { Chevron2LeftIcon } from \"@lifesg/react-icons/chevron-2-left\";\nimport { Chevron2RightIcon } from \"@lifesg/react-icons/chevron-2-right\";\nimport { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronLineLeftIcon } from \"@lifesg/react-icons/chevron-line-left\";\nimport { ChevronLineRightIcon } from \"@lifesg/react-icons/chevron-line-right\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { EllipsisHorizontalIcon } from \"@lifesg/react-icons/ellipsis-horizontal\";\nimport React, { useContext, useEffect, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Breakpoint } from \"../theme\";\nimport { useId } from \"../util\";\nimport {\n    EllipsisButton,\n    EllipsisContainer,\n    Hover,\n    InputSelectWrapper,\n    InputView,\n    Label,\n    LabelDivider,\n    NavigationButton,\n    PageItem,\n    PaginationList,\n    PaginationMenu,\n    PaginationMobileInput,\n    PaginationWrapper,\n} from \"./pagination.styles\";\nimport { PageSizeItemProps, PaginationProps } from \"./types\";\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        pageSize = 10,\n        totalItems,\n        activePage,\n        pageSizeOptions = DEFAULT_OPTIONS,\n        showFirstAndLastNav,\n        showPageSizeChanger = false,\n        onPageChange,\n        onPageSizeChange,\n    }: PaginationProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"sm-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n\n    const [selectedOption, setSelectedOption] = useState<\n        PageSizeItemProps | undefined\n    >(pageSizeOptions[0]);\n    const [pageSizeLocal, setPageSize] = useState<number>(\n        !isMobile && showPageSizeChanger\n            ? selectedOption\n                ? selectedOption.value\n                : pageSize\n            : pageSize\n    );\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useId();\n    const paginationId = `${internalId}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n        setSelectedOption(\n            pageSizeOptions.find((option) => option.value === pageSize)\n        );\n    }, [pageSize]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const setInputValue = (value: number) => {\n        setInputText(value.toString());\n    };\n\n    const closeAllTooltips = () => {\n        setHoverRightButton(false);\n        setHoverLeftButton(false);\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handlePaginationItemClick = (pageIndex: number) => {\n        if (onPageChange) {\n            onPageChange(pageIndex);\n            setInputValue(pageIndex);\n        }\n    };\n\n    const handleFastForwardClick = () => {\n        const currentIndex = Math.min(totalPages, activePage + 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(true);\n        setHoverLeftButton(false);\n    };\n\n    const handleFastBackwardClick = () => {\n        const currentIndex = Math.max(1, activePage - 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(false);\n        setHoverLeftButton(true);\n    };\n\n    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n        const numericRegex = /^[0-9]+$/;\n        if (value === undefined || value.length === 0) {\n            setInputText(\"\");\n        } else if (!numericRegex.test(value)) {\n            setInputText(value.replace(/[^0-9]/g, \"\"));\n        } else {\n            const newPage = parseInt(value.replace(/[^0-9]/g, \"\"));\n            setInputValue(Math.max(1, Math.min(totalPages, newPage)));\n        }\n    };\n\n    const handleInputSubmit = (event: React.FormEvent) => {\n        event.preventDefault();\n        if (inputText) {\n            onPageChange?.(parseInt(inputText));\n        }\n    };\n\n    const onHoverRightButton = () => {\n        setHoverRightButton(true);\n    };\n\n    const onBlurRightButton = () => {\n        setHoverRightButton(false);\n    };\n\n    const onHoverLeftButton = () => {\n        setHoverLeftButton(true);\n    };\n\n    const onBlurLeftButton = () => {\n        setHoverLeftButton(false);\n    };\n\n    const handleListItemClick = (item: PageSizeItemProps) => {\n        setSelectedOption(item);\n        const pagesize = item.value;\n        const totalPage = Math.ceil(totalItems / pagesize);\n\n        setPageSize(pagesize);\n\n        const page = activePage >= totalPage ? totalPage : activePage;\n\n        if (onPageSizeChange) {\n            onPageSizeChange(page, pagesize);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPaginationItems = () => {\n        return [...Array(totalPages)].map((e, i) => {\n            const pageIndex = i + 1;\n            const startRange = boundaryRange + 2 + siblingRange * 2;\n            const endRange = totalPages - startRange;\n            const totalRange = (boundaryRange + siblingRange) * 2 + 3;\n            const active = activePage === pageIndex;\n            if (totalPages <= totalRange) {\n                return (\n                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\n                );\n            }\n\n            const ellipsisStart =\n                activePage + siblingRange > startRange &&\n                pageIndex === boundaryRange + 1;\n            if (ellipsisStart) {\n                return renderStartEllipsis(pageIndex);\n            }\n\n            const ellipsisEnd =\n                activePage - siblingRange <= endRange &&\n                pageIndex === totalPages - boundaryRange - 1;\n            if (ellipsisEnd) {\n                return renderEndEllipsis(pageIndex);\n            }\n\n            const paginationStart =\n                (pageIndex <= startRange &&\n                    activePage + siblingRange <= startRange) ||\n                pageIndex <= boundaryRange;\n            const paginationMiddle =\n                pageIndex === activePage ||\n                (pageIndex <= activePage + siblingRange &&\n                    pageIndex >= activePage - siblingRange - 1);\n            const paginationEnd =\n                (pageIndex > endRange &&\n                    activePage - siblingRange > endRange) ||\n                pageIndex > totalPages - boundaryRange;\n            if (paginationStart || paginationMiddle || paginationEnd) {\n                return (\n                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Previous 5 pages\"}\n                onMouseEnter={onHoverLeftButton}\n                onMouseLeave={onBlurLeftButton}\n                onFocus={onHoverLeftButton}\n                onBlur={onBlurLeftButton}\n                onClick={handleFastBackwardClick}\n            >\n                {hoverLeftButton ? (\n                    <Chevron2LeftIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </EllipsisButton>\n            {hoverLeftButton && <Hover>Previous 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Next 5 pages\"}\n                onMouseEnter={onHoverRightButton}\n                onMouseLeave={onBlurRightButton}\n                onFocus={onHoverRightButton}\n                onBlur={onBlurRightButton}\n                onClick={handleFastForwardClick}\n            >\n                {hoverRightButton ? (\n                    <Chevron2RightIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </EllipsisButton>\n            {hoverRightButton && <Hover>Next 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderMobile = () => (\n        <PaginationMobileInput>\n            <form onSubmit={handleInputSubmit}>\n                <InputView\n                    value={inputText}\n                    onChange={handleInput}\n                    autoComplete=\"off\"\n                    type=\"numeric\"\n                    id={(id || \"pagination\") + \"-input\"}\n                    data-testid={(dataTestId || \"pagination\") + \"-input\"}\n                    aria-label={`Page ${activePage} of ${totalPages}`}\n                />\n            </form>\n            <LabelDivider>/</LabelDivider>\n            <Label>{totalPages}</Label>\n        </PaginationMobileInput>\n    );\n\n    return (\n        <PaginationWrapper\n            className={className}\n            ref={ref}\n            id={id || \"pagination-wrapper\"}\n            data-testid={dataTestId || \"pagination\"}\n            aria-labelledby={paginationId}\n        >\n            <VisuallyHidden id={paginationId} aria-hidden>\n                pagination\n            </VisuallyHidden>\n            <PaginationList>\n                <PaginationMenu>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            $position=\"left\"\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                    <NavigationButton\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        $position=\"left\"\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </NavigationButton>\n                    {isMobile ? renderMobile() : renderPaginationItems()}\n                    <NavigationButton\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        $position=\"right\"\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </NavigationButton>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            $position=\"right\"\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                </PaginationMenu>\n            </PaginationList>\n            {showPageSizeChanger && !isMobile && (\n                <InputSelectWrapper>\n                    <VisuallyHidden id={`${paginationId}-page-size`}>\n                        Items per page\n                    </VisuallyHidden>\n                    <InputSelect\n                        aria-labelledby={`${paginationId}-page-size`}\n                        options={pageSizeOptions}\n                        valueExtractor={(item) => item.value}\n                        listExtractor={(item) => item.label}\n                        displayValueExtractor={(item) => item.label}\n                        selectedOption={selectedOption}\n                        onSelectOption={handleListItemClick}\n                    />\n                </InputSelectWrapper>\n            )}\n        </PaginationWrapper>\n    );\n};\nexport const Pagination = React.forwardRef(Component);\n\nconst DEFAULT_OPTIONS: PageSizeItemProps[] = [\n    { value: 10, label: \"10 per page\" },\n    { value: 20, label: \"20 per page\" },\n    { value: 30, label: \"30 per page\" },\n];\n"],"names":["Pagination","React","forwardRef","id","dataTestId","className","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","onPageChange","onPageSizeChange","ref","theme","useContext","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","selectedOption","setSelectedOption","pageSizeLocal","setPageSize","value","paginationId","useId","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","find","option","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","EllipsisContainer","children","_jsx","EllipsisButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","Hover","renderEndEllipsis","Chevron2RightIcon","PaginationWrapper","VisuallyHidden","PaginationList","PaginationMenu","NavigationButton","disabled","$position","ChevronLineLeftIcon","ChevronLeftIcon","PaginationMobileInput","onSubmit","InputView","onChange","autoComplete","type","LabelDivider","Label","Array","map","e","i","endRange","boundaryRange","active","PageItem","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","InputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../src/pagination/pagination.tsx"],"sourcesContent":["import { Chevron2LeftIcon } from \"@lifesg/react-icons/chevron-2-left\";\nimport { Chevron2RightIcon } from \"@lifesg/react-icons/chevron-2-right\";\nimport { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronLineLeftIcon } from \"@lifesg/react-icons/chevron-line-left\";\nimport { ChevronLineRightIcon } from \"@lifesg/react-icons/chevron-line-right\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { EllipsisHorizontalIcon } from \"@lifesg/react-icons/ellipsis-horizontal\";\nimport React, { useContext, useEffect, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\nimport { InputSelect } from \"../input-select\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Breakpoint } from \"../theme\";\nimport { useId } from \"../util\";\nimport {\n    EllipsisButton,\n    EllipsisContainer,\n    Hover,\n    InputSelectWrapper,\n    InputView,\n    Label,\n    LabelDivider,\n    NavigationButton,\n    PageItem,\n    PaginationList,\n    PaginationMenu,\n    PaginationMobileInput,\n    PaginationWrapper,\n} from \"./pagination.styles\";\nimport { PageSizeItemProps, PaginationProps } from \"./types\";\n\nconst getPageSizeOption = (\n    pageSizeOptions: PageSizeItemProps[],\n    value: number\n) =>\n    pageSizeOptions.find((option) => option.value === value) ??\n    pageSizeOptions[0];\n\nconst Component = (\n    {\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        pageSize = 10,\n        totalItems,\n        activePage,\n        pageSizeOptions = DEFAULT_OPTIONS,\n        showFirstAndLastNav,\n        showPageSizeChanger = false,\n        variant = \"default\",\n        onPageChange,\n        onPageSizeChange,\n    }: PaginationProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = Breakpoint[\"sm-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n    const resolvedVariant =\n        variant === \"default\" ? (isMobile ? \"compact\" : \"full\") : variant;\n    const usesPageSizeChanger =\n        showPageSizeChanger && resolvedVariant === \"full\";\n\n    const [hoverRightButton, setHoverRightButton] = useState(false);\n    const [hoverLeftButton, setHoverLeftButton] = useState(false);\n    const [inputText, setInputText] = useState<string>(\"\");\n\n    const [pageSizeLocal, setPageSize] = useState<number>(pageSize);\n    const selectedOption = getPageSizeOption(pageSizeOptions, pageSizeLocal);\n\n    const boundaryRange = 1;\n    const siblingRange = 1;\n\n    const internalId = useId();\n    const paginationId = `${internalId}-pagination`;\n\n    const totalPages = Math.ceil(totalItems / pageSizeLocal);\n    const isFirstPage = activePage === 1;\n    const isLastPage = activePage === totalPages;\n\n    const firstPaginationItem =\n        activePage > 1 ? () => handlePaginationItemClick(1) : undefined;\n    const lastPaginationItem =\n        activePage < totalPages\n            ? () => handlePaginationItemClick(totalPages)\n            : undefined;\n    const prevPaginationItem =\n        activePage > 1\n            ? () => handlePaginationItemClick(activePage - 1)\n            : undefined;\n    const nextPaginationItem =\n        activePage < totalPages\n            ? () =>\n                  handlePaginationItemClick(parseInt(activePage.toString()) + 1)\n            : undefined;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (activePage) {\n            setInputValue(activePage);\n        }\n    }, [activePage]);\n\n    useEffect(() => {\n        setPageSize(pageSize);\n    }, [pageSize]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const setInputValue = (value: number) => {\n        setInputText(value.toString());\n    };\n\n    const closeAllTooltips = () => {\n        setHoverRightButton(false);\n        setHoverLeftButton(false);\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handlePaginationItemClick = (pageIndex: number) => {\n        if (onPageChange) {\n            onPageChange(pageIndex);\n            setInputValue(pageIndex);\n        }\n    };\n\n    const handleFastForwardClick = () => {\n        const currentIndex = Math.min(totalPages, activePage + 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(true);\n        setHoverLeftButton(false);\n    };\n\n    const handleFastBackwardClick = () => {\n        const currentIndex = Math.max(1, activePage - 5);\n        handlePaginationItemClick(currentIndex);\n        setInputValue(currentIndex);\n        setHoverRightButton(false);\n        setHoverLeftButton(true);\n    };\n\n    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n        const numericRegex = /^[0-9]+$/;\n        if (value === undefined || value.length === 0) {\n            setInputText(\"\");\n        } else if (!numericRegex.test(value)) {\n            setInputText(value.replace(/[^0-9]/g, \"\"));\n        } else {\n            const newPage = parseInt(value.replace(/[^0-9]/g, \"\"));\n            setInputValue(Math.max(1, Math.min(totalPages, newPage)));\n        }\n    };\n\n    const handleInputSubmit = (event: React.FormEvent) => {\n        event.preventDefault();\n        if (inputText) {\n            onPageChange?.(parseInt(inputText));\n        }\n    };\n\n    const onHoverRightButton = () => {\n        setHoverRightButton(true);\n    };\n\n    const onBlurRightButton = () => {\n        setHoverRightButton(false);\n    };\n\n    const onHoverLeftButton = () => {\n        setHoverLeftButton(true);\n    };\n\n    const onBlurLeftButton = () => {\n        setHoverLeftButton(false);\n    };\n\n    const handleListItemClick = (item: PageSizeItemProps) => {\n        const pagesize = item.value;\n        const totalPage = Math.ceil(totalItems / pagesize);\n\n        setPageSize(pagesize);\n\n        const page = activePage >= totalPage ? totalPage : activePage;\n\n        if (onPageSizeChange) {\n            onPageSizeChange(page, pagesize);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPaginationItems = () => {\n        return [...Array(totalPages)].map((e, i) => {\n            const pageIndex = i + 1;\n            const startRange = boundaryRange + 2 + siblingRange * 2;\n            const endRange = totalPages - startRange;\n            const totalRange = (boundaryRange + siblingRange) * 2 + 3;\n            const active = activePage === pageIndex;\n            if (totalPages <= totalRange) {\n                return (\n                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\n                );\n            }\n\n            const ellipsisStart =\n                activePage + siblingRange > startRange &&\n                pageIndex === boundaryRange + 1;\n            if (ellipsisStart) {\n                return renderStartEllipsis(pageIndex);\n            }\n\n            const ellipsisEnd =\n                activePage - siblingRange <= endRange &&\n                pageIndex === totalPages - boundaryRange - 1;\n            if (ellipsisEnd) {\n                return renderEndEllipsis(pageIndex);\n            }\n\n            const paginationStart =\n                (pageIndex <= startRange &&\n                    activePage + siblingRange <= startRange) ||\n                pageIndex <= boundaryRange;\n            const paginationMiddle =\n                pageIndex === activePage ||\n                (pageIndex <= activePage + siblingRange &&\n                    pageIndex >= activePage - siblingRange - 1);\n            const paginationEnd =\n                (pageIndex > endRange &&\n                    activePage - siblingRange > endRange) ||\n                pageIndex > totalPages - boundaryRange;\n            if (paginationStart || paginationMiddle || paginationEnd) {\n                return (\n                    <PageItem\n                        key={pageIndex}\n                        onClick={() => handlePaginationItemClick(pageIndex)}\n                        $selected={active}\n                        aria-label={`page ${pageIndex} of ${totalPages}`}\n                        aria-current={active ? \"page\" : false}\n                        onMouseOver={closeAllTooltips}\n                        onFocus={closeAllTooltips}\n                    >\n                        {pageIndex}\n                    </PageItem>\n                );\n            }\n\n            return null;\n        });\n    };\n\n    const renderStartEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Previous 5 pages\"}\n                onMouseEnter={onHoverLeftButton}\n                onMouseLeave={onBlurLeftButton}\n                onFocus={onHoverLeftButton}\n                onBlur={onBlurLeftButton}\n                onClick={handleFastBackwardClick}\n            >\n                {hoverLeftButton ? (\n                    <Chevron2LeftIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </EllipsisButton>\n            {hoverLeftButton && <Hover>Previous 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderEndEllipsis = (pageIndex: number) => (\n        <EllipsisContainer key={pageIndex}>\n            <EllipsisButton\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                aria-label={\"Next 5 pages\"}\n                onMouseEnter={onHoverRightButton}\n                onMouseLeave={onBlurRightButton}\n                onFocus={onHoverRightButton}\n                onBlur={onBlurRightButton}\n                onClick={handleFastForwardClick}\n            >\n                {hoverRightButton ? (\n                    <Chevron2RightIcon aria-hidden />\n                ) : (\n                    <EllipsisHorizontalIcon aria-hidden />\n                )}\n            </EllipsisButton>\n            {hoverRightButton && <Hover>Next 5 pages</Hover>}\n        </EllipsisContainer>\n    );\n\n    const renderMobile = () => (\n        <PaginationMobileInput>\n            <form onSubmit={handleInputSubmit}>\n                <InputView\n                    value={inputText}\n                    onChange={handleInput}\n                    autoComplete=\"off\"\n                    type=\"numeric\"\n                    id={(id || \"pagination\") + \"-input\"}\n                    data-testid={(dataTestId || \"pagination\") + \"-input\"}\n                    aria-label={`Page ${activePage} of ${totalPages}`}\n                />\n            </form>\n            <LabelDivider>/</LabelDivider>\n            <Label>{totalPages}</Label>\n        </PaginationMobileInput>\n    );\n\n    return (\n        <PaginationWrapper\n            className={className}\n            ref={ref}\n            id={id || \"pagination-wrapper\"}\n            data-testid={dataTestId || \"pagination\"}\n            aria-labelledby={paginationId}\n        >\n            <VisuallyHidden id={paginationId} aria-hidden>\n                pagination\n            </VisuallyHidden>\n            <PaginationList>\n                <PaginationMenu>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={firstPaginationItem}\n                            disabled={isFirstPage}\n                            focusHighlight={false}\n                            $position=\"left\"\n                            aria-label=\"First page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineLeftIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                    <NavigationButton\n                        onClick={prevPaginationItem}\n                        disabled={isFirstPage}\n                        focusHighlight={false}\n                        $position=\"left\"\n                        aria-label=\"Previous page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronLeftIcon aria-hidden />\n                    </NavigationButton>\n                    {resolvedVariant === \"compact\"\n                        ? renderMobile()\n                        : renderPaginationItems()}\n                    <NavigationButton\n                        onClick={nextPaginationItem}\n                        disabled={isLastPage}\n                        focusHighlight={false}\n                        $position=\"right\"\n                        aria-label=\"Next page\"\n                        focusOutline=\"browser\"\n                    >\n                        <ChevronRightIcon aria-hidden />\n                    </NavigationButton>\n                    {showFirstAndLastNav && (\n                        <NavigationButton\n                            onClick={lastPaginationItem}\n                            disabled={isLastPage}\n                            focusHighlight={false}\n                            $position=\"right\"\n                            aria-label=\"Last page\"\n                            focusOutline=\"browser\"\n                        >\n                            <ChevronLineRightIcon aria-hidden />\n                        </NavigationButton>\n                    )}\n                </PaginationMenu>\n            </PaginationList>\n            {usesPageSizeChanger && (\n                <InputSelectWrapper>\n                    <VisuallyHidden id={`${paginationId}-page-size`}>\n                        Items per page\n                    </VisuallyHidden>\n                    <InputSelect\n                        aria-labelledby={`${paginationId}-page-size`}\n                        options={pageSizeOptions}\n                        valueExtractor={(item) => item.value}\n                        listExtractor={(item) => item.label}\n                        displayValueExtractor={(item) => item.label}\n                        selectedOption={selectedOption}\n                        onSelectOption={handleListItemClick}\n                    />\n                </InputSelectWrapper>\n            )}\n        </PaginationWrapper>\n    );\n};\nexport const Pagination = React.forwardRef(Component);\n\nconst DEFAULT_OPTIONS: PageSizeItemProps[] = [\n    { value: 10, label: \"10 per page\" },\n    { value: 20, label: \"20 per page\" },\n    { value: 30, label: \"30 per page\" },\n];\n"],"names":["Pagination","React","forwardRef","id","dataTestId","className","pageSize","totalItems","activePage","pageSizeOptions","DEFAULT_OPTIONS","showFirstAndLastNav","showPageSizeChanger","variant","onPageChange","onPageSizeChange","ref","theme","useContext","ThemeContext","mobileBreakpoint","Breakpoint","isMobile","useMediaQuery","maxWidth","resolvedVariant","usesPageSizeChanger","hoverRightButton","setHoverRightButton","useState","hoverLeftButton","setHoverLeftButton","inputText","setInputText","pageSizeLocal","setPageSize","selectedOption","value","_a","find","option","getPageSizeOption","paginationId","useId","totalPages","Math","ceil","isFirstPage","isLastPage","firstPaginationItem","handlePaginationItemClick","undefined","lastPaginationItem","prevPaginationItem","nextPaginationItem","parseInt","toString","useEffect","setInputValue","closeAllTooltips","pageIndex","handleFastForwardClick","currentIndex","min","handleFastBackwardClick","max","handleInput","event","target","length","test","newPage","replace","handleInputSubmit","preventDefault","onHoverRightButton","onBlurRightButton","onHoverLeftButton","onBlurLeftButton","renderStartEllipsis","_jsxs","EllipsisContainer","children","_jsx","EllipsisButton","focusHighlight","focusOutline","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","Chevron2LeftIcon","EllipsisHorizontalIcon","Hover","renderEndEllipsis","Chevron2RightIcon","PaginationWrapper","VisuallyHidden","PaginationList","PaginationMenu","NavigationButton","disabled","$position","ChevronLineLeftIcon","ChevronLeftIcon","PaginationMobileInput","onSubmit","InputView","onChange","autoComplete","type","LabelDivider","Label","Array","map","e","i","endRange","boundaryRange","active","PageItem","onMouseOver","ChevronRightIcon","ChevronLineRightIcon","InputSelectWrapper","InputSelect","options","valueExtractor","item","listExtractor","label","displayValueExtractor","onSelectOption","pagesize","totalPage"],"mappings":"m9BA+BA,MAmYaA,OAAaC,QAAMC,YA5Xd,EAEVC,KACA,cAAeC,EACfC,YACAC,WAAW,GACXC,aACAC,aACAC,kBAAkBC,EAClBC,sBACAC,uBAAsB,EACtBC,UAAU,UACVC,eACAC,oBAEJC,KAMA,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,WAAW,UAAU,CAAEJ,UAE1CK,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUJ,IAERK,EACU,YAAZZ,EAAyBS,EAAW,UAAY,OAAUT,EACxDa,EACFd,GAA2C,SAApBa,GAEpBE,EAAkBC,GAAuBC,EAAAA,UAAS,IAClDC,EAAiBC,GAAsBF,EAAAA,UAAS,IAChDG,EAAWC,GAAgBJ,EAAAA,SAAiB,KAE5CK,EAAeC,GAAeN,EAAAA,SAAiBvB,GAChD8B,EA5CgB,EACtB3B,EACA4B,WAEA,eAAAC,EAAA7B,EAAgB8B,MAAMC,GAAWA,EAAOH,QAAUA,mBAClD5B,EAAgB,EAAE,EAuCKgC,CAAkBhC,EAAiByB,GAMpDQ,EAAe,GADFC,EAAAA,qBAGbC,EAAaC,KAAKC,KAAKvC,EAAa2B,GACpCa,EAA6B,IAAfvC,EACdwC,EAAaxC,IAAeoC,EAE5BK,EACFzC,EAAa,EAAI,IAAM0C,GAA0B,QAAKC,EACpDC,EACF5C,EAAaoC,EACP,IAAMM,GAA0BN,QAChCO,EACJE,EACF7C,EAAa,EACP,IAAM0C,GAA0B1C,EAAa,QAC7C2C,EACJG,EACF9C,EAAaoC,EACP,IACIM,GAA0BK,SAAS/C,EAAWgD,YAAc,QAChEL,EAKVM,EAAAA,WAAU,KACFjD,GACAkD,EAAclD,EAClB,GACD,CAACA,IAEJiD,EAAAA,WAAU,KACNtB,EAAY7B,EAAS,GACtB,CAACA,IAKJ,MAAMoD,EAAiBrB,IACnBJ,EAAaI,EAAMmB,WAAW,EAG5BG,EAAmB,KACrB/B,GAAoB,GACpBG,GAAmB,EAAM,EAMvBmB,GAA6BU,IAC3B9C,IACAA,EAAa8C,GACbF,EAAcE,GAClB,EAGEC,GAAyB,KAC3B,MAAMC,EAAejB,KAAKkB,IAAInB,EAAYpC,EAAa,GACvD0C,GAA0BY,GAC1BJ,EAAcI,GACdlC,GAAoB,GACpBG,GAAmB,EAAM,EAGvBiC,GAA0B,KAC5B,MAAMF,EAAejB,KAAKoB,IAAI,EAAGzD,EAAa,GAC9C0C,GAA0BY,GAC1BJ,EAAcI,GACdlC,GAAoB,GACpBG,GAAmB,EAAK,EAGtBmC,GAAeC,IACjB,MAAM9B,EAAQ8B,EAAMC,OAAO/B,MAE3B,QAAcc,IAAVd,GAAwC,IAAjBA,EAAMgC,OAC7BpC,EAAa,SACV,GAHc,WAGIqC,KAAKjC,GAEvB,CACH,MAAMkC,EAAUhB,SAASlB,EAAMmC,QAAQ,UAAW,KAClDd,EAAcb,KAAKoB,IAAI,EAAGpB,KAAKkB,IAAInB,EAAY2B,IACnD,MAJItC,EAAaI,EAAMmC,QAAQ,UAAW,IAI1C,EAGEC,GAAqBN,IACvBA,EAAMO,iBACF1C,IACAlB,SAAAA,EAAeyC,SAASvB,IAC5B,EAGE2C,GAAqB,KACvB/C,GAAoB,EAAK,EAGvBgD,GAAoB,KACtBhD,GAAoB,EAAM,EAGxBiD,GAAoB,KACtB9C,GAAmB,EAAK,EAGtB+C,GAAmB,KACrB/C,GAAmB,EAAM,EAwFvBgD,GAAuBnB,GACzBoB,EAAAA,KAACC,EAAAA,kBAAiB,CAAAC,SAAA,CACdC,EAAAA,IAACC,iBAAc,CACXC,gBAAgB,EAChBC,aAAa,UAAS,aACV,mBACZC,aAAcV,GACdW,aAAcV,GACdW,QAASZ,GACTa,OAAQZ,GACRa,QAAS3B,GAAuBkB,SAE/BpD,EACGqD,EAAAA,IAACS,mBAAgB,CAAA,eAAA,IAEjBT,MAACU,EAAAA,uBAAsB,CAAA,eAAA,MAG9B/D,GAAmBqD,EAAAA,IAACW,EAAAA,MAAK,CAAAZ,SAAA,uBAjBNtB,GAqBtBmC,GAAqBnC,GACvBoB,EAAAA,KAACC,EAAAA,kBAAiB,CAAAC,SAAA,CACdC,EAAAA,IAACC,iBAAc,CACXC,gBAAgB,EAChBC,aAAa,UAAS,aACV,eACZC,aAAcZ,GACda,aAAcZ,GACda,QAASd,GACTe,OAAQd,GACRe,QAAS9B,GAAsBqB,SAE9BvD,EACGwD,EAAAA,IAACa,oBAAiB,CAAA,eAAA,IAElBb,MAACU,EAAAA,uBAAsB,CAAA,eAAA,MAG9BlE,GAAoBwD,EAAAA,IAACW,EAAAA,MAAK,CAAAZ,SAAA,mBAjBPtB,GAuC5B,OACIoB,EAAAA,KAACiB,EAAAA,kBAAiB,CACd5F,UAAWA,EACXW,IAAKA,EACLb,GAAIA,GAAM,mCACGC,GAAc,aAAY,kBACtBsC,EAAYwC,SAAA,CAE7BC,EAAAA,IAACe,iBAAc,CAAC/F,GAAIuC,2CAGpByC,EAAAA,IAACgB,EAAAA,eAAc,CAAAjB,SACXF,EAAAA,KAACoB,EAAAA,0BACIzF,GACGwE,EAAAA,IAACkB,EAAAA,kBACGV,QAAS1C,EACTqD,SAAUvD,EACVsC,gBAAgB,EAAKkB,UACX,OAAM,aACL,aACXjB,aAAa,mBAEbH,EAAAA,IAACqB,EAAAA,0CAGTrB,MAACkB,EAAAA,iBAAgB,CACbV,QAAStC,EACTiD,SAAUvD,EACVsC,gBAAgB,EAAKkB,UACX,OAAM,aACL,gBACXjB,aAAa,mBAEbH,EAAAA,IAACsB,wCAEgB,YAApBhF,EApDbuD,OAAC0B,EAAAA,sBAAqB,CAAAxB,SAAA,CAClBC,EAAAA,IAAA,OAAA,CAAMwB,SAAUlC,YACZU,EAAAA,IAACyB,EAAAA,UAAS,CACNvE,MAAOL,EACP6E,SAAU3C,GACV4C,aAAa,MACbC,KAAK,UACL5G,IAAKA,GAAM,cAAgB,SAAQ,eACrBC,GAAc,cAAgB,sBAChC,QAAQI,QAAiBoC,QAG7CuC,EAAAA,IAAC6B,eAAY,CAAA9B,SAAA,MACbC,EAAAA,IAAC8B,EAAAA,MAAK,CAAA/B,SAAEtC,OA9HL,IAAIsE,MAAMtE,IAAauE,KAAI,CAACC,EAAGC,KAClC,MAAMzD,EAAYyD,EAAI,EAEhBC,EAAW1E,EADE2E,EAGbC,EAAShH,IAAeoD,EAC9B,OAAIhB,GAFe,EAIXuC,EAAAA,IAACsC,EAAAA,SAAQ,CAEL9B,QAAS,IAAMzC,GAA0BU,aAC9B4D,EAAM,aACL,QAAQ5D,QAAgBhB,IAAY,iBAClC4E,GAAS,OACvBE,YAAa/D,EACb8B,QAAS9B,EAAgBuB,SAExBtB,GARIA,GAcbpD,EAxJS,EAmIM+G,GAsBDA,IAAd3D,EAEOmB,GAAoBnB,GAI3BpD,EA/JS,GA+JoB8G,GAC7B1D,IAAchB,EAjKJ,EAiKiC,EAEpCmD,GAAkBnC,GAIxBA,GAnCc2D,GAoCX/G,EAvKK,GAmIM+G,GAqCf3D,GAzKU,GA2KVA,IAAcpD,GACboD,GAAapD,EA3KL,GA4KLoD,GAAapD,EA5KR,EA4KoC,GAE5CoD,EAAY0D,GACT9G,EA/KK,EA+KuB8G,GAChC1D,EAAYhB,EAjLF,EAoLNuC,EAAAA,IAACsC,EAAAA,SAAQ,CAEL9B,QAAS,IAAMzC,GAA0BU,aAC9B4D,EAAM,aACL,QAAQ5D,QAAgBhB,IAAY,iBAClC4E,GAAS,OACvBE,YAAa/D,EACb8B,QAAS9B,EAAgBuB,SAExBtB,GARIA,GAaV,IAAI,IAwGHuB,EAAAA,IAACkB,EAAAA,iBAAgB,CACbV,QAASrC,EACTgD,SAAUtD,EACVqC,gBAAgB,EAAKkB,UACX,QAAO,aACN,YACXjB,aAAa,UAASJ,SAEtBC,MAACwC,EAAAA,iBAAgB,CAAA,eAAA,MAEpBhH,GACGwE,MAACkB,EAAAA,iBAAgB,CACbV,QAASvC,EACTkD,SAAUtD,EACVqC,gBAAgB,EAAKkB,UACX,QAAO,aACN,YACXjB,aAAa,mBAEbH,EAAAA,IAACyC,uBAAoB,CAAA,eAAA,WAKpClG,GACGsD,EAAAA,KAAC6C,qBAAkB,CAAA3C,SAAA,CACfC,MAACe,EAAAA,eAAc,CAAC/F,GAAI,GAAGuC,cAAwBwC,SAAA,mBAG/CC,EAAAA,IAAC2C,EAAAA,YAAW,CAAA,kBACS,GAAGpF,cACpBqF,QAAStH,EACTuH,eAAiBC,GAASA,EAAK5F,MAC/B6F,cAAgBD,GAASA,EAAKE,MAC9BC,sBAAwBH,GAASA,EAAKE,MACtC/F,eAAgBA,EAChBiG,eA7NSJ,IACzB,MAAMK,EAAWL,EAAK5F,MAChBkG,EAAY1F,KAAKC,KAAKvC,EAAa+H,GAEzCnG,EAAYmG,GAIRvH,GACAA,EAHSP,GAAc+H,EAAYA,EAAY/H,EAGxB8H,EAC3B,SAuNoB,IAKtB5H,EAAuC,CACzC,CAAE2B,MAAO,GAAI8F,MAAO,eACpB,CAAE9F,MAAO,GAAI8F,MAAO,eACpB,CAAE9F,MAAO,GAAI8F,MAAO"}

package/cjs/shared/dropdown-list/dropdown-label.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("../../external/react-resize-detector/build/index.esm.js"),t=require("styled-components"),n=require("../../theme/index.js"),s=require("../../util/string-helper.js"),a=require("./dropdown-label.styles.js");exports.DropdownLabel=({bold:l,displayType:d="inline",label:c,searchTerm:o,maxLines:u=2,selected:m,disabled:x,sublabel:h,truncationType:b="middle",variant:p="default"})=>{const y=r.useContext(t.ThemeContext),$="small"===p?n.Font.Spec["body-size-md"]({theme:y}):n.Font.Spec["body-size-baseline"]({theme:y}),T=n.Font.Spec["font-family"]({theme:y}),{ref:j,width:L}=i.useResizeDetector(),f=r.useCallback((e=>{if("inline"!==d||!L)return!1;return s.StringHelper.getTextWidth(e,`${$} '${T}'`)>L*u-50}),[L,d,$,T,u]),q=r.useMemo((()=>f(c)),[f,c]),g=r.useMemo((()=>h&&f(h)),[f,h]),F=q||g?"next-line":d,S=r=>{if(!o)return r;const i=o.toLowerCase().trim(),t=r.toLowerCase().indexOf(i),n=t+o.length;return-1===t?r:e.jsxs(e.Fragment,{children:[c.slice(0,t),e.jsx(a.MatchedText,{$variant:p,children:c.slice(t,n)}),c.slice(n)]})},w=r=>e.jsxs(e.Fragment,{children:[e.jsx(a.TruncateFirstLine,{$maxLines:u,"aria-hidden":!0,children:S(r)}),e.jsx(a.TruncateSecondLine,{$maxLines:u,"aria-hidden":!0,children:S(r)})]});return e.jsxs(a.Label,{ref:j,$labelDisplayType:F,$variant:p,children:[e.jsx(a.PrimaryText,{"aria-label":c,$bold:l,$maxLines:u,$selected:m,$disabled:x,$truncateType:b,children:"middle"===b&&q?w(c):S(c)}),h&&e.jsx(a.SecondaryText,{"aria-label":h,$maxLines:u,$truncateType:b,$labelDisplayType:d,children:"middle"===b&&g?w(h):h})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("../../external/react-resize-detector/build/index.esm.js"),t=require("styled-components"),n=require("../../theme/index.js"),s=require("../../util/string-helper.js"),a=require("./dropdown-label.styles.js");exports.DropdownLabel=({bold:l,displayType:d="inline",label:c,searchTerm:o,maxLines:u=2,selected:m,disabled:x,sublabel:h,truncationType:b="middle",variant:p="default"})=>{const y=r.useContext(t.ThemeContext),$="small"===p?n.Font.Spec["body-size-md"]({theme:y}):n.Font.Spec["body-size-baseline"]({theme:y}),T=n.Font.Spec["font-family"]({theme:y}),{ref:j,width:L}=i.useResizeDetector(),f="none"===b,q=r.useCallback((e=>{if(f||"inline"!==d||!L)return!1;return s.StringHelper.getTextWidth(e,`${$} '${T}'`)>L*u-50}),[f,L,d,$,T,u]),g=r.useMemo((()=>q(c)),[q,c]),F=r.useMemo((()=>h&&q(h)),[q,h]),S=g||F?"next-line":d,w=r=>{if(!o)return r;const i=o.toLowerCase().trim(),t=r.toLowerCase().indexOf(i),n=t+o.length;return-1===t?r:e.jsxs(e.Fragment,{children:[c.slice(0,t),e.jsx(a.MatchedText,{$variant:p,children:c.slice(t,n)}),c.slice(n)]})},C=r=>e.jsxs(e.Fragment,{children:[e.jsx(a.TruncateFirstLine,{$maxLines:u,"aria-hidden":!0,children:w(r)}),e.jsx(a.TruncateSecondLine,{$maxLines:u,"aria-hidden":!0,children:w(r)})]});return e.jsxs(a.Label,{ref:j,$labelDisplayType:S,$variant:p,children:[e.jsx(a.PrimaryText,{"aria-label":c,$bold:l,$maxLines:u,$selected:m,$disabled:x,$truncateType:b,children:"middle"===b&&g?C(c):w(c)}),h&&e.jsx(a.SecondaryText,{"aria-label":h,$maxLines:u,$truncateType:b,$labelDisplayType:d,children:"middle"===b&&F?C(h):h})]})};
 //# sourceMappingURL=dropdown-label.js.map

package/cjs/shared/dropdown-list/dropdown-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-label.js","sources":["../../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import { useCallback, useContext, useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\nimport { Font } from \"../../theme\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport { DropdownVariantType, LabelDisplayType } from \"./types\";\nimport {\n    Label,\n    MatchedText,\n    PrimaryText,\n    SecondaryText,\n    TruncateFirstLine,\n    TruncateSecondLine,\n} from \"./dropdown-label.styles\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]({ theme })\n            : Font.Spec[\"body-size-baseline\"]({ theme });\n    const fontFamily = Font.Spec[\"font-family\"]({ theme });\n    const { ref, width } = useResizeDetector();\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width * maxLines - 50;\n        },\n        [width, displayType, fontSize, fontFamily, maxLines]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        shouldTruncateTitle || shouldTruncateLabel ? \"next-line\" : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <MatchedText $variant={variant}>\n                    {label.slice(startIndex, endIndex)}\n                </MatchedText>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <TruncateFirstLine $maxLines={maxLines} aria-hidden>\n                    {renderMatchInBold(displayText)}\n                </TruncateFirstLine>\n                <TruncateSecondLine $maxLines={maxLines} aria-hidden>\n                    {renderMatchInBold(displayText)}\n                </TruncateSecondLine>\n            </>\n        );\n    };\n\n    return (\n        <Label ref={ref} $labelDisplayType={itemDisplayType} $variant={variant}>\n            <PrimaryText\n                aria-label={label}\n                $bold={bold}\n                $maxLines={maxLines}\n                $selected={selected}\n                $disabled={disabled}\n                $truncateType={truncationType}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </PrimaryText>\n            {sublabel && (\n                <SecondaryText\n                    aria-label={sublabel}\n                    $maxLines={maxLines}\n                    $truncateType={truncationType}\n                    $labelDisplayType={displayType}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </SecondaryText>\n            )}\n        </Label>\n    );\n};\n"],"names":["bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","theme","useContext","ThemeContext","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","MatchedText","$variant","renderTruncatedText","TruncateFirstLine","$maxLines","TruncateSecondLine","Label","$labelDisplayType","PrimaryText","$bold","$selected","$disabled","$truncateType","SecondaryText"],"mappings":"gTA4B6B,EACzBA,OACAC,cAAc,SACdC,QACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EAAQC,EAAAA,WAAWC,gBAEnBC,EACU,UAAZJ,EACMK,EAAAA,KAAKC,KAAK,gBAAgB,CAAEL,UAC5BI,EAAAA,KAAKC,KAAK,sBAAsB,CAAEL,UACtCM,EAAaF,EAAAA,KAAKC,KAAK,eAAe,CAAEL,WACxCO,IAAEA,EAAGC,MAAEA,GAAUC,sBAKjBC,EAAuBC,eACxBC,IACG,GAAoB,WAAhBrB,IAA6BiB,EAC7B,OAAO,EAaX,OAPkBK,eAAaC,aAC3BF,EACA,GAAGT,MAAaG,MAKDE,EAAQd,EAAW,EAAE,GAE5C,CAACc,EAAOjB,EAAaY,EAAUG,EAAYZ,IAMzCqB,EAAsBC,EAAAA,SACxB,IAAMN,EAAqBlB,IAC3B,CAACkB,EAAsBlB,IAErByB,EAAsBD,WACxB,IAAMnB,GAAYa,EAAqBb,IACvC,CAACa,EAAsBb,IAKrBqB,EACFH,GAAuBE,EAAsB,YAAc1B,EAKzD4B,EAAqBP,IACvB,IAAKnB,EACD,OAAOmB,EAGX,MAAMQ,EAAQ3B,EAAW4B,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAa9B,EAAWiC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACKrC,EAAMsC,MAAM,EAAGP,GAChBQ,EAAAA,IAACC,EAAAA,YAAW,CAAAC,SAAWlC,EAAO8B,SACzBrC,EAAMsC,MAAMP,EAAYE,KAE5BjC,EAAMsC,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIE,EAAAA,IAACI,EAAAA,kBAAiB,CAAAC,UAAY1C,EAAQ,eAAA,EAAAmC,SACjCV,EAAkBP,KAEvBmB,EAAAA,IAACM,EAAAA,mBAAkB,CAAAD,UAAY1C,EAAQ,eAAA,EAAAmC,SAClCV,EAAkBP,QAMnC,OACIe,EAAAA,KAACW,EAAAA,MAAK,CAAC/B,IAAKA,EAAGgC,kBAAqBrB,EAAee,SAAYlC,EAAO8B,SAAA,CAClEE,EAAAA,IAACS,EAAAA,YAAW,CAAA,aACIhD,EAAKiD,MACVnD,EAAI8C,UACA1C,EAAQgD,UACR/C,EAAQgD,UACR/C,EAAQgD,cACJ9C,EAAc+B,SAET,WAAnB/B,GAA+BiB,EAC1BmB,EAAoB1C,GACpB2B,EAAkB3B,KAE3BK,GACGkC,MAACc,EAAAA,4BACehD,EAAQuC,UACT1C,EAAQkD,cACJ9C,EAAcyC,kBACVhD,EAAWsC,SAEV,WAAnB/B,GAA+BmB,EAC1BiB,EAAoBrC,GACpBA,MAGV"}
+{"version":3,"file":"dropdown-label.js","sources":["../../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import { useCallback, useContext, useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\nimport { Font } from \"../../theme\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport { DropdownVariantType, LabelDisplayType, TruncateType } from \"./types\";\nimport {\n    Label,\n    MatchedText,\n    PrimaryText,\n    SecondaryText,\n    TruncateFirstLine,\n    TruncateSecondLine,\n} from \"./dropdown-label.styles\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: TruncateType | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]({ theme })\n            : Font.Spec[\"body-size-baseline\"]({ theme });\n    const fontFamily = Font.Spec[\"font-family\"]({ theme });\n    const { ref, width } = useResizeDetector();\n\n    const noTruncation = truncationType === \"none\";\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (noTruncation || displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width * maxLines - 50;\n        },\n        [noTruncation, width, displayType, fontSize, fontFamily, maxLines]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        shouldTruncateTitle || shouldTruncateLabel ? \"next-line\" : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <MatchedText $variant={variant}>\n                    {label.slice(startIndex, endIndex)}\n                </MatchedText>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <TruncateFirstLine $maxLines={maxLines} aria-hidden>\n                    {renderMatchInBold(displayText)}\n                </TruncateFirstLine>\n                <TruncateSecondLine $maxLines={maxLines} aria-hidden>\n                    {renderMatchInBold(displayText)}\n                </TruncateSecondLine>\n            </>\n        );\n    };\n\n    return (\n        <Label ref={ref} $labelDisplayType={itemDisplayType} $variant={variant}>\n            <PrimaryText\n                aria-label={label}\n                $bold={bold}\n                $maxLines={maxLines}\n                $selected={selected}\n                $disabled={disabled}\n                $truncateType={truncationType}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </PrimaryText>\n            {sublabel && (\n                <SecondaryText\n                    aria-label={sublabel}\n                    $maxLines={maxLines}\n                    $truncateType={truncationType}\n                    $labelDisplayType={displayType}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </SecondaryText>\n            )}\n        </Label>\n    );\n};\n"],"names":["bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","theme","useContext","ThemeContext","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","noTruncation","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","MatchedText","$variant","renderTruncatedText","TruncateFirstLine","$maxLines","TruncateSecondLine","Label","$labelDisplayType","PrimaryText","$bold","$selected","$disabled","$truncateType","SecondaryText"],"mappings":"gTA4B6B,EACzBA,OACAC,cAAc,SACdC,QACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EAAQC,EAAAA,WAAWC,gBAEnBC,EACU,UAAZJ,EACMK,EAAAA,KAAKC,KAAK,gBAAgB,CAAEL,UAC5BI,EAAAA,KAAKC,KAAK,sBAAsB,CAAEL,UACtCM,EAAaF,EAAAA,KAAKC,KAAK,eAAe,CAAEL,WACxCO,IAAEA,EAAGC,MAAEA,GAAUC,sBAEjBC,EAAkC,SAAnBZ,EAKfa,EAAuBC,eACxBC,IACG,GAAIH,GAAgC,WAAhBnB,IAA6BiB,EAC7C,OAAO,EAaX,OAPkBM,eAAaC,aAC3BF,EACA,GAAGV,MAAaG,MAKDE,EAAQd,EAAW,EAAE,GAE5C,CAACgB,EAAcF,EAAOjB,EAAaY,EAAUG,EAAYZ,IAMvDsB,EAAsBC,EAAAA,SACxB,IAAMN,EAAqBnB,IAC3B,CAACmB,EAAsBnB,IAErB0B,EAAsBD,WACxB,IAAMpB,GAAYc,EAAqBd,IACvC,CAACc,EAAsBd,IAKrBsB,EACFH,GAAuBE,EAAsB,YAAc3B,EAKzD6B,EAAqBP,IACvB,IAAKpB,EACD,OAAOoB,EAGX,MAAMQ,EAAQ5B,EAAW6B,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAa/B,EAAWkC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACKtC,EAAMuC,MAAM,EAAGP,GAChBQ,EAAAA,IAACC,EAAAA,YAAW,CAAAC,SAAWnC,EAAO+B,SACzBtC,EAAMuC,MAAMP,EAAYE,KAE5BlC,EAAMuC,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIE,EAAAA,IAACI,EAAAA,kBAAiB,CAAAC,UAAY3C,EAAQ,eAAA,EAAAoC,SACjCV,EAAkBP,KAEvBmB,EAAAA,IAACM,EAAAA,mBAAkB,CAAAD,UAAY3C,EAAQ,eAAA,EAAAoC,SAClCV,EAAkBP,QAMnC,OACIe,EAAAA,KAACW,EAAAA,MAAK,CAAChC,IAAKA,EAAGiC,kBAAqBrB,EAAee,SAAYnC,EAAO+B,SAAA,CAClEE,EAAAA,IAACS,EAAAA,YAAW,CAAA,aACIjD,EAAKkD,MACVpD,EAAI+C,UACA3C,EAAQiD,UACRhD,EAAQiD,UACRhD,EAAQiD,cACJ/C,EAAcgC,SAET,WAAnBhC,GAA+BkB,EAC1BmB,EAAoB3C,GACpB4B,EAAkB5B,KAE3BK,GACGmC,MAACc,EAAAA,4BACejD,EAAQwC,UACT3C,EAAQmD,cACJ/C,EAAc0C,kBACVjD,EAAWuC,SAEV,WAAnBhC,GAA+BoB,EAC1BiB,EAAoBtC,GACpBA,MAGV"}

package/cjs/shared/fade-wrapper/fade-wrapper.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-left"),i=require("@lifesg/react-icons/chevron-right"),o=require("../../external/lodash/throttle.js"),n=require("react"),s=require("../../external/react-resize-detector/build/index.esm.js"),a=require("./fade-wrapper.style.js");const d=n.forwardRef(((d,c)=>{var{children:l,fadeColor:f,fadePosition:h="both",showIndicator:u=!1,onResize:g}=d,j=e.__rest(d,["children","fadeColor","fadePosition","showIndicator","onResize"]);const[p,x]=n.useState("left"===h||"both"===h),[v,b]=n.useState("right"===h||"both"===h),R=n.useRef(null),I=n.useRef(null),q=o.default($,50);function $(){const e=R.current,r=I.current;e&&r&&r.scrollWidth>e.offsetWidth?(b(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),x(r.scrollLeft>=1)):(b(!1),x(!1))}function w(){$(),g&&g({content:I.current,wrapper:R.current})}s.useResizeDetector({onResize:w,targetRef:R,refreshMode:"debounce",refreshRate:50}),n.useImperativeHandle(c,(()=>({resize(){w()}}))),n.useEffect((()=>{const e=I.current;return $(),e&&e.addEventListener("scroll",q),()=>{e&&e.removeEventListener("scroll",q)}}),[]);return r.jsxs(a.Wrapper,Object.assign({ref:R},j,{children:[r.jsx(a.Content,{ref:I,children:l}),(()=>{let e;return e=Array.isArray(f)&&f.length>0?{left:f,right:f}:f||{left:void 0,right:void 0},r.jsxs(r.Fragment,{children:[p&&r.jsx(a.Fade,{$backgroundColor:e.left,$position:"left",$showIndicator:u,"data-id":"left-fade",children:u&&r.jsx(a.FadeIndicatorButton,{$position:"left","data-id":"left-fade-indicator-button",children:r.jsx(t.ChevronLeftIcon,{})})}),v&&r.jsx(a.Fade,{$backgroundColor:e.right,$position:"right",$showIndicator:u,"data-id":"right-fade",children:u&&r.jsx(a.FadeIndicatorButton,{$position:"right","data-id":"right-fade-indicator-button",children:r.jsx(i.ChevronRightIcon,{})})})]})})()]}))}));exports.FadeWrapper=d;
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-left"),o=require("@lifesg/react-icons/chevron-right"),i=require("../../external/lodash/throttle.js"),n=require("react"),s=require("../../external/react-resize-detector/build/index.esm.js"),d=require("./fade-wrapper.style.js");const a=n.forwardRef(((a,c)=>{var{children:l,fadeColor:f,fadePosition:h="both",showIndicator:u=!1,onResize:g}=a,j=e.__rest(a,["children","fadeColor","fadePosition","showIndicator","onResize"]);const[p,x]=n.useState("left"===h||"both"===h),[v,b]=n.useState("right"===h||"both"===h),R=n.useRef(null),I=n.useRef(null),q=i.default(W,50);function W(){const e=R.current,r=I.current;e&&r&&r.scrollWidth>e.offsetWidth?(b(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),x(r.scrollLeft>=1)):(b(!1),x(!1))}function $(){W(),g&&g({content:I.current,wrapper:R.current})}s.useResizeDetector({onResize:$,targetRef:R,refreshMode:"debounce",refreshRate:50}),n.useImperativeHandle(c,(()=>({resize(){$()},scrollToEnd(){const e=I.current,r=R.current;e&&r&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)}}))),n.useEffect((()=>{const e=I.current;return W(),e&&e.addEventListener("scroll",q),()=>{e&&e.removeEventListener("scroll",q)}}),[]);return r.jsxs(d.Wrapper,Object.assign({ref:R},j,{children:[r.jsx(d.Content,{ref:I,children:l}),(()=>{let e;return e=Array.isArray(f)&&f.length>0?{left:f,right:f}:f||{left:void 0,right:void 0},r.jsxs(r.Fragment,{children:[p&&r.jsx(d.Fade,{$backgroundColor:e.left,$position:"left",$showIndicator:u,"data-id":"left-fade",children:u&&r.jsx(d.FadeIndicatorButton,{$position:"left","data-id":"left-fade-indicator-button",children:r.jsx(t.ChevronLeftIcon,{})})}),v&&r.jsx(d.Fade,{$backgroundColor:e.right,$position:"right",$showIndicator:u,"data-id":"right-fade",children:u&&r.jsx(d.FadeIndicatorButton,{$position:"right","data-id":"right-fade-indicator-button",children:r.jsx(o.ChevronRightIcon,{})})})]})})()]}))}));exports.FadeWrapper=a;
 //# sourceMappingURL=fade-wrapper.js.map

package/cjs/shared/fade-wrapper/fade-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-wrapper.js","sources":["../../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport throttle from \"lodash/throttle\";\nimport React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n    Content,\n    Fade,\n    FadeIndicatorButton,\n    Wrapper,\n} from \"./fade-wrapper.style\";\nimport { FadeColorSet, FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const throttledScrollHandler = throttle(handleScroll, 50);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n        };\n    }, []);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleScroll() {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\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 && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.left}\n                        $position=\"left\"\n                        $showIndicator={showIndicator}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"left\"\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n                {showFadeRight && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.right}\n                        $position=\"right\"\n                        $showIndicator={showIndicator}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"right\"\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <Wrapper ref={wrapperRef} {...otherProps}>\n            <Content ref={contentRef}>{children}</Content>\n            {renderFade()}\n        </Wrapper>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","throttledScrollHandler","throttle","handleScroll","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","handleResize","useResizeDetector","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","useEffect","addEventListener","removeEventListener","_jsxs","Wrapper","Object","assign","_jsx","Content","fadeColorSet","Array","isArray","length","left","right","undefined","_Fragment","Fade","$backgroundColor","$position","FadeIndicatorButton","ChevronLeftIcon","$showIndicator","ChevronRightIcon","renderFade"],"mappings":"+VAmBA,MA2KaA,EAAcC,EAAAA,YA3KT,CACdC,EAQAC,KARA,IAAAC,SACIA,EAAQC,UACRA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQN,EACLO,EAAUC,EAAAA,OAAAR,EANjB,oEAaA,MAAOS,EAAcC,GAAmBC,EAAAA,SACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EAAAA,SACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAAA,OAAuB,MACpCC,EAAaD,EAAAA,OAAuB,MAEpCE,EAAyBC,EAAAA,QAASC,EAAc,IAyCtD,SAASA,IACL,MAAMC,EAAUN,EAAWO,QACrBC,EAAUN,EAAWK,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpDX,EACIY,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtCd,EAAgBY,EAAQK,YAAc,KAEtCd,GAAiB,GACjBH,GAAgB,GAExB,CAEA,SAASkB,IACLT,IAEIb,GACAA,EAAS,CACLgB,QAASN,EAAWK,QACpBD,QAASN,EAAWO,SAQhC,CAzEAQ,oBAAkB,CACdvB,SAAUsB,EACVE,UAAWhB,EACXiB,YAAa,WACbC,YAAa,KAGjBC,EAAAA,oBAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIN,GACJ,MAORO,EAAAA,WAAU,KACN,MAAMb,EAAUN,EAAWK,QAQ3B,OANAF,IAEIG,GACAA,EAAQc,iBAAiB,SAAUnB,GAGhC,KACCK,GACAA,EAAQe,oBAAoB,SAAUpB,EAC1C,CACH,GACF,IAwGH,OACIqB,EAAAA,KAACC,UAAOC,OAAAC,OAAA,CAACxC,IAAKa,GAAgBP,EAAU,CAAAL,SAAA,CACpCwC,EAAAA,IAACC,EAAAA,SAAQ1C,IAAKe,EAAUd,SAAGA,IA5DhB,MACf,IAAI0C,EAiBJ,OAbIA,EAFAC,MAAMC,QAAQ3C,IAAcA,EAAU4C,OAAS,EAEhC,CACXC,KAAM7C,EACN8C,MAAO9C,GAEHA,GACO,CACX6C,UAAME,EACND,WAAOC,GAOXZ,EAAAA,KAAAa,EAAAA,SAAA,CAAAjD,SAAA,CACKO,GACGiC,EAAAA,IAACU,EAAAA,KAAI,CAAAC,iBACiBT,EAAaI,KAAIM,UACzB,sBACMjD,EAAa,UACrB,YAAWH,SAElBG,GACGqC,EAAAA,IAACa,EAAAA,oBAAmB,CAAAD,UACN,OAAM,UACR,sCAERZ,EAAAA,IAACc,EAAAA,gBAAe,CAAA,OAK/B5C,GACG8B,EAAAA,IAACU,EAAAA,uBACqBR,EAAaK,MAAKK,UAC1B,QAAOG,eACDpD,EAAa,UACrB,sBAEPA,GACGqC,EAAAA,IAACa,EAAAA,oBAAmB,CAAAD,UACN,QAAO,UACT,8BAA6BpD,SAErCwC,EAAAA,IAACgB,EAAAA,iBAAgB,CAAA,SAKlC,EAOFC,MACK"}
+{"version":3,"file":"fade-wrapper.js","sources":["../../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport throttle from \"lodash/throttle\";\nimport React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n    Content,\n    Fade,\n    FadeIndicatorButton,\n    Wrapper,\n} from \"./fade-wrapper.style\";\nimport { FadeColorSet, FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const throttledScrollHandler = throttle(handleScroll, 50);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n            scrollToEnd() {\n                const content = contentRef.current;\n                const wrapper = wrapperRef.current;\n                if (content && wrapper) {\n                    content.scrollLeft =\n                        content.scrollWidth - wrapper.offsetWidth;\n                }\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n        };\n    }, []);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleScroll() {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\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 && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.left}\n                        $position=\"left\"\n                        $showIndicator={showIndicator}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"left\"\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n                {showFadeRight && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.right}\n                        $position=\"right\"\n                        $showIndicator={showIndicator}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"right\"\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <Wrapper ref={wrapperRef} {...otherProps}>\n            <Content ref={contentRef}>{children}</Content>\n            {renderFade()}\n        </Wrapper>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","throttledScrollHandler","throttle","handleScroll","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","handleResize","useResizeDetector","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","scrollToEnd","useEffect","addEventListener","removeEventListener","_jsxs","Wrapper","Object","assign","_jsx","Content","fadeColorSet","Array","isArray","length","left","right","undefined","_Fragment","Fade","$backgroundColor","$position","FadeIndicatorButton","ChevronLeftIcon","$showIndicator","ChevronRightIcon","renderFade"],"mappings":"+VAmBA,MAmLaA,EAAcC,EAAAA,YAnLT,CACdC,EAQAC,KARA,IAAAC,SACIA,EAAQC,UACRA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQN,EACLO,EAAUC,EAAAA,OAAAR,EANjB,oEAaA,MAAOS,EAAcC,GAAmBC,EAAAA,SACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EAAAA,SACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAAA,OAAuB,MACpCC,EAAaD,EAAAA,OAAuB,MAEpCE,EAAyBC,EAAAA,QAASC,EAAc,IAiDtD,SAASA,IACL,MAAMC,EAAUN,EAAWO,QACrBC,EAAUN,EAAWK,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpDX,EACIY,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtCd,EAAgBY,EAAQK,YAAc,KAEtCd,GAAiB,GACjBH,GAAgB,GAExB,CAEA,SAASkB,IACLT,IAEIb,GACAA,EAAS,CACLgB,QAASN,EAAWK,QACpBD,QAASN,EAAWO,SAQhC,CAjFAQ,oBAAkB,CACdvB,SAAUsB,EACVE,UAAWhB,EACXiB,YAAa,WACbC,YAAa,KAGjBC,EAAAA,oBAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIN,GACJ,EACA,WAAAO,GACI,MAAMb,EAAUN,EAAWK,QACrBD,EAAUN,EAAWO,QACvBC,GAAWF,IACXE,EAAQK,WACJL,EAAQC,YAAcH,EAAQI,YAE1C,MAORY,EAAAA,WAAU,KACN,MAAMd,EAAUN,EAAWK,QAQ3B,OANAF,IAEIG,GACAA,EAAQe,iBAAiB,SAAUpB,GAGhC,KACCK,GACAA,EAAQgB,oBAAoB,SAAUrB,EAC1C,CACH,GACF,IAwGH,OACIsB,EAAAA,KAACC,UAAOC,OAAAC,OAAA,CAACzC,IAAKa,GAAgBP,EAAU,CAAAL,SAAA,CACpCyC,EAAAA,IAACC,EAAAA,SAAQ3C,IAAKe,EAAUd,SAAGA,IA5DhB,MACf,IAAI2C,EAiBJ,OAbIA,EAFAC,MAAMC,QAAQ5C,IAAcA,EAAU6C,OAAS,EAEhC,CACXC,KAAM9C,EACN+C,MAAO/C,GAEHA,GACO,CACX8C,UAAME,EACND,WAAOC,GAOXZ,EAAAA,KAAAa,EAAAA,SAAA,CAAAlD,SAAA,CACKO,GACGkC,EAAAA,IAACU,EAAAA,KAAI,CAAAC,iBACiBT,EAAaI,KAAIM,UACzB,sBACMlD,EAAa,UACrB,YAAWH,SAElBG,GACGsC,EAAAA,IAACa,EAAAA,oBAAmB,CAAAD,UACN,OAAM,UACR,sCAERZ,EAAAA,IAACc,EAAAA,gBAAe,CAAA,OAK/B7C,GACG+B,EAAAA,IAACU,EAAAA,uBACqBR,EAAaK,MAAKK,UAC1B,QAAOG,eACDrD,EAAa,UACrB,sBAEPA,GACGsC,EAAAA,IAACa,EAAAA,oBAAmB,CAAAD,UACN,QAAO,UACT,8BAA6BrD,SAErCyC,EAAAA,IAACgB,EAAAA,iBAAgB,CAAA,SAKlC,EAOFC,MACK"}

package/drawer/drawer.d.ts

@@ -1,2 +1,2 @@
 import { DrawerProps } from "./types";
-export declare const Drawer: ({ children, heading, show, onClose, onOverlayClick, ...otherProps }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: ({ children, heading, show, onClose, onOverlayClick, customCallToAction, ...otherProps }: DrawerProps) => import("react/jsx-runtime").JSX.Element;

package/drawer/drawer.js

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

package/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":["Drawer","_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":"otBAoBO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,GAAcL,EACXM,EAAUC,EAAAP,EANM,0DAWnB,MAAOQ,EAAaC,GAAkBC,EAASP,GACzCQ,EAAKC,IACLC,EAAkBC,EAA2B,OAK7CC,QAAEA,EAAOC,KAAEA,GAASC,EAAY,CAClCC,KAAMf,EACNgB,aAAeD,KACNA,GAAQd,GACTA,GACJ,IAIFgB,EAAUC,EAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,EAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAoBb,EAAS,CACvDc,SAAU,MAMdC,GAAU,KACN,IAAK3B,EAAM,CACP,MAAM4B,EAAQC,YAAW,IAAMvB,GAAe,IAAQ,KACtD,MAAO,IAAMwB,aAAaF,EAC9B,CACItB,GAAe,EACnB,GACD,CAACN,IAmBJ,OACI+B,EAACC,EAAO,CACJhC,KAAMK,EACN4B,oBAAkB,EAClB/B,eAAgBA,EAAcJ,SAE7ByB,EACGQ,EAACG,EAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAItC,SAEjBuC,EAACC,EAASC,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,EAACsB,EAAM,CAAAvD,SACHiC,EAACuB,EAAO,CACJ9C,GAAIA,EACJiC,IAAK/B,EACL6C,UAAU,EACVC,OAAO,OACPC,YAAY,KAAI3D,SAEfC,MAGTgC,EAAC2B,EAAO,CAAA5D,SAAEA,IACViC,EAAC4B,EAAW,CAAA,aACG,eACXf,QAAS3C,EACT2D,gBAAgB,EAAK9D,SAErBiC,EAAC8B,EAAS,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":["Drawer","_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":"+6BAwBO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,EAAcC,mBACdA,GAAkBN,EACfO,EAAUC,EAAAR,EAPM,+EAYnB,MAAOS,EAAaC,GAAkBC,EAASR,IAKxCS,EAAgBC,GAAqBF,IACtCG,EAAKC,IACLC,EAAQC,EAAWC,GACnBC,EAAaC,EAAW,UAAU,CAAEJ,UACpCK,EAAkBC,EAA2B,OAM3CC,MAAOC,EAAaC,IAAKC,GAC7BC,EAAkC,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,EAAY,CAClCC,KAAMrC,EACNsC,aAAeD,KACNA,GAAQpC,GACTA,GACJ,IAIFsC,EAAUC,EAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,EAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAoBb,EAAS,CACvDc,SAAU,MAMdC,GAAU,KACN,IAAKjD,EAAM,CACP,MAAMkD,EAAQC,YAAW,IAAM5C,GAAe,IAAQ,KACtD,MAAO,IAAM6C,aAAaF,EAC9B,CACI3C,GAAe,EACnB,GACD,CAACP,IAmBJ,OACIqD,EAACC,EAAO,CACJtD,KAAMM,EACNiD,sBACArD,eAAgBA,EAAcJ,SAE7B+C,EACGQ,EAACG,EAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAI5D,SAEjB6D,EAACC,EAASC,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,EAACc,EAAM,CACHnD,IAAKC,EAASmD,WACFvE,GAAsB6B,YAElCqB,EAACsB,EAAO,CACJhE,GAAIA,EACJW,IAAKJ,EACL0D,UAAU,EACVC,OAAO,OACPC,YAAY,KAAIhF,SAEfC,IAEJI,EACGkD,EAAC0B,EAAY,CAAAL,SAAW1C,EAAiBlC,SACpCK,IAEL,QAERkD,EAAC2B,YAASlF,IAIVuD,EAAC4B,EAAW,CAAA,aACG,eACXhB,QAAShE,EACTiF,gBAAgB,EAChBC,WACuBlD,IAAnBxB,EACM,CACI2E,IAAK3E,EACL4E,UAAW,yBAEfpD,EAASnC,SAGnBuD,EAACiC,mCAIbrD,GACE"}

package/drawer/drawer.styles.d.ts

@@ -1,8 +1,15 @@
 interface StyleProps {
     $show?: boolean | undefined;
 }
+interface HeaderStyleProps {
+    $stacked?: boolean | undefined;
+}
+interface CallToActionStyleProps {
+    $stacked?: boolean | undefined;
+}
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$show"> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$show"> & StyleProps, never>>> & string;
-export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stacked"> & HeaderStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stacked"> & HeaderStyleProps, never>>> & string;
+export declare const CallToAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stacked"> & CallToActionStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$stacked"> & CallToActionStyleProps, never>>> & string;
 export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export declare const Heading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
     ref?: import("react").RefObject<HTMLHeadingElement> | undefined;