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

package/shared/dropdown-wrapper/dropdown-wrapper.styles.d.ts

@@ -1,31 +1,3 @@
-import { DropdownVariantType, TruncateType } from "../dropdown-list/types";
-export interface DropdownWrapperStyleProps {
-    $disabled?: boolean;
-    $readOnly?: boolean;
-    $error?: boolean;
-    $expanded?: boolean;
-}
-export interface ValueLabelStyleProps {
-    $truncateType?: TruncateType;
-    $variant?: DropdownVariantType | undefined;
-}
-export interface SelectorStyleProps {
-    $variant?: DropdownVariantType | undefined;
-}
-export interface LabelContainerStyleProps {
-    $disabled?: boolean | undefined;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & SelectorStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & SelectorStyleProps, never>>> & string;
-export declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & LabelContainerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & LabelContainerStyleProps, never>>> & string;
-export declare const ValueLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never>>> & string;
-export declare const PlaceholderLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ValueLabelStyleProps> & ValueLabelStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>>> & string;
+export declare const labelContainer: import("@linaria/core").LinariaClassName;
+export declare const valueLabel: import("@linaria/core").LinariaClassName;
+export declare const placeholderLabel: import("@linaria/core").LinariaClassName;

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

@@ -1,26 +1,2 @@
-import e,{css as t}from"styled-components";import{Colour as r,Font as i}from"../../theme/index.js";import{lineClampCss as l}from"../styles/index.js";const o=e.div`
-    position: relative;
-    width: 100%;
-    ${e=>{const r="small"===e.$variant?2.5:3;return t`
-            min-height: ${r}rem;
-            height: ${r}rem; // Need this to persist the height when expanding or collapsing list
-        `}}
-`,d=e.div`
-    display: flex;
-    flex: 1;
-    word-break: break-all;
-    ${e=>{if(e.$disabled)return t`
-                color: ${r["text-disabled"]};
-            `}}
-`,n=e.div`
-    ${e=>"small"===e.$variant?i["body-md-regular"]:i["body-baseline-regular"]}
-    color: ${r.text};
-    text-align: left;
-    ${e=>{if("middle"!==e.$truncateType)return t`
-                    ${l(1)}
-                `}}
-    overflow: hidden;
-`,s=e(n)`
-    color: ${r["text-subtler"]};
-`;export{d as LabelContainer,s as PlaceholderLabel,n as ValueLabel,o as Wrapper};
+import"./dropdown-wrapper.styles_15hwwoj.css";const p="l9c71lq",r="vlxe5wy",o="p3mumjy";export{p as labelContainer,o as placeholderLabel,r as valueLabel};
 //# sourceMappingURL=dropdown-wrapper.styles.js.map

package/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 styled, { css } from \"styled-components\";\nimport { Colour, Font } from \"../../theme\";\nimport { 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 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: ${Colour[\"text-disabled\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? Font[\"body-md-regular\"]\n            : Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\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: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["Wrapper","styled","div","props","height","$variant","css","LabelContainer","$disabled","Colour","ValueLabel","Font","$truncateType","lineClampCss","PlaceholderLabel"],"mappings":"qJA+BA,MAIaA,EAAUC,EAAOC,GAAuB;;;MAG9CC,IACC,MAAMC,EAPS,UAOUD,EAAME,SAPN,IAAM,EAQ/B,OAAOC,CAAG;0BACQF;sBACJA;SACb;EAIIG,EAAiBN,EAAOC,GAA6B;;;;MAI3DC,IACC,GAAIA,EAAMK,UACN,OAAOF,CAAG;yBACGG,EAAO;aAExB;EAIKC,EAAaT,EAAOC,GAAyB;MACnDC,GACoB,UAAnBA,EAAME,SACAM,EAAK,mBACLA,EAAK;aACNF,EAAa;;MAEnBN,IACC,GACS,WADDA,EAAMS,cAKN,OAAON,CAAG;sBACJO,EAAa;;;EAOtBC,EAAmBb,EAAOS,EAAW;aACrCD,EAAO;"}
+{"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":["labelContainer","valueLabel","placeholderLabel"],"mappings":"qFAKO,MAAMA,EAAc,UAUdC,EAAU,UAeVC,EAAgB"}

package/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/shared/dropdown-wrapper/element-with-dropdown.d.ts

@@ -1,6 +1,6 @@
-import { OpenChangeReason } from "@floating-ui/react";
-import { CSSProperties, RefObject } from "react";
-import { DropdownAlignmentType } from "./types";
+import type { OpenChangeReason } from "@floating-ui/react";
+import type { CSSProperties, RefObject } from "react";
+import type { DropdownAlignmentType } from "./types";
 export interface DropdownRenderProps {
     elementWidth: number;
     styles: CSSProperties;

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

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

package/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 {\n    FloatingFocusManager,\n    FloatingPortal,\n    Middleware,\n    OpenChangeReason,\n    Placement,\n    autoUpdate,\n    flip,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport {\n    CSSProperties,\n    RefObject,\n    createContext,\n    useContext,\n    useEffect,\n    useRef,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { ThemeContext } from \"styled-components\";\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { Breakpoint } from \"../../theme\";\nimport { useEvent, usePrevious } from \"../../util\";\nimport { 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 theme = useContext(ThemeContext);\n    const mobileBreakpoint = 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\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                            {renderDropdown(dropdownRenderProps)}\n                        </DropdownRenderContext.Provider>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","useDropdownRender","useContext","ElementWithDropdown","enabled","isOpen","onOpen","onClose","onDismiss","onHide","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","theme","ThemeContext","mobileBreakpoint","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","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"],"mappings":"49BAqEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,KAGlBC,EAAoB,IACtBC,EAAWP,GAiCTQ,EAAsB,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,SACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBrB,YAAY,OACZsB,qBACAC,WACAC,wBAKA,MAAMC,EAAQjB,EAAWkB,GACnBC,EAAmBC,EAAW,UAAU,CAAEH,UAC1CI,EAAaC,EAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAkB,CACpDC,UAAWV,QAAAA,EAAeK,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,EAAY,CAClDC,KAAMvC,EACNwC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAvC,SAAAA,IACOoC,IAASvC,EAChBC,SAAAA,KACQsC,GAAQvC,IAChBE,SAAAA,EAAUwC,GACd,EAEJC,qBAAsBC,EACtBC,UAAWzD,EAAqBC,GAChCyD,WAAY,CACRrC,EAAOC,GACPqC,IACAC,EAAM,CACFC,QAASC,MAEbC,EAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhB3C,GACD0C,GAAmBC,EAASvB,SAASwB,aAGrCD,EAASvB,SAASyB,MAAMC,YACpB,qBACA,IAKRH,EAASvB,SAASyB,MAAMC,YACpB,qBACA,GAAGC,KAAKC,IAAI,EAAGN,OAEvB,IAEJ5B,KAGFmC,EAAeC,KAEfC,UAAEA,EAASrE,OAAEA,GAAWsE,EAAoB1B,EAAS,CACvD2B,QAAS,CAAEC,QAAS,GACpB1B,KAAM,CAAE0B,QAAS,GACjBC,SAAU,MAGRC,GAAQC,EAAS/B,EAAS,CAC5BtC,UACAsE,OAAQ7D,EACR8D,iBAAkB9D,IAEhB+D,GAAUC,EAAWnC,EAAS,CAAEtC,aAEhC0E,kBAAEA,GAAiB9E,iBAAEA,IAAqB+E,EAAgB,CAC5DP,GACAI,KAMEI,GAAgBC,EAAYd,GAC5Be,GAAcC,GAAS,IAAM1E,aAAM,EAANA,MAEnC2E,GAAU,KACFJ,KAAkBb,GAClBe,IACJ,GACD,CAACF,GAAeb,EAAWe,KAK9B,MAAMG,GAAsB,CACxBxF,aAAc6B,EACd5B,oDACOA,GACA2C,GAAc,CACjB6C,OAAoC,QAA5BC,EAAA3E,QAAAA,EAAgBqD,SAAY,IAAAsB,EAAAA,EAzKxB,KA2KhBxF,eAAgByC,EAAKgD,YACrBxF,qBAGJ,OACIyF,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFvE,EAAWwE,QAAUD,EACrBtD,EAAKwD,aAAaF,EAAK,GAEvBhB,KAAmB,CAAAmB,SAEtBvF,OAEJyD,GACGuB,EAACQ,GAAeC,KAAMlF,EAAQgF,SAC1BP,EAACU,EAAoB,CACjB1D,QAASA,EACT2D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAC/F,EAAsB6G,SAAQ,CAC3BC,MAAOpB,GAAmBY,SAEzBtF,EAAe0E,YAKjC"}
+{"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","useDropdownRender","useContext","ElementWithDropdown","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"],"mappings":"ivCAkEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,KAGlBC,EAAoB,IACtBC,EAAWP,GAiCTQ,EAAsB,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,SACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBrB,YAAY,OACZsB,qBACAC,WACAC,wBAKA,MAAMC,EAAWC,EAAsB,MACjCC,EAAaC,EAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAkB,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,EAAY,CAClDC,KAAMnC,EACNoC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAnC,SAAAA,IACOgC,IAASnC,EAChBC,SAAAA,KACQkC,GAAQnC,IAChBE,SAAAA,EAAUoC,GACd,EAEJC,qBAAsBC,EACtBC,UAAWrD,EAAqBC,GAChCqD,WAAY,CACRjC,EAAOC,GACPiC,IACAC,EAAM,CACFC,QAASC,MAEbC,EAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhBvC,GACDsC,GAAmBC,EAAStB,SAASuB,aAGrCD,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,IAKRC,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,GAAGM,KAAKC,IAAI,EAAGP,OAEvB,IAEJ1B,KAGFkC,EAAeC,KAEfC,UAAEA,EAASlE,OAAEA,GAAWmE,EAAoB3B,EAAS,CACvD4B,QAAS,CAAEC,QAAS,GACpB3B,KAAM,CAAE2B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,IAAeC,EAAuBP,GAEpDQ,GAAQC,EAASnC,EAAS,CAC5BlC,UACAsE,OAAQ7D,EACR8D,iBAAkB9D,IAEhB+D,GAAUC,EAAWvC,EAAS,CAAElC,aAEhC0E,kBAAEA,GAAiB9E,iBAAEA,IAAqB+E,EAAgB,CAC5DP,GACAI,KAMEI,GAAgBC,EAAYjB,GAC5BkB,GAAcC,GAAS,IAAM1E,aAAM,EAANA,MAEnC2E,GAAU,KACFJ,KAAkBhB,GAClBkB,IACJ,GACD,CAACF,GAAehB,EAAWkB,KAK9B,MAAMG,GAAsB,CACxBxF,aAAc2B,EACd1B,oDACOA,GACAuC,GAAc,CACjBiD,OAAoC,QAA5BC,EAAA3E,QAAAA,EAAgBkD,SAAY,IAAAyB,EAAAA,EAxKxB,KA0KhBxF,eAAgBqC,EAAKoD,YACrBxF,qBAGJ,OACIyF,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFzE,EAAW0E,QAAUD,EACrB1D,EAAK4D,aAAaF,EAAK,GAEvBhB,KAAmB,CAAAmB,SAEtBvF,OAEJsD,GACG0B,EAACQ,EAAc,CAACC,KAAMlF,EAAQgF,SAC1BP,EAACU,EAAoB,CACjB9D,QAASA,EACT+D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAC/F,EAAsB6G,SAAQ,CAC3BC,MAAOpB,YAEPK,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASvB,EAAU,CAAEZ,MAAOa,GAAU2B,SACjCtF,EAAe0E,eAMrC"}

package/shared/dropdown-wrapper/element-with-dropdown.styles.d.ts

@@ -1 +1,3 @@
-export declare const DropdownContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const tokens: {
+    availableHeight: string;
+};

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

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

package/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":["tokens","availableHeight"],"mappings":"AAAO,MAAMA,EAAS,CAClBC,gBAAiB"}

package/shared/dropdown-wrapper/types.d.ts

@@ -1,4 +1,4 @@
-import { DropdownVariantType } from "../dropdown-list/types";
+import type { DropdownVariantType, TruncateType } from "../dropdown-list/types";
 export interface DropdownSelectorProps {
     children: React.ReactNode;
     show: boolean;
@@ -10,4 +10,19 @@ export interface DropdownSelectorProps {
     className?: string | undefined;
     variant?: DropdownVariantType | undefined;
 }
+export interface ValueLabelProps {
+    variant?: DropdownVariantType | undefined;
+    truncateType?: TruncateType | undefined;
+    children: React.ReactNode;
+}
+export interface LabelContainerProps {
+    disabled?: boolean | undefined;
+    children: React.ReactNode;
+}
+/**
+ * Horizontal alignment of the dropdown relative to its trigger.
+ *
+ * - `"left"` left-aligns the dropdown with the trigger.
+ * - `"right"` right-aligns the dropdown with the trigger.
+ */
 export type DropdownAlignmentType = "left" | "right";

package/shared/fade-wrapper/fade-wrapper.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-import { FadeWrapperProps, FadeWrapperRef } from "./types";
+import type React from "react";
+import type { FadeWrapperProps, FadeWrapperRef } from "./types";
 export declare const FadeWrapper: (props: FadeWrapperProps & React.RefAttributes<FadeWrapperRef>) => React.ReactElement | null;

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

@@ -1,2 +1,2 @@
-import{__rest as r}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as n}from"@lifesg/react-icons/chevron-right";import l from"../../external/lodash/throttle.js";import{forwardRef as d,useState as c,useRef as s,useImperativeHandle as a,useEffect as f}from"react";import{useResizeDetector as h}from"../../external/react-resize-detector/build/index.esm.js";import{Wrapper as u,Content as m,Fade as p,FadeIndicatorButton as g}from"./fade-wrapper.style.js";const b=d(((d,b)=>{var{children:v,fadeColor:$,fadePosition:j="both",showIndicator:w=!1,onResize:x}=d,z=r(d,["children","fadeColor","fadePosition","showIndicator","onResize"]);const[R,C]=c("left"===j||"both"===j),[I,L]=c("right"===j||"both"===j),W=s(null),y=s(null),k=l(A,50);function A(){const r=W.current,t=y.current;r&&t&&t.scrollWidth>r.offsetWidth?(L(Math.round(t.scrollLeft)<t.scrollWidth-t.offsetWidth),C(t.scrollLeft>=1)):(L(!1),C(!1))}function E(){A(),x&&x({content:y.current,wrapper:W.current})}h({onResize:E,targetRef:W,refreshMode:"debounce",refreshRate:50}),a(b,(()=>({resize(){E()}}))),f((()=>{const r=y.current;return A(),r&&r.addEventListener("scroll",k),()=>{r&&r.removeEventListener("scroll",k)}}),[]);return t(u,Object.assign({ref:W},z,{children:[e(m,{ref:y,children:v}),(()=>{let r;return r=Array.isArray($)&&$.length>0?{left:$,right:$}:$||{left:void 0,right:void 0},t(o,{children:[R&&e(p,{$backgroundColor:r.left,$position:"left",$showIndicator:w,"data-id":"left-fade",children:w&&e(g,{$position:"left","data-id":"left-fade-indicator-button",children:e(i,{})})}),I&&e(p,{$backgroundColor:r.right,$position:"right",$showIndicator:w,"data-id":"right-fade",children:w&&e(g,{$position:"right","data-id":"right-fade-indicator-button",children:e(n,{})})})]})})()]}))}));export{b as FadeWrapper};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as s}from"@lifesg/react-icons/chevron-right";import l from"clsx";import n from"../../external/lodash/throttle.js";import{forwardRef as c,useState as a,useRef as d,useImperativeHandle as m,useCallback as f,useMemo as h,useEffect as p}from"react";import{useResizeDetector as u}from"../../external/react-resize-detector/build/index.esm.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{ClickableIcon as b}from"../clickable-icon/clickable-icon.js";import{tokens as v,wrapper as g,content as k,fadeIndicatorButton as x,indicatorLeft as N,fade as y,fadeLeft as z,indicatorRight as R,fadeRight as w}from"./fade-wrapper.styles.js";import{getFadeColorSet as C,getFadeBackgroundColorValue as L}from"./helpers.js";const W=c(((c,W)=>{var{children:q,className:E,fadeColor:I,fadePosition:M="both",showIndicator:P=!1,onResize:_}=c,O=e(c,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[A,B]=a("left"===M||"both"===M),[D,F]=a("right"===M||"both"===M),G=d(null),H=d(null),J=d(null),K=d(null),Q=C(I);j(J,{[v.backgroundColor]:L(Q.left,P)}),j(K,{[v.backgroundColor]:L(Q.right,P)}),u({onResize:U,targetRef:G,refreshMode:"debounce",refreshRate:50}),m(W,(()=>({resize(){U()}})));const S=f((()=>{const e=G.current,r=H.current;e&&r&&r.scrollWidth>e.offsetWidth?(F(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),B(r.scrollLeft>=1)):(F(!1),B(!1))}),[]),T=h((()=>n(S,50)),[S]);function U(){S(),_&&_({content:H.current,wrapper:G.current})}p((()=>{const e=H.current;return S(),e&&e.addEventListener("scroll",T),()=>{e&&e.removeEventListener("scroll",T),T.cancel()}}),[S,T]);return r("div",Object.assign({ref:G,className:l(g,E)},O,{children:[t("div",{ref:H,className:k,children:q}),r(o,{children:[A&&t("div",{ref:J,className:l(y,z),"data-id":"left-fade",children:P&&t(b,{className:l(x,N),"data-id":"left-fade-indicator-button",children:t(i,{})})}),D&&t("div",{ref:K,className:l(y,w),"data-id":"right-fade",children:P&&t(b,{className:l(x,R),"data-id":"right-fade-indicator-button",children:t(s,{})})})]})]}))}));export{W as FadeWrapper};
 //# sourceMappingURL=fade-wrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fade-wrapper.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport throttle from \"lodash/throttle\";\nimport React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n    Content,\n    Fade,\n    FadeIndicatorButton,\n    Wrapper,\n} from \"./fade-wrapper.style\";\nimport { FadeColorSet, FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const throttledScrollHandler = throttle(handleScroll, 50);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n        };\n    }, []);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleScroll() {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        let fadeColorSet: FadeColorSet;\n\n        if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n            // Single array, apply same color\n            fadeColorSet = {\n                left: fadeColor,\n                right: fadeColor,\n            };\n        } else if (!fadeColor) {\n            fadeColorSet = {\n                left: undefined,\n                right: undefined,\n            };\n        } else {\n            fadeColorSet = fadeColor as FadeColorSet;\n        }\n\n        return (\n            <>\n                {showFadeLeft && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.left}\n                        $position=\"left\"\n                        $showIndicator={showIndicator}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"left\"\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n                {showFadeRight && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.right}\n                        $position=\"right\"\n                        $showIndicator={showIndicator}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"right\"\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <Wrapper ref={wrapperRef} {...otherProps}>\n            <Content ref={contentRef}>{children}</Content>\n            {renderFade()}\n        </Wrapper>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","throttledScrollHandler","throttle","handleScroll","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","handleResize","useResizeDetector","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","useEffect","addEventListener","removeEventListener","_jsxs","Wrapper","Object","assign","_jsx","Content","fadeColorSet","Array","isArray","length","left","right","undefined","_Fragment","Fade","$backgroundColor","$position","FadeIndicatorButton","ChevronLeftIcon","$showIndicator","ChevronRightIcon","renderFade"],"mappings":"8kBAmBA,MA2KaA,EAAcC,GA3KT,CACdC,EAQAC,KARA,IAAAC,SACIA,EAAQC,UACRA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQN,EACLO,EAAUC,EAAAR,EANjB,oEAaA,MAAOS,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MAEpCE,EAAyBC,EAASC,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,EAAkB,CACdvB,SAAUsB,EACVE,UAAWhB,EACXiB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIN,GACJ,MAORO,GAAU,KACN,MAAMb,EAAUN,EAAWK,QAQ3B,OANAF,IAEIG,GACAA,EAAQc,iBAAiB,SAAUnB,GAGhC,KACCK,GACAA,EAAQe,oBAAoB,SAAUpB,EAC1C,CACH,GACF,IAwGH,OACIqB,EAACC,EAAOC,OAAAC,OAAA,CAACxC,IAAKa,GAAgBP,EAAU,CAAAL,SAAA,CACpCwC,EAACC,GAAQ1C,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,EAAA,CAAAjD,SAAA,CACKO,GACGiC,EAACU,EAAI,CAAAC,iBACiBT,EAAaI,KAAIM,UACzB,sBACMjD,EAAa,UACrB,YAAWH,SAElBG,GACGqC,EAACa,EAAmB,CAAAD,UACN,OAAM,UACR,sCAERZ,EAACc,EAAe,CAAA,OAK/B5C,GACG8B,EAACU,oBACqBR,EAAaK,MAAKK,UAC1B,QAAOG,eACDpD,EAAa,UACrB,sBAEPA,GACGqC,EAACa,EAAmB,CAAAD,UACN,QAAO,UACT,8BAA6BpD,SAErCwC,EAACgB,EAAgB,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":"ysCAsBA,MA0LaA,EAAcC,GA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MACpCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAEtCI,EAAeC,EAAgBjB,GAErCkB,EAAcJ,EAAa,CACvB,CAACK,EAAcC,iBAAkBC,EAC7BL,EAAaM,KACbpB,KAGRgB,EAAcH,EAAc,CACxB,CAACI,EAAcC,iBAAkBC,EAC7BL,EAAaO,MACbrB,KAKRsB,EAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,GAAY,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,GAAQ,IAC5BC,EAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,GAAU,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,EAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAKC,EAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,EAAcxD,SAC1CA,IAlDLkD,eACK1C,GACG+C,EAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAKI,EAAaC,GAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAC,GACH,UACO,6BAA4B7D,SAEpCuD,EAACO,EAAe,CAAA,OAK/BnD,GACG4C,EAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAKI,EAAaM,aACrB,aAAY/D,SAEnBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAI,aAEI,8BAA6BhE,SAErCuD,EAACU,EAAgB,CAAA,aAmBnC"}

package/shared/fade-wrapper/fade-wrapper.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const tokens: {
+    backgroundColor: string;
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const fade: import("@linaria/core").LinariaClassName;
+export declare const fadeLeft: import("@linaria/core").LinariaClassName;
+export declare const fadeRight: import("@linaria/core").LinariaClassName;
+export declare const content: import("@linaria/core").LinariaClassName;
+export declare const fadeIndicatorButton: import("@linaria/core").LinariaClassName;
+export declare const indicatorLeft: import("@linaria/core").LinariaClassName;
+export declare const indicatorRight: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./fade-wrapper.styles_16iug7l.css";const r={backgroundColor:"--fds-internal-fadeWrapper-fade-backgroundColor"},a="wslc1qs",d="f4ndmik",e="f10r53jk",f="f1mdli9d",o="cv4qfjc",s="fgwhr72",c="i135a9q0",p="i18cgy8z";export{o as content,d as fade,s as fadeIndicatorButton,e as fadeLeft,f as fadeRight,c as indicatorLeft,p as indicatorRight,r as tokens,a as wrapper};
+//# sourceMappingURL=fade-wrapper.styles.js.map

package/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":["tokens","backgroundColor","wrapper","fade","fadeLeft","fadeRight","content","fadeIndicatorButton","indicatorLeft","indicatorRight"],"mappings":"6EAIO,MAAMA,EAAS,CAClBC,gBAAiB,mDAGRC,EAAO,UAKPC,EAAI,UAUJC,EAAQ,WAYRC,EAAS,WAYTC,EAAO,UAcPC,EAAmB,UAgBnBC,EAAa,WAKbC,EAAc"}

package/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/shared/fade-wrapper/helpers.d.ts

@@ -0,0 +1,3 @@
+import type { FadeColorSet, FadeWrapperProps } from "./types";
+export declare function getFadeColorSet(fadeColor: FadeWrapperProps["fadeColor"] | undefined): FadeColorSet;
+export declare function getFadeBackgroundColorValue(color: string[] | undefined, showIndicator: boolean): string | null;

package/shared/fade-wrapper/helpers.js

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

package/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":["getFadeColorSet","fadeColor","Array","isArray","length","left","right","undefined","getFadeBackgroundColorValue","color","showIndicator","join","Colour","bg"],"mappings":"8fAGM,SAAUA,EACZC,GAEA,OAAIC,MAAMC,QAAQF,IAAcA,EAAUG,OAAS,EACxC,CACHC,KAAMJ,EACNK,MAAOL,GAIXA,GAIG,CACHI,UAAME,EACND,WAAOC,EAEf,CAEM,SAAUC,EACZC,EACAC,GAEA,OAAID,GAASA,EAAML,OAAS,EACjBK,EAAME,KAAK,MAGlBD,EACO,GAAGE,EAAOC,OAAOD,EAAOC,KAG5B,IACX"}

package/shared/hooks/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./useViewport";
 export * from "./use-state-callback";
+export * from "./useViewport";

package/shared/image-placeholder/image-placeholder.d.ts

@@ -1,4 +1,4 @@
 export interface ImagePlaceholderProps {
     className?: string | undefined;
 }
-export declare const ImagePlaceholder: (props: ImagePlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImagePlaceholder: ({ className }: ImagePlaceholderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{PlaceholderImageIcon as e}from"@lifesg/react-icons";import{Placeholder as o}from"./image-placeholder.style.js";const t=t=>r(o,Object.assign({},t,{children:r(e,{})}));export{t as ImagePlaceholder};
+import{jsx as r}from"react/jsx-runtime";import{PlaceholderImageIcon as e}from"@lifesg/react-icons";import m from"clsx";import{placeholder as o}from"./image-placeholder.styles.js";const s=({className:s})=>r("div",{className:m(o,s),children:r(e,{})});export{s as ImagePlaceholder};
 //# sourceMappingURL=image-placeholder.js.map

package/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\";\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":["ImagePlaceholder","props","_jsx","Placeholder","Object","assign","children","PlaceholderImageIcon"],"mappings":"8JAOO,MAAMA,EAAoBC,GAEzBC,EAACC,EAAWC,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAK,SAClBJ,EAACK,EAAoB,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":["ImagePlaceholder","className","_jsx","clsx","styles.placeholder","children","PlaceholderImageIcon"],"mappings":"yLASaA,EAAmB,EAAGC,eAE3BC,EAAA,MAAA,CAAKD,UAAWE,EAAKC,EAAoBH,GAAUI,SAC/CH,EAACI,EAAoB,CAAA"}

package/shared/image-placeholder/image-placeholder.styles.d.ts

@@ -0,0 +1 @@
+export declare const placeholder: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./image-placeholder.styles_44nwil.css";const e="p74g98x";export{e as placeholder};
+//# sourceMappingURL=image-placeholder.styles.js.map

package/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":["placeholder"],"mappings":"sFAIO,MAAMA,EAAW"}

package/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/shared/image-with-fallback/image-with-fallback.js

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

package/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\";\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":["ImageWithFallback","src","alt","className","testId","_jsx","onError","event","target","onerror","image"],"mappings":"wEAQO,MAAMA,EAAoB,EAC7BC,MACAC,MACAC,YACA,cAAeC,KAUXC,SACIJ,IAAKA,EACLC,IAAKA,GAAO,GACZC,UAAWA,EAAS,cACPC,EACbE,QAZJC,IAECA,EAAMC,OAA4BC,QAAU,KAC5CF,EAAMC,OAA4BP,IAAMS,CAAK"}
+{"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":["ImageWithFallback","src","alt","className","testId","ref","useRef","useEffect","el","current","complete","naturalHeight","naturalWidth","onerror","image","_jsx","onError","event","target"],"mappings":"sHAWO,MAAMA,EAAoB,EAC7BC,MACAC,MACAC,YACA,cAAeC,MAEf,MAAMC,EAAMC,EAAyB,MAErCC,GAAU,KAIN,MAAMC,EAAKH,EAAII,QAEXD,GACAA,EAAGE,UACkB,IAArBF,EAAGG,eACiB,IAApBH,EAAGI,eAEHJ,EAAGK,QAAU,KACbL,EAAGP,IAAMa,EACb,GACD,CAACb,IAUJ,OACIc,EAAA,MAAA,CACIV,IAAKA,EACLJ,IAAKA,EACLC,IAAKA,GAAO,GACZC,UAAWA,EAAS,cACPC,EACbY,QAdJC,IAEA,MAAMT,EAAKS,EAAMC,OACjBV,EAAGK,QAAU,KACbL,EAAGP,IAAMa,CAAK,GAWZ"}

package/shared/input-wrapper/index.d.ts

@@ -1 +1,2 @@
 export * from "./input-wrapper";
+export * from "./types";

package/shared/input-wrapper/input-wrapper.d.ts

@@ -1,36 +1,24 @@
-export interface InputWrapperStyleProps {
-    $disabled?: boolean | undefined;
-    $error?: boolean | undefined;
-    $readOnly?: boolean | undefined;
-    $focused?: boolean | undefined;
-    $position?: "left" | "right" | undefined;
-    $noBorder?: boolean | undefined;
-}
-export interface InputStyleProps {
-    $variant?: "small" | "default" | undefined;
-}
+import type { BasicButtonProps, BasicInputProps, InputBoxProps, InputWrapperProps } from "./types";
 /**
- * basic wrapper for input fields that provides the border style but does not
- * prescibe any layout for content
+ * Basic wrapper for input fields that provides the border style but does not
+ * prescribe any layout for content
  */
-export declare const InputBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof InputWrapperStyleProps> & InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof InputWrapperStyleProps> & InputWrapperStyleProps, never>>> & string;
-export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof InputWrapperStyleProps> & InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof InputWrapperStyleProps> & InputWrapperStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof InputWrapperStyleProps> & InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof InputWrapperStyleProps> & InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof InputWrapperStyleProps> & InputWrapperStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof InputWrapperStyleProps> & InputWrapperStyleProps, never>>> & string;
+export declare const InputBox: (props: InputBoxProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 /**
- * standalone native input with stripped-down styles, intended to be used in
+ * Basic wrapper for input fields with spacing and flex layout for content
+ */
+export declare const InputWrapper: (props: InputWrapperProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+/**
+ * Standalone native input with stripped-down styles, intended to be used in
  * combination with `InputWrapper` or other wrappers to build composite widgets
  */
-export declare const BasicInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & InputStyleProps, never>>> & string;
+export declare const BasicInput: (props: BasicInputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+/**
+ * Standalone native button with stripped-down styles
+ */
+export declare const BasicButton: (props: BasicButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
 /**
- * standalone native button with stripped-down styles
+ * Clear button with touch-target padding, offsetting negative margin, and
+ * a fixed 2px focus outline
  */
-export declare const BasicButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$variant"> & InputStyleProps, never>>> & string;
+export declare const ClearButton: (props: BasicButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;