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

package/cjs/shared/dropdown-list/nested-dropdown-list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"nested-dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list/nested-dropdown-list.styles.tsx"],"sourcesContent":["import { MinusSquareFillIcon } from \"@lifesg/react-icons/minus-square-fill\";\nimport styled, { css } from \"styled-components\";\nimport { Colour, Motion, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ListItemStyleProps {\n    $active?: boolean;\n    $visible?: boolean;\n    $toggleable?: boolean;\n}\n\ninterface IndentStyleProps {\n    $level?: number;\n}\n\ninterface IndicatorStyleProps {\n    $hasNestedSiblings?: boolean;\n}\n\ninterface ExpandButtonStyleProps {\n    $expanded?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const ListItemContainer = styled.li<ListItemStyleProps>`\n    display: ${(props) => (props.$visible ? \"flex\" : \"none\")};\n`;\n\nexport const ListItem = styled.div<ListItemStyleProps>`\n    flex: 1;\n    display: flex;\n    align-items: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: ${(props) => (props.$toggleable ? \"default\" : \"pointer\")};\n    overflow: hidden; // required for label to truncate properly\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n\n    ${(props) =>\n        props.$active &&\n        css`\n            background: ${Colour[\"bg-hover\"]};\n        `}\n`;\n\nexport const Indent = styled.div<IndentStyleProps>`\n    height: 1px;\n    width: calc((1lh + ${Spacing[\"spacing-8\"]}) * ${(props) => props.$level});\n`;\n\nexport const ExpandButton = styled.div<ExpandButtonStyleProps>`\n    width: 1lh;\n    height: 1lh;\n    color: ${Colour[\"icon-primary\"]};\n    cursor: pointer;\n\n    svg {\n        width: 1lh;\n        height: 1lh;\n        transition: transform ${Motion[\"duration-350\"]}\n            ${Motion[\"ease-standard\"]};\n\n        ${(props) => {\n            if (props.$expanded) {\n                return css`\n                    transform: rotate(90deg);\n                `;\n            }\n        }}\n    }\n`;\n\nexport const UnexpandableIndicator = styled.div`\n    width: 1lh;\n    height: 1lh;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const SelectionIndicator = styled.div<IndicatorStyleProps>`\n    flex-shrink: 0;\n    height: 1lh;\n    width: ${(props) =>\n        props.$hasNestedSiblings ? \"1lh\" : Spacing[\"spacing-16\"]};\n\n    display: flex;\n    justify-content: center;\n`;\n\nexport const CheckboxMixedIndicator = styled(MinusSquareFillIcon)`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-selected\"]};\n`;\n"],"names":["ListItemContainer","styled","li","props","$visible","ListItem","div","Spacing","$toggleable","Radius","$active","css","Colour","Indent","$level","ExpandButton","Motion","$expanded","UnexpandableIndicator","SelectionIndicator","$hasNestedSiblings","CheckboxMixedIndicator","MinusSquareFillIcon"],"mappings":"wNAiCO,MAAMA,EAAoBC,EAAAA,QAAOC,EAAsB;eAC9CC,GAAWA,EAAMC,SAAW,OAAS;EAGxCC,EAAWJ,EAAAA,QAAOK,GAAuB;;;;WAI3CC,EAAAA,QAAQ;eACJA,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;cACjCJ,GAAWA,EAAMK,YAAc,UAAY;;qBAErCC,EAAAA,OAAa;;;MAG3BN,GACCA,EAAMO,SACNC,KAAG;0BACeC,EAAAA,OAAO;;EAIpBC,EAASZ,EAAAA,QAAOK,GAAqB;;yBAEzBC,EAAAA,QAAQ,mBAAoBJ,GAAUA,EAAMW;EAGxDC,EAAed,EAAAA,QAAOK,GAA2B;;;aAGjDM,EAAAA,OAAO;;;;;;gCAMYI,EAAAA,OAAO;cACzBA,EAAAA,OAAO;;UAEVb,IACC,GAAIA,EAAMc,UACN,OAAON,KAAG;;iBAGd;;EAKCO,EAAwBjB,EAAAA,QAAOK,GAAG;;;oBAG3BC,EAAAA,QAAQ;EAGfY,EAAqBlB,EAAAA,QAAOK,GAAwB;;;aAGnDH,GACNA,EAAMiB,mBAAqB,MAAQb,EAAAA,QAAQ;;;;EAMtCc,EAAyBpB,EAAAA,QAAOqB,EAAAA,oBAAoB;;;;aAIpDV,EAAAA,OAAO;"}
+{"version":3,"file":"nested-dropdown-list.styles.js","sources":["../../../../src/shared/dropdown-list/nested-dropdown-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Motion, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const tokens = {\n    level: \"--fds-internal-nestedDropdownList-indentLevel\",\n};\n\n// -----------------------------------------------------------------------------\n// LIST ITEM STYLES\n// -----------------------------------------------------------------------------\n\nexport const listItemContainer = css`\n    display: flex;\n`;\n\nexport const listItemContainerHidden = css`\n    display: none;\n`;\n\nexport const listItem = css`\n    flex: 1;\n    display: flex;\n    align-items: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    cursor: pointer;\n    overflow: hidden;\n    border-radius: ${Radius[\"none\"]};\n    outline: none;\n`;\n\nexport const listItemToggleable = css`\n    cursor: default;\n`;\n\nexport const listItemActive = css`\n    background: ${Colour[\"bg-hover\"]};\n`;\n\nexport const indent = css`\n    ${tokens.level}: 0;\n    height: 1px;\n    width: calc((1lh + ${Spacing[\"spacing-8\"]}) * var(${tokens.level}));\n`;\n\nexport const expandButton = css`\n    width: 1lh;\n    height: 1lh;\n    color: ${Colour[\"icon-primary\"]};\n    cursor: pointer;\n\n    svg {\n        width: 1lh;\n        height: 1lh;\n        transition: transform ${Motion[\"duration-350\"]}\n            ${Motion[\"ease-standard\"]};\n    }\n`;\n\nexport const expandButtonExpanded = css`\n    svg {\n        transform: rotate(90deg);\n    }\n`;\n\nexport const unexpandableIndicator = css`\n    width: 1lh;\n    height: 1lh;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const selectionIndicator = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: ${Spacing[\"spacing-16\"]};\n    display: flex;\n    justify-content: center;\n`;\n\nexport const selectionIndicatorNested = css`\n    width: 1lh;\n`;\n\nexport const checkboxMixedIndicator = css`\n    flex-shrink: 0;\n    height: 1lh;\n    width: 1lh;\n    color: ${Colour[\"icon-selected\"]};\n`;\n"],"names":["level"],"mappings":"oIAwFmC,gCAtCV,wCAcQ,0BApBd,4BApBE,iCAgBM,qCAxBG,0CAIM,qCAgBL,qCAwCA,2CAQM,0BA5Ef,CAClBA,MAAO,+EA6DuB"}

package/cjs/shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css

@@ -0,0 +1,12 @@
+@layer fds{.l6gdpz7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.l2m1xi2{display:none;}
+.l7sjxgx{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--fds-spacing-8);padding:var(--fds-spacing-12) var(--fds-spacing-8);cursor:pointer;overflow:hidden;border-radius:var(--fds-radius-none);outline:none;}
+.lda1ll2{cursor:default;}
+.l1lwwclz{background:var(--fds-colour-bg-hover);}
+.i1roxhhm{--fds-internal-nestedDropdownList-indentLevel:0;height:1px;width:calc((1lh + var(--fds-spacing-8)) * var(--fds-internal-nestedDropdownList-indentLevel));}
+.e11oztmx{width:1lh;height:1lh;color:var(--fds-colour-icon-primary);cursor:pointer;}.e11oztmx svg{width:1lh;height:1lh;-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);}
+.e18lkgul svg{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
+.uz6io6h{width:1lh;height:1lh;margin-right:var(--fds-spacing-8);}
+.simvld9{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.s1en693q{width:1lh;}
+.c1an54qc{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1lh;width:1lh;color:var(--fds-colour-icon-selected);}}

package/cjs/shared/dropdown-list/virtuoso-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"virtuoso-components.js","sources":["../../../../src/shared/dropdown-list/virtuoso-components.tsx"],"sourcesContent":["import { ComponentProps, forwardRef } from \"react\";\nimport { Components } from \"react-virtuoso\";\n\ninterface VirtuosoContext {\n    listProps: React.HTMLAttributes<HTMLDivElement>;\n    listItemProps: React.HTMLAttributes<HTMLDivElement>;\n}\n\ntype VirtuosoListProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"List\"],\n    undefined\n>;\n\ntype VirtuosoItemProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"Item\"],\n    undefined\n>;\n\nconst List = (\n    props: ComponentProps<VirtuosoListProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, ...otherProps } = props;\n    return <div ref={ref} {...context?.listProps} {...otherProps} />;\n};\n\nexport const VirtuosoList = forwardRef(List);\n\nconst Item = (\n    props: ComponentProps<VirtuosoItemProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, item: _item, ...otherProps } = props;\n\n    return <div ref={ref} {...context?.listItemProps} {...otherProps} />;\n};\n\nexport const VirtuosoItem = forwardRef(Item);\n"],"names":["VirtuosoList","forwardRef","props","ref","context","otherProps","__rest","_jsx","Object","assign","listProps","VirtuosoItem","item","_item","listItemProps"],"mappings":"yGAkBA,MAQaA,EAAeC,EAAAA,YARf,CACTC,EACAC,KAEA,MAAMC,QAAEA,GAA2BF,EAAfG,EAAUC,EAAAA,OAAKJ,EAA7B,CAAA,YACN,OAAOK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASM,UAAeL,GAAc,IAcvDM,EAAeV,EAAAA,YATf,CACTC,EACAC,KAEA,MAAMC,QAAEA,EAASQ,KAAMC,GAAyBX,EAAfG,EAAUC,EAAAA,OAAKJ,EAA1C,CAAA,UAAA,SAEN,OAAOK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASU,cAAmBT,GAAc"}
+{"version":3,"file":"virtuoso-components.js","sources":["../../../../src/shared/dropdown-list/virtuoso-components.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { Components } from \"react-virtuoso\";\n\ninterface VirtuosoContext {\n    listProps: React.HTMLAttributes<HTMLDivElement>;\n    listItemProps: React.HTMLAttributes<HTMLDivElement>;\n}\n\ntype VirtuosoListProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"List\"],\n    undefined\n>;\n\ntype VirtuosoItemProps = Exclude<\n    Components<unknown, VirtuosoContext>[\"Item\"],\n    undefined\n>;\n\nconst List = (\n    props: ComponentProps<VirtuosoListProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, ...otherProps } = props;\n    return <div ref={ref} {...context?.listProps} {...otherProps} />;\n};\n\nexport const VirtuosoList = forwardRef(List);\n\nconst Item = (\n    props: ComponentProps<VirtuosoItemProps>,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const { context, item: _item, ...otherProps } = props;\n\n    return <div ref={ref} {...context?.listItemProps} {...otherProps} />;\n};\n\nexport const VirtuosoItem = forwardRef(Item);\n"],"names":["VirtuosoList","forwardRef","props","ref","context","otherProps","__rest","_jsx","Object","assign","listProps","VirtuosoItem","item","_item","listItemProps"],"mappings":"yGAmBA,MAQaA,EAAeC,EAAAA,YARf,CACTC,EACAC,KAEA,MAAMC,QAAEA,GAA2BF,EAAfG,EAAUC,EAAAA,OAAKJ,EAA7B,CAAA,YACN,OAAOK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASM,UAAeL,GAAc,IAcvDM,EAAeV,EAAAA,YATf,CACTC,EACAC,KAEA,MAAMC,QAAEA,EAASQ,KAAMC,GAAyBX,EAAfG,EAAUC,EAAAA,OAAKJ,EAA1C,CAAA,UAAA,SAEN,OAAOK,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKN,IAAKA,GAASC,aAAO,EAAPA,EAASU,cAAmBT,GAAc"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),a=require("clsx"),r=require("react"),t=require("./dropdown-wrapper.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(a);const d=r.forwardRef((function({disabled:a,children:r},l){return e.jsx("div",{className:t.labelContainer,"data-disabled":a,ref:l,children:r})}));exports.LabelContainer=d,exports.PlaceholderLabel=({variant:a,truncateType:r,children:l})=>e.jsx("div",{className:n.default(t.valueLabel,t.placeholderLabel),"data-variant":a,"data-truncate":r,children:l}),exports.ValueLabel=({variant:a,truncateType:r,children:l})=>e.jsx("div",{className:t.valueLabel,"data-variant":a,"data-truncate":r,children:l});
+//# sourceMappingURL=dropdown-wrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-wrapper.js","sources":["../../../../src/shared/dropdown-wrapper/dropdown-wrapper.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport * as styles from \"./dropdown-wrapper.styles\";\nimport type { LabelContainerProps, ValueLabelProps } from \"./types\";\n\nexport const ValueLabel = ({\n    variant,\n    truncateType,\n    children,\n}: ValueLabelProps) => (\n    <div\n        className={styles.valueLabel}\n        data-variant={variant}\n        data-truncate={truncateType}\n    >\n        {children}\n    </div>\n);\n\nexport const PlaceholderLabel = ({\n    variant,\n    truncateType,\n    children,\n}: ValueLabelProps) => (\n    <div\n        className={clsx(styles.valueLabel, styles.placeholderLabel)}\n        data-variant={variant}\n        data-truncate={truncateType}\n    >\n        {children}\n    </div>\n);\n\nexport const LabelContainer = forwardRef<HTMLDivElement, LabelContainerProps>(\n    function LabelContainer({ disabled, children }, ref) {\n        return (\n            <div\n                className={styles.labelContainer}\n                data-disabled={disabled}\n                ref={ref}\n            >\n                {children}\n            </div>\n        );\n    }\n);\n"],"names":["LabelContainer","forwardRef","disabled","children","ref","_jsx","className","styles.labelContainer","variant","truncateType","clsx","styles.valueLabel","styles.placeholderLabel"],"mappings":"kNAMO,MA4BMA,EAAiBC,EAAAA,YAC1B,UAAwBC,SAAEA,EAAQC,SAAEA,GAAYC,GAC5C,OACIC,MAAA,MAAA,CACIC,UAAWC,EAAAA,eAAqB,gBACjBL,EACfE,IAAKA,WAEJD,GAGb,sDAzB4B,EAC5BK,UACAC,eACAN,cAEAE,EAAAA,IAAA,MAAA,CACIC,UAAWI,EAAAA,QAAKC,aAAmBC,EAAAA,kBAAwB,eAC7CJ,EAAO,gBACNC,WAEdN,uBAxBiB,EACtBK,UACAC,eACAN,cAEAE,EAAAA,IAAA,MAAA,CACIC,UAAWK,EAAAA,WAAiB,eACdH,EAAO,gBACNC,EAAYN,SAE1BA"}

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

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

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 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":"qMA+BA,MAIaA,EAAUC,EAAAA,QAAOC,GAAuB;;;MAG9CC,IACC,MAAMC,EAPS,UAOUD,EAAME,SAPN,IAAM,EAQ/B,OAAOC,KAAG;0BACQF;sBACJA;SACb;EAIIG,EAAiBN,EAAAA,QAAOC,GAA6B;;;;MAI3DC,IACC,GAAIA,EAAMK,UACN,OAAOF,KAAG;yBACGG,EAAAA,OAAO;aAExB;EAIKC,EAAaT,EAAAA,QAAOC,GAAyB;MACnDC,GACoB,UAAnBA,EAAME,SACAM,EAAAA,KAAK,mBACLA,EAAAA,KAAK;aACNF,EAAAA,OAAa;;MAEnBN,IACC,GACS,WADDA,EAAMS,cAKN,OAAON,KAAG;sBACJO,EAAAA,aAAa;;;EAOtBC,EAAmBb,EAAAA,QAAOS,EAAW;aACrCD,EAAAA,OAAO;"}
+{"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"),i=require("react"),n=require("../../external/react-resize-detector/build/index.esm.js"),r=require("styled-components"),s=require("../../overlay/use-floating-context.js"),l=require("../../theme/index.js");require("../../util/calendar-helper.js"),require("../../util/date-helper.js"),require("../../util/date-input-helper.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../../util/use-event.js"),a=require("../../util/use-previous.js");const u=e=>"right"===e?"bottom-end":"bottom-start",d=i.createContext({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})});exports.DropdownRenderContext=d,exports.ElementWithDropdown=({enabled:c,isOpen:g,onOpen:h,onClose:p,onDismiss:f,onHide:m,renderElement:x,renderDropdown:j,customZIndex:v,clickToToggle:y=!1,offset:b=0,alignment:q="left",fitAvailableHeight:w,rootNode:F,positionRef:R})=>{var C;const P=i.useContext(r.ThemeContext),D=l.Breakpoint["sm-max"]({theme:P}),O=i.useRef(null),{width:H=0}=n.useResizeDetector({targetRef:null!=R?R:O,handleHeight:!1}),W={name:"center",fn:({x:e,rects:t})=>{const i=0===e||e+t.floating.width===window.innerWidth,n=window.innerWidth<D;return{x:i&&n?(window.innerWidth-t.floating.width)/2:e}}},{refs:k,floatingStyles:E,context:z}=t.useFloating({open:g,onOpenChange:(e,t,i)=>{"escape-key"===i?null==f||f():e&&!g?null==h||h():!e&&g&&(null==p||p(i))},whileElementsMounted:t.autoUpdate,placement:u(q),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`)}}),W]}),M=s.useFloatingChild(),{isMounted:T,styles:I}=t.useTransitionStyles(z,{initial:{opacity:0},open:{opacity:1},duration:300}),S=t.useClick(z,{enabled:c,toggle:y,keyboardHandlers:y}),A=t.useDismiss(z,{enabled:c}),{getReferenceProps:B,getFloatingProps:N}=t.useInteractions([S,A]),U=a.usePrevious(T),Z=o.useEvent((()=>null==m?void 0:m()));i.useEffect((()=>{U&&!T&&Z()}),[U,T,Z]);const $={elementWidth:H,styles:Object.assign(Object.assign(Object.assign({},I),E),{zIndex:null!==(C=null!=v?v:M)&&void 0!==C?C:50}),setFloatingRef:k.setFloating,getFloatingProps:N};return e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({ref:e=>{O.current=e,k.setReference(e)}},B(),{children:x()})),T&&e.jsx(t.FloatingPortal,{root:F,children:e.jsx(t.FloatingFocusManager,{context:z,modal:!1,initialFocus:-1,returnFocus:!1,children:e.jsx(d.Provider,{value:$,children:j($)})})})]})},exports.useDropdownRender=()=>i.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 {\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","enabled","isOpen","onOpen","onClose","onDismiss","onHide","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","theme","useContext","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":"gmBAqEA,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,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,WAAW,UAAU,CAAEJ,UAC1CK,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,KAAMxC,EACNyC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAxC,SAAAA,IACOqC,IAASxC,EAChBC,SAAAA,KACQuC,GAAQxC,IAChBE,SAAAA,EAAUyC,GACd,EAEJC,qBAAsBC,EAAAA,WACtBC,UAAWvD,EAAqBC,GAChCuD,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,EAASnE,OAAEA,GAAWoE,EAAAA,oBAAoB1B,EAAS,CACvD2B,QAAS,CAAEC,QAAS,GACpB1B,KAAM,CAAE0B,QAAS,GACjBC,SAAU,MAGRC,EAAQC,EAAAA,SAAS/B,EAAS,CAC5BvC,UACAuE,OAAQ9D,EACR+D,iBAAkB/D,IAEhBgE,EAAUC,EAAAA,WAAWnC,EAAS,CAAEvC,aAEhC2E,kBAAEA,EAAiB5E,iBAAEA,GAAqB6E,kBAAgB,CAC5DP,EACAI,IAMEI,EAAgBC,EAAAA,YAAYd,GAC5Be,EAAcC,YAAS,IAAM3E,aAAM,EAANA,MAEnC4E,EAAAA,WAAU,KACFJ,IAAkBb,GAClBe,GACJ,GACD,CAACF,EAAeb,EAAWe,IAK9B,MAAMG,EAAsB,CACxBtF,aAAc2B,EACd1B,oDACOA,GACAyC,GAAc,CACjB6C,OAAoC,QAA5BC,EAAA5E,QAAAA,EAAgBsD,SAAY,IAAAsB,EAAAA,EAzKxB,KA2KhBtF,eAAgBuC,EAAKgD,YACrBtF,oBAGJ,OACIuF,6BACIC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFvE,EAAWwE,QAAUD,EACrBtD,EAAKwD,aAAaF,EAAK,GAEvBhB,IAAmB,CAAAmB,SAEtBxF,OAEJ0D,GACGuB,EAAAA,IAACQ,EAAAA,gBAAeC,KAAMnF,EAAQiF,SAC1BP,EAAAA,IAACU,uBAAoB,CACjB1D,QAASA,EACT2D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAAA,IAAC7F,EAAsB2G,SAAQ,CAC3BC,MAAOpB,EAAmBY,SAEzBvF,EAAe2E,WAKjC,4BA/LsB,IACtBlE,EAAAA,WAAWtB"}
+{"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 React, {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport {\n    Content,\n    Fade,\n    FadeIndicatorButton,\n    Wrapper,\n} from \"./fade-wrapper.style\";\nimport { FadeColorSet, FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const throttledScrollHandler = throttle(handleScroll, 50);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n        };\n    }, []);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleScroll() {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        let fadeColorSet: FadeColorSet;\n\n        if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n            // Single array, apply same color\n            fadeColorSet = {\n                left: fadeColor,\n                right: fadeColor,\n            };\n        } else if (!fadeColor) {\n            fadeColorSet = {\n                left: undefined,\n                right: undefined,\n            };\n        } else {\n            fadeColorSet = fadeColor as FadeColorSet;\n        }\n\n        return (\n            <>\n                {showFadeLeft && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.left}\n                        $position=\"left\"\n                        $showIndicator={showIndicator}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"left\"\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n                {showFadeRight && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.right}\n                        $position=\"right\"\n                        $showIndicator={showIndicator}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"right\"\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <Wrapper ref={wrapperRef} {...otherProps}>\n            <Content ref={contentRef}>{children}</Content>\n            {renderFade()}\n        </Wrapper>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","throttledScrollHandler","throttle","handleScroll","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","handleResize","useResizeDetector","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","useEffect","addEventListener","removeEventListener","_jsxs","Wrapper","Object","assign","_jsx","Content","fadeColorSet","Array","isArray","length","left","right","undefined","_Fragment","Fade","$backgroundColor","$position","FadeIndicatorButton","ChevronLeftIcon","$showIndicator","ChevronRightIcon","renderFade"],"mappings":"+VAmBA,MA2KaA,EAAcC,EAAAA,YA3KT,CACdC,EAQAC,KARA,IAAAC,SACIA,EAAQC,UACRA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQN,EACLO,EAAUC,EAAAA,OAAAR,EANjB,oEAaA,MAAOS,EAAcC,GAAmBC,EAAAA,SACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EAAAA,SACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAAA,OAAuB,MACpCC,EAAaD,EAAAA,OAAuB,MAEpCE,EAAyBC,EAAAA,QAASC,EAAc,IAyCtD,SAASA,IACL,MAAMC,EAAUN,EAAWO,QACrBC,EAAUN,EAAWK,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpDX,EACIY,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtCd,EAAgBY,EAAQK,YAAc,KAEtCd,GAAiB,GACjBH,GAAgB,GAExB,CAEA,SAASkB,IACLT,IAEIb,GACAA,EAAS,CACLgB,QAASN,EAAWK,QACpBD,QAASN,EAAWO,SAQhC,CAzEAQ,oBAAkB,CACdvB,SAAUsB,EACVE,UAAWhB,EACXiB,YAAa,WACbC,YAAa,KAGjBC,EAAAA,oBAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIN,GACJ,MAORO,EAAAA,WAAU,KACN,MAAMb,EAAUN,EAAWK,QAQ3B,OANAF,IAEIG,GACAA,EAAQc,iBAAiB,SAAUnB,GAGhC,KACCK,GACAA,EAAQe,oBAAoB,SAAUpB,EAC1C,CACH,GACF,IAwGH,OACIqB,EAAAA,KAACC,UAAOC,OAAAC,OAAA,CAACxC,IAAKa,GAAgBP,EAAU,CAAAL,SAAA,CACpCwC,EAAAA,IAACC,EAAAA,SAAQ1C,IAAKe,EAAUd,SAAGA,IA5DhB,MACf,IAAI0C,EAiBJ,OAbIA,EAFAC,MAAMC,QAAQ3C,IAAcA,EAAU4C,OAAS,EAEhC,CACXC,KAAM7C,EACN8C,MAAO9C,GAEHA,GACO,CACX6C,UAAME,EACND,WAAOC,GAOXZ,EAAAA,KAAAa,EAAAA,SAAA,CAAAjD,SAAA,CACKO,GACGiC,EAAAA,IAACU,EAAAA,KAAI,CAAAC,iBACiBT,EAAaI,KAAIM,UACzB,sBACMjD,EAAa,UACrB,YAAWH,SAElBG,GACGqC,EAAAA,IAACa,EAAAA,oBAAmB,CAAAD,UACN,OAAM,UACR,sCAERZ,EAAAA,IAACc,EAAAA,gBAAe,CAAA,OAK/B5C,GACG8B,EAAAA,IAACU,EAAAA,uBACqBR,EAAaK,MAAKK,UAC1B,QAAOG,eACDpD,EAAa,UACrB,sBAEPA,GACGqC,EAAAA,IAACa,EAAAA,oBAAmB,CAAAD,UACN,QAAO,UACT,8BAA6BpD,SAErCwC,EAAAA,IAACgB,EAAAA,iBAAgB,CAAA,SAKlC,EAOFC,MACK"}
+{"version":3,"file":"fade-wrapper.js","sources":["../../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport 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/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\";\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":"oJAOiCA,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\";\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":"wGAQiC,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,115 +1,2 @@
-"use strict";var o=require("styled-components"),r=require("../../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.Border["width-020"]} ${r.Border.solid} ${r.Colour["border-focus"]};
-`,i=o.css`
-    outline-color: ${r.Colour["border-focus"]};
-`,d=o.css`
-    outline-color: ${r.Colour["border-disabled"]};
-`,s=o.css`
-    outline-color: ${r.Colour["border-error-focus"]};
-`,a=o.css`
-    outline: none;
-`,u=n.default.div`
-    border: ${r.Border["width-010"]} ${r.Border.solid} ${r.Colour.border};
-    border-radius: ${r.Radius.sm};
-    background: ${r.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.Colour["bg-disabled"]};
-                cursor: not-allowed;
-
-                &:focus-within {
-                    ${d}
-                }
-                ${e.$focused&&d}
-            `:e.$error?o.css`
-                border-color: ${r.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.Spacing["spacing-16"]} 0
-        ${o=>o.$readOnly?"0":r.Spacing["spacing-16"]};
-    flex-direction: ${o=>"right"===o.$position?"row-reverse":"row"};
-`,c=n.default.input`
-    ${o=>"small"===o.$variant?r.Font["body-md-regular"]:r.Font["body-baseline-regular"]}
-    color: ${r.Colour.text};
-    display: block;
-    background: transparent;
-    border: none;
-    outline: none;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-
-    &:disabled {
-        color: ${r.Colour["text-subtler"]};
-
-        &:hover {
-            cursor: not-allowed;
-        }
-    }
-
-    &::placeholder,
-    &::-webkit-input-placeholder {
-        color: ${r.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.Border["width-010"]} ${r.Border.solid}
-            ${r.Colour["border-focus"]};
-        border-radius: ${r.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\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../../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: ${Border[\"width-020\"]} ${Border[\"solid\"]} ${Colour[\"border-focus\"]};\n`;\n\nconst readOnlyFocusCss = css`\n    outline-color: ${Colour[\"border-focus\"]};\n`;\n\nconst disabledFocusCss = css`\n    outline-color: ${Colour[\"border-disabled\"]};\n`;\n\nconst errorFocusCss = css`\n    outline-color: ${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: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${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: ${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: ${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 ${Spacing[\"spacing-16\"]} 0\n        ${(props) => (props.$readOnly ? \"0\" : 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            ? Font[\"body-md-regular\"]\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\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: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["defaultFocusCss","css","Border","Colour","readOnlyFocusCss","disabledFocusCss","errorFocusCss","noFocusCss","InputBox","styled","div","Radius","props","$focused","$noBorder","$readOnly","$disabled","$error","InputWrapper","Spacing","$position","BasicInput","input","$variant","Font","BasicButton","button"],"mappings":"qKAuBA,MAAMA,EAAkBC,EAAAA,GAAG;;eAEZC,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAO;EAG1DC,EAAmBH,EAAAA,GAAG;qBACPE,EAAAA,OAAO;EAGtBE,EAAmBJ,EAAAA,GAAG;qBACPE,EAAAA,OAAO;EAGtBG,EAAgBL,EAAAA,GAAG;qBACJE,EAAAA,OAAO;EAGtBI,EAAaN,EAAAA,GAAG;;EAQTO,EAAWC,EAAAA,QAAOC,GAA2B;cAC5CR,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc,SAAKC,SAAe;qBAClDQ,EAAAA,OAAW;kBACdR,EAAAA,OAAW;;;UAGnBH;;MAEHY,GAAUA,EAAMC,WAAaD,EAAME,WAAad;;MAEhDY,GACKA,EAAMG,UACCd,KAAG;;;;;;sBAMAG;;kBAEJQ,EAAMC,UAAYT;cAEjBQ,EAAMI,UACNf,KAAG;8BACQE,EAAAA,OAAO;;;;sBAIfE;;kBAEJO,EAAMC,UAAYR;cAEjBO,EAAMK,OACNhB,KAAG;gCACUE,EAAAA,OAAO;;;sBAGjBG;;kBAEJM,EAAMC,UAAYP;mBAPrB;MAWRM,IACC,GAAIA,EAAME,UACN,OAAOb,KAAG;;;;sBAIAM;;aAGd;EAIKW,EAAeT,EAAAA,QAAOD,EAAiC;;;;;;iBAMnDW,EAAAA,QAAQ;UACdP,GAAWA,EAAMG,UAAY,IAAMI,EAAAA,QAAQ;sBAC/BP,GACK,UAApBA,EAAMQ,UAAwB,cAAgB;EAOzCC,EAAaZ,EAAAA,QAAOa,KAAsB;MAChDV,GACoB,UAAnBA,EAAMW,SACAC,EAAAA,KAAK,mBACLA,EAAAA,KAAK;aACNrB,EAAAA,OAAa;;;;;;;;;;iBAUTA,EAAAA,OAAO;;;;;;;;;iBASPA,EAAAA,OAAO;;;;;;;;;;;;;;;EAoBXsB,EAAchB,EAAAA,QAAOiB,MAAuB;;;;;;;;;;;mBAWtCxB,EAAAA,OAAO,gBAAgBA,EAAAA,OAAc;cAC1CC,EAAAA,OAAO;yBACIQ,EAAAA,OAAW;;"}
+{"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"}