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

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),n=require("react"),i=require("../v3_theme/index.js"),l=require("./input-range-slider.styles.js");exports.InputRangeSlider=a=>{var{value:s,min:t=0,max:d=100,step:o=1,minRange:u,numOfThumbs:b=2,colors:c,disabled:h,readOnly:f,ariaLabels:x,showSliderLabels:m,sliderLabelPrefix:L,sliderLabelSuffix:g,showIndicatorLabel:j,indicatorLabelPrefix:p,indicatorLabelSuffix:S,renderSliderLabel:C,onChange:v,onChangeEnd:$}=a,_=e.__rest(a,["value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","ariaLabels","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","renderSliderLabel","onChange","onChangeEnd"]);const[O,T]=n.useState(I()),y=function(){const e=function(){const e=h||f?i.V3_Colour["border-disabled"]:i.V3_Colour["border-strong"],r=h||f?i.V3_Colour["border-selected-disabled"]:i.V3_Colour["border-selected"];if(1===b)return[r,e];const n=[];n.push(e);for(let e=0;e<b-1;e++)n.push(r);return n.push(e),n}();return new Array(b+1).fill(0).map(((r,n)=>(null==c?void 0:c[n])||e[n]))}();n.useEffect((()=>{s!==O&&T(I())}),[s]);function I(){if(s&&s.length===b)return s;const e=[];for(let r=0;r<b;r++)e.push(t+o*r);return e}const q=e=>C?C(e):r.jsxs(l.LabelText,{children:[L,e,g]});return r.jsxs(l.Wrapper,Object.assign({},_,{children:[j&&r.jsx(l.IndicatorLabelContainer,{children:(()=>{let e="";if(1===O.length)e=`${O[0]}`;else if(2===O.length)e=`${O[0]} - ${O[1]}`;else if(O.length>2){e=`${Math.min(...O)} - ${Math.max(...O)}`}return r.jsxs(l.LabelText,{children:[p,e,S]})})()}),r.jsx(l.Slider,{step:o,min:t,max:d,value:O,disabled:h||f,onChange:(e,r)=>{if("number"==typeof e){const r=[e];T(r),null==v||v(r)}else{if(r>-1&&O[r]===e[r])return;const n=[...e];T(n),null==v||v(n)}},onAfterChange:e=>{if("number"==typeof e){const r=[e];T(r),null==$||$(r)}else{const r=[...e];T(r),null==$||$(r)}},minDistance:u,ariaLabel:x,renderThumb:(e,n)=>r.jsx(l.SliderThumb,Object.assign({"data-testid":`slider-thumb-${n.index}`},e,{tabIndex:h?void 0:e.tabIndex,children:r.jsx(l.Knob,{$disabled:h,$readOnly:f})})),renderTrack:(e,n)=>r.jsx(l.SliderTrack,Object.assign({"data-testid":`slider-track-${n.index}`},e,{$color:y[n.index]}))}),m&&r.jsxs(l.LabelContainer,{children:[r.jsx("div",{children:q(t)}),r.jsx("div",{children:q(d)})]})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react"),i=require("react/jsx-runtime"),n=require("@react-aria/live-announcer"),a=require("clsx"),t=require("react-slider"),s=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var l=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var d=require("../util/simple-id-generator.js");require("../util/string-helper.js");var o=require("../typography/index.js"),u=require("./input-range-slider.styles.js"),c=require("./slider-components.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=h(a),f=h(t);exports.InputRangeSlider=a=>{var{id:t,value:h,min:m=0,max:v=100,step:x=1,minRange:p=0,numOfThumbs:y=2,colors:g,disabled:j,readOnly:$,showSliderLabels:L,sliderLabelPrefix:q,sliderLabelSuffix:w,showIndicatorLabel:C,indicatorLabelPrefix:k,indicatorLabelSuffix:T,ariaLabels:S,ariaDescriptions:I,"aria-invalid":N,"aria-labelledby":O,"aria-describedby":A,renderSliderLabel:D,onChange:E,onChangeEnd:M,className:P}=a,B=e.__rest(a,["id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","aria-invalid","aria-labelledby","aria-describedby","renderSliderLabel","onChange","onChangeEnd","className"]);const[R,_]=r.useState(W()),[H,U]=r.useState(null),V=d.useId(),F=function(){const e=function(){const e=j||$?l.Colour["border-disabled"]:l.Colour["border-strong"],r=j||$?l.Colour["border-selected-disabled"]:l.Colour["border-selected"];if(1===y)return[r,e];const i=[e];for(let e=0;e<y-1;e++)i.push(r);return i.push(e),i}();return new Array(y+1).fill(0).map(((r,i)=>(null==g?void 0:g[i])||e[i]))}(),K=`${V}-indicator`,z=`${V}-instruction`,G=Array.from({length:y},((e,r)=>(null==S?void 0:S[r])||function(e){return 1===y?"":0===e?"Minimum value slider":e===y-1?"Maximum value slider":"Indeterminate value slider"}(r)));r.useEffect((()=>{h!==R&&_(W())}),[h]);const J=(e,r)=>{if(j||$)return;const i=function(e,r){if(y<2)return"";const i=R[r],n=r>0?R[r-1]:void 0,a=r<R.length-1?R[r+1]:void 0,t=G[r],s=r>0?G[r-1]:void 0,l=r<G.length-1?G[r+1]:void 0;if(function(e){return["ArrowRight","ArrowUp","PageUp","End"].includes(e)}(e)&&void 0!==a&&i>=a-p)return`The ${X(t)} has reached its limit. Increase the ${Y(l)} to set a higher ${Y(t)}.`;if(function(e){return["ArrowLeft","ArrowDown","PageDown","Home"].includes(e)}(e)&&void 0!==n&&i<=n+p)return`The ${X(t)} has reached its limit. Decrease the ${Y(s)} to set a lower ${Y(t)}.`;return""}(e.key,r);i&&(n.clearAnnouncer("assertive"),n.announce(i,"assertive"))},Q=(e,r)=>{if(j||$)return;const i=Number(e.currentTarget.value),n=[...R];n[r]=function(e,r,i){const n=Z(r,i),a=ee(r,i);return Math.min(a,Math.max(n,e))}(i,r,R),_(n),null==E||E(n),null==M||M(n)};function W(){if(h&&h.length===y)return h;const e=[];for(let r=0;r<y;r++)e.push(m+x*r);return e}function X(e){return e?e.toLowerCase():"slider"}function Y(e){return e?e.replace(/ slider$/i,"").toLowerCase():"slider"}function Z(e,r=R){return 0===e?m:r[e-1]+p}function ee(e,r=R){return e===r.length-1?v:r[e+1]-p}const re=e=>D?D(e):i.jsxs(o.Typography.BodyBL,{className:u.labelText,children:[q,e,w]});return i.jsxs("div",Object.assign({},B,{id:t,role:"group","aria-labelledby":O,"aria-disabled":j,className:b.default(u.wrapper,P),children:[!j&&!$&&i.jsx(s.VisuallyHidden,{id:z,children:"Use left and right arrow keys to adjust the slider."}),C&&i.jsx("div",{id:K,className:u.indicatorLabelContainer,children:(()=>{let e="";if(1===R.length)e=`${R[0]}`;else if(2===R.length)e=`${R[0]} - ${R[1]}`;else if(R.length>2){e=`${Math.min(...R)} - ${Math.max(...R)}`}return i.jsxs(o.Typography.BodyBL,{className:u.labelText,children:[k,e,T]})})()}),R.map(((e,r)=>{const n=`${V}-thumb-label-${r}`,a=function(e){return null==I?void 0:I[e]}(r),t=a?`${V}-thumb-description-${r}`:void 0;return i.jsxs(s.VisuallyHidden,{children:[t&&i.jsx("span",{id:t,children:a}),i.jsx("span",{id:n,children:G[r]}),i.jsx("input",{"data-testid":`slider-input-${r}`,type:"range",min:Z(r),max:ee(r),step:x,value:e,"aria-disabled":j||void 0,readOnly:$,"aria-labelledby":s.concatIds(O,n),"aria-describedby":(d=t,s.concatIds(A,C?K:void 0,j||$?void 0:z,d)),"aria-valuetext":(l=e,`${q||""}${l}${w||""}`),"aria-invalid":N,onFocus:()=>U(r),onBlur:()=>U(null),onChange:e=>Q(e,r),onKeyDown:e=>{J(e,r)}})]},`native-slider-${r}`);var l,d})),i.jsx(f.default,{step:x,min:m,max:v,value:R,disabled:j||$,onChange:(e,r)=>{if($||j)return;if("number"==typeof e){const r=[e];return _(r),void(null==E||E(r))}if(r>-1&&R[r]===e[r])return;const i=[...e];_(i),null==E||E(i)},onAfterChange:e=>{if($||j)return;if("number"==typeof e){const r=[e];return _(r),void(null==M||M(r))}const r=[...e];_(r),null==M||M(r)},minDistance:p,"aria-hidden":!0,className:u.slider,renderThumb:(e,i)=>r.createElement(c.Thumb,Object.assign({"data-testid":`slider-thumb-${i.index}`},e,{key:e.key,tabIndex:-1,"aria-hidden":!0,focused:H===i.index,disabled:j,readOnly:$})),renderTrack:(e,i)=>r.createElement(c.Track,Object.assign({"data-testid":`slider-track-${i.index}`},e,{key:e.key,color:F[i.index]}))}),L&&i.jsxs("div",{className:u.labelContainer,children:[i.jsx("div",{children:re(m)}),i.jsx("div",{children:re(v)})]})]}))};
 //# sourceMappingURL=input-range-slider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-range-slider.js","sources":["../../../src/input-range-slider/input-range-slider.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { V3_Colour } from \"../v3_theme\";\nimport {\n    IndicatorLabelContainer,\n    Knob,\n    LabelContainer,\n    LabelText,\n    Slider,\n    SliderThumb,\n    SliderTrack,\n    Wrapper,\n} from \"./input-range-slider.styles\";\nimport type { InputRangeSliderProps } from \"./types\";\n\nexport const InputRangeSlider = ({\n    value,\n    min = 0,\n    max = 100,\n    step = 1,\n    minRange,\n    numOfThumbs = 2,\n    colors,\n    disabled,\n    readOnly,\n    ariaLabels,\n    showSliderLabels,\n    sliderLabelPrefix,\n    sliderLabelSuffix,\n    showIndicatorLabel,\n    indicatorLabelPrefix,\n    indicatorLabelSuffix,\n    renderSliderLabel,\n    onChange,\n    onChangeEnd,\n    ...otherProps\n}: InputRangeSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n    const trackColors = getTrackColors();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initialiseSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number | readonly number[], index: number) => {\n        if (typeof value === \"number\") {\n            const val = [value];\n            setSelection(val);\n            onChange?.(val);\n        } else {\n            if (index > -1 && selection[index] === value[index]) {\n                // skip unnecessary update when dragging the start thumb across the end thumb\n                return;\n            }\n            const newSelection = [...value];\n            setSelection(newSelection);\n            onChange?.(newSelection);\n        }\n    };\n\n    const handleChangeEnd = (value: number | readonly number[]) => {\n        if (typeof value === \"number\") {\n            const val = [value];\n            setSelection(val);\n            onChangeEnd?.(val);\n        } else {\n            const newSelection = [...value];\n            setSelection(newSelection);\n            onChangeEnd?.(newSelection);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        if (value && value.length === numOfThumbs) {\n            return value;\n        }\n\n        const values: number[] = [];\n        for (let i = 0; i < numOfThumbs; i++) {\n            values.push(min + step * i);\n        }\n        return values;\n    }\n\n    function getTrackColors() {\n        const defaultColors = getDefaultColors();\n        return new Array(numOfThumbs + 1).fill(0).map((_, i) => {\n            return colors?.[i] || defaultColors[i];\n        });\n    }\n\n    function getDefaultColors() {\n        const inactiveColor =\n            disabled || readOnly\n                ? V3_Colour[\"border-disabled\"]\n                : V3_Colour[\"border-strong\"];\n        const activeColor =\n            disabled || readOnly\n                ? V3_Colour[\"border-selected-disabled\"]\n                : V3_Colour[\"border-selected\"];\n\n        if (numOfThumbs === 1) {\n            return [activeColor, inactiveColor];\n        }\n\n        const defaultColors: typeof colors = [];\n        defaultColors.push(inactiveColor);\n        for (let i = 0; i < numOfThumbs - 1; i++) {\n            defaultColors.push(activeColor);\n        }\n        defaultColors.push(inactiveColor);\n        return defaultColors;\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const formatLabel = (value: number) => {\n        if (renderSliderLabel) {\n            return renderSliderLabel(value);\n        }\n\n        return (\n            <LabelText>\n                {sliderLabelPrefix}\n                {value}\n                {sliderLabelSuffix}\n            </LabelText>\n        );\n    };\n\n    const formatIndicationLabel = () => {\n        let formattedSelection = \"\";\n\n        if (selection.length === 1) {\n            formattedSelection = `${selection[0]}`;\n        } else if (selection.length === 2) {\n            formattedSelection = `${selection[0]} - ${selection[1]}`;\n        } else if (selection.length > 2) {\n            const min = Math.min(...selection);\n            const max = Math.max(...selection);\n            formattedSelection = `${min} - ${max}`;\n        }\n\n        return (\n            <LabelText>\n                {indicatorLabelPrefix}\n                {formattedSelection}\n                {indicatorLabelSuffix}\n            </LabelText>\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            {showIndicatorLabel && (\n                <IndicatorLabelContainer>\n                    {formatIndicationLabel()}\n                </IndicatorLabelContainer>\n            )}\n            <Slider\n                step={step}\n                min={min}\n                max={max}\n                value={selection}\n                disabled={disabled || readOnly}\n                onChange={handleChange}\n                onAfterChange={handleChangeEnd}\n                minDistance={minRange}\n                ariaLabel={ariaLabels}\n                renderThumb={(\n                    thumbProps: React.HTMLAttributes<HTMLDivElement>,\n                    state\n                ) => {\n                    return (\n                        <SliderThumb\n                            data-testid={`slider-thumb-${state.index}`}\n                            {...thumbProps}\n                            tabIndex={\n                                disabled ? undefined : thumbProps.tabIndex\n                            }\n                        >\n                            <Knob $disabled={disabled} $readOnly={readOnly} />\n                        </SliderThumb>\n                    );\n                }}\n                renderTrack={(\n                    trackProps: React.HTMLAttributes<HTMLDivElement>,\n                    state\n                ) => {\n                    return (\n                        <SliderTrack\n                            data-testid={`slider-track-${state.index}`}\n                            {...trackProps}\n                            $color={trackColors[state.index]}\n                        />\n                    );\n                }}\n            />\n            {showSliderLabels && (\n                <LabelContainer>\n                    <div>{formatLabel(min)}</div>\n                    <div>{formatLabel(max)}</div>\n                </LabelContainer>\n            )}\n        </Wrapper>\n    );\n};\n"],"names":["_a","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","ariaLabels","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","renderSliderLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","trackColors","defaultColors","inactiveColor","V3_Colour","activeColor","push","i","getDefaultColors","Array","fill","map","_","getTrackColors","useEffect","length","values","formatLabel","_jsxs","LabelText","children","Wrapper","Object","assign","_jsx","IndicatorLabelContainer","formattedSelection","Math","formatIndicationLabel","Slider","index","val","newSelection","onAfterChange","minDistance","ariaLabel","renderThumb","thumbProps","state","SliderThumb","tabIndex","undefined","Knob","$disabled","$readOnly","renderTrack","trackProps","SliderTrack","$color","LabelContainer"],"mappings":"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"}
+{"version":3,"file":"input-range-slider.js","sources":["../../../src/input-range-slider/input-range-slider.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport ReactSlider from \"react-slider\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { Colour } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\nimport { Thumb, Track } from \"./slider-components\";\nimport type { InputRangeSliderProps } from \"./types\";\n\nexport const InputRangeSlider = ({\n    id,\n    value,\n    min = 0,\n    max = 100,\n    step = 1,\n    minRange = 0,\n    numOfThumbs = 2,\n    colors,\n    disabled,\n    readOnly,\n    showSliderLabels,\n    sliderLabelPrefix,\n    sliderLabelSuffix,\n    showIndicatorLabel,\n    indicatorLabelPrefix,\n    indicatorLabelSuffix,\n    ariaLabels,\n    ariaDescriptions,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    renderSliderLabel,\n    onChange,\n    onChangeEnd,\n    className,\n    ...otherProps\n}: InputRangeSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n    const [focusedThumbIndex, setFocusedThumbIndex] = useState<number | null>(\n        null\n    );\n    const internalId = useId();\n    const trackColors = getTrackColors();\n    const indicatorTextId = `${internalId}-indicator`;\n    const instructionTextId = `${internalId}-instruction`;\n    const resolvedAriaLabels = getResolvedAriaLabels();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initialiseSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number | readonly number[], index: number) => {\n        if (readOnly || disabled) {\n            return;\n        }\n\n        if (typeof value === \"number\") {\n            const nextValue = [value];\n            setSelection(nextValue);\n            onChange?.(nextValue);\n            return;\n        }\n\n        if (index > -1 && selection[index] === value[index]) {\n            // skip unnecessary update when dragging the start thumb across the end thumb\n            return;\n        }\n\n        const nextValue = [...value];\n        setSelection(nextValue);\n        onChange?.(nextValue);\n    };\n\n    const handleChangeEnd = (value: number | readonly number[]) => {\n        if (readOnly || disabled) {\n            return;\n        }\n\n        if (typeof value === \"number\") {\n            const val = [value];\n            setSelection(val);\n            onChangeEnd?.(val);\n            return;\n        }\n\n        const newSelection = [...value];\n        setSelection(newSelection);\n        onChangeEnd?.(newSelection);\n    };\n\n    const handleThumbKeyDown = (\n        event: React.KeyboardEvent<HTMLDivElement>,\n        index: number\n    ) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const message = getBlockedMovementMessage(event.key, index);\n\n        if (!message) {\n            return;\n        }\n\n        clearAnnouncer(\"assertive\");\n        announce(message, \"assertive\");\n    };\n\n    const handleNativeRangeChange = (\n        event: React.ChangeEvent<HTMLInputElement>,\n        index: number\n    ) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const nextRawValue = Number(event.currentTarget.value);\n\n        const nextSelection = [...selection];\n        nextSelection[index] = clampValueForThumb(\n            nextRawValue,\n            index,\n            selection\n        );\n\n        setSelection(nextSelection);\n        onChange?.(nextSelection);\n        onChangeEnd?.(nextSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        if (value && value.length === numOfThumbs) {\n            return value;\n        }\n\n        const values: number[] = [];\n        for (let i = 0; i < numOfThumbs; i++) {\n            values.push(min + step * i);\n        }\n        return values;\n    }\n\n    function getResolvedAriaLabels() {\n        return Array.from({ length: numOfThumbs }, (_, index) => {\n            return ariaLabels?.[index] || getDefaultAriaLabel(index);\n        });\n    }\n\n    function getDefaultAriaLabel(index: number) {\n        if (numOfThumbs === 1) {\n            return \"\";\n        }\n\n        if (index === 0) {\n            return \"Minimum value slider\";\n        }\n\n        if (index === numOfThumbs - 1) {\n            return \"Maximum value slider\";\n        }\n\n        return \"Indeterminate value slider\";\n    }\n\n    function getThumbDescriptionText(index: number) {\n        return ariaDescriptions?.[index];\n    }\n\n    function getTrackColors() {\n        const defaultColors = getDefaultColors();\n        return new Array(numOfThumbs + 1).fill(0).map((_, i) => {\n            return colors?.[i] || defaultColors[i];\n        });\n    }\n\n    function getDefaultColors() {\n        const inactiveColor =\n            disabled || readOnly\n                ? Colour[\"border-disabled\"]\n                : Colour[\"border-strong\"];\n        const activeColor =\n            disabled || readOnly\n                ? Colour[\"border-selected-disabled\"]\n                : Colour[\"border-selected\"];\n\n        if (numOfThumbs === 1) {\n            return [activeColor, inactiveColor];\n        }\n\n        const defaultColors: typeof colors = [inactiveColor];\n\n        for (let index = 0; index < numOfThumbs - 1; index++) {\n            defaultColors.push(activeColor);\n        }\n\n        defaultColors.push(inactiveColor);\n        return defaultColors;\n    }\n\n    function getValueText(currentValue: number) {\n        return `${sliderLabelPrefix || \"\"}${currentValue}${\n            sliderLabelSuffix || \"\"\n        }`;\n    }\n\n    function getThumbDescriptionIds(thumbDescriptionId?: string) {\n        return concatIds(\n            ariaDescribedBy,\n            showIndicatorLabel ? indicatorTextId : undefined,\n            disabled || readOnly ? undefined : instructionTextId,\n            thumbDescriptionId\n        );\n    }\n\n    function isIncreaseKey(key: string) {\n        return [\"ArrowRight\", \"ArrowUp\", \"PageUp\", \"End\"].includes(key);\n    }\n\n    function isDecreaseKey(key: string) {\n        return [\"ArrowLeft\", \"ArrowDown\", \"PageDown\", \"Home\"].includes(key);\n    }\n\n    function getSliderTypeText(label?: string) {\n        if (!label) {\n            return \"slider\";\n        }\n\n        return label.toLowerCase();\n    }\n\n    function getSliderTargetText(label?: string) {\n        if (!label) {\n            return \"slider\";\n        }\n\n        return label.replace(/ slider$/i, \"\").toLowerCase();\n    }\n\n    function getBlockedMovementMessage(key: string, index: number) {\n        if (numOfThumbs < 2) {\n            return \"\";\n        }\n\n        const currentValue = selection[index];\n        const previousValue = index > 0 ? selection[index - 1] : undefined;\n        const nextValue =\n            index < selection.length - 1 ? selection[index + 1] : undefined;\n\n        const currentLabel = resolvedAriaLabels[index];\n        const previousLabel =\n            index > 0 ? resolvedAriaLabels[index - 1] : undefined;\n        const nextLabel =\n            index < resolvedAriaLabels.length - 1\n                ? resolvedAriaLabels[index + 1]\n                : undefined;\n\n        if (isIncreaseKey(key)) {\n            if (\n                nextValue !== undefined &&\n                currentValue >= nextValue - minRange\n            ) {\n                return `The ${getSliderTypeText(\n                    currentLabel\n                )} has reached its limit. Increase the ${getSliderTargetText(\n                    nextLabel\n                )} to set a higher ${getSliderTargetText(currentLabel)}.`;\n            }\n        }\n\n        if (isDecreaseKey(key)) {\n            if (\n                previousValue !== undefined &&\n                currentValue <= previousValue + minRange\n            ) {\n                return `The ${getSliderTypeText(\n                    currentLabel\n                )} has reached its limit. Decrease the ${getSliderTargetText(\n                    previousLabel\n                )} to set a lower ${getSliderTargetText(currentLabel)}.`;\n            }\n        }\n\n        return \"\";\n    }\n\n    function getThumbMin(index: number, values = selection) {\n        if (index === 0) {\n            return min;\n        }\n\n        return values[index - 1] + minRange;\n    }\n\n    function getThumbMax(index: number, values = selection) {\n        if (index === values.length - 1) {\n            return max;\n        }\n\n        return values[index + 1] - minRange;\n    }\n\n    function clampValueForThumb(\n        nextValue: number,\n        index: number,\n        values: number[]\n    ) {\n        const minAllowed = getThumbMin(index, values);\n        const maxAllowed = getThumbMax(index, values);\n\n        return Math.min(maxAllowed, Math.max(minAllowed, nextValue));\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const formatLabel = (value: number) => {\n        if (renderSliderLabel) {\n            return renderSliderLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL className={styles.labelText}>\n                {sliderLabelPrefix}\n                {value}\n                {sliderLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const formatIndicationLabel = () => {\n        let formattedSelection = \"\";\n\n        if (selection.length === 1) {\n            formattedSelection = `${selection[0]}`;\n        } else if (selection.length === 2) {\n            formattedSelection = `${selection[0]} - ${selection[1]}`;\n        } else if (selection.length > 2) {\n            const minValue = Math.min(...selection);\n            const maxValue = Math.max(...selection);\n            formattedSelection = `${minValue} - ${maxValue}`;\n        }\n\n        return (\n            <Typography.BodyBL className={styles.labelText}>\n                {indicatorLabelPrefix}\n                {formattedSelection}\n                {indicatorLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    return (\n        <div\n            {...otherProps}\n            id={id}\n            role=\"group\"\n            aria-labelledby={ariaLabelledBy}\n            aria-disabled={disabled}\n            className={clsx(styles.wrapper, className)}\n        >\n            {!disabled && !readOnly && (\n                <VisuallyHidden id={instructionTextId}>\n                    Use left and right arrow keys to adjust the slider.\n                </VisuallyHidden>\n            )}\n\n            {showIndicatorLabel && (\n                <div\n                    id={indicatorTextId}\n                    className={styles.indicatorLabelContainer}\n                >\n                    {formatIndicationLabel()}\n                </div>\n            )}\n\n            {selection.map((thumbValue, index) => {\n                const thumbLabelTextId = `${internalId}-thumb-label-${index}`;\n                const thumbDescriptionText = getThumbDescriptionText(index);\n                const thumbDescriptionTextId = thumbDescriptionText\n                    ? `${internalId}-thumb-description-${index}`\n                    : undefined;\n\n                return (\n                    <VisuallyHidden key={`native-slider-${index}`}>\n                        {thumbDescriptionTextId && (\n                            <span id={thumbDescriptionTextId}>\n                                {thumbDescriptionText}\n                            </span>\n                        )}\n                        <span id={thumbLabelTextId}>\n                            {resolvedAriaLabels[index]}\n                        </span>\n\n                        <input\n                            data-testid={`slider-input-${index}`}\n                            type=\"range\"\n                            min={getThumbMin(index)}\n                            max={getThumbMax(index)}\n                            step={step}\n                            value={thumbValue}\n                            aria-disabled={disabled || undefined}\n                            readOnly={readOnly}\n                            aria-labelledby={concatIds(\n                                ariaLabelledBy,\n                                thumbLabelTextId\n                            )}\n                            aria-describedby={getThumbDescriptionIds(\n                                thumbDescriptionTextId\n                            )}\n                            aria-valuetext={getValueText(thumbValue)}\n                            aria-invalid={ariaInvalid}\n                            onFocus={() => setFocusedThumbIndex(index)}\n                            onBlur={() => setFocusedThumbIndex(null)}\n                            onChange={(event) =>\n                                handleNativeRangeChange(event, index)\n                            }\n                            onKeyDown={(event) => {\n                                handleThumbKeyDown(event, index);\n                            }}\n                        />\n                    </VisuallyHidden>\n                );\n            })}\n\n            {/* Native range inputs provide the accessible interaction model.\n                The visible react-slider is presentation-only. */}\n            <ReactSlider\n                step={step}\n                min={min}\n                max={max}\n                value={selection}\n                disabled={disabled || readOnly}\n                onChange={handleChange}\n                onAfterChange={handleChangeEnd}\n                minDistance={minRange}\n                aria-hidden\n                className={styles.slider}\n                renderThumb={(thumbProps, state) => {\n                    return (\n                        <Thumb\n                            data-testid={`slider-thumb-${state.index}`}\n                            {...thumbProps}\n                            key={thumbProps.key}\n                            tabIndex={-1}\n                            aria-hidden\n                            focused={focusedThumbIndex === state.index}\n                            disabled={disabled}\n                            readOnly={readOnly}\n                        />\n                    );\n                }}\n                renderTrack={(trackProps, state) => {\n                    return (\n                        <Track\n                            data-testid={`slider-track-${state.index}`}\n                            {...trackProps}\n                            key={trackProps.key}\n                            color={trackColors[state.index]}\n                        />\n                    );\n                }}\n            />\n\n            {showSliderLabels && (\n                <div className={styles.labelContainer}>\n                    <div>{formatLabel(min)}</div>\n                    <div>{formatLabel(max)}</div>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["_a","id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","ariaInvalid","ariaLabelledBy","ariaDescribedBy","renderSliderLabel","onChange","onChangeEnd","className","otherProps","__rest","selection","setSelection","useState","initialiseSelection","focusedThumbIndex","setFocusedThumbIndex","internalId","useId","trackColors","defaultColors","inactiveColor","Colour","activeColor","index","push","getDefaultColors","Array","fill","map","_","i","getTrackColors","indicatorTextId","instructionTextId","resolvedAriaLabels","from","length","getDefaultAriaLabel","useEffect","handleThumbKeyDown","event","message","key","currentValue","previousValue","undefined","nextValue","currentLabel","previousLabel","nextLabel","includes","isIncreaseKey","getSliderTypeText","getSliderTargetText","isDecreaseKey","getBlockedMovementMessage","clearAnnouncer","announce","handleNativeRangeChange","nextRawValue","Number","currentTarget","nextSelection","values","minAllowed","getThumbMin","maxAllowed","getThumbMax","Math","clampValueForThumb","label","toLowerCase","replace","formatLabel","_jsxs","Typography","BodyBL","styles.labelText","children","Object","assign","role","clsx","styles.wrapper","_jsx","VisuallyHidden","styles.indicatorLabelContainer","formattedSelection","formatIndicationLabel","thumbValue","thumbLabelTextId","thumbDescriptionText","getThumbDescriptionText","thumbDescriptionTextId","type","concatIds","thumbDescriptionId","onFocus","onBlur","onKeyDown","ReactSlider","onAfterChange","val","newSelection","minDistance","styles.slider","renderThumb","thumbProps","state","_createElement","Thumb","tabIndex","focused","renderTrack","trackProps","Track","color","styles.labelContainer"],"mappings":"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"}

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

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

package/cjs/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":"0OA4BO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;EAIpBC,EAAiBF,EAAAA,QAAOC,GAAG;kBACtBE,EAAAA,WAAW;;;WAGlBA,EAAAA,WAAW;EAGTC,EAA0BJ,EAAAA,QAAOC,GAAG;qBAC5BE,EAAAA,WAAW;EAGnBE,EAAYL,EAAAA,QAAOM,aAAWC,OAAO;;EAIrCC,EAASR,EAAAA,QAAOS,EAAAA,QAAY;;EAI5BC,EAAOV,EAAAA,QAAOC,GAAoB;;;;;;;;MAQxCU,GACKA,EAAMC,UACCC,KAAG;;cAITF,EAAMG,eAAX,EACWD,KAAG;;;;;;;;;;;;;;;;;4BAmBME,EAAAA,UAAc;sBACpBC,EAAAA,UAAU;kBACdC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;cAC9CN,GACCA,EAAMC,UACAG,EAAAA,UAAU,4BACVA,EAAAA,UAAU;yBACPG,EAAAA,UAAgB;;EAI5BC,EAAcnB,EAAAA,QAAOC,GAAG;;;;;;cAMvBS;;mBAEKO,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;cAChDF,EAAAA,UAAU;;EAIXK,EAAcpB,EAAAA,QAAOC,GAAoB;;;;qBAIjCiB,EAAAA,UAAgB;;kBAElBP,GACPA,EAAMU,QAAkC,mBAAjBV,EAAMU,OACtBV,EAAMU,OAAOV,GAEbA,EAAMU,QAAUN,EAAAA,UAAU,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":["track","backgroundColor"],"mappings":"iIAsBoC,wBAanB,gCA0BQ,mCAQG,kCAtDD,6BAWL,yBAIH,+BA+CK,+BAaA,yBAtFF,CAClBA,MAAO,CACHC,gBACI,0EAIQ"}

package/cjs/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/cjs/input-range-slider/slider-components.js

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

package/cjs/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":"2wBAcA,MAiCaA,EAAQC,EAAAA,YAjCF,CACfC,EAQAC,KARA,IAAAC,QACIA,EAAOC,SACPA,EAAQC,SACRA,EAAQC,UACRA,EAASC,MACTA,GAAKN,EACFO,EAAUC,EAAAA,OAAAR,EANjB,uDAUA,MAAMS,EAAWC,EAAAA,OAAuB,MAIxC,OAFAC,EAAAA,cAAcF,EAAUH,GAGpBM,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIb,IAAKc,EAAAA,UAAUN,EAAUR,IACrBM,EAAU,CACdF,UAAWW,EAAAA,QAAKC,EAAAA,YAAoBZ,GAAU,eAChCH,EAAU,YAASgB,EAASC,SAE1CP,EAAAA,IAAA,MAAA,CACIP,UAAWW,UACPI,EAAAA,KACAjB,GAAYkB,EAAAA,cACXlB,IAAaC,GAAYkB,uBAGhC,IA+BDC,EAAQxB,EAAAA,YArBF,CACfC,EACAC,SADAuB,MAAEA,EAAKnB,UAAEA,EAASC,MAAEA,KAAUC,EAAUC,EAAAA,OAAAR,EAAxC,CAAA,QAAA,YAAA,UAGA,MAAMyB,EAAWf,EAAAA,OAAuB,MAQxC,OANAC,EAAAA,cAAcc,EAAU,CACpB,CAACC,EAAAA,OAAcC,MAAMC,iBAAkBJ,IAG3Cb,EAAAA,cAAcc,EAAUnB,GAGpBM,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQP,EAAU,CACdF,UAAWW,EAAAA,QAAKa,EAAAA,YAAoBxB,GACpCJ,IAAKc,EAAAA,UAAUU,EAAUxB,KAC3B"}

package/cjs/input-select/input-select.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react");require("styled-components");var t=require("../util/string-helper.js");require("../v3_theme/index.js"),require("../shared/dropdown-list-v2/dropdown-label.styles.js");var n=require("../shared/dropdown-list-v2/dropdown-list.js"),s=require("../shared/dropdown-list-v2/dropdown-list-state.js"),a=require("../shared/dropdown-list-v2/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var i=require("../util/simple-id-generator.js"),l=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),o=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list-v2/dropdown-list.styles.js"),require("../shared/dropdown-list-v2/dropdown-search.js"),require("../shared/dropdown-list-v2/nested-dropdown-list.styles.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js");var d=require("../shared/input-wrapper/input-wrapper.js");exports.InputSelect=({selectedOption:u,placeholder:c="Select",options:p,disabled:h,error:m,className:j,"data-testid":x,id:w,"aria-labelledby":v,"aria-describedby":b,"aria-invalid":q,enableSearch:y=!1,searchFunction:f,searchPlaceholder:g,valueExtractor:S,valueToStringFunction:T,listExtractor:I,displayValueExtractor:L,onSelectOption:R,onShowOptions:E,onHideOptions:O,onRetry:D,optionsLoadState:C="success",optionTruncationType:$="end",renderCustomSelectedOption:B,renderListItem:N,hideNoResultsDisplay:_,noResultsDescription:A,customLabels:F,renderCustomCallToAction:k,onBlur:H,variant:P="default",readOnly:W,alignment:G,dropdownZIndex:V,dropdownRootNode:Z,dropdownWidth:z})=>{const[J,K]=r.useState(u),[M,Q]=r.useState(!1),[U,X]=r.useState(!1),[Y]=r.useState((()=>i.SimpleIdGenerator.generate())),ee=r.useRef(null),re=r.useRef(null),te=r.useRef(null);r.useEffect((()=>{K(u)}),[u]);const ne=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),K(e),Q(!1),de(!1),null==R||R(e,r)},se=()=>{M&&(Q(!1),de(!1))},ae=()=>{U||M||X(!0)},ie=e=>{U&&!M&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==H||H())},le=()=>{var e;if(!J)return"";if(L)return L(J);if(S){const r=S(J);return T?T(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return J.toString()},oe=e=>{if("middle"===$){let r=0;return te&&te.current&&(r=te.current.getBoundingClientRect().width),t.StringHelper.truncateOneLine(e,r,120,8)}return e},de=e=>{e?null==E||E():null==O||O()};return e.jsx(s.DropdownListState,{children:e.jsx(o.ElementWithDropdown,{enabled:!W&&!h,isOpen:M,renderElement:()=>e.jsx(d.InputBox,{className:j,"data-testid":x,id:w,ref:ee,tabIndex:-1,onFocus:ae,onBlur:ie,$focused:U,$disabled:h,$readOnly:W,$error:m,children:e.jsx(a.ExpandableElement,{ref:re,disabled:h,expanded:M,listboxId:Y,popupRole:"listbox",readOnly:W,variant:P,"aria-labelledby":v,"aria-describedby":b,"aria-invalid":q,children:e.jsx(l.LabelContainer,{ref:te,$disabled:h,children:J?B?B(J):e.jsx(l.ValueLabel,{$truncateType:$,$variant:P,children:oe(le())}):e.jsx(l.PlaceholderLabel,{$truncateType:$,$variant:P,children:c})})})}),renderDropdown:()=>e.jsx(n.DropdownList,{listboxId:Y,listItems:p,onSelectItem:ne,onDismiss:se,valueExtractor:S,listExtractor:I,enableSearch:y,searchPlaceholder:g,searchFunction:f,selectedItems:J?[J]:[],onRetry:D,itemsLoadState:C,itemTruncationType:$,renderListItem:N,hideNoResultsDisplay:_,noResultsDescription:A,customLabels:F,renderCustomCallToAction:k,variant:P,width:z,matchElementWidth:!0}),onOpen:()=>{Q(!0),de(!0),X(!0)},onClose:e=>{Q(!1),de(!1),"click"!==e&&(X(!1),null==H||H())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1),de(!1)},clickToToggle:!0,offset:8,alignment:G,fitAvailableHeight:!0,customZIndex:V,rootNode:Z})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var t=require("../util/simple-id-generator.js"),i=require("../util/string-helper.js");require("@react-aria/live-announcer"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var s=require("../shared/dropdown-list/dropdown-list.js"),n=require("../shared/dropdown-list/dropdown-list-state.js"),a=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../_virtual/_tslib.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var o=require("../shared/dropdown-wrapper/element-with-dropdown.js"),l=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1qveyb9.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var d=require("../shared/dropdown-wrapper/dropdown-wrapper.js");exports.InputSelect=({selectedOption:u,placeholder:c="Select",options:p,disabled:h,error:q,className:m,"data-testid":j,id:x,"aria-labelledby":w,"aria-describedby":b,"aria-invalid":f,enableSearch:v=!1,searchFunction:g,searchPlaceholder:y,valueExtractor:_,valueToStringFunction:S,listExtractor:T,displayValueExtractor:I,onSelectOption:A,onShowOptions:C,onHideOptions:L,onRetry:R,optionsLoadState:k="success",optionTruncationType:E="end",renderCustomSelectedOption:O,renderListItem:D,hideNoResultsDisplay:H,noResultsDescription:P,customLabels:B,renderCustomCallToAction:N,onBlur:G,variant:F="default",readOnly:M,alignment:W,dropdownZIndex:V,dropdownRootNode:Z,dropdownWidth:z})=>{const[J,K]=r.useState(u),[Q,U]=r.useState(!1),[X,Y]=r.useState(!1),$=t.useId(),ee=r.useRef(null),re=r.useRef(null),te=r.useRef(null);r.useEffect((()=>{K(u)}),[u]);const ie=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),K(e),U(!1),de(!1),null==A||A(e,r)},se=()=>{Q&&(U(!1),de(!1))},ne=()=>{X||Q||Y(!0)},ae=e=>{X&&!Q&&ee.current&&!ee.current.contains(e.relatedTarget)&&(Y(!1),null==G||G())},oe=()=>{var e;if(!J)return"";if(I)return I(J);if(_){const r=_(J);return S?S(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return J.toString()},le=e=>{if("middle"===E){let r=0;return te&&te.current&&(r=te.current.getBoundingClientRect().width),i.StringHelper.truncateOneLine(e,r,120,8)}return e},de=e=>{e?null==C||C():null==L||L()};return e.jsx(n.DropdownListState,{children:e.jsx(o.ElementWithDropdown,{enabled:!M&&!h,isOpen:Q,renderElement:()=>e.jsx(l.InputBox,{className:m,"data-testid":j,id:x,ref:ee,tabIndex:-1,onFocus:ne,onBlur:ae,focused:X,disabled:h,readOnly:M,error:q,children:e.jsx(a.ExpandableElement,{ref:re,disabled:h,expanded:Q,listboxId:$,popupRole:"listbox",readOnly:M,variant:F,"aria-labelledby":w,"aria-describedby":b,"aria-invalid":f,children:e.jsx(d.LabelContainer,{ref:te,disabled:h,children:J?O?O(J):e.jsx(d.ValueLabel,{variant:F,truncateType:E,children:le(oe())}):e.jsx(d.PlaceholderLabel,{variant:F,truncateType:E,children:c})})})}),renderDropdown:()=>e.jsx(s.DropdownList,{listboxId:$,listItems:p,onSelectItem:ie,onDismiss:se,valueExtractor:_,listExtractor:T,enableSearch:v,searchPlaceholder:y,searchFunction:g,selectedItems:J?[J]:[],onRetry:R,itemsLoadState:k,itemTruncationType:E,renderListItem:D,hideNoResultsDisplay:H,noResultsDescription:P,customLabels:B,renderCustomCallToAction:N,variant:F,width:z,matchElementWidth:!0}),onOpen:()=>{U(!0),de(!0),Y(!0)},onClose:e=>{U(!1),de(!1),"click"!==e&&(Y(!1),null==G||G())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),U(!1),de(!1)},clickToToggle:!0,offset:8,alignment:W,fitAvailableHeight:!0,customZIndex:V,rootNode:Z})})};
 //# sourceMappingURL=input-select.js.map

package/cjs/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":["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":["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/cjs/input-textarea/textarea-counter.js

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

package/cjs/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":["value","maxLength","renderCustomCounter","counterLabel","setCounterLabel","useState","useEffect","getCounterLabel","toString","length","remainingLength","toLocaleString","_jsx","_Fragment","children","React","isValidElement","CounterLabel"],"mappings":"sNAa+B,EAC3BA,QACAC,YACAC,0BAKA,MAAOC,EAAcC,GAAmBC,EAAAA,SAEtC,IAKFC,EAAAA,WAAU,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,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACKC,EAAAA,QAAMC,eAAeb,GAAa,EAG/BS,EAAAA,IAACK,EAAAA,aAAY,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":["value","maxLength","renderCustomCounter","counterLabel","setCounterLabel","useState","useEffect","getCounterLabel","toString","length","remainingLength","toLocaleString","_jsx","_Fragment","children","React","isValidElement","className","styles.counterLabel"],"mappings":"wNAa+B,EAC3BA,QACAC,YACAC,0BAKA,MAAOC,EAAcC,GAAmBC,EAAAA,SAEtC,IAKFC,EAAAA,WAAU,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,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACKC,EAAAA,QAAMC,eAAeb,GAAa,EAG/BS,EAAAA,IAAA,IAAA,CAAGK,UAAWC,EAAAA,aAAmB,cAAc,gBAAeJ,SACzDX,KAGV"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./textarea-counter.styles_adg5h1.css");exports.counterLabel="c1d4l1yp";
+//# sourceMappingURL=textarea-counter.styles.js.map

package/cjs/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":[],"mappings":"gHAIyB"}

package/cjs/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/cjs/input-textarea/textarea.js

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

package/cjs/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":"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"}
+{"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":"uRAUA,MAmIaA,EAAeC,EAAAA,QAAMC,YAnIJ,CAC1BC,EAaAC,SAbAC,UACIA,EAASC,SACTA,EAAQC,MACRA,EAAKC,UACLA,EAASC,SACTA,EAAQC,OACRA,EAAMC,SACNA,EAAQC,KACRA,EAAO,EAACC,eACRA,EAAcC,MACdA,GAAKX,EACFY,EAAUC,EAAAA,OAAAb,EAXjB,CAAA,YAAA,WAAA,QAAA,YAAA,WAAA,SAAA,WAAA,OAAA,iBAAA,UAeA,MAAOc,EAAYC,GAAiBC,EAAAA,SAASL,GAE7CM,EAAAA,WAAU,KACNF,EAAcJ,EAAM,GACrB,CAACA,IAuFJ,OACIO,MAAA,WAAAC,OAAAC,OAAA,CACInB,IAAKA,EACLE,SAAUA,EACVQ,MAlCGJ,EAASA,GAAUO,QAAAA,EAAc,IAAMA,EAmC1CR,SA1Fce,IAClB,IAAIC,EAAWD,EAAME,OAAOZ,MAC5B,GAAIJ,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,EAAmBrB,EACnBA,EAAemB,GACfA,EAON,GAJAd,EAAcgB,GACdV,EAAME,OAAOZ,MAAQJ,EAASwB,EAG1BzB,EAAU,CACV,MAAM0B,EAAcb,OAAAC,OAAAD,OAAAC,OAAA,GACbC,GAAK,CACRE,OAAMJ,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAOC,EAAME,QAAM,CAAEZ,MAAOoB,MAEtCzB,EACI0B,EAER,CACJ,KAAO,CACH,MAAMD,EAAmBrB,EACnBA,EAAeY,QAAAA,EAAY,IAC3BA,EAENP,EAAcgB,GACdV,EAAME,OAAOZ,MAAQoB,EACjBzB,GAAUA,EAASe,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,EAUIlB,SAAUA,EACVN,UAAWoC,UACPC,EAAAA,QACC/B,GAAYgC,EAAAA,iBACRrC,GAAYsC,EAAAA,iBACZrC,GAASsC,EAAAA,aACdxC,GAEJO,KAAMA,EACNJ,UACIE,GAAUF,EAAYE,EAAOmB,OAASrB,EAAYA,GAElDO,GACN,IA0EG+B,EAAW7C,EAAAA,QAAMC,YAhEJ,CACtBC,EAWAC,SAXAU,MACIA,EAAKR,SACLA,EAAQM,KACRA,EAAO,EAACH,SACRA,EAAQI,eACRA,EAAcH,OACdA,EAAMF,UACNA,EAASuC,oBACTA,KACGhC,EAAUC,EAAAA,OAAAb,EATjB,CAAA,QAAA,WAAA,OAAA,WAAA,iBAAA,SAAA,YAAA,wBAgBA,MAAOc,EAAYC,GAAiBC,EAAAA,SAElCL,GAKFM,EAAAA,WAAU,KACNF,EAAcJ,EAAM,GACrB,CAACA,IAcJ,OACIkC,EAAAA,KAAA,MAAA,CAAK3C,UAAW4C,EAAAA,QAAcC,SAAA,CAC1B7B,EAAAA,IAACrB,EAAYsB,OAAAC,OAAA,CACTnB,IAAKA,EACLE,SAAUA,EACVQ,MAAOG,EACPL,KAAMA,GAAQ,EACdH,SAhBUe,IAClB,MAAMC,EAAWD,EAAME,OAAOZ,MAC9BI,EAAcO,GACVhB,GAAUA,EAASe,EAAM,EAcrBd,OAAQA,EACRG,eAAgBA,EAChBL,UAAWA,GACPO,IAEPP,GACGa,EAAAA,IAAC8B,EAAAA,gBAAe,CACZrC,MAAOG,EACPT,UAAWA,EACXuC,oBAAqBA,MAG3B"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./textarea.styles_g0zgyq.css");exports.element="e10c6rk9",exports.elementDisabled="e9uwuyt",exports.elementError="etmlvbn",exports.elementReadOnly="e1kovz0t",exports.wrapper="w1xqauhq";
+//# sourceMappingURL=textarea.styles.js.map

package/cjs/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":[],"mappings":"mGASoB,mCAqDQ,+BAUH,kCArBG,2BA/CR"}

package/cjs/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/cjs/language-switcher/data.js

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

package/cjs/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":["en","zh","ms","ta"],"mappings":"gCAYI,0FAHkD,CAAC,KAAM,KAAM,KAAM,mCAPC,CACtEA,GAAI,UACJC,GAAI,KACJC,GAAI,SACJC,GAAI"}

package/cjs/language-switcher/dropdown-variant.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons/language"),a=require("@lifesg/react-icons/tick"),s=require("clsx"),n=require("react"),i=require("../shared/dropdown-list/dropdown-list.styles.js"),l=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var o=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var d=require("./data.js"),c=require("./dropdown-variant.style.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=u(s);exports.DropdownVariant=s=>{var{selectedLanguage:u,onSelectLanguage:f,testId:g}=s,A=e.__rest(s,["selectedLanguage","onSelectLanguage","testId"]);const[v,j]=n.useState(!1),[x,b]=n.useState(-1),m=n.useRef(null),D=n.useRef([]),E=`listbox-${o.useId()}`;n.useEffect((()=>{if(v){const e=d.LANGUAGE_CODES.indexOf(u),t=e>=0?e:0;b(t),setTimeout((()=>{var e;null===(e=D.current[t])||void 0===e||e.focus()}),0)}else b(-1)}),[v,u]);const L=e=>{var t;f(e),j(!1),null===(t=m.current)||void 0===t||t.focus()},h=e=>{var t,r,a,s;switch(e.key){case"ArrowDown":{e.preventDefault();const r=Math.min(x+1,d.LANGUAGE_CODES.length-1);b(r),null===(t=D.current[r])||void 0===t||t.focus();break}case"ArrowUp":{e.preventDefault();const t=Math.max(x-1,0);b(t),null===(r=D.current[t])||void 0===r||r.focus();break}case"Home":e.preventDefault(),b(0),null===(a=D.current[0])||void 0===a||a.focus();break;case"End":{e.preventDefault();const t=d.LANGUAGE_CODES.length-1;b(t),null===(s=D.current[t])||void 0===s||s.focus();break}case"Enter":case" ":e.preventDefault(),x>=0&&L(d.LANGUAGE_CODES[x])}};return t.jsx("div",Object.assign({"data-testid":g},A,{children:t.jsx(l.ElementWithDropdown,{enabled:!0,isOpen:v,renderElement:()=>t.jsxs(c.StyledExpandableElement,{ref:m,disabled:!1,expanded:v,listboxId:E,popupRole:"listbox",readOnly:!1,"aria-label":`${d.ARIA_LABEL}, ${d.LANGUAGE_DISPLAY_MAP[u]}`,"data-testid":`${g}--trigger`,children:[t.jsx(c.LanguageIconWrapper,{"aria-hidden":!0,children:t.jsx(r.LanguageIcon,{})}),d.LANGUAGE_DISPLAY_MAP[u]]}),renderDropdown:({elementWidth:e,styles:r,setFloatingRef:s,getFloatingProps:n})=>t.jsx(c.DropdownPanel,Object.assign({ref:s,style:Object.assign(Object.assign({},r),{width:e}),"data-testid":`${g}--panel`},n(),{children:t.jsx(c.DropdownList,{role:"listbox",id:E,"aria-label":d.ARIA_LABEL,onKeyDown:h,children:d.LANGUAGE_CODES.map(((e,r)=>{const s=e===u,n=r===x;return t.jsxs(c.DropdownItem,{ref:e=>{D.current[r]=e},role:"option",lang:e,className:p.default(i.listItem,n&&s&&i.listItemActiveSelected,n&&!s&&i.listItemActive),"aria-selected":s,tabIndex:n?0:-1,$selected:s,onClick:()=>L(e),"data-testid":`${g}--item-${e}`,children:[s?t.jsx(a.TickIcon,{className:p.default(i.baseIndicatorStyle,i.selectedIndicator),"aria-hidden":!0}):t.jsx("div",{className:i.baseIndicatorStyle}),d.LANGUAGE_DISPLAY_MAP[e]]},e)}))})})),onOpen:()=>{j(!0)},onClose:()=>{j(!1)},onDismiss:()=>{var e;j(!1),null===(e=m.current)||void 0===e||e.focus()},clickToToggle:!0,offset:8})}))};
+//# sourceMappingURL=dropdown-variant.js.map

package/cjs/language-switcher/dropdown-variant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-variant.js","sources":["../../../src/language-switcher/dropdown-variant.tsx"],"sourcesContent":["import { LanguageIcon } from \"@lifesg/react-icons/language\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n    baseIndicatorStyle,\n    listItem,\n    listItemActive,\n    listItemActiveSelected,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { useId } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport {\n    DropdownItem,\n    DropdownList,\n    DropdownPanel,\n    LanguageIconWrapper,\n    selectedIndicator,\n    StyledExpandableElement,\n} from \"./dropdown-variant.style\";\nimport type { VariantInternalProps } from \"./internal-types\";\nimport type { LanguageSwitcherCode } from \"./types\";\n\nexport const DropdownVariant = ({\n    selectedLanguage,\n    onSelectLanguage,\n    testId,\n    ...otherProps\n}: VariantInternalProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState(-1);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const itemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    const id = useId();\n    const listboxId = `listbox-${id}`;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (isOpen) {\n            const selectedIdx = LANGUAGE_CODES.indexOf(selectedLanguage);\n            const idx = selectedIdx >= 0 ? selectedIdx : 0;\n            setFocusedIndex(idx);\n            setTimeout(() => {\n                itemRefs.current[idx]?.focus();\n            }, 0);\n        } else {\n            setFocusedIndex(-1);\n        }\n    }, [isOpen, selectedLanguage]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOpen = () => {\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleItemSelect = (code: LanguageSwitcherCode) => {\n        onSelectLanguage(code);\n        setIsOpen(false);\n        triggerRef.current?.focus();\n    };\n\n    const handleListKeyDown = (event: React.KeyboardEvent) => {\n        switch (event.key) {\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const next = Math.min(\n                    focusedIndex + 1,\n                    LANGUAGE_CODES.length - 1\n                );\n                setFocusedIndex(next);\n                itemRefs.current[next]?.focus();\n                break;\n            }\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const prev = Math.max(focusedIndex - 1, 0);\n                setFocusedIndex(prev);\n                itemRefs.current[prev]?.focus();\n                break;\n            }\n            case \"Home\": {\n                event.preventDefault();\n                setFocusedIndex(0);\n                itemRefs.current[0]?.focus();\n                break;\n            }\n            case \"End\": {\n                event.preventDefault();\n                const last = LANGUAGE_CODES.length - 1;\n                setFocusedIndex(last);\n                itemRefs.current[last]?.focus();\n                break;\n            }\n            case \"Enter\":\n            case \" \": {\n                event.preventDefault();\n                if (focusedIndex >= 0) {\n                    handleItemSelect(LANGUAGE_CODES[focusedIndex]);\n                }\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderElement = () => (\n        <StyledExpandableElement\n            ref={triggerRef}\n            disabled={false}\n            expanded={isOpen}\n            listboxId={listboxId}\n            popupRole=\"listbox\"\n            readOnly={false}\n            aria-label={`${ARIA_LABEL}, ${LANGUAGE_DISPLAY_MAP[selectedLanguage]}`}\n            data-testid={`${testId}--trigger`}\n        >\n            <LanguageIconWrapper aria-hidden>\n                <LanguageIcon />\n            </LanguageIconWrapper>\n            {LANGUAGE_DISPLAY_MAP[selectedLanguage]}\n        </StyledExpandableElement>\n    );\n\n    const renderDropdown = ({\n        elementWidth,\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <DropdownPanel\n            ref={setFloatingRef}\n            style={{ ...styles, width: elementWidth }}\n            data-testid={`${testId}--panel`}\n            {...getFloatingProps()}\n        >\n            <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                    return (\n                        <DropdownItem\n                            key={code}\n                            ref={(el: HTMLLIElement | null) => {\n                                itemRefs.current[index] = el;\n                            }}\n                            role=\"option\"\n                            lang={code}\n                            className={clsx(\n                                listItem,\n                                isFocused &&\n                                    isSelected &&\n                                    listItemActiveSelected,\n                                isFocused && !isSelected && listItemActive\n                            )}\n                            aria-selected={isSelected}\n                            tabIndex={isFocused ? 0 : -1}\n                            $selected={isSelected}\n                            onClick={() => handleItemSelect(code)}\n                            data-testid={`${testId}--item-${code}`}\n                        >\n                            {isSelected ? (\n                                <TickIcon\n                                    className={clsx(\n                                        baseIndicatorStyle,\n                                        selectedIndicator\n                                    )}\n                                    aria-hidden\n                                />\n                            ) : (\n                                <div className={baseIndicatorStyle} />\n                            )}\n                            {LANGUAGE_DISPLAY_MAP[code]}\n                        </DropdownItem>\n                    );\n                })}\n            </DropdownList>\n        </DropdownPanel>\n    );\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    return (\n        <div data-testid={testId} {...otherProps}>\n            <ElementWithDropdown\n                enabled={true}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n            />\n        </div>\n    );\n};\n"],"names":["_a","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","triggerRef","useRef","itemRefs","listboxId","useId","useEffect","selectedIdx","LANGUAGE_CODES","indexOf","idx","setTimeout","current","focus","handleItemSelect","code","handleListKeyDown","event","key","preventDefault","next","Math","min","length","prev","max","_b","_c","last","_d","_jsx","children","ElementWithDropdown","enabled","renderElement","_jsxs","StyledExpandableElement","ref","disabled","expanded","popupRole","readOnly","ARIA_LABEL","LANGUAGE_DISPLAY_MAP","LanguageIconWrapper","LanguageIcon","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","DropdownPanel","Object","assign","style","width","DropdownList","role","id","onKeyDown","map","index","isSelected","isFocused","DropdownItem","el","lang","className","clsx","listItem","listItemActiveSelected","listItemActive","tabIndex","$selected","onClick","TickIcon","baseIndicatorStyle","selectedIndicator","onOpen","onClose","onDismiss","clickToToggle","offset"],"mappings":"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"}