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

package/histogram-slider/histogram-slider.styles.d.ts

@@ -1,10 +1,8 @@
-interface BarStyleProps {
-    $selected: boolean;
-    $disabled: boolean | undefined;
-}
-export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Histogram: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Bar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BarStyleProps>> & string;
-export declare const Slider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").InputRangeSliderProps, never>> & string & Omit<({ value, min, max, step, minRange, numOfThumbs, colors, disabled, readOnly, ariaLabels, showSliderLabels, sliderLabelPrefix, sliderLabelSuffix, showIndicatorLabel, indicatorLabelPrefix, indicatorLabelSuffix, renderSliderLabel, onChange, onChangeEnd, ...otherProps }: import("..").InputRangeSliderProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const separator: import("@linaria/core").LinariaClassName;
+export declare const histogram: import("@linaria/core").LinariaClassName;
+export declare const bar: import("@linaria/core").LinariaClassName;
+export declare const barDisabled: import("@linaria/core").LinariaClassName;
+export declare const barSelected: import("@linaria/core").LinariaClassName;
+export declare const barSelectedDisabled: import("@linaria/core").LinariaClassName;
+export declare const slider: import("@linaria/core").LinariaClassName;

package/histogram-slider/histogram-slider.styles.js

@@ -1,25 +1,2 @@
-import e,{css as r}from"styled-components";import{InputRangeSlider as i}from"../input-range-slider/input-range-slider.js";import{V3_Spacing as d,V3_Radius as s,V3_Colour as t}from"../v3_theme/index.js";const n=e.div`
-    display: flex;
-    margin-bottom: ${d["spacing-16"]};
-    align-items: baseline;
-`,o=e.div`
-    margin: 0 0.5rem;
-`,l=e.div`
-    width: 100%;
-    height: 4rem;
-    display: flex;
-    align-items: flex-end;
-    padding: 0 0.4375rem;
-`,a=e.div`
-    flex: 1;
-    border-radius: ${s.sm} ${s.sm} 0 0;
-    border: 0.5px solid transparent; // space between bars
-    background-clip: content-box;
-
-    ${e=>{let i=t["bg-strongest"];return e.$disabled&&e.$selected?i=t["bg-selected-stronger-disabled"]:e.$disabled?i=t["bg-disabled"]:e.$selected&&(i=t["bg-selected-stronger"]),r`
-            background-color: ${i};
-        `}}
-`,m=e(i)`
-    margin-top: -0.3125rem;
-`;export{a as Bar,l as Histogram,n as Label,o as Separator,m as Slider};
+import"./histogram-slider.styles_wvd4w.css";const s="l1qwb62w",o="s1f028jb",e="hu29dsu",i="b1koddre",r="b1im7sez",t="b8ooyxk",b="b9tfims",d="s1q1626e";export{i as bar,r as barDisabled,t as barSelected,b as barSelectedDisabled,e as histogram,s as label,o as separator,d as slider};
 //# sourceMappingURL=histogram-slider.styles.js.map

package/histogram-slider/histogram-slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"histogram-slider.styles.js","sources":["../../src/histogram-slider/histogram-slider.styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport { V3_Colour, V3_Radius, V3_Spacing } from \"../v3_theme\";\n\ninterface BarStyleProps {\n    $selected: boolean;\n    $disabled: boolean | undefined;\n}\n\nexport const Label = styled.div`\n    display: flex;\n    margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    align-items: baseline;\n`;\n\nexport const Separator = styled.div`\n    margin: 0 0.5rem;\n`;\n\nexport const Histogram = styled.div`\n    width: 100%;\n    height: 4rem;\n    display: flex;\n    align-items: flex-end;\n    padding: 0 0.4375rem;\n`;\n\nexport const Bar = styled.div<BarStyleProps>`\n    flex: 1;\n    border-radius: ${V3_Radius[\"sm\"]} ${V3_Radius[\"sm\"]} 0 0;\n    border: 0.5px solid transparent; // space between bars\n    background-clip: content-box;\n\n    ${(props) => {\n        let color = V3_Colour[\"bg-strongest\"];\n        if (props.$disabled && props.$selected) {\n            color = V3_Colour[\"bg-selected-stronger-disabled\"];\n        } else if (props.$disabled) {\n            color = V3_Colour[\"bg-disabled\"];\n        } else if (props.$selected) {\n            color = V3_Colour[\"bg-selected-stronger\"];\n        }\n        return css`\n            background-color: ${color};\n        `;\n    }}\n`;\n\nexport const Slider = styled(InputRangeSlider)`\n    margin-top: -0.3125rem;\n`;\n"],"names":["Label","styled","div","V3_Spacing","Separator","Histogram","Bar","V3_Radius","props","color","V3_Colour","$disabled","$selected","css","Slider","InputRangeSlider"],"mappings":"0MAUO,MAAMA,EAAQC,EAAOC,GAAG;;qBAEVC,EAAW;;EAInBC,EAAYH,EAAOC,GAAG;;EAItBG,EAAYJ,EAAOC,GAAG;;;;;;EAQtBI,EAAML,EAAOC,GAAkB;;qBAEvBK,EAAc,MAAKA,EAAc;;;;MAI/CC,IACC,IAAIC,EAAQC,EAAU,gBAQtB,OAPIF,EAAMG,WAAaH,EAAMI,UACzBH,EAAQC,EAAU,iCACXF,EAAMG,UACbF,EAAQC,EAAU,eACXF,EAAMI,YACbH,EAAQC,EAAU,yBAEfG,CAAG;gCACcJ;SACvB;EAIIK,EAASb,EAAOc,EAAiB;;"}
+{"version":3,"file":"histogram-slider.styles.js","sources":["../../src/histogram-slider/histogram-slider.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius, Spacing } from \"../theme\";\n\nexport const label = css`\n    display: flex;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    align-items: baseline;\n`;\n\nexport const separator = css`\n    margin: 0 0.5rem;\n`;\n\nexport const histogram = css`\n    width: 100%;\n    height: 4rem;\n    display: flex;\n    align-items: flex-end;\n    padding: 0 0.4375rem;\n`;\n\nexport const bar = css`\n    flex: 1;\n    border-radius: ${Radius[\"sm\"]} ${Radius[\"sm\"]} 0 0;\n    border: 0.5px solid transparent; // space between bars\n    background-clip: content-box;\n    background-color: ${Colour[\"bg-strongest\"]};\n`;\n\nexport const barDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const barSelected = css`\n    background-color: ${Colour[\"bg-selected-stronger\"]};\n`;\n\nexport const barSelectedDisabled = css`\n    background-color: ${Colour[\"bg-selected-stronger-disabled\"]};\n`;\n\nexport const slider = css`\n    margin-top: -0.3125rem;\n`;\n"],"names":["label","separator","histogram","bar","barDisabled","barSelected","barSelectedDisabled","slider"],"mappings":"4EAIO,MAAMA,EAAK,WAMLC,EAAS,WAITC,EAAS,UAQTC,EAAG,WAQHC,EAAW,WAIXC,EAAW,UAIXC,EAAmB,UAInBC,EAAM"}

package/histogram-slider/histogram-slider.styles_wvd4w.css

@@ -0,0 +1,8 @@
+.l1qwb62w{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:var(--fds-spacing-16);-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
+.s1f028jb{margin:0 0.5rem;}
+.hu29dsu{width:100%;height:4rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;padding:0 0.4375rem;}
+.b1koddre{-webkit-flex:1;-ms-flex:1;flex:1;border-radius:var(--fds-radius-sm) var(--fds-radius-sm) 0 0;border:0.5px solid transparent;-webkit-background-clip:content-box;background-clip:content-box;background-color:var(--fds-colour-bg-strongest);}
+.b1im7sez{background-color:var(--fds-colour-bg-disabled);}
+.b8ooyxk{background-color:var(--fds-colour-bg-selected-stronger);}
+.b9tfims{background-color:var(--fds-colour-bg-selected-stronger-disabled);}
+.s1q1626e{margin-top:-0.3125rem;}

package/histogram-slider/types.d.ts

@@ -16,6 +16,8 @@ export interface HistogramSliderProps {
     rangeLabelPrefix?: string | undefined;
     rangeLabelSuffix?: string | undefined;
     ariaLabels?: [string, string] | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-describedby"?: string | undefined;
     renderRangeLabel?: ((value: number) => React.ReactNode) | undefined;
     /** Called on every selection change. Returns the value in the format `[start, end]` */
     onChange?: ((value: [number, number]) => void) | undefined;

package/image-button/image-button.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import t from"react";import{ImageWithFallback as a}from"../shared/image-with-fallback/image-with-fallback.js";import{Main as l}from"./image-button.style.js";const o=t.forwardRef(((t,o)=>{var{children:s,imgSrc:d,selected:c,error:m,type:b="button",disabled:n=!1,focusableWhenDisabled:f=!1,onClick:p}=t,h=e(t,["children","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick"]);return r(l,Object.assign({ref:o,$disabled:n,$selected:c,$error:m,type:b,"aria-disabled":n,disabled:n&&!f,onClick:n?void 0:p},h,{children:[i(a,{src:d}),s]}))}));export{o as ImageButton};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import a from"clsx";import s from"react";import{ImageWithFallback as t}from"../shared/image-with-fallback/image-with-fallback.js";import{main as l,mainSelectedText as o,mainSelected as c,mainError as m,mainDisabled as d}from"./image-button.styles.js";const n=s.forwardRef(((s,n)=>{var{children:b,className:f,imgSrc:p,selected:h,error:u,type:g="button",disabled:j=!1,focusableWhenDisabled:k=!1,onClick:y}=s,v=e(s,["children","className","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick"]);const w=!!j&&!k;return r("button",Object.assign({ref:n,type:g,"aria-disabled":j,disabled:w,onClick:j?void 0:y,className:a(l,h&&o,h&&c,u&&m,j&&d,f)},v,{children:[i(t,{src:p}),b]}))}));export{n as ImageButton};
 //# sourceMappingURL=image-button.js.map

package/image-button/image-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-button.js","sources":["../../src/image-button/image-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { ButtonRef } from \"../button/types\";\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport { Main } from \"./image-button.style\";\nimport type { ImageButtonProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        imgSrc,\n        selected,\n        error,\n        type = \"button\",\n        disabled = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    }: ImageButtonProps,\n    ref: ButtonRef\n) => {\n    return (\n        <Main\n            ref={ref}\n            $disabled={disabled}\n            $selected={selected}\n            $error={error}\n            type={type}\n            aria-disabled={disabled}\n            disabled={disabled && !focusableWhenDisabled}\n            onClick={disabled ? undefined : onClick}\n            {...otherProps}\n        >\n            <ImageWithFallback src={imgSrc} />\n            {children}\n        </Main>\n    );\n};\n\nexport const ImageButton = React.forwardRef(Component);\n"],"names":["ImageButton","React","forwardRef","_a","ref","children","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick","otherProps","__rest","_jsxs","Main","Object","assign","$disabled","$selected","$error","undefined","_jsx","ImageWithFallback","src"],"mappings":"8PAOA,MAgCaA,EAAcC,EAAMC,YAhCf,CACdC,EAWAC,SAXAC,SACIA,EAAQC,OACRA,EAAMC,SACNA,EAAQC,MACRA,EAAKC,KACLA,EAAO,SAAQC,SACfA,GAAW,EAAKC,sBAChBA,GAAwB,EAAKC,QAC7BA,GAAOT,EACJU,EAAUC,EAAAX,EATjB,CAAA,WAAA,SAAA,WAAA,QAAA,OAAA,WAAA,wBAAA,YAaA,OACIY,EAACC,EAAIC,OAAAC,OAAA,CACDd,IAAKA,EAAGe,UACGT,EAAQU,UACRb,EAAQc,OACXb,EACRC,KAAMA,EAAI,gBACKC,EACfA,SAAUA,IAAaC,EACvBC,QAASF,OAAWY,EAAYV,GAC5BC,aAEJU,EAACC,EAAiB,CAACC,IAAKnB,IACvBD,KACE"}
+{"version":3,"file":"image-button.js","sources":["../../src/image-button/image-button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport type { ButtonRef } from \"../button/types\";\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport * as styles from \"./image-button.styles\";\nimport type { ImageButtonProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        imgSrc,\n        selected,\n        error,\n        type = \"button\",\n        disabled = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    }: ImageButtonProps,\n    ref: ButtonRef\n) => {\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    return (\n        <button\n            ref={ref}\n            type={type}\n            aria-disabled={disabled}\n            disabled={isNativeDisabled}\n            onClick={disabled ? undefined : onClick}\n            className={clsx(\n                styles.main,\n                selected && styles.mainSelectedText,\n                selected && styles.mainSelected,\n                error && styles.mainError,\n                disabled && styles.mainDisabled,\n                className\n            )}\n            {...otherProps}\n        >\n            <ImageWithFallback src={imgSrc} />\n            {children}\n        </button>\n    );\n};\n\nexport const ImageButton = React.forwardRef(Component);\n"],"names":["ImageButton","React","forwardRef","_a","ref","children","className","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick","otherProps","__rest","isNativeDisabled","_jsxs","Object","assign","undefined","clsx","styles.main","styles.mainSelectedText","styles.mainSelected","styles.mainError","styles.mainDisabled","_jsx","ImageWithFallback","src"],"mappings":"4VAQA,MAwCaA,EAAcC,EAAMC,YAxCf,CACdC,EAYAC,KAZA,IAAAC,SACIA,EAAQC,UACRA,EAASC,OACTA,EAAMC,SACNA,EAAQC,MACRA,EAAKC,KACLA,EAAO,SAAQC,SACfA,GAAW,EAAKC,sBAChBA,GAAwB,EAAKC,QAC7BA,GAAOV,EACJW,EAAUC,EAAAZ,EAVjB,CAAA,WAAA,YAAA,SAAA,WAAA,QAAA,OAAA,WAAA,wBAAA,YAcA,MAAMa,IAAqBL,IAAaC,EAExC,OACIK,EAAA,SAAAC,OAAAC,OAAA,CACIf,IAAKA,EACLM,KAAMA,EAAI,gBACKC,EACfA,SAAUK,EACVH,QAASF,OAAWS,EAAYP,EAChCP,UAAWe,EACPC,EACAd,GAAYe,EACZf,GAAYgB,EACZf,GAASgB,EACTd,GAAYe,EACZpB,IAEAQ,EAAU,CAAAT,SAAA,CAEdsB,EAACC,EAAiB,CAACC,IAAKtB,IACvBF,KACI"}

package/image-button/image-button.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const main: import("@linaria/core").LinariaClassName;
+export declare const mainSelectedText: import("@linaria/core").LinariaClassName;
+export declare const mainSelected: import("@linaria/core").LinariaClassName;
+export declare const mainError: import("@linaria/core").LinariaClassName;
+export declare const mainDisabled: import("@linaria/core").LinariaClassName;

package/image-button/image-button.styles.js

@@ -0,0 +1,2 @@
+import"./image-button.styles_qtt605.css";const t="mqb1plh",m="mpjl8bn",o="mroo32y",s="mz6wr40",n="m1hsk0n5";export{t as main,n as mainDisabled,s as mainError,o as mainSelected,m as mainSelectedText};
+//# sourceMappingURL=image-button.styles.js.map

package/image-button/image-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-button.styles.js","sources":["../../src/image-button/image-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Motion, Radius } from \"../theme\";\n\nexport const main = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 0.5rem;\n    justify-content: center;\n    align-items: center;\n    padding: 1.5rem 1rem;\n    background-color: ${Colour.bg};\n    border: ${Border[\"width-010\"]} ${Border.solid} transparent;\n    border-radius: ${Radius[\"md\"]};\n    cursor: pointer;\n    max-width: 13rem;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text\"]};\n    overflow-wrap: anywhere;\n\n    img {\n        min-width: 3.5rem;\n        width: 3.5rem;\n        height: 3.5rem;\n        object-fit: contain;\n    }\n\n    &:hover {\n        border-color: ${Colour[\"border-hover-strong\"]};\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: 0.5rem 0.25rem;\n        gap: 0.25rem;\n        ${Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const mainSelectedText = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const mainSelected = css`\n    background: ${Colour[\"bg-selected\"]};\n    border-color: ${Colour[\"border-selected\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-selected-hover\"]};\n        border-color: ${Colour[\"border-selected-hover\"]};\n    }\n`;\n\nexport const mainError = css`\n    background: ${Colour.bg};\n    border-color: ${Colour[\"border-error\"]};\n\n    &:hover {\n        background: ${Colour.bg};\n        border-color: ${Colour[\"border-error\"]};\n    }\n`;\n\nexport const mainDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n    cursor: not-allowed;\n\n    img {\n        filter: grayscale(100%);\n    }\n\n    &:hover {\n        border-color: transparent;\n    }\n`;\n"],"names":["main","mainSelectedText","mainSelected","mainError","mainDisabled"],"mappings":"qEAIO,MAAMA,EAAI,UAoCJC,EAAgB,UAIhBC,EAAY,UAUZC,EAAS,UAUTC,EAAY"}

package/image-button/image-button.styles_qtt605.css

@@ -0,0 +1,5 @@
+.mqb1plh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1.5rem 1rem;background-color:var(--fds-colour-bg);border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;border-radius:var(--fds-radius-md);cursor:pointer;max-width:13rem;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);overflow-wrap:anywhere;}.mqb1plh img{min-width:3.5rem;width:3.5rem;height:3.5rem;object-fit:contain;}.mqb1plh:hover{border-color:var(--fds-colour-border-hover-strong);}:where(body.fds-breakpoint-sm-max) .mqb1plh{padding:0.5rem 0.25rem;gap:0.25rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.mpjl8bn{color:var(--fds-colour-text-primary);}
+.mroo32y{background:var(--fds-colour-bg-selected);border-color:var(--fds-colour-border-selected);}.mroo32y:hover{background:var(--fds-colour-bg-selected-hover);border-color:var(--fds-colour-border-selected-hover);}
+.mz6wr40{background:var(--fds-colour-bg);border-color:var(--fds-colour-border-error);}.mz6wr40:hover{background:var(--fds-colour-bg);border-color:var(--fds-colour-border-error);}
+.m1hsk0n5{color:var(--fds-colour-text-disabled);cursor:not-allowed;}.m1hsk0n5 img{-webkit-filter:grayscale(100%);filter:grayscale(100%);}.m1hsk0n5:hover{border-color:transparent;}

package/index.d.ts

@@ -6,7 +6,6 @@ export * from "./badge";
 export * from "./box-container";
 export * from "./breadcrumb";
 export * from "./button";
-export * from "./button-with-icon";
 export * from "./calendar";
 export * from "./card";
 export * from "./checkbox";
@@ -29,7 +28,6 @@ export * from "./footer";
 export * from "./form";
 export * from "./fullscreen-image-carousel";
 export * from "./histogram-slider";
-export * from "./icon-button";
 export * from "./image-button";
 export * from "./input";
 export * from "./input-group";
@@ -41,6 +39,7 @@ export * from "./input-range-slider";
 export * from "./input-select";
 export * from "./input-slider";
 export * from "./input-textarea";
+export * from "./language-switcher";
 export * from "./layout";
 export * from "./link-list";
 export * from "./markup";

package/index.js

@@ -1,2 +1,2 @@
-export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{ButtonWithIcon}from"./button-with-icon/button-with-icon.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DashedBorder}from"./dashed-border/dashed-border.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{Example}from"./example/example.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{IconButton}from"./icon-button/icon-button.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masonry}from"./masonry/masonry.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{Popover}from"./popover/popover.js";export{withPopover}from"./popover/popover-hoc.js";export{PopoverV2}from"./popover-v2/popover.js";export{PopoverInline}from"./popover-v2/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover-v2/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{ThemeProvider}from"./theme/theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme/theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./theme/tokens/border.js";export{Breakpoint}from"./theme/tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./theme/tokens/colour.js";export{ComponentToken}from"./theme/tokens/component.js";export{Font,FontSpec}from"./theme/tokens/font.js";export{MediaQuery}from"./theme/tokens/media-query.js";export{Motion}from"./theme/tokens/motion.js";export{Radius}from"./theme/tokens/radius.js";export{Shadow}from"./theme/tokens/shadow.js";export{Spacing}from"./theme/tokens/spacing.js";export{getInheritedInlineCssVariables,parseCSSVariableValue,parsePxOrRemValue}from"./theme/utils/css-variable.js";export{generateFont}from"./theme/utils/font.js";export{getEffectiveTokenOrCustom,getResolvedValue,getTokenOrDefault,isTokenFromSet,isTokenWithPrefix,toCssValue}from"./theme/utils/token-resolver.js";export{useApplyStyle}from"./theme/utils/use-apply-styles.js";export{useDesignToken,useResolvedTokenValue}from"./theme/utils/use-design-token.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Tooltip}from"./tooltip/tooltip.js";export{withTooltip}from"./tooltip/tooltip-hoc.js";export{Typography}from"./typography/index.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";export{V2_Color}from"./v2_color/color.js";export{V2_DesignToken}from"./v2_design-token/design-token.js";export{V2_Layout}from"./v2_layout/index.js";export{V2_MediaQuery,V2_MediaWidths}from"./v2_media/media.js";export{V2_TextStyleHelper}from"./v2_text/helper.js";export{V2_Text}from"./v2_text/text.js";export{V2_TextStyle}from"./v2_text/text-style.js";export{RedirectScope}from"./v2_text/types.js";export{V2_TextList}from"./v2_text-list/index.js";export{V2_BaseTheme,V2_BookingSGTheme,V2_CCubeTheme,V2_MyLegacyTheme,V2_OneServiceTheme,V2_RBSTheme}from"./v2_theme/index.js";export{V2_Transition}from"./v2_transition/index.js";export{V3_A11yPlaygroundTheme,V3_BookingSGTheme,V3_Border,V3_Breakpoint,V3_CCubeTheme,V3_Colour,V3_Font,V3_IMDATheme,V3_LifeSGTheme,V3_MediaQuery,V3_Motion,V3_MyLegacyTheme,V3_OneServiceTheme,V3_PATheme,V3_RBSTheme,V3_Radius,V3_SGWDigitalLobbyTheme,V3_SGWDigitalLobbyThemeBase,V3_SPFTheme,V3_Shadow,V3_Spacing,V3_SupportGoWhereTheme,V3_SupportGoWhereThemeBase}from"./v3_theme/index.js";export{V2_ThemeContextKeys}from"./v2_theme/types.js";export{V3_DSThemeProvider}from"./v3_theme/ds-theme-provider.js";export{createThemeWithColourMode,getSystemColourMode,useDSTheme}from"./v3_theme/use-theme-mode.js";
+export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DashedBorder}from"./dashed-border/dashed-border.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{Example}from"./example/example.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{LanguageSwitcher}from"./language-switcher/language-switcher.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masonry}from"./masonry/masonry.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{Popover}from"./popover/popover.js";export{withPopover}from"./popover/popover-hoc.js";export{PopoverV2}from"./popover-v2/popover.js";export{PopoverInline}from"./popover-v2/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover-v2/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{ThemeProvider}from"./theme/theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme/theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./theme/tokens/border.js";export{Breakpoint}from"./theme/tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./theme/tokens/colour.js";export{ComponentToken}from"./theme/tokens/component.js";export{Font,FontSpec}from"./theme/tokens/font.js";export{MediaQuery}from"./theme/tokens/media-query.js";export{Motion}from"./theme/tokens/motion.js";export{Radius}from"./theme/tokens/radius.js";export{Shadow}from"./theme/tokens/shadow.js";export{Spacing}from"./theme/tokens/spacing.js";export{THEME_TYPES}from"./theme/types.js";export{getInheritedInlineCssVariables,parseCSSVariableValue,parsePxOrRemValue}from"./theme/utils/css-variable.js";export{generateFont,generateFontProperties}from"./theme/utils/font.js";export{DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,useSafeMaxWidthMediaQuery}from"./theme/utils/media-query.js";export{getEffectiveTokenOrCustom,getResolvedValue,getTokenOrDefault,isTokenFromSet,isTokenWithPrefix,toCssValue}from"./theme/utils/token-resolver.js";export{useApplyStyle}from"./theme/utils/use-apply-styles.js";export{useDesignToken,useResolvedTokenValue}from"./theme/utils/use-design-token.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Tooltip}from"./tooltip/tooltip.js";export{withTooltip}from"./tooltip/tooltip-hoc.js";export{Typography}from"./typography/index.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";export{V2_Color}from"./v2_color/color.js";export{V2_DesignToken}from"./v2_design-token/design-token.js";export{V2_Layout}from"./v2_layout/index.js";export{V2_MediaQuery,V2_MediaWidths}from"./v2_media/media.js";export{V2_TextStyleHelper}from"./v2_text/helper.js";export{V2_Text}from"./v2_text/text.js";export{V2_TextStyle}from"./v2_text/text-style.js";export{RedirectScope}from"./v2_text/types.js";export{V2_TextList}from"./v2_text-list/index.js";export{V2_BaseTheme,V2_BookingSGTheme,V2_CCubeTheme,V2_MyLegacyTheme,V2_OneServiceTheme,V2_RBSTheme}from"./v2_theme/index.js";export{V2_Transition}from"./v2_transition/index.js";export{V3_A11yPlaygroundTheme,V3_BookingSGTheme,V3_Border,V3_Breakpoint,V3_CCubeTheme,V3_Colour,V3_Font,V3_IMDATheme,V3_LifeSGTheme,V3_MediaQuery,V3_Motion,V3_MyLegacyTheme,V3_OneServiceTheme,V3_PATheme,V3_RBSTheme,V3_Radius,V3_SGWDigitalLobbyTheme,V3_SGWDigitalLobbyThemeBase,V3_SMGSTheme,V3_SPFTheme,V3_Shadow,V3_Spacing,V3_SupportGoWhereTheme,V3_SupportGoWhereThemeBase}from"./v3_theme/index.js";export{V2_ThemeContextKeys}from"./v2_theme/types.js";export{V3_DSThemeProvider}from"./v3_theme/ds-theme-provider.js";export{createThemeWithColourMode,getSystemColourMode,useDSTheme}from"./v3_theme/use-theme-mode.js";
 //# sourceMappingURL=index.js.map

package/input/input.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,Fragment as a,jsxs as t}from"react/jsx-runtime";import l,{useRef as n,useImperativeHandle as s}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{StringHelper as i}from"../util/string-helper.js";import{useNextInputState as o}from"../util/use-next-input-state.js";import{NoBorderWrapper as d,DefaultWrapper as p,InputElement as c,ClearButton as u,ClearIcon as m}from"./input.style.js";const y=l.forwardRef(((l,y)=>{var{value:f,spacing:h,type:C,error:b,disabled:j,readOnly:g,onChange:v,onClear:$,allowClear:O=!1,className:x,styleType:w="bordered"}=l,N=e(l,["value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType"]);const T=((e,r)=>"tel"===e&&!!r)(C,h),R=n(null);s(y,(()=>R.current),[]);const S=o({ref:R,formatter:e=>T?i.transformWithSpaces(e,h):e}),W=e=>{v&&(T?k(e):v(e))},_=()=>{$&&$(),R&&R.current&&R.current.focus()},k=e=>{const r=S();if(!r)return;const{nextValue:a,updateCaretPosition:t}=r,l=a.replace(/\s/g,"");e.target.value=l,null==v||v(e),t()},P=f?(e=>e?T?i.transformWithSpaces(e,h):e:"")(f):f,V=O&&!j&&!g&&!!f,q=()=>t(a,{children:[r(c,Object.assign({"data-testid":"input",ref:R,"aria-disabled":j,value:P,onChange:W,type:C,readOnly:g||j,$showClear:V,$styleType:w,$visuallyReadOnly:g},N)),V&&r(u,{onClick:_,type:"button","aria-label":"Clear input",$styleType:w,children:r(m,{"aria-hidden":!0})})]});return r(a,{children:"no-border"===w?r(d,{className:x,children:q()}):r(p,{$disabled:j,$error:b,$readOnly:g,className:x,children:q()})})}));export{y as Input};
+import{__rest as r}from"../_virtual/_tslib.js";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import{CrossIcon as n}from"@lifesg/react-icons/cross";import s from"clsx";import o,{useRef as l,useImperativeHandle as i}from"react";import{InputBox as p,BasicInput as c,BasicButton as d}from"../shared/input-wrapper/input-wrapper.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import{StringHelper as m}from"../util/string-helper.js";import"@react-aria/live-announcer";import{useNextInputState as u}from"../util/use-next-input-state.js";import{noBorderWrapper as f,defaultWrapper as y,defaultWrapperReadOnly as h,defaultWrapperError as b,defaultWrapperDisabled as j,inputElement as g,inputElementPaddingRight as C,inputElementPaddingLeft as v,inputElementDisabled as N,clearButton as x,clearButtonNoBorder as w,clearIcon as O}from"./input.styles.js";const S=o.forwardRef(((o,S)=>{var{value:T,spacing:W,type:_,error:k,disabled:P,readOnly:R,onChange:V,onClear:q,allowClear:z=!1,className:A,styleType:B="bordered"}=o,D=r(o,["value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType"]);const E=((r,e)=>"tel"===r&&!!e)(_,W),F=l(null);i(S,(()=>F.current),[]);const G=u({ref:F,formatter:r=>E?m.transformWithSpaces(r,W):r}),H=r=>{V&&(E?J(r):V(r))},I=()=>{q&&q(),F&&F.current&&F.current.focus()},J=r=>{const e=G();if(!e)return;const{nextValue:a,updateCaretPosition:t}=e,n=a.replace(/\s/g,"");r.target.value=n,null==V||V(r),t()},K=T?(r=>r?E?m.transformWithSpaces(r,W):r:"")(T):T,L=z&&!P&&!R&&!!T,M=()=>{const r=s(g,{[N]:P,[v]:"no-border"!==B&&!R,[C]:"no-border"!==B&&!R&&!L}),o=s(x,"no-border"===B&&w);return t(a,{children:[e(c,Object.assign({"data-testid":"input",ref:F,"aria-disabled":P,value:K,onChange:H,type:_,readOnly:R||P,className:r},D)),L&&e(d,{onClick:I,type:"button","aria-label":"Clear input",className:o,children:e(n,{className:O,"aria-hidden":!0})})]})};return e(a,{children:"no-border"===B?e("div",{className:s(f,A),children:M()}):e(p,{className:s(y,A,{[j]:P,[b]:k,[h]:R}),disabled:P,error:k,readOnly:R,children:M()})})}));export{S as Input};
 //# sourceMappingURL=input.js.map

package/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../src/input/input.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef } from \"react\";\n\nimport { StringHelper, useNextInputState } from \"../util\";\nimport {\n    ClearButton,\n    ClearIcon,\n    DefaultWrapper,\n    InputElement,\n    NoBorderWrapper,\n} from \"./input.style\";\nimport type { InputProps, InputRef } from \"./types\";\n\nconst shouldAllowSpacing = (\n    type: string | undefined,\n    spacing: number | undefined\n): spacing is number => {\n    return type === \"tel\" && !!spacing;\n};\n\nconst Component = (\n    {\n        value,\n        spacing,\n        type,\n        error,\n        disabled,\n        readOnly,\n        onChange,\n        onClear,\n        allowClear = false,\n        className,\n        styleType = \"bordered\",\n        ...otherProps\n    }: InputProps,\n    ref: InputRef\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const allowSpacing = shouldAllowSpacing(type, spacing);\n    const elementRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => elementRef.current!, []);\n\n    const getNextInputState = useNextInputState({\n        ref: elementRef,\n        formatter: (value) => {\n            return allowSpacing\n                ? StringHelper.transformWithSpaces(value, spacing)\n                : value;\n        },\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            if (allowSpacing) {\n                handleSpacingAndCaretPosition(event);\n            } else {\n                onChange(event);\n            }\n        }\n    };\n\n    const handleClear = () => {\n        if (onClear) onClear();\n\n        if (elementRef && elementRef.current) {\n            elementRef.current.focus();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const convertInputString = (value: string | number | readonly string[]) => {\n        if (!value) return \"\";\n        if (allowSpacing) {\n            return StringHelper.transformWithSpaces(value, spacing);\n        }\n        return value;\n    };\n\n    const handleSpacingAndCaretPosition = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        // Send to handler unspaced value\n        const valueWithoutSpace = nextValue.replace(/\\s/g, \"\");\n        event.target.value = valueWithoutSpace;\n        onChange?.(event);\n\n        updateCaretPosition();\n    };\n\n    const shouldShowClear = () => {\n        return allowClear && !disabled && !readOnly && !!value;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    /**\n     * To clear controlled input value, you have to pass in value as empty string,\n     * then set `updatedValue` to empty string.\n     * `updatedValue` for uncontrolled components remains as undefined such that the\n     * user is free to edit the field. (else the value of the InputElement will\n     * be set to empty string)\n     */\n    const updatedValue = value ? convertInputString(value) : value;\n    const showClear = shouldShowClear();\n\n    const renderInputElement = () => {\n        return (\n            <>\n                <InputElement\n                    data-testid=\"input\"\n                    ref={elementRef}\n                    aria-disabled={disabled}\n                    value={updatedValue}\n                    onChange={handleChange}\n                    type={type}\n                    readOnly={readOnly || disabled}\n                    $showClear={showClear}\n                    $styleType={styleType}\n                    $visuallyReadOnly={readOnly}\n                    {...otherProps}\n                />\n                {showClear && (\n                    <ClearButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear input\"\n                        $styleType={styleType}\n                    >\n                        <ClearIcon aria-hidden />\n                    </ClearButton>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <>\n            {styleType === \"no-border\" ? (\n                <NoBorderWrapper className={className}>\n                    {renderInputElement()}\n                </NoBorderWrapper>\n            ) : (\n                <DefaultWrapper\n                    $disabled={disabled}\n                    $error={error}\n                    $readOnly={readOnly}\n                    className={className}\n                >\n                    {renderInputElement()}\n                </DefaultWrapper>\n            )}\n        </>\n    );\n};\n\nexport const Input = React.forwardRef(Component);\n"],"names":["Input","React","forwardRef","_a","ref","value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType","otherProps","__rest","allowSpacing","shouldAllowSpacing","elementRef","useRef","useImperativeHandle","current","getNextInputState","useNextInputState","formatter","StringHelper","transformWithSpaces","handleChange","event","handleSpacingAndCaretPosition","handleClear","focus","nextState","nextValue","updateCaretPosition","valueWithoutSpace","replace","target","updatedValue","convertInputString","showClear","renderInputElement","_jsxs","_Fragment","children","_jsx","InputElement","Object","assign","$showClear","$styleType","$visuallyReadOnly","ClearButton","onClick","ClearIcon","NoBorderWrapper","DefaultWrapper","$disabled","$error"],"mappings":"yeAYA,MA2JaA,EAAQC,EAAMC,YApJT,CACdC,EAcAC,KAdA,IAAAC,MACIA,EAAKC,QACLA,EAAOC,KACPA,EAAIC,MACJA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,WACPA,GAAa,EAAKC,UAClBA,EAASC,UACTA,EAAY,YAAUZ,EACnBa,EAAUC,EAAAd,EAZjB,oHAmBA,MAAMe,EA3BiB,EACvBX,EACAD,IAEgB,QAATC,KAAoBD,EAuBNa,CAAmBZ,EAAMD,GACxCc,EAAaC,EAAyB,MAC5CC,EAAoBlB,GAAK,IAAMgB,EAAWG,SAAU,IAEpD,MAAMC,EAAoBC,EAAkB,CACxCrB,IAAKgB,EACLM,UAAYrB,GACDa,EACDS,EAAaC,oBAAoBvB,EAAOC,GACxCD,IAORwB,EAAgBC,IACdnB,IACIO,EACAa,EAA8BD,GAE9BnB,EAASmB,GAEjB,EAGEE,EAAc,KACZpB,GAASA,IAETQ,GAAcA,EAAWG,SACzBH,EAAWG,QAAQU,OACvB,EAcEF,EACFD,IAEA,MAAMI,EAAYV,IAClB,IAAKU,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAGrCG,EAAoBF,EAAUG,QAAQ,MAAO,IACnDR,EAAMS,OAAOlC,MAAQgC,EACrB1B,SAAAA,EAAWmB,GAEXM,GAAqB,EAiBnBI,EAAenC,EAtCM,CAACA,GACnBA,EACDa,EACOS,EAAaC,oBAAoBvB,EAAOC,GAE5CD,EAJY,GAqCMoC,CAAmBpC,GAASA,EACnDqC,EAdK7B,IAAeJ,IAAaC,KAAcL,EAgB/CsC,EAAqB,IAEnBC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,EAAYC,OAAAC,OAAA,CAAA,cACG,QACZ9C,IAAKgB,EAAU,gBACAX,EACfJ,MAAOmC,EACP7B,SAAUkB,EACVtB,KAAMA,EACNG,SAAUA,GAAYD,EAAQ0C,WAClBT,EAASU,WACTrC,EAASsC,kBACF3C,GACfM,IAEP0B,GACGK,EAACO,EAAW,CACRC,QAASvB,EACTzB,KAAK,SAAQ,aACF,yBACCQ,EAAS+B,SAErBC,EAACS,EAAS,CAAA,eAAA,SAO9B,OACIT,EAAAF,EAAA,CAAAC,SACmB,cAAd/B,EACGgC,EAACU,EAAe,CAAC3C,UAAWA,WACvB6B,MAGLI,EAACW,EAAc,CAAAC,UACAlD,EAAQmD,OACXpD,YACGE,EACXI,UAAWA,WAEV6B,OAGV"}
+{"version":3,"file":"input.js","sources":["../../src/input/input.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport React, { useImperativeHandle, useRef } from \"react\";\n\nimport { BasicButton, BasicInput, InputBox } from \"../shared/input-wrapper\";\nimport { StringHelper, useNextInputState } from \"../util\";\nimport * as styles from \"./input.styles\";\nimport type { InputProps, InputRef } from \"./types\";\n\nconst shouldAllowSpacing = (\n    type: string | undefined,\n    spacing: number | undefined\n): spacing is number => {\n    return type === \"tel\" && !!spacing;\n};\n\nconst Component = (\n    {\n        value,\n        spacing,\n        type,\n        error,\n        disabled,\n        readOnly,\n        onChange,\n        onClear,\n        allowClear = false,\n        className,\n        styleType = \"bordered\",\n        ...otherProps\n    }: InputProps,\n    ref: InputRef\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const allowSpacing = shouldAllowSpacing(type, spacing);\n    const elementRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => elementRef.current!, []);\n\n    const getNextInputState = useNextInputState({\n        ref: elementRef,\n        formatter: (value) => {\n            return allowSpacing\n                ? StringHelper.transformWithSpaces(value, spacing)\n                : value;\n        },\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            if (allowSpacing) {\n                handleSpacingAndCaretPosition(event);\n            } else {\n                onChange(event);\n            }\n        }\n    };\n\n    const handleClear = () => {\n        if (onClear) onClear();\n\n        if (elementRef && elementRef.current) {\n            elementRef.current.focus();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const convertInputString = (value: string | number | readonly string[]) => {\n        if (!value) return \"\";\n        if (allowSpacing) {\n            return StringHelper.transformWithSpaces(value, spacing);\n        }\n        return value;\n    };\n\n    const handleSpacingAndCaretPosition = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        // Send to handler unspaced value\n        const valueWithoutSpace = nextValue.replace(/\\s/g, \"\");\n        event.target.value = valueWithoutSpace;\n        onChange?.(event);\n\n        updateCaretPosition();\n    };\n\n    const shouldShowClear = () => {\n        return allowClear && !disabled && !readOnly && !!value;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    /**\n     * To clear controlled input value, you have to pass in value as empty string,\n     * then set `updatedValue` to empty string.\n     * `updatedValue` for uncontrolled components remains as undefined such that the\n     * user is free to edit the field. (else the value of the InputElement will\n     * be set to empty string)\n     */\n    const updatedValue = value ? convertInputString(value) : value;\n    const showClear = shouldShowClear();\n\n    const renderInputElement = () => {\n        const inputClassName = clsx(styles.inputElement, {\n            [styles.inputElementDisabled]: disabled,\n            [styles.inputElementPaddingLeft]:\n                styleType !== \"no-border\" && !readOnly,\n            [styles.inputElementPaddingRight]:\n                styleType !== \"no-border\" && !readOnly && !showClear,\n        });\n\n        const clearButtonClassName = clsx(\n            styles.clearButton,\n            styleType === \"no-border\" && styles.clearButtonNoBorder\n        );\n\n        return (\n            <>\n                <BasicInput\n                    data-testid=\"input\"\n                    ref={elementRef}\n                    aria-disabled={disabled}\n                    value={updatedValue}\n                    onChange={handleChange}\n                    type={type}\n                    readOnly={readOnly || disabled}\n                    className={inputClassName}\n                    {...otherProps}\n                />\n                {showClear && (\n                    <BasicButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear input\"\n                        className={clearButtonClassName}\n                    >\n                        <CrossIcon className={styles.clearIcon} aria-hidden />\n                    </BasicButton>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <>\n            {styleType === \"no-border\" ? (\n                <div className={clsx(styles.noBorderWrapper, className)}>\n                    {renderInputElement()}\n                </div>\n            ) : (\n                <InputBox\n                    className={clsx(styles.defaultWrapper, className, {\n                        [styles.defaultWrapperDisabled]: disabled,\n                        [styles.defaultWrapperError]: error,\n                        [styles.defaultWrapperReadOnly]: readOnly,\n                    })}\n                    disabled={disabled}\n                    error={error}\n                    readOnly={readOnly}\n                >\n                    {renderInputElement()}\n                </InputBox>\n            )}\n        </>\n    );\n};\n\nexport const Input = React.forwardRef(Component);\n"],"names":["Input","React","forwardRef","_a","ref","value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType","otherProps","__rest","allowSpacing","shouldAllowSpacing","elementRef","useRef","useImperativeHandle","current","getNextInputState","useNextInputState","formatter","StringHelper","transformWithSpaces","handleChange","event","handleSpacingAndCaretPosition","handleClear","focus","nextState","nextValue","updateCaretPosition","valueWithoutSpace","replace","target","updatedValue","convertInputString","showClear","renderInputElement","inputClassName","clsx","styles.inputElement","inputElementDisabled","styles.inputElementDisabled","inputElementPaddingLeft","styles.inputElementPaddingLeft","inputElementPaddingRight","styles.inputElementPaddingRight","clearButtonClassName","styles.clearButton","styles.clearButtonNoBorder","_jsxs","_Fragment","children","_jsx","BasicInput","BasicButton","onClick","CrossIcon","styles.clearIcon","styles.noBorderWrapper","InputBox","styles.defaultWrapper","defaultWrapperDisabled","styles.defaultWrapperDisabled","defaultWrapperError","styles.defaultWrapperError","defaultWrapperReadOnly","styles.defaultWrapperReadOnly"],"mappings":"k6BASA,MA0KaA,EAAQC,EAAMC,YAnKT,CACdC,EAcAC,KAdA,IAAAC,MACIA,EAAKC,QACLA,EAAOC,KACPA,EAAIC,MACJA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,WACPA,GAAa,EAAKC,UAClBA,EAASC,UACTA,EAAY,YAAUZ,EACnBa,EAAUC,EAAAd,EAZjB,oHAmBA,MAAMe,EA3BiB,EACvBX,EACAD,IAEgB,QAATC,KAAoBD,EAuBNa,CAAmBZ,EAAMD,GACxCc,EAAaC,EAAyB,MAC5CC,EAAoBlB,GAAK,IAAMgB,EAAWG,SAAU,IAEpD,MAAMC,EAAoBC,EAAkB,CACxCrB,IAAKgB,EACLM,UAAYrB,GACDa,EACDS,EAAaC,oBAAoBvB,EAAOC,GACxCD,IAORwB,EAAgBC,IACdnB,IACIO,EACAa,EAA8BD,GAE9BnB,EAASmB,GAEjB,EAGEE,EAAc,KACZpB,GAASA,IAETQ,GAAcA,EAAWG,SACzBH,EAAWG,QAAQU,OACvB,EAcEF,EACFD,IAEA,MAAMI,EAAYV,IAClB,IAAKU,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAGrCG,EAAoBF,EAAUG,QAAQ,MAAO,IACnDR,EAAMS,OAAOlC,MAAQgC,EACrB1B,SAAAA,EAAWmB,GAEXM,GAAqB,EAiBnBI,EAAenC,EAtCM,CAACA,GACnBA,EACDa,EACOS,EAAaC,oBAAoBvB,EAAOC,GAE5CD,EAJY,GAqCMoC,CAAmBpC,GAASA,EACnDqC,EAdK7B,IAAeJ,IAAaC,KAAcL,EAgB/CsC,EAAqB,KACvB,MAAMC,EAAiBC,EAAKC,EAAqB,CAC7CC,CAACC,GAA8BvC,EAC/BwC,CAACC,GACiB,cAAdnC,IAA8BL,EAClCyC,CAACC,GACiB,cAAdrC,IAA8BL,IAAagC,IAG7CW,EAAuBR,EACzBS,EACc,cAAdvC,GAA6BwC,GAGjC,OACIC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,+BACe,QACZxD,IAAKgB,EAAU,gBACAX,EACfJ,MAAOmC,EACP7B,SAAUkB,EACVtB,KAAMA,EACNG,SAAUA,GAAYD,EACtBK,UAAW8B,GACP5B,IAEP0B,GACGiB,EAACE,EAAW,CACRC,QAAS9B,EACTzB,KAAK,sBACM,cACXO,UAAWuC,EAAoBK,SAE/BC,EAACI,GAAUjD,UAAWkD,EAAgB,eAAA,QAG/C,EAIX,OACIL,EAAAF,EAAA,CAAAC,SACmB,cAAd3C,EACG4C,EAAA,MAAA,CAAK7C,UAAW+B,EAAKoB,EAAwBnD,GAAU4C,SAClDf,MAGLgB,EAACO,GACGpD,UAAW+B,EAAKsB,EAAuBrD,EAAW,CAC9CsD,CAACC,GAAgC5D,EACjC6D,CAACC,GAA6B/D,EAC9BgE,CAACC,GAAgC/D,IAErCD,SAAUA,EACVD,MAAOA,EACPE,SAAUA,WAETiC,OAGV"}

package/input/input.styles.d.ts

@@ -0,0 +1,12 @@
+export declare const inputElement: import("@linaria/core").LinariaClassName;
+export declare const inputElementDisabled: import("@linaria/core").LinariaClassName;
+export declare const inputElementPaddingLeft: import("@linaria/core").LinariaClassName;
+export declare const inputElementPaddingRight: import("@linaria/core").LinariaClassName;
+export declare const clearButton: import("@linaria/core").LinariaClassName;
+export declare const clearButtonNoBorder: import("@linaria/core").LinariaClassName;
+export declare const clearIcon: import("@linaria/core").LinariaClassName;
+export declare const noBorderWrapper: import("@linaria/core").LinariaClassName;
+export declare const defaultWrapper: import("@linaria/core").LinariaClassName;
+export declare const defaultWrapperReadOnly: import("@linaria/core").LinariaClassName;
+export declare const defaultWrapperDisabled: import("@linaria/core").LinariaClassName;
+export declare const defaultWrapperError: import("@linaria/core").LinariaClassName;

package/input/input.styles.js

@@ -0,0 +1,2 @@
+import"./input.styles_1cblor0.css";const t="in7cu42",i="igi2hjf",c="i13ih4tu",r="itgr0ej",o="cw4xcs5",e="c12bgeeg",p="c1v4p080",s="n1rpxuv8",n="d7twtqb",u="dtt8rz0",b="d1rboro0",d="d6he67o";export{o as clearButton,e as clearButtonNoBorder,p as clearIcon,n as defaultWrapper,b as defaultWrapperDisabled,d as defaultWrapperError,u as defaultWrapperReadOnly,t as inputElement,i as inputElementDisabled,c as inputElementPaddingLeft,r as inputElementPaddingRight,s as noBorderWrapper};
+//# sourceMappingURL=input.styles.js.map

package/input/input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.js","sources":["../../src/input/input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputElement = css`\n    width: 100%;\n    height: calc(3rem - 2px); /* exclude top and bottom borders */\n`;\n\nexport const inputElementDisabled = css`\n    color: ${Colour[\"text-subtler\"]};\n\n    &:hover {\n        cursor: not-allowed;\n    }\n`;\n\nexport const inputElementPaddingLeft = css`\n    padding-left: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const inputElementPaddingRight = css`\n    padding-right: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const clearButton = css`\n    height: auto;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    cursor: pointer;\n    color: ${Colour.icon};\n`;\n\nexport const clearButtonNoBorder = css`\n    margin-right: calc(${Spacing[\"spacing-12\"]} * -1);\n`;\n\nexport const clearIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    vertical-align: middle;\n`;\n\nexport const noBorderWrapper = css`\n    display: flex;\n    width: 100%;\n`;\n\nexport const defaultWrapper = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n`;\n\nexport const defaultWrapperReadOnly = css`\n    border-color: transparent;\n    padding: 0;\n    background: transparent !important;\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const defaultWrapperDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const defaultWrapperError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n"],"names":["inputElement","inputElementDisabled","inputElementPaddingLeft","inputElementPaddingRight","clearButton","clearButtonNoBorder","clearIcon","noBorderWrapper","defaultWrapper","defaultWrapperReadOnly","defaultWrapperDisabled","defaultWrapperError"],"mappings":"wDAOO,MAAMA,EAAY,UAKZC,EAAoB,UAQpBC,EAAuB,WAIvBC,EAAwB,UAIxBC,EAAW,UAOXC,EAAmB,WAInBC,EAAS,WAMTC,EAAe,WAKfC,EAAc,UAMdC,EAAsB,UAUtBC,EAAsB,WAStBC,EAAmB"}

package/input/input.styles_1cblor0.css

@@ -0,0 +1,12 @@
+.in7cu42{width:100%;height:calc(3rem - 2px);}
+.igi2hjf{color:var(--fds-colour-text-subtler);}.igi2hjf:hover{cursor:not-allowed;}
+.i13ih4tu{padding-left:var(--fds-spacing-16);}
+.itgr0ej{padding-right:var(--fds-spacing-16);}
+.cw4xcs5{height:auto;padding:var(--fds-spacing-12) var(--fds-spacing-16);cursor:pointer;color:var(--fds-colour-icon);}
+.c12bgeeg{margin-right:calc(var(--fds-spacing-12) * -1);}
+.c1v4p080{height:1.25rem;width:1.25rem;vertical-align:middle;}
+.n1rpxuv8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}
+.d7twtqb{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;width:100%;}
+.dtt8rz0{border-color:transparent;padding:0;background:transparent!important;}.dtt8rz0:focus-within{outline-color:var(--fds-colour-border-focus);}
+.d1rboro0{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.d1rboro0:focus-within{outline-color:var(--fds-colour-border-disabled);}
+.d6he67o{border-color:var(--fds-colour-border-error);}.d6he67o:focus-within{outline-color:var(--fds-colour-border-error-focus);}

package/input-group/input-group-list-addon.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import t,{useState as a,useRef as i,useEffect as d}from"react";import{VisuallyHidden as l,concatIds as s}from"../shared/accessibility/index.js";import"styled-components";import"../util/string-helper.js";import"../v3_theme/index.js";import"../shared/dropdown-list-v2/dropdown-label.styles.js";import{DropdownList as n}from"../shared/dropdown-list-v2/dropdown-list.js";import{DropdownListState as p}from"../shared/dropdown-list-v2/dropdown-list-state.js";import"../shared/dropdown-list-v2/expandable-element.js";import"@lifesg/react-icons/caret-right";import"react-virtuoso";import"../button/button.style.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as c}from"../util/simple-id-generator.js";import{ValueLabel as m,LabelContainer as h,PlaceholderLabel as b}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as u}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/dropdown-list-v2/dropdown-list.styles.js";import"../shared/dropdown-list-v2/dropdown-search.js";import"../shared/dropdown-list-v2/nested-dropdown-list.styles.js";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import{FieldWrapper as y,FieldSelector as x,Divider as j,FieldInput as f,SelectorReadOnly as w,StyledExpandableElement as v}from"./input-group-list-addon.style.js";const g=(t,g)=>{var{addon:$,error:O,onChange:S,readOnly:T,disabled:B,className:R,onBlur:I,noBorder:_,"data-testid":D,"aria-labelledby":E,"aria-describedby":N,"aria-invalid":C,"aria-label":k}=t,A=e(t,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:F,listExtractor:P,enableSearch:H,hideNoResultsDisplay:L,noResultsDescription:Z,searchPlaceholder:q,searchFunction:G,onSearch:V,placeholder:W="Select",displayValueExtractor:z,"data-selector-testid":J,options:K,selectedOption:M,onSelectOption:Q,optionsLoadState:U,optionTruncationType:X,onRetry:Y,onHideOptions:ee,onShowOptions:re,dropdownZIndex:oe,dropdownRootNode:te,"aria-label":ae}=$.attributes,{position:ie}=$,[de,le]=a(M),[se,ne]=a(!1),[pe,ce]=a(!1),[me]=a((()=>c.generate())),he=`${me}-listbox`,be=`${me}-instruction`,ue=`${me}-combobox-label`,ye=`${me}-textbox-label`,xe=i(null),je=i(null);d((()=>{le(M)}),[M]);const fe=()=>{if(de)return z?z(de):F?F(de):de.toString()},we=e=>{e?null==re||re():null==ee||ee()},ve=(e,r)=>{var o;null===(o=je.current)||void 0===o||o.focus(),le(e),ne(!1),we(!1),null==Q||Q(e,r)},ge=()=>{se&&(ne(!1),we(!1))},$e=()=>{ne(!0),we(!0),ce(!0)},Oe=e=>{ne(!1),we(!1),"click"!==e&&(ce(!1),null==I||I())},Se=()=>{var e;null===(e=je.current)||void 0===e||e.focus(),ne(!1),we(!1)},Te=()=>o("div",{children:[r(v,{ref:je,disabled:B,expanded:se,listboxId:he,popupRole:"listbox",readOnly:T,"aria-labelledby":s(E,ue),"aria-describedby":s(N,be),"aria-invalid":C,$noBorder:_,$position:ie,children:r(h,{$disabled:B,children:de?r(m,{children:fe()}):r(b,{children:W})})}),r(l,{id:be,children:"Press space to open options"})]}),Be=()=>r(n,{listboxId:he,listItems:K,onSelectItem:ve,onDismiss:ge,valueExtractor:F,listExtractor:P,enableSearch:H,hideNoResultsDisplay:L,noResultsDescription:Z,searchPlaceholder:q,searchFunction:G,onSearch:V,selectedItems:de?[de]:[],itemsLoadState:U,itemTruncationType:X,onRetry:Y,matchElementWidth:!0});return r(p,{children:o(y,{$focused:pe,$disabled:B,$readOnly:T,$error:O,$position:ie,ref:xe,className:R,"data-testid":D,$noBorder:_,tabIndex:-1,onFocus:()=>{pe||se||ce(!0)},onBlur:e=>{pe&&!se&&xe.current&&!xe.current.contains(e.relatedTarget)&&(ce(!1),null==I||I())},children:[r(l,{"aria-hidden":!0,id:ue,children:ae}),r(x,{"data-testid":J,children:T?de?r(w,{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":E,"aria-describedby":N,"aria-invalid":C,children:r(m,{children:fe()})}):null:r(u,{enabled:!T&&!B,isOpen:se,renderElement:Te,renderDropdown:Be,onOpen:$e,onClose:Oe,onDismiss:Se,clickToToggle:!0,offset:8,alignment:"right"===ie?"right":"left",fitAvailableHeight:!0,customZIndex:oe,rootNode:te,positionRef:xe})}),r(j,{$readOnly:T,$position:ie}),r(l,{"aria-hidden":!0,id:ye,children:k}),r(f,Object.assign({ref:g},A,{$position:ie,$noBorder:_,readOnly:T,disabled:B,error:O,onChange:e=>{S&&S(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":s(E,ye),"aria-describedby":N,"aria-invalid":C}))]})})},$=t.forwardRef(g);export{g as Component,$ as InputGroupListAddon};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import t from"clsx";import i,{useState as a,useRef as s,useEffect as l}from"react";import{Input as d}from"../input/input.js";import{VisuallyHidden as n,concatIds as p}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as c}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as m}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as h}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as u}from"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as b}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as f}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1qveyb9.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";import{ValueLabel as x,LabelContainer as y,PlaceholderLabel as j}from"../shared/dropdown-wrapper/dropdown-wrapper.js";import{fieldSelector as w,divider as g,dividerReadOnly as v,fieldInputReadOnly as _,fieldInputNoBorder as T,fieldInputPosition as I,fieldWrapper as S,selectorReadOnly as N,expandableElementNoBorder as O}from"./input-group-list-addon.styles.js";const k=(i,k)=>{var{addon:A,error:R,onChange:C,readOnly:B,disabled:q,className:D,onBlur:E,noBorder:P,"data-testid":H,"aria-labelledby":G,"aria-describedby":M,"aria-invalid":$,"aria-label":F}=i,L=e(i,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:Z,listExtractor:V,enableSearch:W,hideNoResultsDisplay:z,noResultsDescription:J,searchPlaceholder:K,searchFunction:Q,onSearch:U,placeholder:X="Select",displayValueExtractor:Y,"data-selector-testid":ee,options:re,selectedOption:oe,onSelectOption:te,optionsLoadState:ie,optionTruncationType:ae,onRetry:se,onHideOptions:le,onShowOptions:de,dropdownZIndex:ne,dropdownRootNode:pe,"aria-label":ce}=A.attributes,{position:me="left"}=A,[he,ue]=a(oe),[be,fe]=a(!1),[xe,ye]=a(!1),je=c(),we=`${je}-listbox`,ge=`${je}-instruction`,ve=`${je}-combobox-label`,_e=`${je}-textbox-label`,Te=s(null),Ie=s(null);l((()=>{ue(oe)}),[oe]);const Se=()=>{if(he)return Y?Y(he):Z?Z(he):he.toString()},Ne=e=>{e?null==de||de():null==le||le()},Oe=(e,r)=>{var o;null===(o=Ie.current)||void 0===o||o.focus(),ue(e),fe(!1),Ne(!1),null==te||te(e,r)},ke=()=>{be&&(fe(!1),Ne(!1))},Ae=()=>{fe(!0),Ne(!0),ye(!0)},Re=e=>{fe(!1),Ne(!1),"click"!==e&&(ye(!1),null==E||E())},Ce=()=>{var e;null===(e=Ie.current)||void 0===e||e.focus(),fe(!1),Ne(!1)},Be=()=>o("div",{children:[r(u,{ref:Ie,disabled:q,expanded:be,listboxId:we,popupRole:"listbox",readOnly:B,"aria-labelledby":p(G,ve),"aria-describedby":p(M,ge),"aria-invalid":$,"data-position":me,className:t(P&&O),children:r(y,{disabled:q,children:he?r(x,{children:Se()}):r(j,{children:X})})}),r(n,{id:ge,children:"Press space to open options"})]}),qe=()=>r(m,{listboxId:we,listItems:re,onSelectItem:Oe,onDismiss:ke,valueExtractor:Z,listExtractor:V,enableSearch:W,hideNoResultsDisplay:z,noResultsDescription:J,searchPlaceholder:K,searchFunction:Q,onSearch:U,selectedItems:he?[he]:[],itemsLoadState:ie,itemTruncationType:ae,onRetry:se,matchElementWidth:!0});return r(h,{children:o(f,{focused:xe,disabled:q,readOnly:B,error:R,ref:Te,noBorder:P,"data-testid":H,tabIndex:-1,onFocus:()=>{xe||be||ye(!0)},onBlur:e=>{xe&&!be&&Te.current&&!Te.current.contains(e.relatedTarget)&&(ye(!1),null==E||E())},"data-position":me,className:t(S,D),children:[r(n,{"aria-hidden":!0,id:ve,children:ce}),r("div",{"data-testid":ee,className:w,children:B?he?r("div",{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":G,"aria-describedby":M,"aria-invalid":$,className:N,children:r(x,{children:Se()})}):null:r(b,{enabled:!B&&!q,isOpen:be,renderElement:Be,renderDropdown:qe,onOpen:Ae,onClose:Re,onDismiss:Ce,clickToToggle:!0,offset:8,alignment:"right"===me?"right":"left",fitAvailableHeight:!0,customZIndex:ne,rootNode:pe,positionRef:Te})}),r("div",{"data-position":me,className:t(g,B&&v)}),r(n,{"aria-hidden":!0,id:_e,children:F}),r(d,Object.assign({ref:k},L,{readOnly:B,disabled:q,error:R,onChange:e=>{C&&C(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":p(G,_e),"aria-describedby":M,"aria-invalid":$,"data-position":me,className:t(B&&_,!B&&P&&T,!B&&!P&&I)}))]})})},A=i.forwardRef(k);export{k as Component,A as InputGroupListAddon};
 //# sourceMappingURL=input-group-list-addon.js.map

package/input-group/input-group-list-addon.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group-list-addon.js","sources":["../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    Divider,\n    FieldInput,\n    FieldSelector,\n    FieldWrapper,\n    SelectorReadOnly,\n    StyledExpandableElement,\n} from \"./input-group-list-addon.style\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n        } else {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer $disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <StyledExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    $noBorder={noBorder}\n                    $position={position}\n                >\n                    {renderSelectorContent()}\n                </StyledExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <SelectorReadOnly\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </SelectorReadOnly>\n            ) : null;\n        } else {\n            return (\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={showOptions}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle\n                    offset={8}\n                    alignment={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <FieldWrapper\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                $position={position}\n                ref={nodeRef}\n                className={className}\n                data-testid={testId}\n                $noBorder={noBorder}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <FieldSelector data-testid={selectorTestId}>\n                    {renderSelector()}\n                </FieldSelector>\n                <Divider $readOnly={readOnly} $position={position} />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <FieldInput\n                    ref={ref}\n                    {...otherProps}\n                    $position={position}\n                    $noBorder={noBorder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    error={error}\n                    onChange={handleInputChange}\n                    data-testid=\"input\"\n                    styleType=\"no-border\"\n                    aria-labelledby={concatIds(ariaLabelledBy, textboxLabelId)}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                />\n            </FieldWrapper>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","StyledExpandableElement","expanded","popupRole","concatIds","$noBorder","$position","LabelContainer","$disabled","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","FieldWrapper","$focused","$readOnly","$error","tabIndex","onFocus","e","contains","relatedTarget","FieldSelector","SelectorReadOnly","role","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","Divider","FieldInput","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"input-group-list-addon.js","sources":["../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group-list-addon.styles\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position = \"left\" } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (selected) {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n\n        return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    data-position={position}\n                    className={clsx(\n                        noBorder && styles.expandableElementNoBorder\n                    )}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <div\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                    className={styles.selectorReadOnly}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </div>\n            ) : null;\n        } else {\n            return (\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={showOptions}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle\n                    offset={8}\n                    alignment={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <InputBox\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n                ref={nodeRef}\n                noBorder={noBorder}\n                data-testid={testId}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                data-position={position}\n                className={clsx(styles.fieldWrapper, className)}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <div\n                    data-testid={selectorTestId}\n                    className={styles.fieldSelector}\n                >\n                    {renderSelector()}\n                </div>\n                <div\n                    data-position={position}\n                    className={clsx(\n                        styles.divider,\n                        readOnly && styles.dividerReadOnly\n                    )}\n                />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <Input\n                    ref={ref}\n                    {...otherProps}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    error={error}\n                    onChange={handleInputChange}\n                    data-testid=\"input\"\n                    styleType=\"no-border\"\n                    aria-labelledby={concatIds(ariaLabelledBy, textboxLabelId)}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                    data-position={position}\n                    className={clsx(\n                        readOnly && styles.fieldInputReadOnly,\n                        !readOnly && noBorder && styles.fieldInputNoBorder,\n                        !readOnly && !noBorder && styles.fieldInputPosition\n                    )}\n                />\n            </InputBox>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","ExpandableElement","expanded","popupRole","concatIds","clsx","styles.expandableElementNoBorder","LabelContainer","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","InputBox","tabIndex","onFocus","e","contains","relatedTarget","styles.fieldWrapper","styles.fieldSelector","role","styles.selectorReadOnly","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","styles.divider","styles.dividerReadOnly","Input","Object","assign","event","styleType","styles.fieldInputReadOnly","styles.fieldInputNoBorder","styles.fieldInputPosition","InputGroupListAddon","React","forwardRef"],"mappings":"khFAsBaA,EAAY,CACrBC,EAgBAC,KAhBA,IAAAC,MACIA,EAAKC,MACLA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,UACRA,EAASC,OACTA,EAAMC,SACNA,EACA,cAAeC,EACf,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAChB,aAAcC,GAAgBd,EAC3Be,EAAUC,EAAAhB,EAdjB,mKAkBA,MAAMiB,eAEFA,EAAcC,cACdA,EAAaC,aAEbA,EAAYC,qBACZA,EAAoBC,qBACpBA,EAAoBC,kBACpBA,EAAiBC,eACjBA,EAAcC,SACdA,EAAQC,YAERA,EAAc,SAAQC,sBACtBA,EACA,uBAAwBC,GAAcC,QACtCA,GAAOC,eACPA,GAAcC,eACdA,GAAcC,iBACdA,GAAgBC,qBAChBA,GAAoBC,QACpBA,GAAOC,cACPA,GAAaC,cACbA,GAAaC,eACbA,GAAcC,iBACdA,GACA,aAAcC,IACdpC,EAAOqC,YAELC,SAAEA,GAAW,QAAWtC,GAKvBuC,GAAUC,IAAeC,EAAwBd,KACjDe,GAAaC,IAAkBF,GAAkB,IACjDG,GAASC,IAAcJ,GAAkB,GAC1CK,GAAaC,IACbC,GAAY,GAAGF,aACfG,GAAgB,GAAGH,iBACnBI,GAAkB,GAAGJ,oBACrBK,GAAiB,GAAGL,mBAEpBM,GAAUC,EAAuB,MACjCC,GAAcD,EAA0B,MAK9CE,GAAU,KACNf,GAAYb,GAAe,GAC5B,CAACA,KAKJ,MAAM6B,GAAkB,KACpB,GAAKjB,GAEL,OAAIf,EACOA,EAAsBe,IAG7BxB,EACOA,EAAewB,IAGnBA,GAASkB,UAAU,EAGxBC,GAAgCC,IAC9BA,EACA1B,UAAAA,KAEAD,UAAAA,IACJ,EAME4B,GAAsB,CAACC,EAASC,WACf,QAAnBhE,EAAAwD,GAAYS,eAAO,IAAAjE,GAAAA,EAAEkE,QACrBxB,GAAYqB,GACZlB,IAAe,GACfe,IAA6B,GAE7B9B,UAAAA,GAAiBiC,EAAMC,EAAe,EAGpCG,GAAoB,KAClBvB,KACAC,IAAe,GACfe,IAA6B,GACjC,EAyBEQ,GAAa,KACfvB,IAAe,GACfe,IAA6B,GAC7Bb,IAAW,EAAK,EAGdsB,GAAeC,IACjBzB,IAAe,GACfe,IAA6B,GAGd,UAAXU,IACAvB,IAAW,GACXvC,SAAAA,IACJ,EAGE+D,GAAgB,WACC,QAAnBvE,EAAAwD,GAAYS,eAAO,IAAAjE,GAAAA,EAAEkE,QACrBrB,IAAe,GACfe,IAA6B,EAAM,EAkBjCY,GAAgB,IAEdC,EAAA,MAAA,CAAAC,SAAA,CACIC,EAACC,GACG3E,IAAKuD,GACLlD,SAAUA,EACVuE,SAAUjC,GACVM,UAAWA,GACX4B,UAAU,UACVzE,SAAUA,EAAQ,kBACD0E,EAAUpE,EAAgByC,IAAgB,mBACzC2B,EAAUnE,EAAiBuC,IAAc,eAC7CtC,EAAW,gBACV2B,GACfjC,UAAWyE,EACPvE,GAAYwE,GACfP,SAnBbC,EAACO,EAAc,CAAC5E,SAAUA,EAAQoE,SAR9BjC,GACOkC,EAACQ,EAAU,CAAAT,SAAEhB,OAGjBiB,EAACS,EAAgB,CAAAV,SAAEjD,QA2BlBkD,EAACU,EAAc,CAACC,GAAInC,GAAauB,SAAA,mCAOvCa,GAAiB,IAEfZ,EAACa,EAAY,CACTtC,UAAWA,GACXuC,UAAW7D,GACX8D,aAAc5B,GACd6B,UAAWxB,GACXlD,eAAgBA,EAChBC,cAAeA,EACfC,aAAcA,EACdC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,kBAAmBA,EACnBC,eAAgBA,EAChBC,SAAUA,EACVoE,cAAenD,GAAW,CAACA,IAAY,GACvCoD,eAAgB9D,GAChB+D,mBAAoB9D,GACpBC,QAASA,GACT8D,mBAAiB,IA6C7B,OACIpB,EAACqB,EAAiB,CAAAtB,SACdD,EAACwB,EAAQ,CACLnD,QAASA,GACTxC,SAAUA,EACVD,SAAUA,EACVF,MAAOA,EACPF,IAAKqD,GACL7C,SAAUA,EAAQ,cACLC,EACbwF,UAAU,EACVC,QA9JY,KACfrD,IAAYF,IACbG,IAAW,EACf,EA4JQvC,OAzJY4F,IAEhBtD,KACCF,IACDU,GAAQW,UACPX,GAAQW,QAAQoC,SAASD,EAAEE,iBAE5BvD,IAAW,GACXvC,SAAAA,IACJ,EAgJ8B,gBACPgC,GACfjC,UAAWyE,EAAKuB,EAAqBhG,aAErCoE,EAACU,oBAA2BC,GAAIlC,GAAesB,SAC1CpC,KAELqC,EAAA,MAAA,CAAA,cACiBhD,GACbpB,UAAWiG,EAAoB9B,SA5DvCrE,EACOoC,GACHkC,EAAA,MAAA,CAAA,cACgB,iBACZuB,SAAU,EACVO,KAAK,WAAU,gBACD,UAAS,iBAAA,EAAA,iBAER,oBACE9F,EAAc,mBACbC,EAAe,eACnBC,EACdN,UAAWmG,WAEX/B,EAACQ,YAAYzB,SAEjB,KAGAiB,EAACgC,EAAmB,CAChBC,SAAUvG,IAAaC,EACvBuG,OAAQjE,GACR4B,cAAeA,GACfe,eAAgBA,GAChBuB,OAAQ1C,GACR2C,QAAS1C,GACTsB,UAAWpB,GACXyC,eAAa,EACbC,OAAQ,EACRC,UAAwB,UAAb1E,GAAuB,QAAU,OAC5C2E,oBAAkB,EAClBC,aAAchF,GACdiF,SAAUhF,GACViF,YAAahE,OA+BjBqB,yBACmBnC,GACfjC,UAAWyE,EACPuC,EACAlH,GAAYmH,KAGpB7C,EAACU,oBAA2BC,GAAIjC,GAAcqB,SACzC5D,IAEL6D,EAAC8C,EAAKC,OAAAC,OAAA,CACF1H,IAAKA,GACDc,EAAU,CACdV,SAAUA,EACVC,SAAUA,EACVH,MAAOA,EACPC,SAhMWwH,IACnBxH,GAAUA,EAASwH,EAAM,EA+LU,cACf,QACZC,UAAU,YAAW,kBACJ9C,EAAUpE,EAAgB0C,uBACzBzC,EAAe,eACnBC,EAAW,gBACV2B,GACfjC,UAAWyE,EACP3E,GAAYyH,GACXzH,GAAYI,GAAYsH,GACxB1H,IAAaI,GAAYuH,UAItB,EAIfC,EAAsBC,EAAMC,WAAWpI"}

package/input-group/input-group-list-addon.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const fieldWrapper: import("@linaria/core").LinariaClassName;
+export declare const expandableElementNoBorder: import("@linaria/core").LinariaClassName;
+export declare const fieldSelector: import("@linaria/core").LinariaClassName;
+export declare const fieldInputReadOnly: import("@linaria/core").LinariaClassName;
+export declare const fieldInputNoBorder: import("@linaria/core").LinariaClassName;
+export declare const fieldInputPosition: import("@linaria/core").LinariaClassName;
+export declare const selectorReadOnly: import("@linaria/core").LinariaClassName;
+export declare const divider: import("@linaria/core").LinariaClassName;
+export declare const dividerReadOnly: import("@linaria/core").LinariaClassName;

package/input-group/input-group-list-addon.styles.js

@@ -0,0 +1,2 @@
+import"./input-group-list-addon.styles_1my6j2v.css";const s="fmhspm1",o="e135ws0j",p="faf95up",f="f96umbl",m="f3g4d0l",t="fioonlm",u="s1b40hsu",l="d7gwol5",d="d181f48m";export{l as divider,d as dividerReadOnly,o as expandableElementNoBorder,m as fieldInputNoBorder,t as fieldInputPosition,f as fieldInputReadOnly,p as fieldSelector,s as fieldWrapper,u as selectorReadOnly};
+//# sourceMappingURL=input-group-list-addon.styles.js.map

package/input-group/input-group-list-addon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-list-addon.styles.js","sources":["../../src/input-group/input-group-list-addon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const fieldWrapper = css`\n    display: flex;\n    align-items: center;\n\n    &[data-position=\"right\"] {\n        flex-direction: row-reverse;\n    }\n`;\n\nexport const expandableElementNoBorder = css`\n    &[data-position=\"right\"] {\n        padding-right: 0;\n    }\n\n    &[data-position=\"left\"] {\n        padding-left: 0;\n    }\n`;\n\nexport const fieldSelector = css`\n    flex: 0 0 auto;\n`;\n\nexport const fieldInputReadOnly = css`\n    padding: 0;\n`;\n\nexport const fieldInputNoBorder = css`\n    &[data-position=\"right\"] {\n        padding-left: 0;\n    }\n\n    &[data-position=\"left\"] {\n        padding-right: 0;\n    }\n`;\n\nexport const fieldInputPosition = css`\n    &[data-position=\"right\"] {\n        padding-left: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-position=\"left\"] {\n        padding-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const selectorReadOnly = css`\n    display: flex;\n    align-items: center;\n    padding: 0;\n    background: transparent;\n    margin-right: ${Spacing[\"spacing-12\"]};\n    color: ${Colour[\"text\"]};\n`;\n\nexport const divider = css`\n    width: 1px;\n    background: ${Colour[\"border\"]};\n    flex-shrink: 0;\n    height: 1.25rem;\n\n    &[data-position=\"right\"] {\n        margin-left: ${Spacing[\"spacing-12\"]};\n    }\n\n    &[data-position=\"left\"] {\n        margin-right: ${Spacing[\"spacing-12\"]};\n    }\n`;\n\nexport const dividerReadOnly = css`\n    display: none;\n`;\n"],"names":["fieldWrapper","expandableElementNoBorder","fieldSelector","fieldInputReadOnly","fieldInputNoBorder","fieldInputPosition","selectorReadOnly","divider","dividerReadOnly"],"mappings":"+EAOO,MAAMA,EAAY,UASZC,EAAyB,WAUzBC,EAAa,UAIbC,EAAkB,UAIlBC,EAAkB,UAUlBC,EAAkB,UAUlBC,EAAgB,WAShBC,EAAO,UAePC,EAAe"}

package/input-group/input-group-list-addon.styles_1my6j2v.css

@@ -0,0 +1,9 @@
+.fmhspm1{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;}.fmhspm1[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.e135ws0j[data-position="right"]{padding-right:0;}.e135ws0j[data-position="left"]{padding-left:0;}
+.faf95up{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}
+.f96umbl{padding:0;}
+.f3g4d0l[data-position="right"]{padding-left:0;}.f3g4d0l[data-position="left"]{padding-right:0;}
+.fioonlm[data-position="right"]{padding-left:var(--fds-spacing-16);}.fioonlm[data-position="left"]{padding-right:var(--fds-spacing-16);}
+.s1b40hsu{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;padding:0;background:transparent;margin-right:var(--fds-spacing-12);color:var(--fds-colour-text);}
+.d7gwol5{width:1px;background:var(--fds-colour-border);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1.25rem;}.d7gwol5[data-position="right"]{margin-left:var(--fds-spacing-12);}.d7gwol5[data-position="left"]{margin-right:var(--fds-spacing-12);}
+.d181f48m{display:none;}

package/input-group/input-group.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsxs as e,jsx as t}from"react/jsx-runtime";import a from"react";import{AddonWrapper as d,LabelAddonContainer as o,MainInput as s,NoAddonWrapper as i}from"./input-group.style.js";import{InputGroupListAddon as n}from"./input-group-list-addon.js";const l=a.forwardRef(((a,l)=>{var{addon:c,error:p,className:b}=a,u=r(a,["addon","error","className"]);const $=()=>t(i,{$disabled:u.disabled,$error:p,$readOnly:u.readOnly,"data-testid":u["data-testid"],className:b,$noBorder:u.noBorder,children:t(s,Object.assign({ref:l},u,{"data-testid":"input",styleType:"no-border"}))});if(!c)return $();{const{type:r="label",position:a="left"}=c,{allowClear:i}=u;switch(r){case"list":{const r=c.attributes;return r.options&&r.options.length>0?t(n,Object.assign({ref:l,addon:c,error:p,className:b,noBorder:u.noBorder},u)):$()}case"custom":{const r=c.attributes;return r.children?e(d,{$error:p,$disabled:u.disabled,$readOnly:u.readOnly,"data-testid":u["data-testid"],$position:a,className:b,$noBorder:u.noBorder,children:[t(o,{"data-testid":"addon",$disabled:u.disabled,$readOnly:u.readOnly,$position:a,children:r.children}),t(s,Object.assign({ref:l},u,{allowClear:i&&"right"!==a,error:p,"data-testid":"input",styleType:"no-border"}))]}):$()}default:{const r=c.attributes;return r.value?e(d,{$disabled:u.disabled,$error:p,$readOnly:u.readOnly,"data-testid":u["data-testid"],$position:a,className:b,$noBorder:u.noBorder,children:[t(o,{"data-testid":"addon",$disabled:u.disabled,$readOnly:u.readOnly,$position:a,children:r.value}),t(s,Object.assign({ref:l},u,{allowClear:i&&"right"!==a,error:p,"data-testid":"input",styleType:"no-border"}))]}):$()}}}}));export{l as InputGroup};
+import{__rest as r}from"../_virtual/_tslib.js";import{jsx as a,jsxs as e}from"react/jsx-runtime";import t from"clsx";import d from"react";import{Input as i}from"../input/input.js";import{VisuallyHidden as o,concatIds as l}from"../shared/accessibility/index.js";import{InputBox as s}from"../shared/input-wrapper/input-wrapper.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as n}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{labelAddonContainer as p,addonWrapper as m,noAddonWrapper as c}from"./input-group.styles.js";import{InputGroupListAddon as b}from"./input-group-list-addon.js";const u=d.forwardRef(((d,u)=>{var{addon:y,error:f,className:j,noBorder:h,"aria-label":O,"aria-labelledby":g}=d,v=r(d,["addon","error","className","noBorder","aria-label","aria-labelledby"]);const w=n(),N=`${w}-addon`,x=`${w}-ariaLabelId`,B=()=>a(s,{disabled:v.disabled,error:f,readOnly:v.readOnly,noBorder:h,"data-testid":v["data-testid"],className:t(c,j),"data-read-only":v.readOnly,"data-no-border":h,children:a(i,Object.assign({ref:u},v,{"data-testid":"input",styleType:"no-border"}))}),C=(r,d,n)=>e(s,{disabled:v.disabled,error:f,readOnly:v.readOnly,noBorder:h,"data-testid":v["data-testid"],className:t(m,j),"data-read-only":v.readOnly,"data-no-border":h,"data-position":d,children:[a("div",{"data-testid":"addon",id:N,className:p,"data-disabled":v.disabled,"data-read-only":v.readOnly,"data-position":d,children:r}),a(o,{"aria-hidden":!0,id:x,children:O}),a(i,Object.assign({ref:u},v,{"aria-labelledby":l(x,g,N),allowClear:n&&"right"!==d,error:f,"data-testid":"input",styleType:"no-border"}))]});if(!y)return B();{const{type:r="label",position:e="left"}=y,{allowClear:t}=v;switch(r){case"list":{const r=y.attributes;return r.options&&r.options.length>0?a(b,Object.assign({ref:u,addon:y,error:f,className:j,noBorder:h,"aria-label":O,"aria-labelledby":g},v)):B()}case"custom":{const r=y.attributes;return r.children?C(r.children,e,t):B()}default:{const r=y.attributes;return r.value?C(r.value,e,t):B()}}}}));export{u as InputGroup};
 //# sourceMappingURL=input-group.js.map