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

package/cjs/shared/dropdown-wrapper/dropdown-wrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport styled, { css, keyframes } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport type { DropdownVariantType, TruncateType } from \"../dropdown-list/types\";\nimport { lineClampCss } from \"../styles\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\nexport interface DropdownWrapperStyleProps {\n    $disabled?: boolean;\n    $readOnly?: boolean;\n    $error?: boolean;\n    $expanded?: boolean;\n}\n\nexport interface ValueLabelStyleProps {\n    $truncateType?: TruncateType;\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface SelectorStyleProps {\n    $variant?: DropdownVariantType | undefined;\n}\n\nexport interface LabelContainerStyleProps {\n    $disabled?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getHeight = (variant?: DropdownVariantType | undefined) => {\n    return variant === \"small\" ? 2.5 : 3;\n};\n\nexport const Wrapper = styled.div<SelectorStyleProps>`\n    position: relative;\n    width: 100%;\n    ${(props) => {\n        const height = getHeight(props.$variant);\n        return css`\n            min-height: ${height}rem;\n            height: ${height}rem; // Need this to persist the height when expanding or collapsing list\n        `;\n    }}\n`;\n\nexport const baseSelectorCSS = css<SelectorStyleProps>`\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 ${V3_Spacing[\"spacing-16\"]};\n    // exclude top and bottom borders\n    height: calc(${(props) => getHeight(props.$variant)}rem - 2px);\n    width: 100%;\n    border-radius: ${V3_Radius[\"sm\"]};\n    border: none;\n    background: transparent;\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${V3_Colour[\"border-focus\"]};\n    }\n`;\n\nexport const Selector = styled.button<SelectorStyleProps>`\n    ${baseSelectorCSS}\n    cursor: pointer;\n`;\n\nexport const SelectorDiv = styled.div<SelectorStyleProps>`\n    ${baseSelectorCSS}\n`;\n\n// Note: Need this to only switch back after\n// react-spring animation ends\nconst zindexPositionHide = keyframes`\n\tfrom {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tz-index: 2;\n\t}\n\n\tto {\n\t\tposition: relative;\n        width: 100%;\n\t}\n`;\n\nexport const ElementBoundary = styled.div<DropdownWrapperStyleProps>`\n    position: relative;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    background: ${V3_Colour[\"bg\"]};\n    overflow: hidden;\n\n    &:focus-within {\n        border-color: ${V3_Colour[\"border-focus\"]};\n        box-shadow: 0px 0px 4px 0px\n            rgb(from ${V3_Colour[\"border-focus\"]} r g b / 50%) inset; // TODO: confirm shadow\n    }\n\n    ${(props) => {\n        if (props.$expanded) {\n            return css`\n                position: absolute;\n                top: 0;\n                left: 0;\n                width: 100%;\n                z-index: 2;\n            `;\n        } else {\n            return css`\n                animation: ${zindexPositionHide} 0.5s ease-in-out;\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                background: ${V3_Colour[\"bg-disabled\"]};\n\n                ${Selector} {\n                    cursor: not-allowed;\n                }\n\n                &:focus-within {\n                    border-color: ${V3_Colour[\"border\"]};\n                    box-shadow: none;\n                }\n            `;\n        } else if (props.$readOnly) {\n            return css`\n                border: none;\n                background: transparent !important;\n\n                ${Selector} {\n                    padding: 0;\n                }\n\n                &:focus-within {\n                    border: none;\n                    box-shadow: none;\n                }\n            `;\n        } else if (props.$error) {\n            return css`\n                border-color: ${V3_Colour[\"border-error\"]};\n\n                &:focus-within {\n                    border-color: ${V3_Colour[\"border-error\"]};\n                    box-shadow: 0px 0px 4px 0px\n                        rgb(from ${V3_Colour[\"border-error\"]} r g b / 50%) inset; // TODO: confirm shadow\n                }\n            `;\n        }\n    }}\n`;\n\nexport const IconContainer = styled.div<DropdownWrapperStyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: transform ${V3_Motion[\"duration-250\"]}\n        ${V3_Motion[\"ease-default\"]};\n    margin-left: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const StyledChevronIcon = styled(ChevronDownIcon)<SelectorStyleProps>`\n    color: ${V3_Colour[\"icon\"]};\n`;\n\nexport const Divider = styled.div`\n    height: 1px;\n    background: ${V3_Colour[\"border\"]};\n    margin: 0 ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const LabelContainer = styled.div<LabelContainerStyleProps>`\n    display: flex;\n    flex: 1;\n    word-break: break-all;\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"text-disabled\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n    text-align: left;\n    ${(props) => {\n        switch (props.$truncateType) {\n            case \"middle\":\n                break;\n            case \"end\":\n            default:\n                return css`\n                    ${lineClampCss(1)}\n                `;\n        }\n    }}\n    overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n"],"names":["getHeight","variant","Wrapper","styled","div","props","height","$variant","css","baseSelectorCSS","V3_Spacing","V3_Radius","V3_Colour","Selector","button","zindexPositionHide","keyframes","V3_Border","$expanded","$disabled","$readOnly","$error","V3_Motion","ChevronDownIcon","LabelContainer","ValueLabel","V3_Font","$truncateType","lineClampCss","PlaceholderLabel"],"mappings":"sPAwCA,MAAMA,EAAaC,GACI,UAAZA,EAAsB,IAAM,EAG1BC,EAAUC,EAAAA,QAAOC,GAAuB;;;MAG9CC,IACC,MAAMC,EAASN,EAAUK,EAAME,UAC/B,OAAOC,KAAG;0BACQF;sBACJA;SACb;EAIIG,EAAkBD,EAAAA,GAAuB;;;;;iBAKrCE,EAAAA,WAAW;;mBAERL,GAAUL,EAAUK,EAAME;;qBAEzBI,EAAAA,UAAc;;;;;;;;;;6BAUNC,EAAAA,UAAU;;EAI1BC,EAAWV,EAAAA,QAAOW,MAA0B;MACnDL;;EAIqBN,EAAAA,QAAOC,GAAuB;MACnDK;EAKN,MAAMM,EAAqBC,EAAAA,SAAS;;;;;;;;;;;;;EAeLb,EAAAA,QAAOC,GAA8B;;cAEtDa,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CL,EAAAA,UAAkB;qBACPD,EAAAA,UAAc;kBACjBC,EAAAA,UAAc;;;;wBAIRA,EAAAA,UAAU;;uBAEXA,EAAAA,UAAU;;;MAG1BP,GACKA,EAAMa,UACCV,KAAG;;;;;;cAQHA,KAAG;6BACOO;;;MAKtBV,GACKA,EAAMc,UACCX,KAAG;8BACQI,EAAAA,UAAU;;kBAEtBC;;;;;oCAKkBD,EAAAA,UAAkB;;;cAInCP,EAAMe,UACNZ,KAAG;;;;kBAIJK;;;;;;;;cASCR,EAAMgB,OACNb,KAAG;gCACUI,EAAAA,UAAU;;;oCAGNA,EAAAA,UAAU;;mCAEXA,EAAAA,UAAU;;mBAP9B;EAccT,EAAAA,QAAOC,GAA8B;wBACzCC,GAAWA,EAAMa,UAAY,IAAM;4BAChCI,EAAAA,UAAU;UAC5BA,EAAAA,UAAU;mBACDZ,EAAAA,WAAW;EAGGP,EAAAA,QAAOoB,EAAAA,gBAAoC;aAC/DX,EAAAA,UAAgB;EAGNT,EAAAA,QAAOC,GAAG;;kBAEfQ,EAAAA,UAAkB;gBACpBF,EAAAA,WAAW;EAGpB,MAAMc,EAAiBrB,EAAAA,QAAOC,GAA6B;;;;MAI3DC,IACC,GAAIA,EAAMc,UACN,OAAOX,KAAG;yBACGI,EAAAA,UAAU;aAE3B;EAIKa,EAAatB,EAAAA,QAAOC,GAAyB;MACnDC,GACoB,UAAnBA,EAAME,SACAmB,EAAAA,QAAQ,mBACRA,EAAAA,QAAQ;;MAEfrB,IACC,GACS,WADDA,EAAMsB,cAKN,OAAOnB,KAAG;sBACJoB,EAAAA,aAAa;;;EAOtBC,EAAmB1B,EAAAA,QAAOsB,EAAW;aACrCb,EAAAA,UAAU;"}
+{"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampCss } from \"../styles\";\n\nexport const labelContainer = css`\n    display: flex;\n    flex: 1;\n    word-break: break-all;\n\n    &[data-disabled=\"true\"] {\n        color: ${Colour[\"text-disabled\"]};\n    }\n`;\n\nexport const valueLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    text-align: left;\n    overflow: hidden;\n\n    &[data-variant=\"small\"] {\n        ${Font[\"body-md-regular\"]}\n    }\n\n    &:not([data-truncate=\"middle\"]) {\n        ${lineClampCss(1)}\n    }\n`;\n\nexport const placeholderLabel = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"4HAK2B,mCAyBE,6BAfN"}

package/cjs/shared/dropdown-wrapper/dropdown-wrapper.styles_15hwwoj.css

@@ -0,0 +1,3 @@
+@layer fds{.l9c71lq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;word-break:break-all;}.l9c71lq[data-disabled="true"]{color:var(--fds-colour-text-disabled);}
+.vlxe5wy{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);text-align:left;overflow:hidden;}.vlxe5wy[data-variant="small"]{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}.vlxe5wy:not([data-truncate="middle"]){display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
+.p3mumjy{color:var(--fds-colour-text-subtler);}}

package/cjs/shared/dropdown-wrapper/element-with-dropdown.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("react"),i=require("../../external/react-resize-detector/build/index.esm.js"),o=require("styled-components"),s=require("../../overlay/use-floating-context.js"),r=require("../../theme/theme-provider/hooks.js"),l=require("../../v3_theme/index.js");const a=e=>"right"===e?"bottom-end":"bottom-start",d=n.createContext({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})});exports.DropdownRenderContext=d,exports.ElementWithDropdown=({enabled:c,isOpen:u,onOpen:g,onClose:h,onDismiss:m,renderElement:p,renderDropdown:x,customZIndex:f,clickToToggle:y=!1,offset:b=0,alignment:j="left",fitAvailableHeight:w,rootNode:v,positionRef:F})=>{var R;const C=n.useContext(o.ThemeContext),P=l.V3_Breakpoint["sm-max"]({theme:C}),q=n.useRef(null),{width:O=0}=i.useResizeDetector({targetRef:null!=F?F:q,handleHeight:!1}),D={name:"center",fn:({x:e,rects:t})=>{const n=0===e||e+t.floating.width===window.innerWidth,i=window.innerWidth<P;return{x:n&&i?(window.innerWidth-t.floating.width)/2:e}}},{refs:k,floatingStyles:W,context:H}=t.useFloating({open:u,onOpenChange:(e,t,n)=>{"escape-key"===n?null==m||m():e&&!u?null==g||g():!e&&u&&(null==h||h(n))},whileElementsMounted:t.autoUpdate,placement:a(j),middleware:[t.offset(b),t.flip(),t.shift({limiter:t.limitShift()}),t.size({apply({availableHeight:e,elements:t}){!w||e>=t.floating.scrollHeight?t.floating.style.setProperty("--available-height",""):t.floating.style.setProperty("--available-height",`${Math.max(0,e)}px`)}}),D]}),S=s.useFloatingChild(),{isMounted:T,styles:z}=t.useTransitionStyles(H,{initial:{opacity:0},open:{opacity:1},duration:300}),{themeProps:I,themeStyle:M}=r.useInheritedThemeScope(T),E=t.useClick(H,{enabled:c,toggle:y,keyboardHandlers:y}),_=t.useDismiss(H,{enabled:c}),{getReferenceProps:A,getFloatingProps:B}=t.useInteractions([E,_]),N={elementWidth:O,styles:Object.assign(Object.assign(Object.assign({},z),W),{zIndex:null!==(R=null!=f?f:S)&&void 0!==R?R:50}),setFloatingRef:k.setFloating,getFloatingProps:B};return e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>{q.current=e,k.setReference(e)}},A(),{children:p()})),T&&e.jsx(t.FloatingPortal,{root:v,children:e.jsx(t.FloatingFocusManager,{context:H,modal:!1,initialFocus:-1,returnFocus:!1,children:e.jsx(d.Provider,{value:N,children:e.jsx("div",Object.assign({},I,{style:M,children:x(N)}))})})})]})},exports.useDropdownRender=()=>n.useContext(d);
+"use strict";var e=require("react/jsx-runtime"),t=require("@floating-ui/react"),i=require("react"),r=require("../../external/react-resize-detector/build/index.esm.js"),n=require("../../overlay/use-floating-context.js");require("../../theme/theme-provider/index.js");var s=require("../../theme/theme-provider/hooks.js");require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../../util/use-event.js"),l=require("../../util/use-previous.js"),a=require("../../theme/utils/use-media-query.js"),u=require("./element-with-dropdown.styles.js");const d=e=>"right"===e?"bottom-end":"bottom-start",c=i.createContext({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})});exports.DropdownRenderContext=c,exports.ElementWithDropdown=({enabled:h,isOpen:g,onOpen:m,onClose:p,onDismiss:f,onHide:j,renderElement:x,renderDropdown:y,customZIndex:q,clickToToggle:v=!1,offset:b=0,alignment:w="left",fitAvailableHeight:F,rootNode:k,positionRef:P})=>{var R;const H=a.useMaxWidthMediaQuery("sm"),O=i.useRef(null),{width:C=0}=r.useResizeDetector({targetRef:null!=P?P:O,handleHeight:!1}),D={name:"center",fn:({x:e,rects:t})=>({x:(0===e||e+t.floating.width===window.innerWidth)&&H?(window.innerWidth-t.floating.width)/2:e})},{refs:M,floatingStyles:W,context:E}=t.useFloating({open:g,onOpenChange:(e,t,i)=>{"escape-key"===i?null==f||f():e&&!g?null==m||m():!e&&g&&(null==p||p(i))},whileElementsMounted:t.autoUpdate,placement:d(w),middleware:[t.offset(b),t.flip(),t.shift({limiter:t.limitShift()}),t.size({apply({availableHeight:e,elements:t}){!F||e>=t.floating.scrollHeight?t.floating.style.setProperty(u.tokens.availableHeight,""):t.floating.style.setProperty(u.tokens.availableHeight,`${Math.max(0,e)}px`)}}),D]}),S=n.useFloatingChild(),{isMounted:z,styles:I}=t.useTransitionStyles(E,{initial:{opacity:0},open:{opacity:1},duration:300}),{themeProps:T,themeStyle:A}=s.useInheritedThemeScope(z),N=t.useClick(E,{enabled:h,toggle:v,keyboardHandlers:v}),Q=t.useDismiss(E,{enabled:h}),{getReferenceProps:U,getFloatingProps:Z}=t.useInteractions([N,Q]),$=l.usePrevious(z),B=o.useEvent((()=>null==j?void 0:j()));i.useEffect((()=>{$&&!z&&B()}),[$,z,B]);const G={elementWidth:C,styles:Object.assign(Object.assign(Object.assign({},I),W),{zIndex:null!==(R=null!=q?q:S)&&void 0!==R?R:50}),setFloatingRef:M.setFloating,getFloatingProps:Z};return e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>{O.current=e,M.setReference(e)}},U(),{children:x()})),z&&e.jsx(t.FloatingPortal,{root:k,children:e.jsx(t.FloatingFocusManager,{context:E,modal:!1,initialFocus:-1,returnFocus:!1,children:e.jsx(c.Provider,{value:G,children:e.jsx("div",Object.assign({},T,{style:A,children:y(G)}))})})})]})},exports.useDropdownRender=()=>i.useContext(c);
 //# sourceMappingURL=element-with-dropdown.js.map

package/cjs/shared/dropdown-wrapper/element-with-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"element-with-dropdown.js","sources":["../../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n    Middleware,\n    OpenChangeReason,\n    Placement,\n} from \"@floating-ui/react\";\nimport {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { useInheritedThemeScope } from \"../../theme/theme-provider/hooks\";\nimport { V3_Breakpoint } from \"../../v3_theme\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n    elementWidth: number;\n    styles: CSSProperties;\n    setFloatingRef: (node: HTMLElement | null) => void;\n    getFloatingProps: (\n        userProps?: React.HTMLProps<HTMLElement>\n    ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n    enabled: boolean;\n    isOpen: boolean;\n    onOpen?: () => void | undefined;\n    onClose?: (reason: OpenChangeReason | undefined) => void | undefined;\n    onDismiss?: () => void | undefined;\n    renderElement: () => React.ReactNode;\n    renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n    customZIndex?: number | undefined;\n    clickToToggle?: boolean | undefined;\n    /* the distance between the reference element and the dropdown */\n    offset?: number | undefined;\n    /* the alignment of the dropdown to the left or right of the reference element */\n    alignment?: DropdownAlignmentType | undefined;\n    fitAvailableHeight?: boolean | undefined;\n    /**\n     * The root element that contains the popover element. Defaults to the document body.\n     *\n     * If the parent that contains the trigger element has a higher z-index than the popover,\n     * the popover may not be visible. Specify the parent element here instead\n     */\n    rootNode?: RefObject<HTMLElement> | undefined;\n    /** If set, the `elementWidth` refers to this instead of the reference element */\n    positionRef?: RefObject<HTMLElement> | undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n    switch (alignment) {\n        case \"right\":\n            return \"bottom-end\";\n        case \"left\":\n        default:\n            return \"bottom-start\";\n    }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n    elementWidth: 0,\n    styles: {},\n    setFloatingRef: () => {\n        // noop\n    },\n    getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n    return useContext(DropdownRenderContext);\n};\n\n/**\n * A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n *\n * Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n *   `max-height: min(100px, var(--available-height, infinity * 1px))`\n *\n * Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n *   ref={setFloatingRef}\n *   style={styles}\n *   {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n *\n * If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n *   onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n    enabled,\n    isOpen,\n    onOpen,\n    onClose,\n    onDismiss,\n    renderElement,\n    renderDropdown,\n    customZIndex,\n    clickToToggle = false,\n    offset: dropdownOffset = 0,\n    alignment = \"left\",\n    fitAvailableHeight,\n    rootNode,\n    positionRef,\n}: ElementWithDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const elementRef = useRef<HTMLDivElement | null>(null);\n    const { width: referenceWidth = 0 } = useResizeDetector({\n        targetRef: positionRef ?? elementRef,\n        handleHeight: false,\n    });\n    const center: Middleware = {\n        name: \"center\",\n        fn: ({ x, rects }) => {\n            const noGapInBetween =\n                x === 0 || x + rects.floating.width === window.innerWidth;\n            const isMobileScreen = window.innerWidth < mobileBreakpoint;\n            return {\n                x:\n                    noGapInBetween && isMobileScreen\n                        ? (window.innerWidth - rects.floating.width) / 2\n                        : x,\n            };\n        },\n    };\n    const { refs, floatingStyles, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open, _event, reason) => {\n            if (reason === \"escape-key\") {\n                onDismiss?.();\n            } else if (open && !isOpen) {\n                onOpen?.();\n            } else if (!open && isOpen) {\n                onClose?.(reason);\n            }\n        },\n        whileElementsMounted: autoUpdate,\n        placement: getFloatingPlacement(alignment),\n        middleware: [\n            offset(dropdownOffset),\n            flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            size({\n                // shrink to fit available vertical space\n                apply({ availableHeight, elements }) {\n                    if (\n                        !fitAvailableHeight ||\n                        availableHeight >= elements.floating.scrollHeight\n                    ) {\n                        // reset this so that dropdown can expand as needed\n                        elements.floating.style.setProperty(\n                            \"--available-height\",\n                            \"\"\n                        );\n                        return;\n                    }\n\n                    elements.floating.style.setProperty(\n                        \"--available-height\",\n                        `${Math.max(0, availableHeight)}px`\n                    );\n                },\n            }),\n            center,\n        ],\n    });\n    const parentZIndex = useFloatingChild();\n\n    const { isMounted, styles } = useTransitionStyles(context, {\n        initial: { opacity: 0 },\n        open: { opacity: 1 },\n        duration: 300,\n    });\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    const click = useClick(context, {\n        enabled,\n        toggle: clickToToggle,\n        keyboardHandlers: clickToToggle,\n    });\n    const dismiss = useDismiss(context, { enabled });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n    ]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const dropdownRenderProps = {\n        elementWidth: referenceWidth,\n        styles: {\n            ...styles,\n            ...floatingStyles,\n            zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n        },\n        setFloatingRef: refs.setFloating,\n        getFloatingProps,\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    elementRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps()}\n            >\n                {renderElement()}\n            </div>\n            {isMounted && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                        returnFocus={false} // leads to focus trap. parent to handle the final focus state\n                    >\n                        <DropdownRenderContext.Provider\n                            value={dropdownRenderProps}\n                        >\n                            <div {...themeProps} style={themeStyle}>\n                                {renderDropdown(dropdownRenderProps)}\n                            </div>\n                        </DropdownRenderContext.Provider>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","enabled","isOpen","onOpen","onClose","onDismiss","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","noGapInBetween","floating","window","innerWidth","isMobileScreen","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value"],"mappings":"gVAiEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAAA,cAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,iEAqCI,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBjB,YAAY,OACZkB,qBACAC,WACAC,wBAKA,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAaC,EAAAA,OAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAAA,kBAAkB,CACpDC,UAAWX,QAAAA,EAAeM,EAC1BM,cAAc,IAEZC,EAAqB,CACvBC,KAAM,SACNC,GAAI,EAAGC,IAAGC,YACN,MAAMC,EACI,IAANF,GAAWA,EAAIC,EAAME,SAASX,QAAUY,OAAOC,WAC7CC,EAAiBF,OAAOC,WAAajB,EAC3C,MAAO,CACHY,EACIE,GAAkBI,GACXF,OAAOC,WAAaJ,EAAME,SAASX,OAAS,EAC7CQ,EACb,IAGHO,KAAEA,EAAIC,eAAEA,EAAcC,QAAEA,GAAYC,EAAAA,YAAY,CAClDC,KAAMvC,EACNwC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAvC,SAAAA,IACOoC,IAASvC,EAChBC,SAAAA,KACQsC,GAAQvC,IAChBE,SAAAA,EAAUwC,GACd,EAEJC,qBAAsBC,EAAAA,WACtBC,UAAWtD,EAAqBC,GAChCsD,WAAY,CACRtC,EAAAA,OAAOC,GACPsC,SACAC,QAAM,CACFC,QAASC,EAAAA,eAEbC,OAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhB5C,GACD2C,GAAmBC,EAASvB,SAASwB,aAGrCD,EAASvB,SAASyB,MAAMC,YACpB,qBACA,IAKRH,EAASvB,SAASyB,MAAMC,YACpB,qBACA,GAAGC,KAAKC,IAAI,EAAGN,OAEvB,IAEJ5B,KAGFmC,EAAeC,EAAAA,oBAEfC,UAAEA,EAASlE,OAAEA,GAAWmE,EAAAA,oBAAoB1B,EAAS,CACvD2B,QAAS,CAAEC,QAAS,GACpB1B,KAAM,CAAE0B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,GAAeC,EAAAA,uBAAuBP,GAEpDQ,EAAQC,EAAAA,SAASlC,EAAS,CAC5BtC,UACAyE,OAAQjE,EACRkE,iBAAkBlE,IAEhBmE,EAAUC,EAAAA,WAAWtC,EAAS,CAAEtC,aAEhC6E,kBAAEA,EAAiB9E,iBAAEA,GAAqB+E,kBAAgB,CAC5DP,EACAI,IAMEI,EAAsB,CACxBnF,aAAc0B,EACdzB,oDACOA,GACAwC,GAAc,CACjB2C,OAAoC,QAA5BC,EAAA1E,QAAAA,EAAgBsD,SAAY,IAAAoB,EAAAA,EA7JxB,KA+JhBnF,eAAgBsC,EAAK8C,YACrBnF,oBAGJ,OACIoF,6BACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFrE,EAAWsE,QAAUD,EACrBpD,EAAKsD,aAAaF,EAAK,GAEvBX,IAAmB,CAAAc,SAEtBtF,OAEJ0D,GACGqB,EAAAA,IAACQ,EAAAA,eAAc,CAACC,KAAMjF,EAAQ+E,SAC1BP,EAAAA,IAACU,EAAAA,qBAAoB,CACjBxD,QAASA,EACTyD,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAAA,IAAC1F,EAAsBwG,SAAQ,CAC3BC,MAAOpB,WAEPK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EAASlB,EAAU,CAAEX,MAAOY,EAAUsB,SACjCrF,EAAeyE,cAMrC,4BArLsB,IACtBhE,EAAAA,WAAWrB"}
+{"version":3,"file":"element-with-dropdown.js","sources":["../../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n    Middleware,\n    OpenChangeReason,\n    Placement,\n} from \"@floating-ui/react\";\nimport {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useEffect, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../../theme\";\nimport { useEvent, usePrevious } from \"../../util\";\nimport * as elementWithDropdownStyles from \"./element-with-dropdown.styles\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n    elementWidth: number;\n    styles: CSSProperties;\n    setFloatingRef: (node: HTMLElement | null) => void;\n    getFloatingProps: (\n        userProps?: React.HTMLProps<HTMLElement>\n    ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n    enabled: boolean;\n    isOpen: boolean;\n    onOpen?: (() => void) | undefined;\n    onClose?: ((reason: OpenChangeReason | undefined) => void) | undefined;\n    onDismiss?: (() => void) | undefined;\n    onHide?: (() => void) | undefined;\n    renderElement: () => React.ReactNode;\n    renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n    customZIndex?: number | undefined;\n    clickToToggle?: boolean | undefined;\n    /* the distance between the reference element and the dropdown */\n    offset?: number | undefined;\n    /* the alignment of the dropdown to the left or right of the reference element */\n    alignment?: DropdownAlignmentType | undefined;\n    fitAvailableHeight?: boolean | undefined;\n    /**\n     * The root element that contains the popover element. Defaults to the document body.\n     *\n     * If the parent that contains the trigger element has a higher z-index than the popover,\n     * the popover may not be visible. Specify the parent element here instead\n     */\n    rootNode?: RefObject<HTMLElement> | undefined;\n    /** If set, the `elementWidth` refers to this instead of the reference element */\n    positionRef?: RefObject<HTMLElement> | undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n    switch (alignment) {\n        case \"right\":\n            return \"bottom-end\";\n        case \"left\":\n        default:\n            return \"bottom-start\";\n    }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n    elementWidth: 0,\n    styles: {},\n    setFloatingRef: () => {\n        // noop\n    },\n    getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n    return useContext(DropdownRenderContext);\n};\n\n/**\n * A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n *\n * Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n *   `max-height: min(100px, var(--available-height, infinity * 1px))`\n *\n * Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n *   ref={setFloatingRef}\n *   style={styles}\n *   {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n *\n * If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n *   onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n    enabled,\n    isOpen,\n    onOpen,\n    onClose,\n    onDismiss,\n    onHide,\n    renderElement,\n    renderDropdown,\n    customZIndex,\n    clickToToggle = false,\n    offset: dropdownOffset = 0,\n    alignment = \"left\",\n    fitAvailableHeight,\n    rootNode,\n    positionRef,\n}: ElementWithDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const elementRef = useRef<HTMLDivElement | null>(null);\n    const { width: referenceWidth = 0 } = useResizeDetector({\n        targetRef: positionRef ?? elementRef,\n        handleHeight: false,\n    });\n    const center: Middleware = {\n        name: \"center\",\n        fn: ({ x, rects }) => {\n            const noGapInBetween =\n                x === 0 || x + rects.floating.width === window.innerWidth;\n            return {\n                x:\n                    noGapInBetween && isMobile\n                        ? (window.innerWidth - rects.floating.width) / 2\n                        : x,\n            };\n        },\n    };\n    const { refs, floatingStyles, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open, _event, reason) => {\n            if (reason === \"escape-key\") {\n                onDismiss?.();\n            } else if (open && !isOpen) {\n                onOpen?.();\n            } else if (!open && isOpen) {\n                onClose?.(reason);\n            }\n        },\n        whileElementsMounted: autoUpdate,\n        placement: getFloatingPlacement(alignment),\n        middleware: [\n            offset(dropdownOffset),\n            flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            size({\n                // shrink to fit available vertical space\n                apply({ availableHeight, elements }) {\n                    if (\n                        !fitAvailableHeight ||\n                        availableHeight >= elements.floating.scrollHeight\n                    ) {\n                        // reset this so that dropdown can expand as needed\n                        elements.floating.style.setProperty(\n                            elementWithDropdownStyles.tokens.availableHeight,\n                            \"\"\n                        );\n                        return;\n                    }\n\n                    elements.floating.style.setProperty(\n                        elementWithDropdownStyles.tokens.availableHeight,\n                        `${Math.max(0, availableHeight)}px`\n                    );\n                },\n            }),\n            center,\n        ],\n    });\n    const parentZIndex = useFloatingChild();\n\n    const { isMounted, styles } = useTransitionStyles(context, {\n        initial: { opacity: 0 },\n        open: { opacity: 1 },\n        duration: 300,\n    });\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    const click = useClick(context, {\n        enabled,\n        toggle: clickToToggle,\n        keyboardHandlers: clickToToggle,\n    });\n    const dismiss = useDismiss(context, { enabled });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n    ]);\n\n    // =========================================================================\n    // ON HIDE EFFECT\n    // =========================================================================\n    const prevIsMounted = usePrevious(isMounted);\n    const onHideEvent = useEvent(() => onHide?.());\n\n    useEffect(() => {\n        if (prevIsMounted && !isMounted) {\n            onHideEvent();\n        }\n    }, [prevIsMounted, isMounted, onHideEvent]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const dropdownRenderProps = {\n        elementWidth: referenceWidth,\n        styles: {\n            ...styles,\n            ...floatingStyles,\n            zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n        },\n        setFloatingRef: refs.setFloating,\n        getFloatingProps,\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    elementRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps()}\n            >\n                {renderElement()}\n            </div>\n            {isMounted && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                        returnFocus={false} // leads to focus trap. parent to handle the final focus state\n                    >\n                        <DropdownRenderContext.Provider\n                            value={dropdownRenderProps}\n                        >\n                            <div {...themeProps} style={themeStyle}>\n                                {renderDropdown(dropdownRenderProps)}\n                            </div>\n                        </DropdownRenderContext.Provider>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","enabled","isOpen","onOpen","onClose","onDismiss","onHide","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","isMobile","useMaxWidthMediaQuery","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","floating","window","innerWidth","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","elementWithDropdownStyles.tokens","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","prevIsMounted","usePrevious","onHideEvent","useEvent","useEffect","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value","useContext"],"mappings":"o2BAkEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAAA,cAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,iEAqCI,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,SACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBlB,YAAY,OACZmB,qBACAC,WACAC,wBAKA,MAAMC,EAAWC,EAAAA,sBAAsB,MACjCC,EAAaC,EAAAA,OAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAAA,kBAAkB,CACpDC,UAAWR,QAAAA,EAAeG,EAC1BM,cAAc,IAEZC,EAAqB,CACvBC,KAAM,SACNC,GAAI,EAAGC,IAAGC,YAGC,CACHD,GAFM,IAANA,GAAWA,EAAIC,EAAMC,SAASV,QAAUW,OAAOC,aAGzBhB,GACXe,OAAOC,WAAaH,EAAMC,SAASV,OAAS,EAC7CQ,MAIhBK,KAAEA,EAAIC,eAAEA,EAAcC,QAAEA,GAAYC,EAAAA,YAAY,CAClDC,KAAMnC,EACNoC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAnC,SAAAA,IACOgC,IAASnC,EAChBC,SAAAA,KACQkC,GAAQnC,IAChBE,SAAAA,EAAUoC,GACd,EAEJC,qBAAsBC,EAAAA,WACtBC,UAAWlD,EAAqBC,GAChCkD,WAAY,CACRjC,EAAAA,OAAOC,GACPiC,SACAC,QAAM,CACFC,QAASC,EAAAA,eAEbC,OAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhBvC,GACDsC,GAAmBC,EAAStB,SAASuB,aAGrCD,EAAStB,SAASwB,MAAMC,YACpBC,EAAAA,OAAiCL,gBACjC,IAKRC,EAAStB,SAASwB,MAAMC,YACpBC,EAAAA,OAAiCL,gBACjC,GAAGM,KAAKC,IAAI,EAAGP,OAEvB,IAEJ1B,KAGFkC,EAAeC,EAAAA,oBAEfC,UAAEA,EAAS/D,OAAEA,GAAWgE,EAAAA,oBAAoB3B,EAAS,CACvD4B,QAAS,CAAEC,QAAS,GACpB3B,KAAM,CAAE2B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,GAAeC,EAAAA,uBAAuBP,GAEpDQ,EAAQC,EAAAA,SAASnC,EAAS,CAC5BlC,UACAsE,OAAQ7D,EACR8D,iBAAkB9D,IAEhB+D,EAAUC,EAAAA,WAAWvC,EAAS,CAAElC,aAEhC0E,kBAAEA,EAAiB3E,iBAAEA,GAAqB4E,kBAAgB,CAC5DP,EACAI,IAMEI,EAAgBC,EAAAA,YAAYjB,GAC5BkB,EAAcC,YAAS,IAAM1E,aAAM,EAANA,MAEnC2E,EAAAA,WAAU,KACFJ,IAAkBhB,GAClBkB,GACJ,GACD,CAACF,EAAehB,EAAWkB,IAK9B,MAAMG,EAAsB,CACxBrF,aAAcwB,EACdvB,oDACOA,GACAoC,GAAc,CACjBiD,OAAoC,QAA5BC,EAAA3E,QAAAA,EAAgBkD,SAAY,IAAAyB,EAAAA,EAxKxB,KA0KhBrF,eAAgBkC,EAAKoD,YACrBrF,oBAGJ,OACIsF,6BACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFzE,EAAW0E,QAAUD,EACrB1D,EAAK4D,aAAaF,EAAK,GAEvBhB,IAAmB,CAAAmB,SAEtBvF,OAEJsD,GACG0B,EAAAA,IAACQ,EAAAA,eAAc,CAACC,KAAMlF,EAAQgF,SAC1BP,EAAAA,IAACU,EAAAA,qBAAoB,CACjB9D,QAASA,EACT+D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAAA,IAAC5F,EAAsB0G,SAAQ,CAC3BC,MAAOpB,WAEPK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EAASvB,EAAU,CAAEZ,MAAOa,EAAU2B,SACjCtF,EAAe0E,cAMrC,4BAhMsB,IACtBqB,EAAAA,WAAW5G"}

package/cjs/shared/dropdown-wrapper/element-with-dropdown.styles.js

@@ -0,0 +1,2 @@
+"use strict";exports.tokens={availableHeight:"--fds-internal-dropdownWrapper-availableHeight"};
+//# sourceMappingURL=element-with-dropdown.styles.js.map

package/cjs/shared/dropdown-wrapper/element-with-dropdown.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-with-dropdown.styles.js","sources":["../../../../src/shared/dropdown-wrapper/element-with-dropdown.styles.ts"],"sourcesContent":["export const tokens = {\n    availableHeight: \"--fds-internal-dropdownWrapper-availableHeight\",\n};\n"],"names":["availableHeight"],"mappings":"4BAAsB,CAClBA,gBAAiB"}

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"),s=require("@lifesg/react-icons/chevron-right"),a=require("clsx"),i=require("../../external/lodash/throttle.js"),o=require("react"),l=require("../../external/react-resize-detector/build/index.esm.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var n=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var c=require("../clickable-icon/clickable-icon.js"),d=require("./fade-wrapper.styles.js"),u=require("./helpers.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=f(a);const j=o.forwardRef(((a,f)=>{var{children:j,className:m,fadeColor:q,fadePosition:g="both",showIndicator:p=!1,onResize:v}=a,b=e.__rest(a,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[x,k]=o.useState("left"===g||"both"===g),[R,C]=o.useState("right"===g||"both"===g),y=o.useRef(null),I=o.useRef(null),N=o.useRef(null),L=o.useRef(null),w=u.getFadeColorSet(q);n.useApplyStyle(N,{[d.tokens.backgroundColor]:u.getFadeBackgroundColorValue(w.left,p)}),n.useApplyStyle(L,{[d.tokens.backgroundColor]:u.getFadeBackgroundColorValue(w.right,p)}),l.useResizeDetector({onResize:S,targetRef:y,refreshMode:"debounce",refreshRate:50}),o.useImperativeHandle(f,(()=>({resize(){S()}})));const z=o.useCallback((()=>{const e=y.current,r=I.current;e&&r&&r.scrollWidth>e.offsetWidth?(C(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),k(r.scrollLeft>=1)):(C(!1),k(!1))}),[]),F=o.useMemo((()=>i.default(z,50)),[z]);function S(){z(),v&&v({content:I.current,wrapper:y.current})}o.useEffect((()=>{const e=I.current;return z(),e&&e.addEventListener("scroll",F),()=>{e&&e.removeEventListener("scroll",F),F.cancel()}}),[z,F]);return r.jsxs("div",Object.assign({ref:y,className:h.default(d.wrapper,m)},b,{children:[r.jsx("div",{ref:I,className:d.content,children:j}),r.jsxs(r.Fragment,{children:[x&&r.jsx("div",{ref:N,className:h.default(d.fade,d.fadeLeft),"data-id":"left-fade",children:p&&r.jsx(c.ClickableIcon,{className:h.default(d.fadeIndicatorButton,d.indicatorLeft),"data-id":"left-fade-indicator-button",children:r.jsx(t.ChevronLeftIcon,{})})}),R&&r.jsx("div",{ref:L,className:h.default(d.fade,d.fadeRight),"data-id":"right-fade",children:p&&r.jsx(c.ClickableIcon,{className:h.default(d.fadeIndicatorButton,d.indicatorRight),"data-id":"right-fade-indicator-button",children:r.jsx(s.ChevronRightIcon,{})})})]})]}))}));exports.FadeWrapper=j;
 //# 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 type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    Content,\n    Fade,\n    FadeIndicatorButton,\n    Wrapper,\n} from \"./fade-wrapper.style\";\nimport type { 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":"+VAqBA,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 clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport * as styles from \"./fade-wrapper.styles\";\nimport { getFadeBackgroundColorValue, getFadeColorSet } from \"./helpers\";\nimport type { FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\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    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    const fadeColorSet = getFadeColorSet(fadeColor);\n\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.left,\n            showIndicator\n        ),\n    });\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.right,\n            showIndicator\n        ),\n    });\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    const handleScroll = useCallback(() => {\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    const throttledScrollHandler = useMemo(() => {\n        return throttle(handleScroll, 50);\n    }, [handleScroll]);\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            throttledScrollHandler.cancel();\n        };\n    }, [handleScroll, throttledScrollHandler]);\n\n    // =========================================================================\n    // EVENT HANDLERS\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        return (\n            <>\n                {showFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorLeft\n                                )}\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n                {showFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorRight\n                                )}\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <div ref={contentRef} className={styles.content}>\n                {children}\n            </div>\n            {renderFade()}\n        </div>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","className","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","fadeColorSet","getFadeColorSet","useApplyStyle","styles.tokens","backgroundColor","getFadeBackgroundColorValue","left","right","useResizeDetector","handleResize","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","handleScroll","useCallback","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","throttledScrollHandler","useMemo","throttle","useEffect","addEventListener","removeEventListener","cancel","_jsxs","Object","assign","clsx","styles.wrapper","_jsx","styles.content","styles.fade","styles.fadeLeft","ClickableIcon","styles.fadeIndicatorButton","styles.indicatorLeft","ChevronLeftIcon","styles.fadeRight","styles.indicatorRight","ChevronRightIcon"],"mappings":"83BAsBA,MA0LaA,EAAcC,EAAAA,YA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAA,OAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EAAAA,SACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EAAAA,SACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAAA,OAAuB,MACpCC,EAAaD,EAAAA,OAAuB,MACpCE,EAAcF,EAAAA,OAAuB,MACrCG,EAAeH,EAAAA,OAAuB,MAEtCI,EAAeC,EAAAA,gBAAgBjB,GAErCkB,EAAAA,cAAcJ,EAAa,CACvB,CAACK,EAAAA,OAAcC,iBAAkBC,EAAAA,4BAC7BL,EAAaM,KACbpB,KAGRgB,EAAAA,cAAcH,EAAc,CACxB,CAACI,EAAAA,OAAcC,iBAAkBC,EAAAA,4BAC7BL,EAAaO,MACbrB,KAKRsB,oBAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAAA,oBAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,EAAAA,aAAY,KAC7B,MAAMC,EAAUtB,EAAWuB,QACrBC,EAAUtB,EAAWqB,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpD3B,EACI4B,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtC9B,EAAgB4B,EAAQK,YAAc,KAEtC9B,GAAiB,GACjBH,GAAgB,GACpB,GACD,IAEGkC,EAAyBC,EAAAA,SAAQ,IAC5BC,EAAAA,QAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,EAAAA,WAAU,KACN,MAAMT,EAAUtB,EAAWqB,QAQ3B,OANAH,IAEII,GACAA,EAAQU,iBAAiB,SAAUJ,GAGhC,KACCN,GACAA,EAAQW,oBAAoB,SAAUL,GAG1CA,EAAuBM,QAAQ,CAClC,GACF,CAAChB,EAAcU,IAsElB,OACIO,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAAA,QAAKC,EAAAA,QAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAAA,IAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,UAAcxD,SAC1CA,IAlDLkD,EAAAA,2BACK1C,GACG+C,EAAAA,IAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAAA,QAAKI,EAAAA,KAAaC,EAAAA,UAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAAAA,IAACI,EAAAA,cAAa,CACV1D,UAAWoD,EAAAA,QACPO,sBACAC,EAAAA,eACH,UACO,6BAA4B7D,SAEpCuD,EAAAA,IAACO,EAAAA,gBAAe,CAAA,OAK/BnD,GACG4C,EAAAA,IAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAAA,QAAKI,EAAAA,KAAaM,EAAAA,qBACrB,aAAY/D,SAEnBI,GACGmD,EAAAA,IAACI,EAAAA,cAAa,CACV1D,UAAWoD,EAAAA,QACPO,EAAAA,oBACAI,EAAAA,0BAEI,8BAA6BhE,SAErCuD,EAAAA,IAACU,EAAAA,iBAAgB,CAAA,aAmBnC"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./fade-wrapper.styles_16iug7l.css");exports.content="cv4qfjc",exports.fade="f4ndmik",exports.fadeIndicatorButton="fgwhr72",exports.fadeLeft="f10r53jk",exports.fadeRight="f1mdli9d",exports.indicatorLeft="i135a9q0",exports.indicatorRight="i18cgy8z",exports.tokens={backgroundColor:"--fds-internal-fadeWrapper-fade-backgroundColor"},exports.wrapper="wslc1qs";
+//# sourceMappingURL=fade-wrapper.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fade-wrapper.styles.js","sources":["../../../../src/shared/fade-wrapper/fade-wrapper.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../../theme/tokens\";\n\nexport const tokens = {\n    backgroundColor: \"--fds-internal-fadeWrapper-fade-backgroundColor\",\n};\n\nexport const wrapper = css`\n    position: relative;\n    width: 100%;\n`;\n\nexport const fade = css`\n    width: 64px;\n    height: 100%;\n    top: 0;\n    position: absolute;\n    pointer-events: none;\n    display: flex;\n    align-items: center;\n`;\n\nexport const fadeLeft = css`\n    left: 0;\n\n    ${MediaQuery.MaxWidth.lg} {\n        background-image: linear-gradient(\n            to right,\n            var(${tokens.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const fadeRight = css`\n    right: 0;\n\n    ${MediaQuery.MaxWidth.lg} {\n        background-image: linear-gradient(\n            to left,\n            var(${tokens.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const content = css`\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const fadeIndicatorButton = css`\n    display: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        height: 100%;\n        width: 100%;\n        padding: unset;\n        align-items: center;\n\n        svg {\n            color: ${Colour[\"icon\"]};\n        }\n    }\n`;\n\nexport const indicatorLeft = css`\n    justify-content: left;\n    padding-left: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const indicatorRight = css`\n    justify-content: right;\n    padding-right: ${Spacing[\"spacing-8\"]};\n`;\n"],"names":["backgroundColor"],"mappings":"6GA+CoB,uBAlCH,sCAgDe,2BAtCX,6BAYC,iCA0CI,kCAKC,0BA9EL,CAClBA,gBAAiB,mEAGD"}

package/cjs/shared/fade-wrapper/fade-wrapper.styles_16iug7l.css

@@ -0,0 +1,16 @@
+@layer fds{.wslc1qs{position:relative;width:100%;}
+.f4ndmik{width:64px;height:100%;top:0;position:absolute;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.f10r53jk{left:0;}:where(body.fds-breakpoint-lg-max) .f10r53jk{background-image:linear-gradient(
+            to right,
+            var(--fds-internal-fadeWrapper-fade-backgroundColor, var(--fds-colour-bg)),
+            rgba(255, 255, 255, 0.001)
+        );}
+.f1mdli9d{right:0;}:where(body.fds-breakpoint-lg-max) .f1mdli9d{background-image:linear-gradient(
+            to left,
+            var(--fds-internal-fadeWrapper-fade-backgroundColor, var(--fds-colour-bg)),
+            rgba(255, 255, 255, 0.001)
+        );}
+.cv4qfjc{position:relative;width:100%;height:100%;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;}.cv4qfjc::-webkit-scrollbar{display:none;}
+.fgwhr72{display:none;}:where(body.fds-breakpoint-lg-max) .fgwhr72{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;padding:unset;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .fgwhr72 svg{color:var(--fds-colour-icon);}
+.i135a9q0{-webkit-box-pack:left;-ms-flex-pack:left;-webkit-justify-content:left;justify-content:left;padding-left:var(--fds-spacing-8);}
+.i18cgy8z{-webkit-box-pack:right;-ms-flex-pack:right;-webkit-justify-content:right;justify-content:right;padding-right:var(--fds-spacing-8);}}

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

@@ -0,0 +1,2 @@
+"use strict";require("../../theme/theme-provider/index.js"),require("react"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var e=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("../../theme/utils/use-media-query.js"),exports.getFadeBackgroundColorValue=function(r,t){return r&&r.length>0?r.join(", "):t?`${e.Colour.bg}, ${e.Colour.bg}`:null},exports.getFadeColorSet=function(e){return Array.isArray(e)&&e.length>0?{left:e,right:e}:e||{left:void 0,right:void 0}};
+//# sourceMappingURL=helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../../src/shared/fade-wrapper/helpers.tsx"],"sourcesContent":["import { Colour } from \"../../theme\";\nimport type { FadeColorSet, FadeWrapperProps } from \"./types\";\n\nexport function getFadeColorSet(\n    fadeColor: FadeWrapperProps[\"fadeColor\"] | undefined\n): FadeColorSet {\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        return {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    }\n\n    if (fadeColor) {\n        return fadeColor as FadeColorSet;\n    }\n\n    return {\n        left: undefined,\n        right: undefined,\n    };\n}\n\nexport function getFadeBackgroundColorValue(\n    color: string[] | undefined,\n    showIndicator: boolean\n) {\n    if (color && color.length > 0) {\n        return color.join(\", \");\n    }\n\n    if (showIndicator) {\n        return `${Colour.bg}, ${Colour.bg}`;\n    }\n\n    return null;\n}\n"],"names":["color","showIndicator","length","join","Colour","bg","fadeColor","Array","isArray","left","right","undefined"],"mappings":"2kBAuBM,SACFA,EACAC,GAEA,OAAID,GAASA,EAAME,OAAS,EACjBF,EAAMG,KAAK,MAGlBF,EACO,GAAGG,EAAAA,OAAOC,OAAOD,EAAAA,OAAOC,KAG5B,IACX,0BAjCM,SACFC,GAEA,OAAIC,MAAMC,QAAQF,IAAcA,EAAUJ,OAAS,EACxC,CACHO,KAAMH,EACNI,MAAOJ,GAIXA,GAIG,CACHG,UAAME,EACND,WAAOC,EAEf"}

package/cjs/shared/hooks/use-state-callback.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react");exports.useStateCallback=r=>{const[t,u]=e.useState(r),c=e.useRef(void 0),s=e.useCallback(((e,r)=>{c.current=r,u(e)}),[]);return e.useEffect((()=>{c.current&&(c.current(t),c.current=void 0)}),[t]),[t,s]};
+//# sourceMappingURL=use-state-callback.js.map

package/cjs/shared/hooks/use-state-callback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-state-callback.js","sources":["../../../../src/shared/hooks/use-state-callback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\ntype SetStateAction<S> = S | ((prevState: S) => S);\ntype SetStateCallback<S> = (state: S) => void;\ntype SetStateDispatch<S> = (\n    state: SetStateAction<S>,\n    callback?: SetStateCallback<S>\n) => void;\n\nexport const useStateCallback = <S>(\n    initialState: S | (() => S)\n): [S, SetStateDispatch<S>] => {\n    const [state, setState] = useState<S>(initialState);\n    const callbackRef = useRef<SetStateCallback<S> | undefined>(undefined);\n\n    const setStateDispatch = useCallback<SetStateDispatch<S>>(\n        (value, callback) => {\n            callbackRef.current = callback;\n            setState(value);\n        },\n        []\n    );\n\n    useEffect(() => {\n        if (callbackRef.current) {\n            callbackRef.current(state);\n            callbackRef.current = undefined;\n        }\n    }, [state]);\n\n    return [state, setStateDispatch];\n};\n"],"names":["initialState","state","setState","useState","callbackRef","useRef","undefined","setStateDispatch","useCallback","value","callback","current","useEffect"],"mappings":"6DAUIA,IAEA,MAAOC,EAAOC,GAAYC,EAAAA,SAAYH,GAChCI,EAAcC,EAAAA,YAAwCC,GAEtDC,EAAmBC,EAAAA,aACrB,CAACC,EAAOC,KACJN,EAAYO,QAAUD,EACtBR,EAASO,EAAM,GAEnB,IAUJ,OAPAG,EAAAA,WAAU,KACFR,EAAYO,UACZP,EAAYO,QAAQV,GACpBG,EAAYO,aAAUL,EAC1B,GACD,CAACL,IAEG,CAACA,EAAOM,EAAiB"}

package/cjs/shared/hooks/useViewport.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react");exports.useViewport=()=>{const[i,t]=e.useState(),[r,s]=e.useState(),o=e.useCallback((()=>{const e=.01*window.innerHeight;t(e)}),[]),w=e.useCallback((()=>{if(window.visualViewport){const e=.01*window.visualViewport.height;t(e),s(window.visualViewport.offsetTop)}}),[]);return e.useEffect((()=>window.visualViewport?(w(),window.visualViewport.addEventListener("resize",w),()=>{var e;null===(e=window.visualViewport)||void 0===e||e.removeEventListener("resize",w)}):(o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)})),[]),{verticalHeight:i,offsetTop:r}};
+"use strict";var e=require("react");exports.useViewport=({enabled:r=!1,onBeforeStart:t}={})=>{const[i,n]=e.useState(),[u,o]=e.useState(!1),s=e.useRef([]),l=e.useRef(null),a=e.useRef(!1),w=e.useRef(t);e.useEffect((()=>{w.current=t}),[t]);const c=e.useCallback((()=>{const e=.01*window.innerHeight;n(e)}),[]),v=e.useCallback((()=>{if(window.visualViewport){const e=.01*window.visualViewport.height;n(e)}}),[]);return e.useEffect((()=>window.visualViewport?(v(),window.visualViewport.addEventListener("resize",v),()=>{var e;null===(e=window.visualViewport)||void 0===e||e.removeEventListener("resize",v)}):(c(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[v,c]),e.useEffect((()=>{var e;const t=e=>{s.current.push(requestAnimationFrame(e))},i=()=>{s.current.forEach((e=>cancelAnimationFrame(e))),s.current=[],null!==l.current&&(clearTimeout(l.current),l.current=null),a.current=!1},n=()=>{a.current||(a.current=!0,o(!0))};return i(),o(!1),r?(null===(e=w.current)||void 0===e||e.call(w),window.visualViewport?((()=>{var e,r;let i=null!==(r=null===(e=window.visualViewport)||void 0===e?void 0:e.height)&&void 0!==r?r:window.innerHeight,u=0;const o=()=>{var e,r;const s=null!==(r=null===(e=window.visualViewport)||void 0===e?void 0:e.height)&&void 0!==r?r:window.innerHeight;Math.abs(s-i)<.5?u+=1:(u=0,i=s),u>=2?n():t(o)};t(o)})(),l.current=setTimeout(n,180),i):(t(n),i)):i}),[r]),{verticalHeight:i,ready:u}};
 //# sourceMappingURL=useViewport.js.map

package/cjs/shared/hooks/useViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"useViewport.js","sources":["../../../../src/shared/hooks/useViewport.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\nexport const useViewport = () => {\n    const [verticalHeight, setVerticalHeight] = useState<number>();\n    const [offsetTop, setOffsetTop] = useState<number>();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = useCallback(() => {\n        const newVerticalHeight = window.innerHeight * 0.01;\n        setVerticalHeight(newVerticalHeight);\n    }, []);\n\n    const handleViewportResize = useCallback(() => {\n        if (window.visualViewport) {\n            const newVerticalHeight = window.visualViewport.height * 0.01;\n            setVerticalHeight(newVerticalHeight);\n            setOffsetTop(window.visualViewport.offsetTop);\n        }\n    }, []);\n\n    useEffect(() => {\n        // set initial vh\n\n        // use VisualViewport API if available, it gives more accurate dimensions when iOS software keyboard is active\n        if (window.visualViewport) {\n            handleViewportResize();\n            window.visualViewport.addEventListener(\n                \"resize\",\n                handleViewportResize\n            );\n            return () => {\n                window.visualViewport?.removeEventListener(\n                    \"resize\",\n                    handleViewportResize\n                );\n            };\n        } else {\n            // fallback to Window API\n            handleWindowResize();\n            window.addEventListener(\"resize\", handleWindowResize);\n            return () => {\n                window.removeEventListener(\"resize\", handleWindowResize);\n            };\n        }\n    }, []);\n\n    return {\n        verticalHeight,\n        offsetTop,\n    };\n};\n"],"names":["verticalHeight","setVerticalHeight","useState","offsetTop","setOffsetTop","handleWindowResize","useCallback","newVerticalHeight","window","innerHeight","handleViewportResize","visualViewport","height","useEffect","addEventListener","_a","removeEventListener"],"mappings":"wDAE2B,KACvB,MAAOA,EAAgBC,GAAqBC,cACrCC,EAAWC,GAAgBF,aAK5BG,EAAqBC,EAAAA,aAAY,KACnC,MAAMC,EAAyC,IAArBC,OAAOC,YACjCR,EAAkBM,EAAkB,GACrC,IAEGG,EAAuBJ,EAAAA,aAAY,KACrC,GAAIE,OAAOG,eAAgB,CACvB,MAAMJ,EAAmD,IAA/BC,OAAOG,eAAeC,OAChDX,EAAkBM,GAClBH,EAAaI,OAAOG,eAAeR,UACvC,IACD,IA4BH,OA1BAU,EAAAA,WAAU,IAIFL,OAAOG,gBACPD,IACAF,OAAOG,eAAeG,iBAClB,SACAJ,GAEG,WACkB,QAArBK,EAAAP,OAAOG,sBAAc,IAAAI,GAAAA,EAAEC,oBACnB,SACAN,EACH,IAILL,IACAG,OAAOM,iBAAiB,SAAUT,GAC3B,KACHG,OAAOQ,oBAAoB,SAAUX,EAAmB,IAGjE,IAEI,CACHL,iBACAG,YACH"}
+{"version":3,"file":"useViewport.js","sources":["../../../../src/shared/hooks/useViewport.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nconst STABLE_FRAMES = 2;\nconst HEIGHT_OFFSET = 0.5;\n// This 180 ms duration is chosen to align with the mobile Chrome/keyboard animation (150–300 ms range) and the modal’s entrance `transition-delay` (200 ms) before we force it into the `ready` state.\nconst FALLBACK_TIME = 180;\n\ninterface UseViewportProps {\n    enabled?: boolean;\n    onBeforeStart?: () => void;\n}\n\nexport const useViewport = ({\n    enabled = false,\n    onBeforeStart,\n}: UseViewportProps = {}) => {\n    const [verticalHeight, setVerticalHeight] = useState<number>();\n    const [ready, setReady] = useState(false);\n    const pendingFramesRef = useRef<number[]>([]);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const hasResolvedRef = useRef(false);\n    const onBeforeStartRef = useRef(onBeforeStart);\n\n    useEffect(() => {\n        onBeforeStartRef.current = onBeforeStart;\n    }, [onBeforeStart]);\n\n    const handleWindowResize = useCallback(() => {\n        const newVerticalHeight = window.innerHeight * 0.01;\n        setVerticalHeight(newVerticalHeight);\n    }, []);\n\n    const handleViewportResize = useCallback(() => {\n        if (window.visualViewport) {\n            const newVerticalHeight = window.visualViewport.height * 0.01;\n            setVerticalHeight(newVerticalHeight);\n        }\n    }, []);\n\n    useEffect(() => {\n        // set initial vh\n\n        // use VisualViewport API if available, it gives more accurate dimensions when iOS software keyboard is active\n        if (window.visualViewport) {\n            handleViewportResize();\n            window.visualViewport.addEventListener(\n                \"resize\",\n                handleViewportResize\n            );\n            return () => {\n                window.visualViewport?.removeEventListener(\n                    \"resize\",\n                    handleViewportResize\n                );\n            };\n        }\n\n        handleWindowResize();\n        window.addEventListener(\"resize\", handleWindowResize);\n        return () => {\n            window.removeEventListener(\"resize\", handleWindowResize);\n        };\n    }, [handleViewportResize, handleWindowResize]);\n\n    useEffect(() => {\n        const scheduleFrame = (fn: FrameRequestCallback) => {\n            pendingFramesRef.current.push(requestAnimationFrame(fn));\n        };\n\n        const clearPending = () => {\n            pendingFramesRef.current.forEach((id) => cancelAnimationFrame(id));\n            pendingFramesRef.current = [];\n\n            if (timeoutRef.current !== null) {\n                clearTimeout(timeoutRef.current);\n                timeoutRef.current = null;\n            }\n\n            hasResolvedRef.current = false;\n        };\n\n        const resolve = () => {\n            if (hasResolvedRef.current) {\n                return;\n            }\n            hasResolvedRef.current = true;\n            setReady(true);\n        };\n        // Compare the viewport height across consecutive frames;\n        // once it remains stable for at least 2 frames, trigger the modal animation\n        const waitForStableViewport = () => {\n            let lastHeight =\n                window.visualViewport?.height ?? window.innerHeight;\n            let stableFrames = 0;\n\n            const checkViewportStability = () => {\n                const currentHeight =\n                    window.visualViewport?.height ?? window.innerHeight;\n                // Use a small offset to account for fluctuations in reported height\n                // even when the viewport hasn’t actually changed\n                if (Math.abs(currentHeight - lastHeight) < HEIGHT_OFFSET) {\n                    stableFrames += 1;\n                } else {\n                    stableFrames = 0;\n                    lastHeight = currentHeight;\n                }\n\n                if (stableFrames >= STABLE_FRAMES) {\n                    resolve();\n                    return;\n                }\n\n                scheduleFrame(checkViewportStability);\n            };\n\n            scheduleFrame(checkViewportStability);\n        };\n\n        clearPending();\n        setReady(false);\n\n        if (!enabled) {\n            return clearPending;\n        }\n\n        onBeforeStartRef.current?.();\n\n        if (!window.visualViewport) {\n            scheduleFrame(resolve);\n            return clearPending;\n        }\n\n        waitForStableViewport();\n        timeoutRef.current = setTimeout(resolve, FALLBACK_TIME);\n\n        return clearPending;\n    }, [enabled]);\n\n    return {\n        verticalHeight,\n        ready,\n    };\n};\n"],"names":["enabled","onBeforeStart","verticalHeight","setVerticalHeight","useState","ready","setReady","pendingFramesRef","useRef","timeoutRef","hasResolvedRef","onBeforeStartRef","useEffect","current","handleWindowResize","useCallback","newVerticalHeight","window","innerHeight","handleViewportResize","visualViewport","height","addEventListener","_a","removeEventListener","scheduleFrame","fn","push","requestAnimationFrame","clearPending","forEach","id","cancelAnimationFrame","clearTimeout","resolve","call","lastHeight","_b","stableFrames","checkViewportStability","currentHeight","Math","abs","waitForStableViewport","setTimeout"],"mappings":"wDAY2B,EACvBA,WAAU,EACVC,iBACkB,CAAA,KAClB,MAAOC,EAAgBC,GAAqBC,cACrCC,EAAOC,GAAYF,EAAAA,UAAS,GAC7BG,EAAmBC,EAAAA,OAAiB,IACpCC,EAAaD,EAAAA,OAA6C,MAC1DE,EAAiBF,EAAAA,QAAO,GACxBG,EAAmBH,EAAAA,OAAOP,GAEhCW,EAAAA,WAAU,KACND,EAAiBE,QAAUZ,CAAa,GACzC,CAACA,IAEJ,MAAMa,EAAqBC,EAAAA,aAAY,KACnC,MAAMC,EAAyC,IAArBC,OAAOC,YACjCf,EAAkBa,EAAkB,GACrC,IAEGG,EAAuBJ,EAAAA,aAAY,KACrC,GAAIE,OAAOG,eAAgB,CACvB,MAAMJ,EAAmD,IAA/BC,OAAOG,eAAeC,OAChDlB,EAAkBa,EACtB,IACD,IAqGH,OAnGAJ,EAAAA,WAAU,IAIFK,OAAOG,gBACPD,IACAF,OAAOG,eAAeE,iBAClB,SACAH,GAEG,WACkB,QAArBI,EAAAN,OAAOG,sBAAc,IAAAG,GAAAA,EAAEC,oBACnB,SACAL,EACH,IAITL,IACAG,OAAOK,iBAAiB,SAAUR,GAC3B,KACHG,OAAOO,oBAAoB,SAAUV,EAAmB,IAE7D,CAACK,EAAsBL,IAE1BF,EAAAA,WAAU,WACN,MAAMa,EAAiBC,IACnBnB,EAAiBM,QAAQc,KAAKC,sBAAsBF,GAAI,EAGtDG,EAAe,KACjBtB,EAAiBM,QAAQiB,SAASC,GAAOC,qBAAqBD,KAC9DxB,EAAiBM,QAAU,GAEA,OAAvBJ,EAAWI,UACXoB,aAAaxB,EAAWI,SACxBJ,EAAWI,QAAU,MAGzBH,EAAeG,SAAU,CAAK,EAG5BqB,EAAU,KACRxB,EAAeG,UAGnBH,EAAeG,SAAU,EACzBP,GAAS,GAAK,EAmClB,OAHAuB,IACAvB,GAAS,GAEJN,GAImB,QAAxBuB,EAAAZ,EAAiBE,eAAO,IAAAU,GAAAA,EAAAY,KAAAxB,GAEnBM,OAAOG,gBArCkB,cAC1B,IAAIgB,EAC6B,QAA7BC,EAAqB,QAArBd,EAAAN,OAAOG,sBAAc,IAAAG,OAAA,EAAAA,EAAEF,cAAM,IAAAgB,EAAAA,EAAIpB,OAAOC,YACxCoB,EAAe,EAEnB,MAAMC,EAAyB,aAC3B,MAAMC,EAC2B,QAA7BH,EAAqB,QAArBd,EAAAN,OAAOG,sBAAc,IAAAG,OAAA,EAAAA,EAAEF,cAAM,IAAAgB,EAAAA,EAAIpB,OAAOC,YAGxCuB,KAAKC,IAAIF,EAAgBJ,GAjGvB,GAkGFE,GAAgB,GAEhBA,EAAe,EACfF,EAAaI,GAGbF,GAzGE,EA0GFJ,IAIJT,EAAcc,EAAuB,EAGzCd,EAAcc,EAAuB,EAiBzCI,GACAlC,EAAWI,QAAU+B,WAAWV,EAhIlB,KAkIPL,IAPHJ,EAAcS,GACPL,IAPAA,CAaQ,GACpB,CAAC7B,IAEG,CACHE,iBACAG,QACH"}

package/cjs/shared/image-placeholder/image-placeholder.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),s=require("./image-placeholder.style.js");exports.ImagePlaceholder=a=>e.jsx(s.Placeholder,Object.assign({},a,{children:e.jsx(r.PlaceholderImageIcon,{})}));
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("clsx"),l=require("./image-placeholder.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(a);exports.ImagePlaceholder=({className:a})=>e.jsx("div",{className:c.default(l.placeholder,a),children:e.jsx(r.PlaceholderImageIcon,{})});
 //# sourceMappingURL=image-placeholder.js.map

package/cjs/shared/image-placeholder/image-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-placeholder.js","sources":["../../../../src/shared/image-placeholder/image-placeholder.tsx"],"sourcesContent":["import { PlaceholderImageIcon } from \"@lifesg/react-icons\";\n\nimport { Placeholder } from \"./image-placeholder.style\";\n\nexport interface ImagePlaceholderProps {\n    className?: string | undefined;\n}\n\nexport const ImagePlaceholder = (props: ImagePlaceholderProps) => {\n    return (\n        <Placeholder {...props}>\n            <PlaceholderImageIcon />\n        </Placeholder>\n    );\n};\n"],"names":["props","_jsx","Placeholder","Object","assign","children","PlaceholderImageIcon"],"mappings":"oJAQiCA,GAEzBC,EAAAA,IAACC,EAAAA,YAAWC,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAK,SAClBJ,EAAAA,IAACK,EAAAA,qBAAoB,CAAA"}
+{"version":3,"file":"image-placeholder.js","sources":["../../../../src/shared/image-placeholder/image-placeholder.tsx"],"sourcesContent":["import { PlaceholderImageIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\n\nimport * as styles from \"./image-placeholder.styles\";\n\nexport interface ImagePlaceholderProps {\n    className?: string | undefined;\n}\n\nexport const ImagePlaceholder = ({ className }: ImagePlaceholderProps) => {\n    return (\n        <div className={clsx(styles.placeholder, className)}>\n            <PlaceholderImageIcon />\n        </div>\n    );\n};\n"],"names":["className","_jsx","clsx","styles.placeholder","children","PlaceholderImageIcon"],"mappings":"0PASgC,EAAGA,eAE3BC,EAAAA,IAAA,MAAA,CAAKD,UAAWE,EAAAA,QAAKC,EAAAA,YAAoBH,GAAUI,SAC/CH,EAAAA,IAACI,uBAAoB,CAAA"}

package/cjs/shared/image-placeholder/image-placeholder.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./image-placeholder.styles_44nwil.css");exports.placeholder="p74g98x";
+//# sourceMappingURL=image-placeholder.styles.js.map

package/cjs/shared/image-placeholder/image-placeholder.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-placeholder.styles.js","sources":["../../../../src/shared/image-placeholder/image-placeholder.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../../theme\";\n\nexport const placeholder = css`\n    background-color: ${Colour[\"bg-stronger\"]};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 1rem;\n\n    svg {\n        min-width: 48px;\n        width: 18%;\n        height: auto;\n        color: ${Colour[\"icon-subtle\"]};\n    }\n`;\n"],"names":[],"mappings":"0HAIwB"}

package/cjs/shared/image-placeholder/image-placeholder.styles_44nwil.css

@@ -0,0 +1 @@
+@layer fds{.p74g98x{background-color:var(--fds-colour-bg-stronger);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:1rem;}.p74g98x svg{min-width:48px;width:18%;height:auto;color:var(--fds-colour-icon-subtle);}}

package/cjs/shared/image-with-fallback/image-with-fallback.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("react/jsx-runtime"),t=require("./default.png.js");exports.ImageWithFallback=({src:a,alt:e,className:s,"data-testid":l})=>r.jsx("img",{src:a,alt:e||"",className:s,"data-testid":l,onError:r=>{r.target.onerror=null,r.target.src=t.default}});
+"use strict";var r=require("react/jsx-runtime"),e=require("react"),t=require("./default.png.js");exports.ImageWithFallback=({src:a,alt:s,className:l,"data-testid":u})=>{const c=e.useRef(null);e.useEffect((()=>{const r=c.current;r&&r.complete&&0===r.naturalHeight&&0===r.naturalWidth&&(r.onerror=null,r.src=t.default)}),[a]);return r.jsx("img",{ref:c,src:a,alt:s||"",className:l,"data-testid":u,onError:r=>{const e=r.target;e.onerror=null,e.src=t.default}})};
 //# sourceMappingURL=image-with-fallback.js.map

package/cjs/shared/image-with-fallback/image-with-fallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-with-fallback.js","sources":["../../../../src/shared/image-with-fallback/image-with-fallback.tsx"],"sourcesContent":["import image from \"./default.png\";\n\nexport interface ImageWithFallbackProps {\n    src: string;\n    alt?: string | undefined;\n    className?: string | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ImageWithFallback = ({\n    src,\n    alt,\n    className,\n    \"data-testid\": testId,\n}: ImageWithFallbackProps) => {\n    const handleError = (\n        event: React.SyntheticEvent<HTMLImageElement, Event>\n    ) => {\n        (event.target as HTMLImageElement).onerror = null;\n        (event.target as HTMLImageElement).src = image;\n    };\n\n    return (\n        <img\n            src={src}\n            alt={alt || \"\"}\n            className={className}\n            data-testid={testId}\n            onError={handleError}\n        />\n    );\n};\n"],"names":["src","alt","className","testId","_jsx","onError","event","target","onerror","image"],"mappings":"wGASiC,EAC7BA,MACAC,MACAC,YACA,cAAeC,KAUXC,EAAAA,WACIJ,IAAKA,EACLC,IAAKA,GAAO,GACZC,UAAWA,EAAS,cACPC,EACbE,QAZJC,IAECA,EAAMC,OAA4BC,QAAU,KAC5CF,EAAMC,OAA4BP,IAAMS,EAAAA,OAAK"}
+{"version":3,"file":"image-with-fallback.js","sources":["../../../../src/shared/image-with-fallback/image-with-fallback.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nimport image from \"./default.png\";\n\nexport interface ImageWithFallbackProps {\n    src: string;\n    alt?: string | undefined;\n    className?: string | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ImageWithFallback = ({\n    src,\n    alt,\n    className,\n    \"data-testid\": testId,\n}: ImageWithFallbackProps) => {\n    const ref = useRef<HTMLImageElement>(null);\n\n    useEffect(() => {\n        // onError does not run if image is loaded from cache, so we need to\n        // check if the image is actually able to render using naturalWidth and\n        // naturalHeight\n        const el = ref.current;\n        if (\n            el &&\n            el.complete &&\n            el.naturalHeight === 0 &&\n            el.naturalWidth === 0\n        ) {\n            el.onerror = null;\n            el.src = image;\n        }\n    }, [src]);\n\n    const handleError = (\n        event: React.SyntheticEvent<HTMLImageElement, Event>\n    ) => {\n        const el = event.target as HTMLImageElement;\n        el.onerror = null;\n        el.src = image;\n    };\n\n    return (\n        <img\n            ref={ref}\n            src={src}\n            alt={alt || \"\"}\n            className={className}\n            data-testid={testId}\n            onError={handleError}\n        />\n    );\n};\n"],"names":["src","alt","className","testId","ref","useRef","useEffect","el","current","complete","naturalHeight","naturalWidth","onerror","image","_jsx","onError","event","target"],"mappings":"2HAWiC,EAC7BA,MACAC,MACAC,YACA,cAAeC,MAEf,MAAMC,EAAMC,EAAAA,OAAyB,MAErCC,EAAAA,WAAU,KAIN,MAAMC,EAAKH,EAAII,QAEXD,GACAA,EAAGE,UACkB,IAArBF,EAAGG,eACiB,IAApBH,EAAGI,eAEHJ,EAAGK,QAAU,KACbL,EAAGP,IAAMa,EAAAA,QACb,GACD,CAACb,IAUJ,OACIc,EAAAA,IAAA,MAAA,CACIV,IAAKA,EACLJ,IAAKA,EACLC,IAAKA,GAAO,GACZC,UAAWA,EAAS,cACPC,EACbY,QAdJC,IAEA,MAAMT,EAAKS,EAAMC,OACjBV,EAAGK,QAAU,KACbL,EAAGP,IAAMa,EAAAA,OAAK,GAWZ"}

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

@@ -1,117 +1,2 @@
-"use strict";var o=require("styled-components"),r=require("../../v3_theme/index.js");function e(o){return o&&"object"==typeof o&&"default"in o?o:{default:o}}var n=e(o);const t=o.css`
-    outline-offset: -1px;
-    outline: ${r.V3_Border["width-020"]} ${r.V3_Border.solid}
-        ${r.V3_Colour["border-focus"]};
-`,i=o.css`
-    outline-color: ${r.V3_Colour["border-focus"]};
-`,d=o.css`
-    outline-color: ${r.V3_Colour["border-disabled"]};
-`,s=o.css`
-    outline-color: ${r.V3_Colour["border-error-focus"]};
-`,a=o.css`
-    outline: none;
-`,u=n.default.div`
-    border: ${r.V3_Border["width-010"]} ${r.V3_Border.solid}
-        ${r.V3_Colour.border};
-    border-radius: ${r.V3_Radius.sm};
-    background: ${r.V3_Colour.bg};
-
-    &:focus-within {
-        ${t}
-    }
-    ${o=>o.$focused&&!o.$noBorder&&t}
-
-    ${e=>e.$readOnly?o.css`
-                border-color: transparent;
-                padding: 0;
-                background: transparent !important;
-
-                &:focus-within {
-                    ${i}
-                }
-                ${e.$focused&&i}
-            `:e.$disabled?o.css`
-                background: ${r.V3_Colour["bg-disabled"]};
-                cursor: not-allowed;
-
-                &:focus-within {
-                    ${d}
-                }
-                ${e.$focused&&d}
-            `:e.$error?o.css`
-                border-color: ${r.V3_Colour["border-error"]};
-
-                &:focus-within {
-                    ${s}
-                }
-                ${e.$focused&&s}
-            `:void 0}
-    ${r=>{if(r.$noBorder)return o.css`
-                border-color: transparent;
-                background: transparent;
-                &:focus-within {
-                    ${a}
-                }
-            `}}
-`,l=n.default(u)`
-    display: flex;
-    align-items: center;
-    position: relative;
-    height: max-content;
-    width: 100%;
-    padding: 0 ${r.V3_Spacing["spacing-16"]} 0
-        ${o=>o.$readOnly?"0":r.V3_Spacing["spacing-16"]};
-    flex-direction: ${o=>"right"===o.$position?"row-reverse":"row"};
-`,c=n.default.input`
-    ${o=>"small"===o.$variant?r.V3_Font["body-md-regular"]:r.V3_Font["body-baseline-regular"]}
-    color: ${r.V3_Colour.text};
-    display: block;
-    background: transparent;
-    border: none;
-    outline: none;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-
-    &:disabled {
-        color: ${r.V3_Colour["text-subtler"]};
-
-        &:hover {
-            cursor: not-allowed;
-        }
-    }
-
-    &::placeholder,
-    &::-webkit-input-placeholder {
-        color: ${r.V3_Colour["text-subtler"]};
-    }
-
-    // Chrome, Safari, Edge, Opera
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-
-    // Safari (remove top shadow)
-    --webkit-appearance: none;
-
-    // Firefox
-    --moz-appearance: textfield;
-`,$=n.default.button`
-    background: transparent;
-    border: none;
-    outline: none;
-
-    &:focus,
-    &:active {
-        outline: none;
-    }
-
-    &:focus-visible {
-        outline: ${r.V3_Border["width-010"]} ${r.V3_Border.solid}
-            ${r.V3_Colour["border-focus"]};
-        border-radius: ${r.V3_Radius.sm};
-    }
-`;exports.BasicButton=$,exports.BasicInput=c,exports.InputBox=u,exports.InputWrapper=l;
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("@lifesg/react-icons/cross"),a=require("clsx"),t=require("react"),n=require("./input-wrapper.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(a);const u=t.forwardRef((function(s,a){const{disabled:t,error:o,readOnly:u,focused:c,noBorder:l,className:d}=s,p=e.__rest(s,["disabled","error","readOnly","focused","noBorder","className"]);return r.jsx("div",Object.assign({ref:a,"data-focused":c,className:i.default(n.inputBox,t&&n.inputBoxDisabled,o&&n.inputBoxError,u&&n.inputBoxReadOnly,l&&n.inputBoxNoBorder,d)},p))})),c=t.forwardRef((function(s,a){const{disabled:t,error:o,readOnly:u,focused:c,noBorder:l,position:d,className:p}=s,f=e.__rest(s,["disabled","error","readOnly","focused","noBorder","position","className"]);return r.jsx("div",Object.assign({ref:a,"data-focused":c,className:i.default(n.inputBox,n.inputWrapper,t&&n.inputBoxDisabled,o&&n.inputBoxError,u&&n.inputBoxReadOnly,l&&n.inputBoxNoBorder,u&&n.inputWrapperReadOnly,"right"===d&&n.inputWrapperPositionRight,p)},f))})),l=t.forwardRef((function(s,a){const{variant:t,className:o}=s,u=e.__rest(s,["variant","className"]);return r.jsx("input",Object.assign({ref:a,className:i.default(n.basicInput,"small"===t&&n.basicInputSmall,o)},u))})),d=t.forwardRef((function(s,a){var{className:t}=s,o=e.__rest(s,["className"]);return r.jsx("button",Object.assign({ref:a,className:i.default(n.basicButton,t)},o))})),p=t.forwardRef((function(a,t){var{className:o}=a,u=e.__rest(a,["className"]);return r.jsx("button",Object.assign({ref:t,className:i.default(n.clearButton,o)},u,{children:r.jsx(s.CrossIcon,{className:n.clearIcon,"aria-hidden":!0})}))}));exports.BasicButton=d,exports.BasicInput=l,exports.ClearButton=p,exports.InputBox=u,exports.InputWrapper=c;
 //# sourceMappingURL=input-wrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-wrapper.js","sources":["../../../../src/shared/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\nexport interface InputWrapperStyleProps {\n    $disabled?: boolean | undefined;\n    $error?: boolean | undefined;\n    $readOnly?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $position?: \"left\" | \"right\" | undefined;\n    $noBorder?: boolean | undefined;\n}\n\nexport interface InputStyleProps {\n    $variant?: \"small\" | \"default\" | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst defaultFocusCss = css`\n    outline-offset: -1px;\n    outline: ${V3_Border[\"width-020\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border-focus\"]};\n`;\n\nconst readOnlyFocusCss = css`\n    outline-color: ${V3_Colour[\"border-focus\"]};\n`;\n\nconst disabledFocusCss = css`\n    outline-color: ${V3_Colour[\"border-disabled\"]};\n`;\n\nconst errorFocusCss = css`\n    outline-color: ${V3_Colour[\"border-error-focus\"]};\n`;\n\nconst noFocusCss = css`\n    outline: none;\n`;\n\n/**\n * basic wrapper for input fields that provides the border style but does not\n * prescibe any layout for content\n */\nexport const InputBox = styled.div<InputWrapperStyleProps>`\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    background: ${V3_Colour[\"bg\"]};\n\n    &:focus-within {\n        ${defaultFocusCss}\n    }\n    ${(props) => props.$focused && !props.$noBorder && defaultFocusCss}\n\n    ${(props) => {\n        if (props.$readOnly) {\n            return css`\n                border-color: transparent;\n                padding: 0;\n                background: transparent !important;\n\n                &:focus-within {\n                    ${readOnlyFocusCss}\n                }\n                ${props.$focused && readOnlyFocusCss}\n            `;\n        } else if (props.$disabled) {\n            return css`\n                background: ${V3_Colour[\"bg-disabled\"]};\n                cursor: not-allowed;\n\n                &:focus-within {\n                    ${disabledFocusCss}\n                }\n                ${props.$focused && disabledFocusCss}\n            `;\n        } else if (props.$error) {\n            return css`\n                border-color: ${V3_Colour[\"border-error\"]};\n\n                &:focus-within {\n                    ${errorFocusCss}\n                }\n                ${props.$focused && errorFocusCss}\n            `;\n        }\n    }}\n    ${(props) => {\n        if (props.$noBorder) {\n            return css`\n                border-color: transparent;\n                background: transparent;\n                &:focus-within {\n                    ${noFocusCss}\n                }\n            `;\n        }\n    }}\n`;\n\nexport const InputWrapper = styled(InputBox)<InputWrapperStyleProps>`\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: max-content;\n    width: 100%;\n    padding: 0 ${V3_Spacing[\"spacing-16\"]} 0\n        ${(props) => (props.$readOnly ? \"0\" : V3_Spacing[\"spacing-16\"])};\n    flex-direction: ${(props) =>\n        props.$position === \"right\" ? \"row-reverse\" : \"row\"};\n`;\n\n/**\n * standalone native input with stripped-down styles, intended to be used in\n * combination with `InputWrapper` or other wrappers to build composite widgets\n */\nexport const BasicInput = styled.input<InputStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n    display: block;\n    background: transparent;\n    border: none;\n    outline: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n\n    &:disabled {\n        color: ${V3_Colour[\"text-subtler\"]};\n\n        &:hover {\n            cursor: not-allowed;\n        }\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${V3_Colour[\"text-subtler\"]};\n    }\n\n    // Chrome, Safari, Edge, Opera\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    // Safari (remove top shadow)\n    --webkit-appearance: none;\n\n    // Firefox\n    --moz-appearance: textfield;\n`;\n\n/**\n * standalone native button with stripped-down styles\n */\nexport const BasicButton = styled.button<InputStyleProps>`\n    background: transparent;\n    border: none;\n    outline: none;\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n            ${V3_Colour[\"border-focus\"]};\n        border-radius: ${V3_Radius[\"sm\"]};\n    }\n`;\n"],"names":["defaultFocusCss","css","V3_Border","V3_Colour","readOnlyFocusCss","disabledFocusCss","errorFocusCss","noFocusCss","InputBox","styled","div","V3_Radius","props","$focused","$noBorder","$readOnly","$disabled","$error","InputWrapper","V3_Spacing","$position","BasicInput","input","$variant","V3_Font","BasicButton","button"],"mappings":"wKA8BA,MAAMA,EAAkBC,EAAAA,GAAG;;eAEZC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAChDC,EAAAA,UAAU;EAGdC,EAAmBH,EAAAA,GAAG;qBACPE,EAAAA,UAAU;EAGzBE,EAAmBJ,EAAAA,GAAG;qBACPE,EAAAA,UAAU;EAGzBG,EAAgBL,EAAAA,GAAG;qBACJE,EAAAA,UAAU;EAGzBI,EAAaN,EAAAA,GAAG;;EAQTO,EAAWC,EAAAA,QAAOC,GAA2B;cAC5CR,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;qBACPQ,EAAAA,UAAc;kBACjBR,EAAAA,UAAc;;;UAGtBH;;MAEHY,GAAUA,EAAMC,WAAaD,EAAME,WAAad;;MAEhDY,GACKA,EAAMG,UACCd,KAAG;;;;;;sBAMAG;;kBAEJQ,EAAMC,UAAYT;cAEjBQ,EAAMI,UACNf,KAAG;8BACQE,EAAAA,UAAU;;;;sBAIlBE;;kBAEJO,EAAMC,UAAYR;cAEjBO,EAAMK,OACNhB,KAAG;gCACUE,EAAAA,UAAU;;;sBAGpBG;;kBAEJM,EAAMC,UAAYP;mBAPrB;MAWRM,IACC,GAAIA,EAAME,UACN,OAAOb,KAAG;;;;sBAIAM;;aAGd;EAIKW,EAAeT,EAAAA,QAAOD,EAAiC;;;;;;iBAMnDW,EAAAA,WAAW;UACjBP,GAAWA,EAAMG,UAAY,IAAMI,EAAAA,WAAW;sBAClCP,GACK,UAApBA,EAAMQ,UAAwB,cAAgB;EAOzCC,EAAaZ,EAAAA,QAAOa,KAAsB;MAChDV,GACoB,UAAnBA,EAAMW,SACAC,EAAAA,QAAQ,mBACRA,EAAAA,QAAQ;aACTrB,EAAAA,UAAgB;;;;;;;;;;iBAUZA,EAAAA,UAAU;;;;;;;;;iBASVA,EAAAA,UAAU;;;;;;;;;;;;;;;EAoBdsB,EAAchB,EAAAA,QAAOiB,MAAuB;;;;;;;;;;;mBAWtCxB,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;cAChDC,EAAAA,UAAU;yBACCQ,EAAAA,UAAc;;"}
+{"version":3,"file":"input-wrapper.js","sources":["../../../../src/shared/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport * as styles from \"./input-wrapper.styles\";\nimport type {\n    BasicButtonProps,\n    BasicInputProps,\n    InputBoxProps,\n    InputWrapperProps,\n} from \"./types\";\n\n/**\n * Basic wrapper for input fields that provides the border style but does not\n * prescribe any layout for content\n */\nexport const InputBox = forwardRef<HTMLDivElement, InputBoxProps>(\n    function InputBox(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Basic wrapper for input fields with spacing and flex layout for content\n */\nexport const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(\n    function InputWrapper(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            position,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    styles.inputWrapper,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    readOnly && styles.inputWrapperReadOnly,\n                    position === \"right\" && styles.inputWrapperPositionRight,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native input with stripped-down styles, intended to be used in\n * combination with `InputWrapper` or other wrappers to build composite widgets\n */\nexport const BasicInput = forwardRef<HTMLInputElement, BasicInputProps>(\n    function BasicInput(props, ref) {\n        const { variant, className, ...otherProps } = props;\n        return (\n            <input\n                ref={ref}\n                className={clsx(\n                    styles.basicInput,\n                    variant === \"small\" && styles.basicInputSmall,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native button with stripped-down styles\n */\nexport const BasicButton = forwardRef<HTMLButtonElement, BasicButtonProps>(\n    function BasicButton({ className, ...props }, ref) {\n        return (\n            <button\n                ref={ref}\n                className={clsx(styles.basicButton, className)}\n                {...props}\n            />\n        );\n    }\n);\n\n/**\n * Clear button with touch-target padding, offsetting negative margin, and\n * a fixed 2px focus outline\n */\nexport const ClearButton = forwardRef<HTMLButtonElement, BasicButtonProps>(\n    function ClearButton({ className, ...props }, ref) {\n        return (\n            <button\n                ref={ref}\n                className={clsx(styles.clearButton, className)}\n                {...props}\n            >\n                <CrossIcon className={styles.clearIcon} aria-hidden />\n            </button>\n        );\n    }\n);\n"],"names":["InputBox","forwardRef","props","ref","disabled","error","readOnly","focused","noBorder","className","otherProps","_jsx","clsx","styles.inputBox","styles.inputBoxDisabled","styles.inputBoxError","styles.inputBoxReadOnly","styles.inputBoxNoBorder","InputWrapper","position","Object","assign","styles.inputWrapper","styles.inputWrapperReadOnly","styles.inputWrapperPositionRight","BasicInput","variant","__rest","styles.basicInput","styles.basicInputSmall","BasicButton","_a","styles.basicButton","ClearButton","styles.clearButton","children","CrossIcon","styles.clearIcon"],"mappings":"4RAgBO,MAAMA,EAAWC,EAAAA,YACpB,SAAkBC,EAAOC,GACrB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQC,UACRA,GAEAP,EADGQ,WACHR,EARE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,cASN,OACIS,2BACIR,IAAKA,EAAG,eACMI,EACdE,UAAWG,EAAAA,QACPC,EAAAA,SACAT,GAAYU,mBACZT,GAASU,EAAAA,cACTT,GAAYU,EAAAA,iBACZR,GAAYS,mBACZR,IAEAC,GAGhB,IAMSQ,EAAejB,EAAAA,YACxB,SAAsBC,EAAOC,GACzB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQW,SACRA,EAAQV,UACRA,GAEAP,EADGQ,WACHR,EATE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,WAAA,cAUN,OACIS,EAAAA,IAAA,MAAAS,OAAAC,OAAA,CACIlB,IAAKA,EAAG,eACMI,EACdE,UAAWG,EAAAA,QACPC,EAAAA,SACAS,EAAAA,aACAlB,GAAYU,EAAAA,iBACZT,GAASU,EAAAA,cACTT,GAAYU,EAAAA,iBACZR,GAAYS,EAAAA,iBACZX,GAAYiB,EAAAA,qBACC,UAAbJ,GAAwBK,EAAAA,0BACxBf,IAEAC,GAGhB,IAOSe,EAAaxB,EAAAA,YACtB,SAAoBC,EAAOC,GACvB,MAAMuB,QAAEA,EAAOjB,UAAEA,GAA6BP,EAAfQ,EAAUiB,EAAAA,OAAKzB,EAAxC,CAAA,UAAA,cACN,OACIS,EAAAA,IAAA,QAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,EAAAA,QACPgB,EAAAA,WACY,UAAZF,GAAuBG,EAAAA,gBACvBpB,IAEAC,GAGhB,IAMSoB,EAAc7B,EAAAA,YACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAA,OAAAI,EAArB,eACjB,OACIpB,EAAAA,4BACIR,IAAKA,EACLM,UAAWG,EAAAA,QAAKoB,EAAAA,YAAoBvB,IAChCP,GAGhB,IAOS+B,EAAchC,EAAAA,YACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAA,OAAAI,EAArB,eACjB,OACIpB,MAAA,SAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,UAAKsB,EAAAA,YAAoBzB,IAChCP,EAAK,CAAAiC,SAETxB,EAAAA,IAACyB,YAAS,CAAC3B,UAAW4B,EAAAA,UAAgB,eAAA,MAGlD"}

package/cjs/shared/input-wrapper/input-wrapper.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./input-wrapper.styles_je6maw.css");exports.basicButton="b191fi5o",exports.basicInput="b168rpxy",exports.basicInputSmall="b1df0tus",exports.clearButton="c179s2uy",exports.clearButtonContainer="ccmyj2w",exports.clearIcon="c1buolhy",exports.inputBox="i156rlh",exports.inputBoxDisabled="iwp8knk",exports.inputBoxError="i1ec8vtj",exports.inputBoxNoBorder="ijzjlan",exports.inputBoxReadOnly="irl4gvd",exports.inputWrapper="i2dsxxh",exports.inputWrapperPositionRight="iyqh66s",exports.inputWrapperReadOnly="i1mziqol";
+//# sourceMappingURL=input-wrapper.styles.js.map

package/cjs/shared/input-wrapper/input-wrapper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-wrapper.styles.js","sources":["../../../../src/shared/input-wrapper/input-wrapper.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../../theme\";\n\nexport const inputBox = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-offset: -1px;\n        outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const inputBoxReadOnly = css`\n    border-color: transparent;\n    padding: 0;\n    background: transparent !important;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const inputBoxDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const inputBoxError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n\nexport const inputBoxNoBorder = css`\n    border-color: transparent;\n    background: transparent;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline: none;\n    }\n`;\n\nexport const inputWrapper = css`\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: max-content;\n    width: 100%;\n    padding: 0 ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-16\"]};\n`;\n\nexport const inputWrapperReadOnly = css`\n    padding-left: 0;\n`;\n\nexport const inputWrapperPositionRight = css`\n    flex-direction: row-reverse;\n`;\n\nexport const basicInput = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    display: block;\n    background: transparent;\n    border: none;\n    outline: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n\n    &:disabled {\n        color: ${Colour[\"text-subtler\"]};\n\n        &:hover {\n            cursor: not-allowed;\n        }\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    // Chrome, Safari, Edge, Opera\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    // Safari (remove top shadow)\n    --webkit-appearance: none;\n\n    // Firefox\n    --moz-appearance: textfield;\n`;\n\nexport const basicInputSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const basicButton = css`\n    background: transparent;\n    border: none;\n    outline: none;\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const clearButton = css`\n    background: transparent;\n    border: none;\n    outline: none;\n    height: auto;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    margin: calc(${Spacing[\"spacing-12\"]} * -1)\n        calc(${Spacing[\"spacing-16\"]} * -1);\n    cursor: pointer;\n    color: ${Colour.icon};\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"border-focus\"]};\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n\nexport const clearIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    vertical-align: middle;\n`;\n\nexport const clearButtonContainer = css`\n    position: absolute;\n    display: flex;\n    align-items: center;\n    right: ${Spacing[\"spacing-16\"]};\n`;\n"],"names":[],"mappings":"kHAoHwB,8BA1CD,mCAsCK,+BAqBJ,wCA4BS,4BANX,4BAvJD,mCAwBQ,gCAUH,oCASG,mCA9BA,+BAwCJ,4CAaa,uCAJL"}

package/cjs/shared/input-wrapper/input-wrapper.styles_je6maw.css

@@ -0,0 +1,14 @@
+@layer fds{.i156rlh{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);}.i156rlh:focus-within,.i156rlh[data-focused="true"]{outline-offset:-1px;outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-border-focus);}
+.irl4gvd{border-color:transparent;padding:0;background:transparent!important;}.irl4gvd:focus-within,.irl4gvd[data-focused="true"]{outline-color:var(--fds-colour-border-focus);}
+.iwp8knk{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.iwp8knk:focus-within,.iwp8knk[data-focused="true"]{outline-color:var(--fds-colour-border-disabled);}
+.i1ec8vtj{border-color:var(--fds-colour-border-error);}.i1ec8vtj:focus-within,.i1ec8vtj[data-focused="true"]{outline-color:var(--fds-colour-border-error-focus);}
+.ijzjlan{border-color:transparent;background:transparent;}.ijzjlan:focus-within,.ijzjlan[data-focused="true"]{outline:none;}
+.i2dsxxh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;height:-webkit-max-content;height:-moz-max-content;height:max-content;width:100%;padding:0 var(--fds-spacing-16) 0 var(--fds-spacing-16);}
+.i1mziqol{padding-left:0;}
+.iyqh66s{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.b168rpxy{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);display:block;background:transparent;border:none;outline:none;box-shadow:none;padding:0;margin:0;--webkit-appearance:none;--moz-appearance:textfield;}.b168rpxy:disabled{color:var(--fds-colour-text-subtler);}.b168rpxy:disabled:hover{cursor:not-allowed;}.b168rpxy::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::-webkit-outer-spin-button,.b168rpxy::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.b168rpxy::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::-moz-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::placeholder{color:var(--fds-colour-text-subtler);}
+.b1df0tus{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.b191fi5o{background:transparent;border:none;outline:none;}.b191fi5o:focus,.b191fi5o:active{outline:none;}.b191fi5o:focus-visible{outline:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-focus);border-radius:var(--fds-radius-sm);}
+.c179s2uy{background:transparent;border:none;outline:none;height:auto;padding:var(--fds-spacing-12) var(--fds-spacing-16);margin:calc(var(--fds-spacing-12) * -1) calc(var(--fds-spacing-16) * -1);cursor:pointer;color:var(--fds-colour-icon);}.c179s2uy:focus,.c179s2uy:active{outline:none;}.c179s2uy:focus-visible{outline:2px solid var(--fds-colour-border-focus);border-radius:var(--fds-radius-sm);}
+.c1buolhy{height:1.25rem;width:1.25rem;vertical-align:middle;}
+.ccmyj2w{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;right:var(--fds-spacing-16);}}

package/cjs/shared/internal-calendar/calendar-dropdown.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react");require("../dropdown-wrapper/dropdown-wrapper.styles.js");var t=require("../dropdown-wrapper/element-with-dropdown.js"),n=require("./calendar-dropdown.style.js"),a=require("./internal-calendar.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const o=d(r).default.forwardRef(((r,d)=>{const{elementWidth:o,setFloatingRef:s,getFloatingProps:i,styles:l}=t.useDropdownRender();return e.jsx(n.CalendarWrapper,Object.assign({$width:o,"data-testid":"calendar-dropdown",ref:s,style:l},i(),{children:e.jsx(a.InternalCalendar,Object.assign({ref:d},r))}))}));exports.CalendarDropdown=o;
+"use strict";var e=require("react/jsx-runtime"),r=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var t=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var s=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("../dropdown-wrapper/element-with-dropdown.js"),n=require("./calendar-dropdown.styles.js"),a=require("./internal-calendar.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=u(r).default.forwardRef(((u,l)=>{const{elementWidth:d,setFloatingRef:o,getFloatingProps:j,styles:p}=i.useDropdownRender(),c=r.useRef(null);return t.useApplyStyle(c,Object.assign({[n.tokens.width]:`${d}px`},p)),e.jsx("div",Object.assign({className:n.calendarWrapper,"data-testid":"calendar-dropdown",ref:s.mergeRefs(o,c)},j(),{children:e.jsx(a.InternalCalendar,Object.assign({ref:l},u))}))}));exports.CalendarDropdown=l;
 //# sourceMappingURL=calendar-dropdown.js.map