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

package/input-range-slider/input-range-slider.styles.d.ts

@@ -1,20 +1,15 @@
-import ReactSlider from "react-slider";
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
-interface TrackStyleProps {
-    $color: string | ((props: V3_ThemeStyleProps) => string) | undefined;
-}
-interface ThumbStyleProps {
-    $disabled: boolean | undefined;
-    $readOnly: boolean | undefined;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const IndicatorLabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const Slider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-slider").ReactSliderProps<number | readonly number[]> & import("react").RefAttributes<ReactSlider<number | readonly number[]>>, never>> & string & Omit<typeof ReactSlider, keyof import("react").Component<any, {}, any>>;
-export declare const Knob: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThumbStyleProps>> & string;
-export declare const SliderThumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SliderTrack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TrackStyleProps>> & string;
-export {};
+export declare const tokens: {
+    track: {
+        backgroundColor: string;
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const labelContainer: import("@linaria/core").LinariaClassName;
+export declare const indicatorLabelContainer: import("@linaria/core").LinariaClassName;
+export declare const labelText: import("@linaria/core").LinariaClassName;
+export declare const slider: import("@linaria/core").LinariaClassName;
+export declare const knob: import("@linaria/core").LinariaClassName;
+export declare const knobDisabled: import("@linaria/core").LinariaClassName;
+export declare const knobInteractive: import("@linaria/core").LinariaClassName;
+export declare const sliderThumb: import("@linaria/core").LinariaClassName;
+export declare const sliderTrack: import("@linaria/core").LinariaClassName;

package/input-range-slider/input-range-slider.styles.js

@@ -1,66 +1,2 @@
-import o from"react-slider";import r,{css as e}from"styled-components";import{Typography as t}from"../typography/index.js";import{V3_Spacing as i,V3_Colour as s,V3_Shadow as d,V3_Border as a,V3_Radius as l}from"../v3_theme/index.js";const n=r.div`
-    isolation: isolate;
-`,c=r.div`
-    margin-top: ${i["spacing-8"]};
-    display: flex;
-    justify-content: space-between;
-    gap: ${i["spacing-8"]};
-`,m=r.div`
-    margin-bottom: ${i["spacing-8"]};
-`,p=r(t.BodyBL)`
-    overflow-wrap: anywhere;
-`,b=r(o)`
-    height: 0.875rem;
-`,$=r.div`
-    height: 2.5rem;
-    width: 2.5rem;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    ${o=>o.$disabled?e`
-                cursor: not-allowed;
-            `:o.$readOnly?void 0:e`
-                cursor: grab;
-                &:active {
-                    cursor: grabbing;
-                }
-            `}
-
-    &:after {
-        content: "";
-        display: block;
-        height: 0.875rem;
-        width: 0.875rem;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        background-color: ${s.bg};
-        box-shadow: ${d["sm-subtle"]};
-        border: ${a["width-010"]} ${a.solid}
-            ${o=>o.$disabled?s["border-selected-disabled"]:s["border-strong"]};
-        border-radius: ${l.full};
-    }
-`,f=r.div`
-    height: 0.875rem;
-    width: 0.875rem;
-    position: relative;
-    outline: none;
-
-    &:focus ${$}:after {
-        outline-offset: -1px;
-        outline: ${a["width-040"]} ${a.solid}
-            ${s["border-selected"]};
-    }
-`,g=r.div`
-    height: 0.25rem;
-    top: 50%;
-    transform: translateY(-50%);
-    border-radius: ${l.full};
-
-    background: ${o=>o.$color&&"function"==typeof o.$color?o.$color(o):o.$color||s["border-strong"](o)};
-`;export{m as IndicatorLabelContainer,$ as Knob,c as LabelContainer,p as LabelText,b as Slider,f as SliderThumb,g as SliderTrack,n as Wrapper};
+import"./input-range-slider.styles_aljl2v.css";const r={track:{backgroundColor:"--fds-internal-inputRangeSlider-track-backgroundColor"}},n="ww40rx",e="l12n1bv5",l="i1ewqtcj",o="ldf0qhx",s="s1g5kjqn",t="k19umubw",a="k1wprqev",d="k17p94od",i="s1wkp8d5",k="s3aojwv";export{l as indicatorLabelContainer,t as knob,a as knobDisabled,d as knobInteractive,e as labelContainer,o as labelText,s as slider,i as sliderThumb,k as sliderTrack,r as tokens,n as wrapper};
 //# sourceMappingURL=input-range-slider.styles.js.map

package/input-range-slider/input-range-slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-range-slider.styles.js","sources":["../../src/input-range-slider/input-range-slider.styles.ts"],"sourcesContent":["import ReactSlider from \"react-slider\";\nimport styled, { css } from \"styled-components\";\n\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport type { V3_ThemeStyleProps } from \"../v3_theme/types\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface TrackStyleProps {\n    $color: string | ((props: V3_ThemeStyleProps) => string) | undefined;\n}\n\ninterface ThumbStyleProps {\n    $disabled: boolean | undefined;\n    $readOnly: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n    isolation: isolate;\n`;\n\nexport const LabelContainer = styled.div`\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    display: flex;\n    justify-content: space-between;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const IndicatorLabelContainer = styled.div`\n    margin-bottom: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const LabelText = styled(Typography.BodyBL)`\n    overflow-wrap: anywhere;\n`;\n\nexport const Slider = styled(ReactSlider)`\n    height: 0.875rem;\n`;\n\nexport const Knob = styled.div<ThumbStyleProps>`\n    height: 2.5rem;\n    width: 2.5rem;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                cursor: not-allowed;\n            `;\n        }\n        if (!props.$readOnly) {\n            return css`\n                cursor: grab;\n                &:active {\n                    cursor: grabbing;\n                }\n            `;\n        }\n    }}\n\n    &:after {\n        content: \"\";\n        display: block;\n        height: 0.875rem;\n        width: 0.875rem;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n\n        background-color: ${V3_Colour[\"bg\"]};\n        box-shadow: ${V3_Shadow[\"sm-subtle\"]};\n        border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n            ${(props) =>\n                props.$disabled\n                    ? V3_Colour[\"border-selected-disabled\"]\n                    : V3_Colour[\"border-strong\"]};\n        border-radius: ${V3_Radius[\"full\"]};\n    }\n`;\n\nexport const SliderThumb = styled.div`\n    height: 0.875rem;\n    width: 0.875rem;\n    position: relative;\n    outline: none;\n\n    &:focus ${Knob}:after {\n        outline-offset: -1px;\n        outline: ${V3_Border[\"width-040\"]} ${V3_Border[\"solid\"]}\n            ${V3_Colour[\"border-selected\"]};\n    }\n`;\n\nexport const SliderTrack = styled.div<TrackStyleProps>`\n    height: 0.25rem;\n    top: 50%;\n    transform: translateY(-50%);\n    border-radius: ${V3_Radius[\"full\"]};\n\n    background: ${(props) => {\n        if (props.$color && typeof props.$color === \"function\") {\n            return props.$color(props);\n        } else {\n            return props.$color || V3_Colour[\"border-strong\"](props);\n        }\n    }};\n`;\n"],"names":["Wrapper","styled","div","LabelContainer","V3_Spacing","IndicatorLabelContainer","LabelText","Typography","BodyBL","Slider","ReactSlider","Knob","props","$disabled","css","$readOnly","V3_Colour","V3_Shadow","V3_Border","V3_Radius","SliderThumb","SliderTrack","$color"],"mappings":"yOA4BO,MAAMA,EAAUC,EAAOC,GAAG;;EAIpBC,EAAiBF,EAAOC,GAAG;kBACtBE,EAAW;;;WAGlBA,EAAW;EAGTC,EAA0BJ,EAAOC,GAAG;qBAC5BE,EAAW;EAGnBE,EAAYL,EAAOM,EAAWC,OAAO;;EAIrCC,EAASR,EAAOS,EAAY;;EAI5BC,EAAOV,EAAOC,GAAoB;;;;;;;;MAQxCU,GACKA,EAAMC,UACCC,CAAG;;cAITF,EAAMG,eAAX,EACWD,CAAG;;;;;;;;;;;;;;;;;4BAmBME,EAAc;sBACpBC,EAAU;kBACdC,EAAU,gBAAgBA,EAAiB;cAC9CN,GACCA,EAAMC,UACAG,EAAU,4BACVA,EAAU;yBACPG,EAAgB;;EAI5BC,EAAcnB,EAAOC,GAAG;;;;;;cAMvBS;;mBAEKO,EAAU,gBAAgBA,EAAiB;cAChDF,EAAU;;EAIXK,EAAcpB,EAAOC,GAAoB;;;;qBAIjCiB,EAAgB;;kBAElBP,GACPA,EAAMU,QAAkC,mBAAjBV,EAAMU,OACtBV,EAAMU,OAAOV,GAEbA,EAAMU,QAAUN,EAAU,iBAAiBJ;"}
+{"version":3,"file":"input-range-slider.styles.js","sources":["../../src/input-range-slider/input-range-slider.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Shadow, Spacing } from \"../theme\";\n\nexport const tokens = {\n    track: {\n        backgroundColor:\n            \"--fds-internal-inputRangeSlider-track-backgroundColor\",\n    },\n};\n\nexport const wrapper = css`\n    isolation: isolate;\n`;\n\nexport const labelContainer = css`\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    justify-content: space-between;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const indicatorLabelContainer = css`\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const labelText = css`\n    overflow-wrap: anywhere;\n`;\n\nexport const slider = css`\n    height: 0.875rem;\n    position: relative;\n`;\n\nexport const knob = css`\n    height: 2.5rem;\n    width: 2.5rem;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n\n    &::after {\n        content: \"\";\n        display: block;\n        height: 0.875rem;\n        width: 0.875rem;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n\n        background-color: ${Colour[\"bg\"]};\n        box-shadow: ${Shadow[\"sm-subtle\"]};\n        border: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-strong\"]};\n        border-radius: ${Radius[\"full\"]};\n    }\n`;\n\nexport const knobDisabled = css`\n    cursor: not-allowed;\n\n    &::after {\n        border-color: ${Colour[\"border-selected-disabled\"]};\n    }\n`;\n\nexport const knobInteractive = css`\n    cursor: grab;\n\n    &:active {\n        cursor: grabbing;\n    }\n`;\n\nexport const sliderThumb = css`\n    height: 0.875rem;\n    width: 0.875rem;\n    position: relative;\n    outline: none;\n\n    &:focus .${knob}::after, &[data-focused=\"true\"] .${knob}::after {\n        outline-offset: -1px;\n        outline: ${Border[\"width-040\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-selected\"]};\n    }\n`;\n\nexport const sliderTrack = css`\n    height: 0.25rem;\n    top: 50%;\n    transform: translateY(-50%);\n    border-radius: ${Radius[\"full\"]};\n\n    ${tokens.track.backgroundColor}: initial;\n    background: var(\n        ${tokens.track.backgroundColor},\n        ${Colour[\"border-strong\"]}\n    );\n`;\n"],"names":["tokens","track","backgroundColor","wrapper","labelContainer","indicatorLabelContainer","labelText","slider","knob","knobDisabled","knobInteractive","sliderThumb","sliderTrack"],"mappings":"iFAIO,MAAMA,EAAS,CAClBC,MAAO,CACHC,gBACI,0DAICC,EAAO,SAIPC,EAAc,WAOdC,EAAuB,WAIvBC,EAAS,UAITC,EAAM,WAKNC,EAAI,WA0BJC,EAAY,WAQZC,EAAe,WAQfC,EAAW,WAaXC,EAAW"}

package/input-range-slider/input-range-slider.styles_aljl2v.css

@@ -0,0 +1,13 @@
+.ww40rx{isolation:isolate;}
+.l12n1bv5{margin-top:var(--fds-spacing-8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:var(--fds-spacing-8);}
+.i1ewqtcj{margin-bottom:var(--fds-spacing-8);}
+.ldf0qhx{overflow-wrap:anywhere;}
+.s1g5kjqn{height:0.875rem;position:relative;}
+.k19umubw{height:2.5rem;width:2.5rem;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}.k19umubw::after{content:"";display:block;height:0.875rem;width:0.875rem;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-sm-subtle);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-strong);border-radius:var(--fds-radius-full);}
+.k1wprqev{cursor:not-allowed;}.k1wprqev::after{border-color:var(--fds-colour-border-selected-disabled);}
+.k17p94od{cursor:-webkit-grab;cursor:grab;}.k17p94od:active{cursor:-webkit-grabbing;cursor:grabbing;}
+.s1wkp8d5{height:0.875rem;width:0.875rem;position:relative;outline:none;}.s1wkp8d5:focus .k19umubw::after,.s1wkp8d5[data-focused="true"] .k19umubw::after{outline-offset:-1px;outline:var(--fds-border-width-040) var(--fds-border-style-solid) var(--fds-colour-border-selected);}
+.s3aojwv{height:0.25rem;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);border-radius:var(--fds-radius-full);--fds-internal-inputRangeSlider-track-backgroundColor:initial;background:var(
+        --fds-internal-inputRangeSlider-track-backgroundColor,
+        var(--fds-colour-border-strong)
+    );}

package/input-range-slider/slider-components.d.ts

@@ -0,0 +1,12 @@
+import type React from "react";
+interface ThumbProps extends React.HTMLAttributes<HTMLDivElement> {
+    focused: boolean | undefined;
+    disabled: boolean | undefined;
+    readOnly: boolean | undefined;
+}
+export declare const Thumb: (props: ThumbProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+interface TrackProps extends React.HTMLAttributes<HTMLDivElement> {
+    color?: string;
+}
+export declare const Track: (props: TrackProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export {};

package/input-range-slider/slider-components.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import t from"clsx";import{forwardRef as s,useRef as o}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as i}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as m}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{knob as a,knobDisabled as l,knobInteractive as n,sliderThumb as c,tokens as p,sliderTrack as d}from"./input-range-slider.styles.js";const u=s(((s,p)=>{var{focused:d,disabled:u,readOnly:j,className:f,style:h}=s,y=e(s,["focused","disabled","readOnly","className","style"]);const v=o(null);return i(v,h),r("div",Object.assign({ref:m(v,p)},y,{className:t(c,f),"data-focused":d?"true":void 0,children:r("div",{className:t(a,u&&l,!u&&!j&&n)})}))})),j=s(((s,a)=>{var{color:l,className:n,style:c}=s,u=e(s,["color","className","style"]);const j=o(null);return i(j,{[p.track.backgroundColor]:l}),i(j,c),r("div",Object.assign({},u,{className:t(d,n),ref:m(j,a)}))}));export{u as Thumb,j as Track};
+//# sourceMappingURL=slider-components.js.map

package/input-range-slider/slider-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-components.js","sources":["../../src/input-range-slider/slider-components.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\n\ninterface ThumbProps extends React.HTMLAttributes<HTMLDivElement> {\n    focused: boolean | undefined;\n    disabled: boolean | undefined;\n    readOnly: boolean | undefined;\n}\n\nconst InnerThumb = (\n    {\n        focused,\n        disabled,\n        readOnly,\n        className,\n        style,\n        ...otherProps\n    }: ThumbProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const thumbRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(thumbRef, style);\n\n    return (\n        <div\n            ref={mergeRefs(thumbRef, ref)}\n            {...otherProps}\n            className={clsx(styles.sliderThumb, className)}\n            data-focused={focused ? \"true\" : undefined}\n        >\n            <div\n                className={clsx(\n                    styles.knob,\n                    disabled && styles.knobDisabled,\n                    !disabled && !readOnly && styles.knobInteractive\n                )}\n            />\n        </div>\n    );\n};\n\nexport const Thumb = forwardRef(InnerThumb);\n\ninterface TrackProps extends React.HTMLAttributes<HTMLDivElement> {\n    color?: string;\n}\n\nconst InnerTrack = (\n    { color, className, style, ...otherProps }: TrackProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const trackRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(trackRef, {\n        [styles.tokens.track.backgroundColor]: color,\n    });\n\n    useApplyStyle(trackRef, style);\n\n    return (\n        <div\n            {...otherProps}\n            className={clsx(styles.sliderTrack, className)}\n            ref={mergeRefs(trackRef, ref)}\n        />\n    );\n};\n\nexport const Track = forwardRef(InnerTrack);\n"],"names":["Thumb","forwardRef","_a","ref","focused","disabled","readOnly","className","style","otherProps","__rest","thumbRef","useRef","useApplyStyle","_jsx","Object","assign","mergeRefs","clsx","styles.sliderThumb","undefined","children","styles.knob","styles.knobDisabled","styles.knobInteractive","Track","color","trackRef","styles.tokens","track","backgroundColor","styles.sliderTrack"],"mappings":"w1BAcA,MAiCaA,EAAQC,GAjCF,CACfC,EAQAC,KARA,IAAAC,QACIA,EAAOC,SACPA,EAAQC,SACRA,EAAQC,UACRA,EAASC,MACTA,GAAKN,EACFO,EAAUC,EAAAR,EANjB,uDAUA,MAAMS,EAAWC,EAAuB,MAIxC,OAFAC,EAAcF,EAAUH,GAGpBM,EAAA,MAAAC,OAAAC,OAAA,CACIb,IAAKc,EAAUN,EAAUR,IACrBM,EAAU,CACdF,UAAWW,EAAKC,EAAoBZ,GAAU,eAChCH,EAAU,YAASgB,EAASC,SAE1CP,EAAA,MAAA,CACIP,UAAWW,EACPI,EACAjB,GAAYkB,GACXlB,IAAaC,GAAYkB,OAGhC,IA+BDC,EAAQxB,GArBF,CACfC,EACAC,SADAuB,MAAEA,EAAKnB,UAAEA,EAASC,MAAEA,KAAUC,EAAUC,EAAAR,EAAxC,CAAA,QAAA,YAAA,UAGA,MAAMyB,EAAWf,EAAuB,MAQxC,OANAC,EAAcc,EAAU,CACpB,CAACC,EAAcC,MAAMC,iBAAkBJ,IAG3Cb,EAAcc,EAAUnB,GAGpBM,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQP,EAAU,CACdF,UAAWW,EAAKa,EAAoBxB,GACpCJ,IAAKc,EAAUU,EAAUxB,KAC3B"}

package/input-range-slider/types.d.ts

@@ -1,5 +1,3 @@
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
-type CustomColor = string | ((props: V3_ThemeStyleProps) => string);
 export interface BaseSliderProps {
     className?: string | undefined;
     id?: string | undefined;
@@ -11,7 +9,7 @@ export interface BaseSliderProps {
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
     /** Customise the color of each track segment. Expected length is (number of values + 1) */
-    colors?: (CustomColor | undefined)[] | undefined;
+    colors?: (string | undefined)[] | undefined;
     showSliderLabels?: boolean | undefined;
     sliderLabelPrefix?: string | undefined;
     sliderLabelSuffix?: string | undefined;
@@ -27,9 +25,12 @@ export interface InputRangeSliderProps extends BaseSliderProps {
     /** The minimum difference between values */
     minRange?: number | undefined;
     ariaLabels?: string[] | undefined;
+    ariaDescriptions?: string[] | undefined;
+    "aria-invalid"?: boolean | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-describedby"?: string | undefined;
     /** Called on every selection change */
     onChange?: ((value: number[]) => void) | undefined;
     /** Called when a thumb is released after selection is complete */
     onChangeEnd?: ((value: number[]) => void) | undefined;
 }
-export {};

package/input-select/input-select.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as r,useRef as t,useEffect as o}from"react";import"styled-components";import{StringHelper as n}from"../util/string-helper.js";import"../v3_theme/index.js";import"../shared/dropdown-list-v2/dropdown-label.styles.js";import{DropdownList as i}from"../shared/dropdown-list-v2/dropdown-list.js";import{DropdownListState as s}from"../shared/dropdown-list-v2/dropdown-list-state.js";import{ExpandableElement as l}from"../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 a}from"../util/simple-id-generator.js";import{LabelContainer as d,PlaceholderLabel as p,ValueLabel as c}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as m}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{InputBox as u}from"../shared/input-wrapper/input-wrapper.js";const h=({selectedOption:h,placeholder:w="Select",options:b,disabled:f,error:j,className:v,"data-testid":y,id:x,"aria-labelledby":g,"aria-describedby":T,"aria-invalid":S,enableSearch:O=!1,searchFunction:I,searchPlaceholder:R,valueExtractor:$,valueToStringFunction:C,listExtractor:D,displayValueExtractor:E,onSelectOption:L,onShowOptions:N,onHideOptions:_,onRetry:A,optionsLoadState:B="success",optionTruncationType:F="end",renderCustomSelectedOption:k,renderListItem:H,hideNoResultsDisplay:P,noResultsDescription:W,customLabels:Z,renderCustomCallToAction:q,onBlur:G,variant:V="default",readOnly:z,alignment:J,dropdownZIndex:K,dropdownRootNode:M,dropdownWidth:Q})=>{const[U,X]=r(h),[Y,ee]=r(!1),[re,te]=r(!1),[oe]=r((()=>a.generate())),ne=t(null),ie=t(null),se=t(null);o((()=>{X(h)}),[h]);const le=(e,r)=>{var t;null===(t=ie.current)||void 0===t||t.focus(),X(e),ee(!1),ue(!1),null==L||L(e,r)},ae=()=>{Y&&(ee(!1),ue(!1))},de=()=>{re||Y||te(!0)},pe=e=>{re&&!Y&&ne.current&&!ne.current.contains(e.relatedTarget)&&(te(!1),null==G||G())},ce=()=>{var e;if(!U)return"";if(E)return E(U);if($){const r=$(U);return C?C(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return U.toString()},me=e=>{if("middle"===F){let r=0;return se&&se.current&&(r=se.current.getBoundingClientRect().width),n.truncateOneLine(e,r,120,8)}return e},ue=e=>{e?null==N||N():null==_||_()};return e(s,{children:e(m,{enabled:!z&&!f,isOpen:Y,renderElement:()=>e(u,{className:v,"data-testid":y,id:x,ref:ne,tabIndex:-1,onFocus:de,onBlur:pe,$focused:re,$disabled:f,$readOnly:z,$error:j,children:e(l,{ref:ie,disabled:f,expanded:Y,listboxId:oe,popupRole:"listbox",readOnly:z,variant:V,"aria-labelledby":g,"aria-describedby":T,"aria-invalid":S,children:e(d,{ref:se,$disabled:f,children:U?k?k(U):e(c,{$truncateType:F,$variant:V,children:me(ce())}):e(p,{$truncateType:F,$variant:V,children:w})})})}),renderDropdown:()=>e(i,{listboxId:oe,listItems:b,onSelectItem:le,onDismiss:ae,valueExtractor:$,listExtractor:D,enableSearch:O,searchPlaceholder:R,searchFunction:I,selectedItems:U?[U]:[],onRetry:A,itemsLoadState:B,itemTruncationType:F,renderListItem:H,hideNoResultsDisplay:P,noResultsDescription:W,customLabels:Z,renderCustomCallToAction:q,variant:V,width:Q,matchElementWidth:!0}),onOpen:()=>{ee(!0),ue(!0),te(!0)},onClose:e=>{ee(!1),ue(!1),"click"!==e&&(te(!1),null==G||G())},onDismiss:()=>{var e;null===(e=ie.current)||void 0===e||e.focus(),ee(!1),ue(!1)},clickToToggle:!0,offset:8,alignment:J,fitAvailableHeight:!0,customZIndex:K,rootNode:M})})};export{h as InputSelect};
+import{jsx as e}from"react/jsx-runtime";import{useState as r,useRef as t,useEffect as o}from"react";import"clsx";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 i}from"../util/simple-id-generator.js";import{StringHelper as s}from"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as n}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as l}from"../shared/dropdown-list/dropdown-list-state.js";import{ExpandableElement as a}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"../_virtual/_tslib.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputBox as p}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1kt4zhf.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{LabelContainer as c,PlaceholderLabel as m,ValueLabel as u}from"../shared/dropdown-wrapper/dropdown-wrapper.js";const h=({selectedOption:h,placeholder:f="Select",options:w,disabled:j,error:x,className:b,"data-testid":g,id:y,"aria-labelledby":v,"aria-describedby":_,"aria-invalid":T,enableSearch:I=!1,searchFunction:S,searchPlaceholder:A,valueExtractor:k,valueToStringFunction:C,listExtractor:O,displayValueExtractor:R,onSelectOption:q,onShowOptions:D,onHideOptions:E,onRetry:L,optionsLoadState:H="success",optionTruncationType:N="end",renderCustomSelectedOption:P,renderListItem:B,hideNoResultsDisplay:G,noResultsDescription:F,customLabels:M,renderCustomCallToAction:W,onBlur:Z,variant:z="default",readOnly:V,alignment:J,dropdownZIndex:K,dropdownRootNode:Q,dropdownWidth:U})=>{const[X,Y]=r(h),[$,ee]=r(!1),[re,te]=r(!1),oe=i(),ie=t(null),se=t(null),ne=t(null);o((()=>{Y(h)}),[h]);const le=(e,r)=>{var t;null===(t=se.current)||void 0===t||t.focus(),Y(e),ee(!1),ue(!1),null==q||q(e,r)},ae=()=>{$&&(ee(!1),ue(!1))},de=()=>{re||$||te(!0)},pe=e=>{re&&!$&&ie.current&&!ie.current.contains(e.relatedTarget)&&(te(!1),null==Z||Z())},ce=()=>{var e;if(!X)return"";if(R)return R(X);if(k){const r=k(X);return C?C(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return X.toString()},me=e=>{if("middle"===N){let r=0;return ne&&ne.current&&(r=ne.current.getBoundingClientRect().width),s.truncateOneLine(e,r,120,8)}return e},ue=e=>{e?null==D||D():null==E||E()};return e(l,{children:e(d,{enabled:!V&&!j,isOpen:$,renderElement:()=>e(p,{className:b,"data-testid":g,id:y,ref:ie,tabIndex:-1,onFocus:de,onBlur:pe,focused:re,disabled:j,readOnly:V,error:x,children:e(a,{ref:se,disabled:j,expanded:$,listboxId:oe,popupRole:"listbox",readOnly:V,variant:z,"aria-labelledby":v,"aria-describedby":_,"aria-invalid":T,children:e(c,{ref:ne,disabled:j,children:X?P?P(X):e(u,{variant:z,truncateType:N,children:me(ce())}):e(m,{variant:z,truncateType:N,children:f})})})}),renderDropdown:()=>e(n,{listboxId:oe,listItems:w,onSelectItem:le,onDismiss:ae,valueExtractor:k,listExtractor:O,enableSearch:I,searchPlaceholder:A,searchFunction:S,selectedItems:X?[X]:[],onRetry:L,itemsLoadState:H,itemTruncationType:N,renderListItem:B,hideNoResultsDisplay:G,noResultsDescription:F,customLabels:M,renderCustomCallToAction:W,variant:z,width:U,matchElementWidth:!0}),onOpen:()=>{ee(!0),ue(!0),te(!0)},onClose:e=>{ee(!1),ue(!1),"click"!==e&&(te(!1),null==Z||Z())},onDismiss:()=>{var e;null===(e=se.current)||void 0===e||e.focus(),ee(!1),ue(!1)},clickToToggle:!0,offset:8,alignment:J,fitAvailableHeight:!0,customZIndex:K,rootNode:Q})})};export{h as InputSelect};
 //# sourceMappingURL=input-select.js.map

package/input-select/input-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-select.js","sources":["../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} 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 { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\nexport const InputSelect = <T, V>({\n    selectedOption,\n    placeholder = \"Select\",\n    options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    renderCustomSelectedOption,\n    renderListItem,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    renderCustomCallToAction,\n    onBlur,\n    variant = \"default\",\n    readOnly,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE\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\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\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 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    // HELPER FUNCTION\n    // =============================================================================\n    const getDisplayValue = (): string => {\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return (\n                <PlaceholderLabel\n                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        } else {\n            return (\n                <ValueLabel\n                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={internalId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                selectedItems={selected ? [selected] : []}\n                onRetry={onRetry}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                renderListItem={renderListItem}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                renderCustomCallToAction={renderCustomCallToAction}\n                variant={variant}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <DropdownListState>\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={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["InputSelect","selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","$truncateType","$variant","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-select.js","sources":["../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\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/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\nexport const InputSelect = <T, V>({\n    selectedOption,\n    placeholder = \"Select\",\n    options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    renderCustomSelectedOption,\n    renderListItem,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    renderCustomCallToAction,\n    onBlur,\n    variant = \"default\",\n    readOnly,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE\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\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\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 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    // HELPER FUNCTION\n    // =============================================================================\n    const getDisplayValue = (): string => {\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return (\n                <PlaceholderLabel\n                    variant={variant}\n                    truncateType={optionTruncationType}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        } else {\n            return (\n                <ValueLabel\n                    variant={variant}\n                    truncateType={optionTruncationType}\n                >\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={internalId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                selectedItems={selected ? [selected] : []}\n                onRetry={onRetry}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                renderListItem={renderListItem}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                renderCustomCallToAction={renderCustomCallToAction}\n                variant={variant}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <DropdownListState>\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={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["InputSelect","selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/input-select/types.d.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from "react";
-import type { DropdownCustomLabelProps, DropdownDisplayProps, DropdownSearchProps, DropdownVariantType, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list-v2/types";
+import type { DropdownCustomLabelProps, DropdownDisplayProps, DropdownSearchProps, DropdownVariantType, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list/types";
 import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
 export interface InputSelectOptionsProps<T> {
     options: T[];
@@ -46,7 +46,7 @@ export interface InputSelectProps<T, V> extends React.HTMLAttributes<HTMLElement
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Custom width for the dropdown in pixels. When specified, the dropdown will use this
+     * Custom width for the dropdown. When specified, the dropdown will use this
      * width instead of matching the input element width.
      */
     dropdownWidth?: string | undefined;

package/input-textarea/textarea-counter.js

@@ -1,2 +1,2 @@
-import{jsx as t,Fragment as r}from"react/jsx-runtime";import e,{useState as n,useEffect as o}from"react";import{CounterLabel as a}from"./textara-counter.style.js";const c=({value:c,maxLength:i,renderCustomCounter:l})=>{const[s,m]=n("");o((()=>{m(u(`${c||""}`))}),[c,i]);const u=t=>{if(l)return l(i,t.toString().length);{const r=i-t.toString().length;return 1===r?`${r} character left`:`${r.toLocaleString()} characters left`}};return t(r,{children:e.isValidElement(s)?s:t(a,{"data-testid":"counter-label",children:s})})};export{c as TextareaCounter};
+import{jsx as t,Fragment as e}from"react/jsx-runtime";import r,{useState as n,useEffect as o}from"react";import{counterLabel as a}from"./textarea-counter.styles.js";const c=({value:c,maxLength:l,renderCustomCounter:s})=>{const[i,m]=n("");o((()=>{m(u(`${c||""}`))}),[c,l]);const u=t=>{if(s)return s(l,t.toString().length);{const e=l-t.toString().length;return 1===e?`${e} character left`:`${e.toLocaleString()} characters left`}};return t(e,{children:r.isValidElement(i)?i:t("p",{className:a,"data-testid":"counter-label",children:i})})};export{c as TextareaCounter};
 //# sourceMappingURL=textarea-counter.js.map

package/input-textarea/textarea-counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-counter.js","sources":["../../src/input-textarea/textarea-counter.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { CounterLabel } from \"./textara-counter.style\";\n\ninterface Props {\n    value: string | number | readonly string[] | undefined;\n    maxLength: number;\n    renderCustomCounter?: (\n        maxLength: number,\n        currentValueLength: number\n    ) => JSX.Element;\n}\n\nexport const TextareaCounter = ({\n    value,\n    maxLength,\n    renderCustomCounter,\n}: Props): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [counterLabel, setCounterLabel] = useState<\n        string | number | readonly string[] | JSX.Element\n    >(\"\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setCounterLabel(getCounterLabel(`${value || \"\"}`));\n    }, [value, maxLength]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCounterLabel = (value: string | number | readonly string[]) => {\n        if (renderCustomCounter) {\n            return renderCustomCounter(maxLength, value.toString().length);\n        } else {\n            const remainingLength = maxLength - value.toString().length;\n            if (remainingLength === 1) {\n                return `${remainingLength} character left`;\n            } else {\n                return `${remainingLength.toLocaleString()} characters left`;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <>\n            {React.isValidElement(counterLabel) ? (\n                counterLabel\n            ) : (\n                <CounterLabel data-testid=\"counter-label\">\n                    {counterLabel}\n                </CounterLabel>\n            )}\n        </>\n    );\n};\n"],"names":["TextareaCounter","value","maxLength","renderCustomCounter","counterLabel","setCounterLabel","useState","useEffect","getCounterLabel","toString","length","remainingLength","toLocaleString","_jsx","_Fragment","children","React","isValidElement","CounterLabel"],"mappings":"mKAaO,MAAMA,EAAkB,EAC3BC,QACAC,YACAC,0BAKA,MAAOC,EAAcC,GAAmBC,EAEtC,IAKFC,GAAU,KACNF,EAAgBG,EAAgB,GAAGP,GAAS,MAAM,GACnD,CAACA,EAAOC,IAKX,MAAMM,EAAmBP,IACrB,GAAIE,EACA,OAAOA,EAAoBD,EAAWD,EAAMQ,WAAWC,QACpD,CACH,MAAMC,EAAkBT,EAAYD,EAAMQ,WAAWC,OACrD,OAAwB,IAApBC,EACO,GAAGA,mBAEH,GAAGA,EAAgBC,kCAElC,GAMJ,OACIC,EAAAC,EAAA,CAAAC,SACKC,EAAMC,eAAeb,GAAa,EAG/BS,EAACK,EAAY,CAAA,cAAa,gBAAeH,SACpCX,KAGV"}
+{"version":3,"file":"textarea-counter.js","sources":["../../src/input-textarea/textarea-counter.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport * as styles from \"./textarea-counter.styles\";\n\ninterface Props {\n    value: string | number | readonly string[] | undefined;\n    maxLength: number;\n    renderCustomCounter?: (\n        maxLength: number,\n        currentValueLength: number\n    ) => JSX.Element;\n}\n\nexport const TextareaCounter = ({\n    value,\n    maxLength,\n    renderCustomCounter,\n}: Props): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [counterLabel, setCounterLabel] = useState<\n        string | number | readonly string[] | JSX.Element\n    >(\"\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setCounterLabel(getCounterLabel(`${value || \"\"}`));\n    }, [value, maxLength]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCounterLabel = (value: string | number | readonly string[]) => {\n        if (renderCustomCounter) {\n            return renderCustomCounter(maxLength, value.toString().length);\n        } else {\n            const remainingLength = maxLength - value.toString().length;\n            if (remainingLength === 1) {\n                return `${remainingLength} character left`;\n            } else {\n                return `${remainingLength.toLocaleString()} characters left`;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <>\n            {React.isValidElement(counterLabel) ? (\n                counterLabel\n            ) : (\n                <p className={styles.counterLabel} data-testid=\"counter-label\">\n                    {counterLabel}\n                </p>\n            )}\n        </>\n    );\n};\n"],"names":["TextareaCounter","value","maxLength","renderCustomCounter","counterLabel","setCounterLabel","useState","useEffect","getCounterLabel","toString","length","remainingLength","toLocaleString","_jsx","_Fragment","children","React","isValidElement","className","styles.counterLabel"],"mappings":"qKAaO,MAAMA,EAAkB,EAC3BC,QACAC,YACAC,0BAKA,MAAOC,EAAcC,GAAmBC,EAEtC,IAKFC,GAAU,KACNF,EAAgBG,EAAgB,GAAGP,GAAS,MAAM,GACnD,CAACA,EAAOC,IAKX,MAAMM,EAAmBP,IACrB,GAAIE,EACA,OAAOA,EAAoBD,EAAWD,EAAMQ,WAAWC,QACpD,CACH,MAAMC,EAAkBT,EAAYD,EAAMQ,WAAWC,OACrD,OAAwB,IAApBC,EACO,GAAGA,mBAEH,GAAGA,EAAgBC,kCAElC,GAMJ,OACIC,EAAAC,EAAA,CAAAC,SACKC,EAAMC,eAAeb,GAAa,EAG/BS,EAAA,IAAA,CAAGK,UAAWC,EAAmB,cAAc,gBAAeJ,SACzDX,KAGV"}

package/input-textarea/textarea-counter.styles.d.ts

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

package/input-textarea/textarea-counter.styles.js

@@ -0,0 +1,2 @@
+import"./textarea-counter.styles_adg5h1.css";const t="c1d4l1yp";export{t as counterLabel};
+//# sourceMappingURL=textarea-counter.styles.js.map

package/input-textarea/textarea-counter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-counter.styles.js","sources":["../../src/input-textarea/textarea-counter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\nexport const counterLabel = css`\n    text-align: right;\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["counterLabel"],"mappings":"2EAIO,MAAMA,EAAY"}

package/input-textarea/textarea-counter.styles_adg5h1.css

@@ -0,0 +1 @@
+.c1d4l1yp{text-align:right;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-subtler);}

package/input-textarea/textarea.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import a,{useState as n,useEffect as o}from"react";import{Element as s,Wrapper as l}from"./textarea.style.js";import{TextareaCounter as i}from"./textarea-counter.js";const u=a.forwardRef(((r,a)=>{var{value:l,disabled:i,error:u,rows:g=5,prefix:f,transformValue:m,onChange:c,maxLength:h}=r,v=e(r,["value","disabled","error","rows","prefix","transformValue","onChange","maxLength"]);const[d,p]=n(l);o((()=>{p(l)}),[l]);return t(s,Object.assign({ref:a,disabled:i,value:f?f+(null!=d?d:""):d,onChange:e=>{let t=e.target.value;if(f){t.startsWith(f)||(t=f+t.trimStart()),t.length<f.length&&(t=f);if((e.target.selectionStart||0)<f.length)return void e.preventDefault();const r=t.slice(f.length),a=m?m(r):r;if(p(a),e.target.value=f+a,c){const t=Object.assign(Object.assign({},e),{target:Object.assign(Object.assign({},e.target),{value:a})});c(t)}}else{const r=m?m(null!=t?t:""):t;p(r),e.target.value=r,c&&c(e)}},onKeyDown:e=>{if(!f)return;const{selectionStart:t}=e.currentTarget;"Backspace"===e.key&&t<=f.length&&e.preventDefault(),"ArrowLeft"===e.key&&t<=f.length&&e.preventDefault(),"Home"===e.key&&(e.preventDefault(),requestAnimationFrame((()=>{e.currentTarget.setSelectionRange(f.length,f.length)})))},$error:u,rows:g,maxLength:f&&h?f.length+h:h},v))})),g=a.forwardRef(((a,s)=>{var{value:g,disabled:f,rows:m=5,onChange:c,transformValue:h,prefix:v,maxLength:d,renderCustomCounter:p}=a,x=e(a,["value","disabled","rows","onChange","transformValue","prefix","maxLength","renderCustomCounter"]);const[b,C]=n(g);o((()=>{C(g)}),[g]);return r(l,{children:[t(u,Object.assign({ref:s,disabled:f,value:b,rows:m||5,onChange:e=>{const t=e.target.value;C(t),c&&c(e)},prefix:v,transformValue:h,maxLength:d},x)),d&&t(i,{value:b,maxLength:d,renderCustomCounter:p})]})}));export{g as Textarea,u as TextareaBase};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import a from"clsx";import n,{useState as s,useEffect as l}from"react";import{element as o,elementReadOnly as i,elementDisabled as u,elementError as g,wrapper as m}from"./textarea.styles.js";import{TextareaCounter as c}from"./textarea-counter.js";const f=n.forwardRef(((r,n)=>{var{className:m,disabled:c,error:f,maxLength:h,onChange:d,prefix:v,readOnly:x,rows:p=5,transformValue:b,value:C}=r,j=e(r,["className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value"]);const[w,O]=s(C);l((()=>{O(C)}),[C]);return t("textarea",Object.assign({ref:n,disabled:c,value:v?v+(null!=w?w:""):w,onChange:e=>{let t=e.target.value;if(v){t.startsWith(v)||(t=v+t.trimStart()),t.length<v.length&&(t=v);if((e.target.selectionStart||0)<v.length)return void e.preventDefault();const r=t.slice(v.length),a=b?b(r):r;if(O(a),e.target.value=v+a,d){const t=Object.assign(Object.assign({},e),{target:Object.assign(Object.assign({},e.target),{value:a})});d(t)}}else{const r=b?b(null!=t?t:""):t;O(r),e.target.value=r,d&&d(e)}},onKeyDown:e=>{if(!v)return;const{selectionStart:t}=e.currentTarget;"Backspace"===e.key&&t<=v.length&&e.preventDefault(),"ArrowLeft"===e.key&&t<=v.length&&e.preventDefault(),"Home"===e.key&&(e.preventDefault(),requestAnimationFrame((()=>{e.currentTarget.setSelectionRange(v.length,v.length)})))},readOnly:x,className:a(o,x&&i||c&&u||f&&g,m),rows:p,maxLength:v&&h?v.length+h:h},j))})),h=n.forwardRef(((a,n)=>{var{value:o,disabled:i,rows:u=5,onChange:g,transformValue:h,prefix:d,maxLength:v,renderCustomCounter:x}=a,p=e(a,["value","disabled","rows","onChange","transformValue","prefix","maxLength","renderCustomCounter"]);const[b,C]=s(o);l((()=>{C(o)}),[o]);return r("div",{className:m,children:[t(f,Object.assign({ref:n,disabled:i,value:b,rows:u||5,onChange:e=>{const t=e.target.value;C(t),g&&g(e)},prefix:d,transformValue:h,maxLength:v},p)),v&&t(c,{value:b,maxLength:v,renderCustomCounter:x})]})}));export{h as Textarea,f as TextareaBase};
 //# sourceMappingURL=textarea.js.map

package/input-textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../../src/input-textarea/textarea.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { Element, Wrapper } from \"./textarea.style\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport type { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n    {\n        value,\n        disabled,\n        error,\n        rows = 5,\n        prefix,\n        transformValue,\n        onChange,\n        maxLength,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    const [stateValue, setStateValue] = useState(value);\n\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        let newValue = event.target.value;\n        if (prefix) {\n            // Ensure prefix is always present\n            if (!newValue.startsWith(prefix)) {\n                newValue = prefix + newValue.trimStart();\n            }\n\n            // Prevent deleting the prefix\n            if (newValue.length < prefix.length) {\n                newValue = prefix;\n            }\n\n            const cursorPosition = event.target.selectionStart || 0;\n\n            // Ensure backspace does not delete the prefix\n            if (cursorPosition < prefix.length) {\n                event.preventDefault();\n                return;\n            }\n\n            // Extract user input\n            const userInput = newValue.slice(prefix.length);\n\n            // Transform the input if needed\n            const transformedValue = transformValue\n                ? transformValue(userInput)\n                : userInput;\n\n            // Update state and input field\n            setStateValue(transformedValue);\n            event.target.value = prefix + transformedValue;\n\n            // Pass only the user input (without prefix) to `onChange`\n            if (onChange) {\n                const syntheticEvent = {\n                    ...event,\n                    target: { ...event.target, value: transformedValue },\n                };\n                onChange(\n                    syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n                );\n            }\n        } else {\n            const transformedValue = transformValue\n                ? transformValue(newValue ?? \"\")\n                : newValue;\n\n            setStateValue(transformedValue);\n            event.target.value = transformedValue;\n            if (onChange) onChange(event);\n        }\n    };\n\n    const getDisplayValue = () => {\n        return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!prefix) return;\n\n        const { selectionStart } = event.currentTarget;\n\n        // Prevent backspace in prefix\n        if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent left arrow from moving into prefix\n        if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent \"Home\" key from moving cursor to beginning\n        if (event.key === \"Home\") {\n            event.preventDefault();\n            requestAnimationFrame(() => {\n                event.currentTarget.setSelectionRange(\n                    prefix.length,\n                    prefix.length\n                );\n            });\n        }\n    };\n\n    return (\n        <Element\n            ref={ref}\n            disabled={disabled}\n            value={getDisplayValue()}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            $error={error}\n            rows={rows}\n            maxLength={\n                prefix && maxLength ? prefix.length + maxLength : maxLength\n            }\n            {...otherProps}\n        />\n    );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n    {\n        value,\n        disabled,\n        rows = 5,\n        onChange,\n        transformValue,\n        prefix,\n        maxLength,\n        renderCustomCounter,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    // -------------------------------------------------------------------------\n    // CONST, STATE, REF\n    // -------------------------------------------------------------------------\n    const [stateValue, setStateValue] = useState<\n        string | number | readonly string[] | undefined\n    >(value);\n\n    // -------------------------------------------------------------------------\n    // EFFECTS\n    // -------------------------------------------------------------------------\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    // -------------------------------------------------------------------------\n    // EVENT HANDLER\n    // -------------------------------------------------------------------------\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = event.target.value;\n        setStateValue(newValue);\n        if (onChange) onChange(event);\n    };\n\n    // -------------------------------------------------------------------------\n    // RENDER FUNCTIONS\n    // -------------------------------------------------------------------------\n    return (\n        <Wrapper>\n            <TextareaBase\n                ref={ref}\n                disabled={disabled}\n                value={stateValue}\n                rows={rows || 5}\n                onChange={handleChange}\n                prefix={prefix}\n                transformValue={transformValue}\n                maxLength={maxLength}\n                {...otherProps}\n            />\n            {maxLength && (\n                <TextareaCounter\n                    value={stateValue}\n                    maxLength={maxLength}\n                    renderCustomCounter={renderCustomCounter}\n                />\n            )}\n        </Wrapper>\n    );\n};\n\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","value","disabled","error","rows","prefix","transformValue","onChange","maxLength","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","Element","Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","$error","Textarea","renderCustomCounter","_jsxs","Wrapper","children","TextareaCounter"],"mappings":"uQASA,MA0HaA,EAAeC,EAAMC,YA1HJ,CAC1BC,EAWAC,SAXAC,MACIA,EAAKC,SACLA,EAAQC,MACRA,EAAKC,KACLA,EAAO,EAACC,OACRA,EAAMC,eACNA,EAAcC,SACdA,EAAQC,UACRA,KACGC,EAAUC,EAAAX,EATjB,CAAA,QAAA,WAAA,QAAA,OAAA,SAAA,iBAAA,WAAA,cAaA,MAAOY,EAAYC,GAAiBC,EAASZ,GAE7Ca,GAAU,KACNF,EAAcX,EAAM,GACrB,CAACA,IAuFJ,OACIc,EAACC,EAAOC,OAAAC,OAAA,CACJlB,IAAKA,EACLE,SAAUA,EACVD,MAlCGI,EAASA,GAAUM,QAAAA,EAAc,IAAMA,EAmC1CJ,SA1FcY,IAClB,IAAIC,EAAWD,EAAME,OAAOpB,MAC5B,GAAII,EAAQ,CAEHe,EAASE,WAAWjB,KACrBe,EAAWf,EAASe,EAASG,aAI7BH,EAASI,OAASnB,EAAOmB,SACzBJ,EAAWf,GAMf,IAHuBc,EAAME,OAAOI,gBAAkB,GAGjCpB,EAAOmB,OAExB,YADAL,EAAMO,iBAKV,MAAMC,EAAYP,EAASQ,MAAMvB,EAAOmB,QAGlCK,EAAmBvB,EACnBA,EAAeqB,GACfA,EAON,GAJAf,EAAciB,GACdV,EAAME,OAAOpB,MAAQI,EAASwB,EAG1BtB,EAAU,CACV,MAAMuB,EAAcb,OAAAC,OAAAD,OAAAC,OAAA,GACbC,GAAK,CACRE,OAAMJ,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAOC,EAAME,QAAM,CAAEpB,MAAO4B,MAEtCtB,EACIuB,EAER,CACJ,KAAO,CACH,MAAMD,EAAmBvB,EACnBA,EAAec,QAAAA,EAAY,IAC3BA,EAENR,EAAciB,GACdV,EAAME,OAAOpB,MAAQ4B,EACjBtB,GAAUA,EAASY,EAC3B,GAwCIY,UAjCeZ,IACnB,IAAKd,EAAQ,OAEb,MAAMoB,eAAEA,GAAmBN,EAAMa,cAGf,cAAdb,EAAMc,KAAuBR,GAAkBpB,EAAOmB,QACtDL,EAAMO,iBAIQ,cAAdP,EAAMc,KAAuBR,GAAkBpB,EAAOmB,QACtDL,EAAMO,iBAIQ,SAAdP,EAAMc,MACNd,EAAMO,iBACNQ,uBAAsB,KAClBf,EAAMa,cAAcG,kBAChB9B,EAAOmB,OACPnB,EAAOmB,OACV,IAET,EAS4BY,OAChBjC,EACRC,KAAMA,EACNI,UACIH,GAAUG,EAAYH,EAAOmB,OAAShB,EAAYA,GAElDC,GACN,IA0EG4B,EAAWxC,EAAMC,YAhEJ,CACtBC,EAWAC,SAXAC,MACIA,EAAKC,SACLA,EAAQE,KACRA,EAAO,EAACG,SACRA,EAAQD,eACRA,EAAcD,OACdA,EAAMG,UACNA,EAAS8B,oBACTA,KACG7B,EAAUC,EAAAX,EATjB,CAAA,QAAA,WAAA,OAAA,WAAA,iBAAA,SAAA,YAAA,wBAgBA,MAAOY,EAAYC,GAAiBC,EAElCZ,GAKFa,GAAU,KACNF,EAAcX,EAAM,GACrB,CAACA,IAcJ,OACIsC,EAACC,EAAO,CAAAC,SAAA,CACJ1B,EAACnB,EAAYqB,OAAAC,OAAA,CACTlB,IAAKA,EACLE,SAAUA,EACVD,MAAOU,EACPP,KAAMA,GAAQ,EACdG,SAhBUY,IAClB,MAAMC,EAAWD,EAAME,OAAOpB,MAC9BW,EAAcQ,GACVb,GAAUA,EAASY,EAAM,EAcrBd,OAAQA,EACRC,eAAgBA,EAChBE,UAAWA,GACPC,IAEPD,GACGO,EAAC2B,EAAe,CACZzC,MAAOU,EACPH,UAAWA,EACX8B,oBAAqBA,MAGvB"}
+{"version":3,"file":"textarea.js","sources":["../../src/input-textarea/textarea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport * as styles from \"./textarea.styles\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport type { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n    {\n        className,\n        disabled,\n        error,\n        maxLength,\n        onChange,\n        prefix,\n        readOnly,\n        rows = 5,\n        transformValue,\n        value,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    const [stateValue, setStateValue] = useState(value);\n\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        let newValue = event.target.value;\n        if (prefix) {\n            // Ensure prefix is always present\n            if (!newValue.startsWith(prefix)) {\n                newValue = prefix + newValue.trimStart();\n            }\n\n            // Prevent deleting the prefix\n            if (newValue.length < prefix.length) {\n                newValue = prefix;\n            }\n\n            const cursorPosition = event.target.selectionStart || 0;\n\n            // Ensure backspace does not delete the prefix\n            if (cursorPosition < prefix.length) {\n                event.preventDefault();\n                return;\n            }\n\n            // Extract user input\n            const userInput = newValue.slice(prefix.length);\n\n            // Transform the input if needed\n            const transformedValue = transformValue\n                ? transformValue(userInput)\n                : userInput;\n\n            // Update state and input field\n            setStateValue(transformedValue);\n            event.target.value = prefix + transformedValue;\n\n            // Pass only the user input (without prefix) to `onChange`\n            if (onChange) {\n                const syntheticEvent = {\n                    ...event,\n                    target: { ...event.target, value: transformedValue },\n                };\n                onChange(\n                    syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n                );\n            }\n        } else {\n            const transformedValue = transformValue\n                ? transformValue(newValue ?? \"\")\n                : newValue;\n\n            setStateValue(transformedValue);\n            event.target.value = transformedValue;\n            if (onChange) onChange(event);\n        }\n    };\n\n    const getDisplayValue = () => {\n        return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!prefix) return;\n\n        const { selectionStart } = event.currentTarget;\n\n        // Prevent backspace in prefix\n        if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent left arrow from moving into prefix\n        if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent \"Home\" key from moving cursor to beginning\n        if (event.key === \"Home\") {\n            event.preventDefault();\n            requestAnimationFrame(() => {\n                event.currentTarget.setSelectionRange(\n                    prefix.length,\n                    prefix.length\n                );\n            });\n        }\n    };\n\n    return (\n        <textarea\n            ref={ref}\n            disabled={disabled}\n            value={getDisplayValue()}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            readOnly={readOnly}\n            className={clsx(\n                styles.element,\n                (readOnly && styles.elementReadOnly) ||\n                    (disabled && styles.elementDisabled) ||\n                    (error && styles.elementError),\n                className\n            )}\n            rows={rows}\n            maxLength={\n                prefix && maxLength ? prefix.length + maxLength : maxLength\n            }\n            {...otherProps}\n        />\n    );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n    {\n        value,\n        disabled,\n        rows = 5,\n        onChange,\n        transformValue,\n        prefix,\n        maxLength,\n        renderCustomCounter,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    // -------------------------------------------------------------------------\n    // CONST, STATE, REF\n    // -------------------------------------------------------------------------\n    const [stateValue, setStateValue] = useState<\n        string | number | readonly string[] | undefined\n    >(value);\n\n    // -------------------------------------------------------------------------\n    // EFFECTS\n    // -------------------------------------------------------------------------\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    // -------------------------------------------------------------------------\n    // EVENT HANDLER\n    // -------------------------------------------------------------------------\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = event.target.value;\n        setStateValue(newValue);\n        if (onChange) onChange(event);\n    };\n\n    // -------------------------------------------------------------------------\n    // RENDER FUNCTIONS\n    // -------------------------------------------------------------------------\n    return (\n        <div className={styles.wrapper}>\n            <TextareaBase\n                ref={ref}\n                disabled={disabled}\n                value={stateValue}\n                rows={rows || 5}\n                onChange={handleChange}\n                prefix={prefix}\n                transformValue={transformValue}\n                maxLength={maxLength}\n                {...otherProps}\n            />\n            {maxLength && (\n                <TextareaCounter\n                    value={stateValue}\n                    maxLength={maxLength}\n                    renderCustomCounter={renderCustomCounter}\n                />\n            )}\n        </div>\n    );\n};\n\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","clsx","styles.element","styles.elementReadOnly","styles.elementDisabled","styles.elementError","Textarea","renderCustomCounter","_jsxs","styles.wrapper","children","TextareaCounter"],"mappings":"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"}

package/input-textarea/textarea.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const element: import("@linaria/core").LinariaClassName;
+export declare const elementReadOnly: import("@linaria/core").LinariaClassName;
+export declare const elementDisabled: import("@linaria/core").LinariaClassName;
+export declare const elementError: import("@linaria/core").LinariaClassName;

package/input-textarea/textarea.styles.js

@@ -0,0 +1,2 @@
+import"./textarea.styles_g0zgyq.css";const t="w1xqauhq",e="e10c6rk9",a="e1kovz0t",r="e9uwuyt",s="etmlvbn";export{e as element,r as elementDisabled,s as elementError,a as elementReadOnly,t as wrapper};
+//# sourceMappingURL=textarea.styles.js.map

package/input-textarea/textarea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.styles.js","sources":["../../src/input-textarea/textarea.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const element = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour.bg};\n    outline: none;\n    overflow: auto;\n\n    display: block;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    width: 100%;\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    &:focus,\n    &:active {\n        outline-offset: -1px;\n        outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n\nexport const elementReadOnly = css`\n    border-color: transparent;\n    background: transparent !important;\n    padding: ${Spacing[\"spacing-12\"]} 0;\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const elementDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const elementError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n"],"names":["wrapper","element","elementReadOnly","elementDisabled","elementError"],"mappings":"mEAIO,MAAMA,EAAO,WAKPC,EAAO,WA0CPC,EAAe,WAWfC,EAAe,UAUfC,EAAY"}

package/input-textarea/textarea.styles_g0zgyq.css

@@ -0,0 +1,5 @@
+.w1xqauhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.e10c6rk9{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);outline:none;overflow:auto;display:block;padding:var(--fds-spacing-12) var(--fds-spacing-16);width:100%;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-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.e10c6rk9:focus,.e10c6rk9:active{outline-offset:-1px;outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-border-focus);}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-webkit-scrollbar{width:14px;}.e10c6rk9::-webkit-scrollbar-track{background:transparent;}.e10c6rk9::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-moz-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::placeholder{color:var(--fds-colour-text-subtler);}
+.e1kovz0t{border-color:transparent;background:transparent!important;padding:var(--fds-spacing-12) 0;}.e1kovz0t:focus,.e1kovz0t:active{outline-color:var(--fds-colour-border-focus);}
+.e9uwuyt{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.e9uwuyt:focus,.e9uwuyt:active{outline-color:var(--fds-colour-border-disabled);}
+.etmlvbn{border-color:var(--fds-colour-border-error);}.etmlvbn:focus,.etmlvbn:active{outline-color:var(--fds-colour-border-error-focus);}

package/language-switcher/data.d.ts

@@ -0,0 +1,4 @@
+import type { LanguageSwitcherCode } from "./types";
+export declare const LANGUAGE_DISPLAY_MAP: Record<LanguageSwitcherCode, string>;
+export declare const LANGUAGE_CODES: LanguageSwitcherCode[];
+export declare const ARIA_LABEL = "Choose language / \u9009\u62E9\u8BED\u8A00 / Pilih bahasa / \u0BAE\u0BCA\u0BB4\u0BBF\u0BAF\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD";

package/language-switcher/data.js

@@ -0,0 +1,2 @@
+const a={en:"English",zh:"中文",ms:"Melayu",ta:"தமிழ்"},e=["en","zh","ms","ta"],h="Choose language / 选择语言 / Pilih bahasa / மொழியை தேர்ந்தெடுக்கவும்";export{h as ARIA_LABEL,e as LANGUAGE_CODES,a as LANGUAGE_DISPLAY_MAP};
+//# sourceMappingURL=data.js.map

package/language-switcher/data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.js","sources":["../../src/language-switcher/data.ts"],"sourcesContent":["import type { LanguageSwitcherCode } from \"./types\";\n\nexport const LANGUAGE_DISPLAY_MAP: Record<LanguageSwitcherCode, string> = {\n    en: \"English\",\n    zh: \"中文\",\n    ms: \"Melayu\",\n    ta: \"தமிழ்\",\n};\n\nexport const LANGUAGE_CODES: LanguageSwitcherCode[] = [\"en\", \"zh\", \"ms\", \"ta\"];\n\nexport const ARIA_LABEL =\n    \"Choose language / 选择语言 / Pilih bahasa / மொழியை தேர்ந்தெடுக்கவும்\";\n"],"names":["LANGUAGE_DISPLAY_MAP","en","zh","ms","ta","LANGUAGE_CODES","ARIA_LABEL"],"mappings":"AAEO,MAAMA,EAA6D,CACtEC,GAAI,UACJC,GAAI,KACJC,GAAI,SACJC,GAAI,SAGKC,EAAyC,CAAC,KAAM,KAAM,KAAM,MAE5DC,EACT"}

package/language-switcher/dropdown-panel.d.ts

@@ -0,0 +1,13 @@
+import type React from "react";
+import type { LanguageSwitcherCode } from "./types";
+interface DropdownPanelProps {
+    focusedIndex: number;
+    handleItemSelect: (code: LanguageSwitcherCode) => void;
+    handleListKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => void;
+    itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;
+    listboxId: string;
+    selectedLanguage: LanguageSwitcherCode;
+    testId: string;
+}
+export declare const DropdownPanel: ({ focusedIndex, handleItemSelect, handleListKeyDown, itemRefs, listboxId, selectedLanguage, testId, }: DropdownPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/language-switcher/dropdown-panel.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{TickIcon as r}from"@lifesg/react-icons/tick";import o from"clsx";import{useRef as s}from"react";import{baseIndicatorStyle as i,selectedIndicator as m,listItem as a,listItemActiveSelected as l,listItemActive as n}from"../shared/dropdown-list/dropdown-list.styles.js";import{useDropdownRender as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as p}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as c}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{ARIA_LABEL as h,LANGUAGE_CODES as j,LANGUAGE_DISPLAY_MAP as u}from"./data.js";import{tokens as f,dropdownPanel as y,dropdownList as g,dropdownItem as x,dropdownItemSelected as w}from"./dropdown-panel.styles.js";const b=({focusedIndex:b,handleItemSelect:k,handleListKeyDown:v,itemRefs:I,listboxId:N,selectedLanguage:$,testId:q})=>{const{elementWidth:D,styles:F,setFloatingRef:K,getFloatingProps:L}=d(),R=s(null);return p(R,{[f.width]:`${D}px`}),e("div",Object.assign({ref:c(K,R),className:y,style:F,"data-testid":`${q}--panel`},L(),{children:e("ul",{className:g,role:"listbox",id:N,"aria-label":h,onKeyDown:v,children:j.map(((s,d)=>{const p=s===$,c=d===b;return t("li",{ref:e=>{I.current[d]=e},role:"option",lang:s,className:o(x,a,c&&p&&l,c&&!p&&n,p&&w),"aria-selected":p,tabIndex:c?0:-1,onClick:()=>k(s),"data-testid":`${q}--item-${s}`,children:[p?e(r,{className:o(i,m),"aria-hidden":!0}):e("div",{className:i}),u[s]]},s)}))})}))};export{b as DropdownPanel};
+//# sourceMappingURL=dropdown-panel.js.map

package/language-switcher/dropdown-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-panel.js","sources":["../../src/language-switcher/dropdown-panel.tsx"],"sourcesContent":["import { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport {\n    baseIndicatorStyle,\n    listItem,\n    listItemActive,\n    listItemActiveSelected,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\nimport { useDropdownRender } from \"../shared/dropdown-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport * as styles from \"./dropdown-panel.styles\";\nimport type { LanguageSwitcherCode } from \"./types\";\n\ninterface DropdownPanelProps {\n    focusedIndex: number;\n    handleItemSelect: (code: LanguageSwitcherCode) => void;\n    handleListKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => void;\n    itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;\n    listboxId: string;\n    selectedLanguage: LanguageSwitcherCode;\n    testId: string;\n}\n\nexport const DropdownPanel = ({\n    focusedIndex,\n    handleItemSelect,\n    handleListKeyDown,\n    itemRefs,\n    listboxId,\n    selectedLanguage,\n    testId,\n}: DropdownPanelProps) => {\n    const {\n        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    } = useDropdownRender();\n    const panelRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(panelRef, {\n        [styles.tokens.width]: `${elementWidth}px`,\n    });\n\n    return (\n        <div\n            ref={mergeRefs(setFloatingRef, panelRef)}\n            className={styles.dropdownPanel}\n            style={floatingStyles}\n            data-testid={`${testId}--panel`}\n            {...getFloatingProps()}\n        >\n            <ul\n                className={styles.dropdownList}\n                role=\"listbox\"\n                id={listboxId}\n                aria-label={ARIA_LABEL}\n                onKeyDown={handleListKeyDown}\n            >\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isSelected = code === selectedLanguage;\n                    const isFocused = index === focusedIndex;\n\n                    return (\n                        <li\n                            key={code}\n                            ref={(element: HTMLLIElement | null) => {\n                                itemRefs.current[index] = element;\n                            }}\n                            role=\"option\"\n                            lang={code}\n                            className={clsx(\n                                styles.dropdownItem,\n                                listItem,\n                                isFocused &&\n                                    isSelected &&\n                                    listItemActiveSelected,\n                                isFocused && !isSelected && listItemActive,\n                                isSelected && styles.dropdownItemSelected\n                            )}\n                            aria-selected={isSelected}\n                            tabIndex={isFocused ? 0 : -1}\n                            onClick={() => handleItemSelect(code)}\n                            data-testid={`${testId}--item-${code}`}\n                        >\n                            {isSelected ? (\n                                <TickIcon\n                                    className={clsx(\n                                        baseIndicatorStyle,\n                                        styles.selectedIndicator\n                                    )}\n                                    aria-hidden\n                                />\n                            ) : (\n                                <div className={baseIndicatorStyle} />\n                            )}\n                            {LANGUAGE_DISPLAY_MAP[code]}\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n};\n"],"names":["DropdownPanel","focusedIndex","handleItemSelect","handleListKeyDown","itemRefs","listboxId","selectedLanguage","testId","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","useDropdownRender","panelRef","useRef","useApplyStyle","styles.tokens","width","_jsx","Object","assign","ref","mergeRefs","className","styles.dropdownPanel","style","children","styles.dropdownList","role","id","ARIA_LABEL","onKeyDown","LANGUAGE_CODES","map","code","index","isSelected","isFocused","_jsxs","element","current","lang","clsx","styles.dropdownItem","listItem","listItemActiveSelected","listItemActive","styles.dropdownItemSelected","tabIndex","onClick","TickIcon","baseIndicatorStyle","styles.selectedIndicator","LANGUAGE_DISPLAY_MAP"],"mappings":"8qCA4BaA,EAAgB,EACzBC,eACAC,mBACAC,oBACAC,WACAC,YACAC,mBACAC,aAEA,MAAMC,aACFA,EACAC,OAAQC,EAAcC,eACtBA,EAAcC,iBACdA,GACAC,IACEC,EAAWC,EAAuB,MAMxC,OAJAC,EAAcF,EAAU,CACpB,CAACG,EAAcC,OAAQ,GAAGV,QAI1BW,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKC,EAAUZ,EAAgBG,GAC/BU,UAAWC,EACXC,MAAOhB,EAAc,cACR,GAAGH,YACZK,IAAkB,CAAAe,SAEtBR,EAAA,KAAA,CACIK,UAAWI,EACXC,KAAK,UACLC,GAAIzB,EAAS,aACD0B,EACZC,UAAW7B,EAAiBwB,SAE3BM,EAAeC,KAAI,CAACC,EAAMC,KACvB,MAAMC,EAAaF,IAAS7B,EACtBgC,EAAYF,IAAUnC,EAE5B,OACIsC,EAAA,KAAA,CAEIjB,IAAMkB,IACFpC,EAASqC,QAAQL,GAASI,CAAO,EAErCX,KAAK,SACLa,KAAMP,EACNX,UAAWmB,EACPC,EACAC,EACAP,GACID,GACAS,EACJR,IAAcD,GAAcU,EAC5BV,GAAcW,mBAEHX,EACfY,SAAUX,EAAY,KACtBY,QAAS,IAAMhD,EAAiBiC,iBACnB,GAAG5B,WAAgB4B,IAAMR,SAAA,CAErCU,EACGlB,EAACgC,EAAQ,CACL3B,UAAWmB,EACPS,EACAC,GACH,eAAA,IAILlC,EAAA,MAAA,CAAKK,UAAW4B,IAEnBE,EAAqBnB,KA/BjBA,EAgCJ,QAIf"}

package/language-switcher/dropdown-panel.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const tokens: {
+    readonly width: "--fds-internal-languageSwitcher-dropdown-width";
+};
+export declare const dropdownPanel: import("@linaria/core").LinariaClassName;
+export declare const dropdownList: import("@linaria/core").LinariaClassName;
+export { baseIndicatorStyle, selectedIndicator, } from "../shared/dropdown-list/dropdown-list.styles";
+export declare const dropdownItem: import("@linaria/core").LinariaClassName;
+export declare const dropdownItemSelected: import("@linaria/core").LinariaClassName;

package/language-switcher/dropdown-panel.styles.js

@@ -0,0 +1,2 @@
+import"../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css";import"./dropdown-panel.styles_1z0n7qq.css";const d={width:"--fds-internal-languageSwitcher-dropdown-width"},s="dbl9jc4",t="dogrnw8",o="d4xkcjy",n="ddiq5up";export{o as dropdownItem,n as dropdownItemSelected,t as dropdownList,s as dropdownPanel,d as tokens};
+//# sourceMappingURL=dropdown-panel.styles.js.map

package/language-switcher/dropdown-panel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-panel.styles.js","sources":["../../src/language-switcher/dropdown-panel.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n    width: \"--fds-internal-languageSwitcher-dropdown-width\",\n} as const;\n\nexport const dropdownPanel = css`\n    ${tokens.width}: initial;\n\n    width: var(${tokens.width});\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n    overflow: hidden;\n`;\n\nexport const dropdownList = css`\n    list-style: none;\n    margin: 0;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport {\n    baseIndicatorStyle,\n    selectedIndicator,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\n\nexport const dropdownItem = css`\n    align-items: center;\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const dropdownItemSelected = css`\n    background: transparent;\n    color: ${Colour[\"text-selected\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-hover\"]};\n    }\n`;\n"],"names":["tokens","width","dropdownPanel","dropdownList","dropdownItem","dropdownItemSelected"],"mappings":"4JAIO,MAAMA,EAAS,CAClBC,MAAO,kDAGEC,EAAa,UAUbC,EAAY,UAWZC,EAAY,UAUZC,EAAoB"}

package/language-switcher/dropdown-panel.styles_1z0n7qq.css

@@ -0,0 +1,4 @@
+.dbl9jc4{--fds-internal-languageSwitcher-dropdown-width:initial;width:var(--fds-internal-languageSwitcher-dropdown-width);border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);overflow:hidden;}
+.dogrnw8{list-style:none;margin:0;padding:var(--fds-spacing-8);}
+.d4xkcjy{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;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-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}.d4xkcjy:hover{background:var(--fds-colour-bg-hover-subtle);}
+.ddiq5up{background:transparent;color:var(--fds-colour-text-selected);}.ddiq5up:hover{background:var(--fds-colour-bg-hover);}