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

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

@@ -1,2 +1,2 @@
-"use strict";var e,t,n,r=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-down"),a=require("@lifesg/react-icons/chevron-up"),o=require("react"),s=require("../../util/string-helper.js"),c=require("../../util/time-helper.js"),u=require("../accessibility/index.js"),l=require("./timepicker-dropdown.styles.js");!function(e){e.HOUR_UP="hour-up",e.HOUR_DOWN="hour-down",e.MINUTE_UP="minute-up",e.MINUTE_DOWN="minute-down"}(e||(e={})),function(e){e.HOUR="hour",e.MINUTE="minute"}(t||(t={})),function(e){e.AM="am",e.PM="pm"}(n||(n={}));exports.TimepickerDropdown=({id:d,value:m,show:h,format:p,onChange:g,onCancel:x})=>{const b=c.TimeHelper.getTimeValues(p,m),[T,j]=o.useState(b.hour),[M,U]=o.useState(b.minute),[H,k]=o.useState(b.period),v=o.useRef(null),w=o.useRef(null);o.useEffect((()=>{if(h&&v.current&&v.current.focus({preventScroll:!0}),h){const{hour:e,minute:t,period:n}=c.TimeHelper.getTimeValues(p,m);j(e),U(t),k(n)}}),[h,m,p]),o.useEffect((()=>{const e=v.current,t=w.current;return e&&e.addEventListener("keydown",I),t&&t.addEventListener("keydown",I),()=>{e&&e.removeEventListener("keydown",I),t&&t.removeEventListener("keydown",I)}}),[]);const I=e=>{["Digit0","Digit1","Digit2","Digit3","Digit4","Digit5","Digit6","Digit7","Digit8","Digit9","Tab","Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.code)||["Backspace","0","1","2","3","4","5","6","7","8","9"].includes(e.key)||e.preventDefault()},D=o.useCallback((t=>{switch(t.currentTarget.name){case e.MINUTE_UP:U(c.TimeHelper.updateMinutes(M,"add"));break;case e.MINUTE_DOWN:U(c.TimeHelper.updateMinutes(M,"minus"));break;case e.HOUR_UP:j(c.TimeHelper.updateHours(T,"add"));break;case e.HOUR_DOWN:j(c.TimeHelper.updateHours(T,"minus"))}}),[T,M]),C=e=>{e.target.select()},f=e=>{const n=e.target.value;switch(e.target.name){case t.HOUR:n.length<=2&&j(n);break;case t.MINUTE:n.length<=2&&U(n)}},E=e=>{const n=parseInt(e.target.value);if(!isNaN(n))switch(e.target.name){case t.HOUR:{const t=n>23||n<0?b.hour:c.TimeHelper.convertHourTo12HourFormat(e.target.value);j(t);break}case t.MINUTE:{const t=n>59||n<0?b.minute:e.target.value;U(s.StringHelper.padValue(t));break}}},P=e=>{switch(e.target.name){case n.AM:k(c.EPeriod.AM);break;case n.PM:k(c.EPeriod.PM)}},N=e=>d?`${d}-${e}`:e;return r.jsx(l.StyledDiv,{children:r.jsxs(l.Container,{"data-testid":N("timepicker-dropdown"),inert:u.inertValue(!h),children:[r.jsxs(l.InputSection,{children:[r.jsxs(l.HourMinuteSection,{children:[r.jsxs(l.InputContainer,{children:[r.jsx(l.SwitchButton,{"aria-label":"increase hour",name:e.HOUR_UP,tabIndex:-1,onClick:D,"data-testid":N("hour-increment-button"),children:r.jsx(a.ChevronUpIcon,{})}),r.jsx(l.TimeInputBox,{children:r.jsx(l.TimeInput,{"aria-label":"hour",type:"number",name:t.HOUR,id:"hour",maxLength:2,pattern:"[0-9]{2}",ref:v,value:T,onFocus:C,onChange:f,onBlur:E,min:1,max:12,placeholder:"HH","data-testid":N("hour-input")})}),r.jsx(l.SwitchButton,{"aria-label":"decrease hour",name:e.HOUR_DOWN,tabIndex:-1,onClick:D,"data-testid":N("hour-decrement-button"),children:r.jsx(i.ChevronDownIcon,{})})]}),r.jsx(l.DividerLabel,{children:":"}),r.jsxs(l.InputContainer,{children:[r.jsx(l.SwitchButton,{"aria-label":"increase minute",name:e.MINUTE_UP,tabIndex:-1,onClick:D,"data-testid":N("minute-increment-button"),children:r.jsx(a.ChevronUpIcon,{})}),r.jsx(l.TimeInputBox,{children:r.jsx(l.TimeInput,{"aria-label":"minute",type:"number",name:t.MINUTE,id:"minute",maxLength:2,pattern:"[0-9]{2}",ref:w,value:M,onChange:f,onBlur:E,onFocus:C,min:0,max:59,placeholder:"MM","data-testid":N("minute-input")})}),r.jsx(l.SwitchButton,{"aria-label":"decrease minute",name:e.MINUTE_DOWN,tabIndex:-1,onClick:D,"data-testid":N("minute-decrement-button"),children:r.jsx(i.ChevronDownIcon,{})})]})]}),r.jsxs(l.TimePeriodSection,{children:[r.jsx(l.TimePeriodToggle,{checked:H===c.EPeriod.AM,name:n.AM,type:"radio",onChange:P,"data-testid":N("am-toggle"),"aria-label":"AM",children:"AM"}),r.jsx(l.TimePeriodToggle,{checked:H===c.EPeriod.PM,name:n.PM,type:"radio",onChange:P,"data-testid":N("pm-toggle"),"aria-label":"PM",children:"PM"})]})]}),r.jsxs(l.ControlSection,{children:[r.jsx(l.ControlButton,{"aria-label":"close selector",type:"button",styleType:"secondary",onClick:x,"data-testid":N("cancel-button"),children:"Cancel"}),r.jsx(l.ControlButton,{"aria-label":"confirm selection",type:"button",onClick:()=>{let e;e="24hr"===p?c.TimeHelper.convertTo24HourFormat({hour:T,minute:M,period:H}):`${T}:${M}${H}`,g(e)},disabled:""===T||""===M,"data-testid":N("confirm-button"),children:"Done"})]})]})})};
+"use strict";var e,t,n,i=require("react/jsx-runtime"),a=require("@lifesg/react-icons/chevron-down"),r=require("@lifesg/react-icons/chevron-up"),s=require("react"),o=require("../../button/button.js"),c=require("../../toggle/toggle.js"),l=require("../../typography/index.js"),u=require("../../util/string-helper.js"),d=require("../../util/time-helper.js"),m=require("../accessibility/index.js"),p=require("../clickable-icon/clickable-icon.js"),h=require("../input-wrapper/input-wrapper.js"),g=require("./timepicker-dropdown.styles.js");!function(e){e.HOUR_UP="hour-up",e.HOUR_DOWN="hour-down",e.MINUTE_UP="minute-up",e.MINUTE_DOWN="minute-down"}(e||(e={})),function(e){e.HOUR="hour",e.MINUTE="minute"}(t||(t={})),function(e){e.AM="am",e.PM="pm"}(n||(n={}));exports.TimepickerDropdown=({id:b,value:x,show:N,format:j,onChange:v,onCancel:T})=>{const k=d.TimeHelper.getTimeValues(j,x),[I,M]=s.useState(k.hour),[U,w]=s.useState(k.minute),[H,C]=s.useState(k.period),y=s.useRef(null),D=s.useRef(null);s.useEffect((()=>{if(N&&y.current&&y.current.focus({preventScroll:!0}),N){const{hour:e,minute:t,period:n}=d.TimeHelper.getTimeValues(j,x);M(e),w(t),C(n)}}),[N,x,j]),s.useEffect((()=>{const e=y.current,t=D.current;return e&&e.addEventListener("keydown",f),t&&t.addEventListener("keydown",f),()=>{e&&e.removeEventListener("keydown",f),t&&t.removeEventListener("keydown",f)}}),[]);const f=e=>{["Digit0","Digit1","Digit2","Digit3","Digit4","Digit5","Digit6","Digit7","Digit8","Digit9","Tab","Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.code)||["Backspace","0","1","2","3","4","5","6","7","8","9"].includes(e.key)||e.preventDefault()},B=s.useCallback((t=>{switch(t.currentTarget.name){case e.MINUTE_UP:w(d.TimeHelper.updateMinutes(U,"add"));break;case e.MINUTE_DOWN:w(d.TimeHelper.updateMinutes(U,"minus"));break;case e.HOUR_UP:M(d.TimeHelper.updateHours(I,"add"));break;case e.HOUR_DOWN:M(d.TimeHelper.updateHours(I,"minus"))}}),[I,U]),E=e=>{e.target.select()},P=e=>{const n=e.target.value;switch(e.target.name){case t.HOUR:n.length<=2&&M(n);break;case t.MINUTE:n.length<=2&&w(n)}},O=e=>{const n=parseInt(e.target.value);if(!isNaN(n))switch(e.target.name){case t.HOUR:{const t=n>23||n<0?k.hour:d.TimeHelper.convertHourTo12HourFormat(e.target.value);M(t);break}case t.MINUTE:{const t=n>59||n<0?k.minute:e.target.value;w(u.StringHelper.padValue(t));break}}},q=e=>{switch(e.target.name){case n.AM:C(d.EPeriod.AM);break;case n.PM:C(d.EPeriod.PM)}},R=e=>b?`${b}-${e}`:e;return i.jsx("div",{className:g.root,children:i.jsxs("div",{className:g.container,"data-testid":R("timepicker-dropdown"),inert:m.inertValue(!N),children:[i.jsxs("div",{className:g.inputSection,children:[i.jsxs("div",{className:g.hourMinuteSection,children:[i.jsxs("div",{className:g.inputContainer,children:[i.jsx(p.ClickableIcon,{className:g.switchButton,"aria-label":"increase hour",name:e.HOUR_UP,tabIndex:-1,onClick:B,"data-testid":R("hour-increment-button"),children:i.jsx(r.ChevronUpIcon,{})}),i.jsx(h.InputBox,{className:g.timeInputBox,children:i.jsx(h.BasicInput,{className:g.timeInput,"aria-label":"hour",type:"number",name:t.HOUR,id:"hour",maxLength:2,pattern:"[0-9]{2}",ref:y,value:I,onFocus:E,onChange:P,onBlur:O,min:1,max:12,placeholder:"HH","data-testid":R("hour-input")})}),i.jsx(p.ClickableIcon,{className:g.switchButton,"aria-label":"decrease hour",name:e.HOUR_DOWN,tabIndex:-1,onClick:B,"data-testid":R("hour-decrement-button"),children:i.jsx(a.ChevronDownIcon,{})})]}),i.jsx(l.Typography.BodyBL,{className:g.dividerLabel,children:":"}),i.jsxs("div",{className:g.inputContainer,children:[i.jsx(p.ClickableIcon,{className:g.switchButton,"aria-label":"increase minute",name:e.MINUTE_UP,tabIndex:-1,onClick:B,"data-testid":R("minute-increment-button"),children:i.jsx(r.ChevronUpIcon,{})}),i.jsx(h.InputBox,{className:g.timeInputBox,children:i.jsx(h.BasicInput,{className:g.timeInput,"aria-label":"minute",type:"number",name:t.MINUTE,id:"minute",maxLength:2,pattern:"[0-9]{2}",ref:D,value:U,onChange:P,onBlur:O,onFocus:E,min:0,max:59,placeholder:"MM","data-testid":R("minute-input")})}),i.jsx(p.ClickableIcon,{className:g.switchButton,"aria-label":"decrease minute",name:e.MINUTE_DOWN,tabIndex:-1,onClick:B,"data-testid":R("minute-decrement-button"),children:i.jsx(a.ChevronDownIcon,{})})]})]}),i.jsxs("div",{className:g.timePeriodSection,children:[i.jsx(c.Toggle,{className:g.timePeriodToggle,checked:H===d.EPeriod.AM,name:n.AM,type:"radio",onChange:q,"data-testid":R("am-toggle"),"aria-label":"AM",children:"AM"}),i.jsx(c.Toggle,{className:g.timePeriodToggle,checked:H===d.EPeriod.PM,name:n.PM,type:"radio",onChange:q,"data-testid":R("pm-toggle"),"aria-label":"PM",children:"PM"})]})]}),i.jsxs("div",{className:g.controlSection,children:[i.jsx(o.Button,{className:g.controlButton,sizeType:"small",type:"button",onClick:()=>{let e;e="24hr"===j?d.TimeHelper.convertTo24HourFormat({hour:I,minute:U,period:H}):`${I}:${U}${H}`,v(e)},disabled:""===I||""===U,"data-testid":R("confirm-button"),children:"Done"}),i.jsx(o.Button,{className:g.controlButton,sizeType:"small",type:"button",styleType:"secondary",onClick:T,"data-testid":R("cancel-button"),children:"Cancel"})]})]})})};
 //# sourceMappingURL=timepicker-dropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"timepicker-dropdown.js","sources":["../../../../src/shared/timepicker-dropdown/timepicker-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { StringHelper } from \"../../util/string-helper\";\nimport type { TimeFormat } from \"../../util/time-helper\";\nimport { EPeriod, TimeHelper } from \"../../util/time-helper\";\nimport { inertValue } from \"../accessibility\";\nimport {\n    Container,\n    ControlButton,\n    ControlSection,\n    DividerLabel,\n    HourMinuteSection,\n    InputContainer,\n    InputSection,\n    StyledDiv,\n    SwitchButton,\n    TimeInput,\n    TimeInputBox,\n    TimePeriodSection,\n    TimePeriodToggle,\n} from \"./timepicker-dropdown.styles\";\n\nenum EInputButtonName {\n    HOUR_UP = \"hour-up\",\n    HOUR_DOWN = \"hour-down\",\n    MINUTE_UP = \"minute-up\",\n    MINUTE_DOWN = \"minute-down\",\n}\n\nenum EInputName {\n    HOUR = \"hour\",\n    MINUTE = \"minute\",\n}\n\nenum ETimePeriodToggleName {\n    AM = \"am\",\n    PM = \"pm\",\n}\n\ninterface TimepickerDropdownProps {\n    id?: string;\n    value: string | undefined;\n    show: boolean;\n    format: TimeFormat;\n    onChange: (value: string) => void;\n    onCancel: () => void;\n}\n\nexport const TimepickerDropdown = ({\n    id,\n    value,\n    show,\n    format,\n    onChange,\n    onCancel,\n}: TimepickerDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timeValues = TimeHelper.getTimeValues(format, value);\n\n    const [hourValue, setHourValue] = useState<string>(timeValues.hour);\n    const [minuteValue, setMinuteValue] = useState<string>(timeValues.minute);\n    const [timePeriod, setTimePeriod] = useState<EPeriod>(timeValues.period);\n\n    const hourInputRef = useRef<HTMLInputElement>(null);\n    const minuteInputRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        // Focus hour input on display of dropdown\n        if (show && hourInputRef.current) {\n            hourInputRef.current.focus({ preventScroll: true });\n        }\n\n        if (show) {\n            // reset time values especially when a Cancel or blur event happened\n            const { hour, minute, period } = TimeHelper.getTimeValues(\n                format,\n                value\n            );\n            setHourValue(hour);\n            setMinuteValue(minute);\n            setTimePeriod(period);\n        }\n    }, [show, value, format]);\n\n    useEffect(() => {\n        const hourInput = hourInputRef.current;\n        const minuteInput = minuteInputRef.current;\n\n        if (hourInput) hourInput.addEventListener(\"keydown\", handleKeyDown);\n        if (minuteInput) minuteInput.addEventListener(\"keydown\", handleKeyDown);\n\n        return () => {\n            if (hourInput)\n                hourInput.removeEventListener(\"keydown\", handleKeyDown);\n            if (minuteInput)\n                minuteInput.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleKeyDown = (event: KeyboardEvent) => {\n        /**\n         * NOTE: This is the most deterministic way in handling\n         * incorrect characters from being entered. The pattern\n         * added in the input still allows some special characters\n         * to slip through.\n         */\n\n        const permittableEventCodes = [\n            \"Digit0\",\n            \"Digit1\",\n            \"Digit2\",\n            \"Digit3\",\n            \"Digit4\",\n            \"Digit5\",\n            \"Digit6\",\n            \"Digit7\",\n            \"Digit8\",\n            \"Digit9\",\n            \"Tab\",\n            \"Backspace\",\n            \"Delete\",\n            \"ArrowLeft\",\n            \"ArrowRight\",\n            \"ArrowUp\",\n            \"ArrowDown\",\n        ];\n\n        const permittableEventKeys = [\n            \"Backspace\",\n            \"0\",\n            \"1\",\n            \"2\",\n            \"3\",\n            \"4\",\n            \"5\",\n            \"6\",\n            \"7\",\n            \"8\",\n            \"9\",\n        ];\n\n        if (\n            !permittableEventCodes.includes(event.code) &&\n            !permittableEventKeys.includes(event.key) // mobile devices\n        ) {\n            event.preventDefault();\n        }\n    };\n\n    const handleInputButtonClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            switch (event.currentTarget.name) {\n                case EInputButtonName.MINUTE_UP:\n                    setMinuteValue(\n                        TimeHelper.updateMinutes(minuteValue, \"add\")\n                    );\n                    break;\n                case EInputButtonName.MINUTE_DOWN:\n                    setMinuteValue(\n                        TimeHelper.updateMinutes(minuteValue, \"minus\")\n                    );\n                    break;\n                case EInputButtonName.HOUR_UP:\n                    setHourValue(TimeHelper.updateHours(hourValue, \"add\"));\n                    break;\n                case EInputButtonName.HOUR_DOWN:\n                    setHourValue(TimeHelper.updateHours(hourValue, \"minus\"));\n                    break;\n                default:\n                    break;\n            }\n        },\n        [hourValue, minuteValue]\n    );\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        event.target.select();\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n\n        switch (event.target.name) {\n            case EInputName.HOUR:\n                if (value.length <= 2) setHourValue(value);\n                break;\n            case EInputName.MINUTE:\n                if (value.length <= 2) setMinuteValue(value);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const value = parseInt(event.target.value);\n\n        if (isNaN(value)) return;\n\n        switch (event.target.name) {\n            case EInputName.HOUR: {\n                const valueToSet =\n                    value > 23 || value < 0\n                        ? timeValues.hour\n                        : TimeHelper.convertHourTo12HourFormat(\n                              event.target.value\n                          );\n\n                setHourValue(valueToSet);\n                break;\n            }\n            case EInputName.MINUTE: {\n                const valueToSet =\n                    value > 59 || value < 0\n                        ? timeValues.minute\n                        : event.target.value;\n\n                setMinuteValue(StringHelper.padValue(valueToSet));\n                break;\n            }\n            default:\n                break;\n        }\n    };\n\n    const handleTimePeriodChange = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        switch (event.target.name) {\n            case ETimePeriodToggleName.AM:\n                setTimePeriod(EPeriod.AM);\n                break;\n            case ETimePeriodToggleName.PM:\n                setTimePeriod(EPeriod.PM);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const handleConfirm = () => {\n        let formattedValue: string;\n\n        if (format === \"24hr\") {\n            formattedValue = TimeHelper.convertTo24HourFormat({\n                hour: hourValue,\n                minute: minuteValue,\n                period: timePeriod,\n            });\n        } else {\n            formattedValue = `${hourValue}:${minuteValue}${timePeriod}`;\n        }\n\n        onChange(formattedValue);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getTestId = (baseTestId: string): string => {\n        return id ? `${id}-${baseTestId}` : baseTestId;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHourInput = () => (\n        <InputContainer>\n            <SwitchButton\n                aria-label=\"increase hour\"\n                name={EInputButtonName.HOUR_UP}\n                tabIndex={-1} /* Prevent tab, use arrow keys to change */\n                onClick={handleInputButtonClick}\n                data-testid={getTestId(\"hour-increment-button\")}\n            >\n                <ChevronUpIcon />\n            </SwitchButton>\n            <TimeInputBox>\n                <TimeInput\n                    aria-label=\"hour\"\n                    type=\"number\"\n                    name={EInputName.HOUR}\n                    id=\"hour\"\n                    maxLength={2}\n                    pattern=\"[0-9]{2}\"\n                    ref={hourInputRef}\n                    value={hourValue}\n                    onFocus={handleFocus}\n                    onChange={handleChange}\n                    onBlur={handleBlur}\n                    min={1}\n                    max={12}\n                    placeholder=\"HH\"\n                    data-testid={getTestId(\"hour-input\")}\n                />\n            </TimeInputBox>\n            <SwitchButton\n                aria-label=\"decrease hour\"\n                name={EInputButtonName.HOUR_DOWN}\n                tabIndex={-1} /* Prevent tab, use arrow keys to change */\n                onClick={handleInputButtonClick}\n                data-testid={getTestId(\"hour-decrement-button\")}\n            >\n                <ChevronDownIcon />\n            </SwitchButton>\n        </InputContainer>\n    );\n\n    const renderMinuteInput = () => (\n        <InputContainer>\n            <SwitchButton\n                aria-label=\"increase minute\"\n                name={EInputButtonName.MINUTE_UP}\n                tabIndex={-1} /* Prevent tab, use arrow keys to change */\n                onClick={handleInputButtonClick}\n                data-testid={getTestId(\"minute-increment-button\")}\n            >\n                <ChevronUpIcon />\n            </SwitchButton>\n            <TimeInputBox>\n                <TimeInput\n                    aria-label=\"minute\"\n                    type=\"number\"\n                    name={EInputName.MINUTE}\n                    id=\"minute\"\n                    maxLength={2}\n                    pattern=\"[0-9]{2}\"\n                    ref={minuteInputRef}\n                    value={minuteValue}\n                    onChange={handleChange}\n                    onBlur={handleBlur}\n                    onFocus={handleFocus}\n                    min={0}\n                    max={59}\n                    placeholder=\"MM\"\n                    data-testid={getTestId(\"minute-input\")}\n                />\n            </TimeInputBox>\n            <SwitchButton\n                aria-label=\"decrease minute\"\n                name={EInputButtonName.MINUTE_DOWN}\n                tabIndex={-1} /* Prevent tab, use arrow keys to change */\n                onClick={handleInputButtonClick}\n                data-testid={getTestId(\"minute-decrement-button\")}\n            >\n                <ChevronDownIcon />\n            </SwitchButton>\n        </InputContainer>\n    );\n\n    const renderTimePeriodControl = () => (\n        <TimePeriodSection>\n            <TimePeriodToggle\n                checked={timePeriod === EPeriod.AM}\n                name={ETimePeriodToggleName.AM}\n                type=\"radio\"\n                onChange={handleTimePeriodChange}\n                data-testid={getTestId(\"am-toggle\")}\n                aria-label=\"AM\"\n            >\n                AM\n            </TimePeriodToggle>\n            <TimePeriodToggle\n                checked={timePeriod === EPeriod.PM}\n                name={ETimePeriodToggleName.PM}\n                type=\"radio\"\n                onChange={handleTimePeriodChange}\n                data-testid={getTestId(\"pm-toggle\")}\n                aria-label=\"PM\"\n            >\n                PM\n            </TimePeriodToggle>\n        </TimePeriodSection>\n    );\n\n    return (\n        <StyledDiv>\n            <Container\n                data-testid={getTestId(\"timepicker-dropdown\")}\n                inert={inertValue(!show)}\n            >\n                <InputSection>\n                    <HourMinuteSection>\n                        {renderHourInput()}\n                        <DividerLabel>:</DividerLabel>\n                        {renderMinuteInput()}\n                    </HourMinuteSection>\n                    {renderTimePeriodControl()}\n                </InputSection>\n                <ControlSection>\n                    <ControlButton\n                        aria-label=\"close selector\"\n                        type=\"button\"\n                        styleType=\"secondary\"\n                        onClick={onCancel}\n                        data-testid={getTestId(\"cancel-button\")}\n                    >\n                        Cancel\n                    </ControlButton>\n                    <ControlButton\n                        aria-label=\"confirm selection\"\n                        type=\"button\"\n                        onClick={handleConfirm}\n                        disabled={hourValue === \"\" || minuteValue === \"\"}\n                        data-testid={getTestId(\"confirm-button\")}\n                    >\n                        Done\n                    </ControlButton>\n                </ControlSection>\n            </Container>\n        </StyledDiv>\n    );\n};\n"],"names":["EInputButtonName","EInputName","ETimePeriodToggleName","id","value","show","format","onChange","onCancel","timeValues","TimeHelper","getTimeValues","hourValue","setHourValue","useState","hour","minuteValue","setMinuteValue","minute","timePeriod","setTimePeriod","period","hourInputRef","useRef","minuteInputRef","useEffect","current","focus","preventScroll","hourInput","minuteInput","addEventListener","handleKeyDown","removeEventListener","event","includes","code","key","preventDefault","handleInputButtonClick","useCallback","currentTarget","name","MINUTE_UP","updateMinutes","MINUTE_DOWN","HOUR_UP","updateHours","HOUR_DOWN","handleFocus","target","select","handleChange","HOUR","length","MINUTE","handleBlur","parseInt","isNaN","valueToSet","convertHourTo12HourFormat","StringHelper","padValue","handleTimePeriodChange","AM","EPeriod","PM","getTestId","baseTestId","_jsx","StyledDiv","children","_jsxs","Container","inert","inertValue","InputSection","HourMinuteSection","InputContainer","SwitchButton","tabIndex","onClick","ChevronUpIcon","TimeInputBox","TimeInput","type","maxLength","pattern","ref","onFocus","onBlur","min","max","placeholder","ChevronDownIcon","DividerLabel","TimePeriodSection","TimePeriodToggle","checked","ControlSection","ControlButton","styleType","formattedValue","convertTo24HourFormat","disabled"],"mappings":"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"}
+{"version":3,"file":"timepicker-dropdown.js","sources":["../../../../src/shared/timepicker-dropdown/timepicker-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../../button\";\nimport { Toggle } from \"../../toggle\";\nimport { Typography } from \"../../typography\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport type { TimeFormat } from \"../../util/time-helper\";\nimport { EPeriod, TimeHelper } from \"../../util/time-helper\";\nimport { inertValue } from \"../accessibility\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport { BasicInput, InputBox } from \"../input-wrapper\";\nimport * as styles from \"./timepicker-dropdown.styles\";\n\nenum EInputButtonName {\n    HOUR_UP = \"hour-up\",\n    HOUR_DOWN = \"hour-down\",\n    MINUTE_UP = \"minute-up\",\n    MINUTE_DOWN = \"minute-down\",\n}\n\nenum EInputName {\n    HOUR = \"hour\",\n    MINUTE = \"minute\",\n}\n\nenum ETimePeriodToggleName {\n    AM = \"am\",\n    PM = \"pm\",\n}\n\ninterface TimepickerDropdownProps {\n    id?: string;\n    value: string | undefined;\n    show: boolean;\n    format: TimeFormat;\n    onChange: (value: string) => void;\n    onCancel: () => void;\n}\n\nexport const TimepickerDropdown = ({\n    id,\n    value,\n    show,\n    format,\n    onChange,\n    onCancel,\n}: TimepickerDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timeValues = TimeHelper.getTimeValues(format, value);\n\n    const [hourValue, setHourValue] = useState<string>(timeValues.hour);\n    const [minuteValue, setMinuteValue] = useState<string>(timeValues.minute);\n    const [timePeriod, setTimePeriod] = useState<EPeriod>(timeValues.period);\n\n    const hourInputRef = useRef<HTMLInputElement>(null);\n    const minuteInputRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        // Focus hour input on display of dropdown\n        if (show && hourInputRef.current) {\n            hourInputRef.current.focus({ preventScroll: true });\n        }\n\n        if (show) {\n            // reset time values especially when a Cancel or blur event happened\n            const { hour, minute, period } = TimeHelper.getTimeValues(\n                format,\n                value\n            );\n            setHourValue(hour);\n            setMinuteValue(minute);\n            setTimePeriod(period);\n        }\n    }, [show, value, format]);\n\n    useEffect(() => {\n        const hourInput = hourInputRef.current;\n        const minuteInput = minuteInputRef.current;\n\n        if (hourInput) hourInput.addEventListener(\"keydown\", handleKeyDown);\n        if (minuteInput) minuteInput.addEventListener(\"keydown\", handleKeyDown);\n\n        return () => {\n            if (hourInput)\n                hourInput.removeEventListener(\"keydown\", handleKeyDown);\n            if (minuteInput)\n                minuteInput.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleKeyDown = (event: KeyboardEvent) => {\n        /**\n         * NOTE: This is the most deterministic way in handling\n         * incorrect characters from being entered. The pattern\n         * added in the input still allows some special characters\n         * to slip through.\n         */\n\n        const permittableEventCodes = [\n            \"Digit0\",\n            \"Digit1\",\n            \"Digit2\",\n            \"Digit3\",\n            \"Digit4\",\n            \"Digit5\",\n            \"Digit6\",\n            \"Digit7\",\n            \"Digit8\",\n            \"Digit9\",\n            \"Tab\",\n            \"Backspace\",\n            \"Delete\",\n            \"ArrowLeft\",\n            \"ArrowRight\",\n            \"ArrowUp\",\n            \"ArrowDown\",\n        ];\n\n        const permittableEventKeys = [\n            \"Backspace\",\n            \"0\",\n            \"1\",\n            \"2\",\n            \"3\",\n            \"4\",\n            \"5\",\n            \"6\",\n            \"7\",\n            \"8\",\n            \"9\",\n        ];\n\n        if (\n            !permittableEventCodes.includes(event.code) &&\n            !permittableEventKeys.includes(event.key) // mobile devices\n        ) {\n            event.preventDefault();\n        }\n    };\n\n    const handleInputButtonClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            switch (event.currentTarget.name) {\n                case EInputButtonName.MINUTE_UP:\n                    setMinuteValue(\n                        TimeHelper.updateMinutes(minuteValue, \"add\")\n                    );\n                    break;\n                case EInputButtonName.MINUTE_DOWN:\n                    setMinuteValue(\n                        TimeHelper.updateMinutes(minuteValue, \"minus\")\n                    );\n                    break;\n                case EInputButtonName.HOUR_UP:\n                    setHourValue(TimeHelper.updateHours(hourValue, \"add\"));\n                    break;\n                case EInputButtonName.HOUR_DOWN:\n                    setHourValue(TimeHelper.updateHours(hourValue, \"minus\"));\n                    break;\n                default:\n                    break;\n            }\n        },\n        [hourValue, minuteValue]\n    );\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        event.target.select();\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = event.target.value;\n\n        switch (event.target.name) {\n            case EInputName.HOUR:\n                if (value.length <= 2) setHourValue(value);\n                break;\n            case EInputName.MINUTE:\n                if (value.length <= 2) setMinuteValue(value);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const value = parseInt(event.target.value);\n\n        if (isNaN(value)) return;\n\n        switch (event.target.name) {\n            case EInputName.HOUR: {\n                const valueToSet =\n                    value > 23 || value < 0\n                        ? timeValues.hour\n                        : TimeHelper.convertHourTo12HourFormat(\n                              event.target.value\n                          );\n\n                setHourValue(valueToSet);\n                break;\n            }\n            case EInputName.MINUTE: {\n                const valueToSet =\n                    value > 59 || value < 0\n                        ? timeValues.minute\n                        : event.target.value;\n\n                setMinuteValue(StringHelper.padValue(valueToSet));\n                break;\n            }\n            default:\n                break;\n        }\n    };\n\n    const handleTimePeriodChange = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        switch (event.target.name) {\n            case ETimePeriodToggleName.AM:\n                setTimePeriod(EPeriod.AM);\n                break;\n            case ETimePeriodToggleName.PM:\n                setTimePeriod(EPeriod.PM);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const handleConfirm = () => {\n        let formattedValue: string;\n\n        if (format === \"24hr\") {\n            formattedValue = TimeHelper.convertTo24HourFormat({\n                hour: hourValue,\n                minute: minuteValue,\n                period: timePeriod,\n            });\n        } else {\n            formattedValue = `${hourValue}:${minuteValue}${timePeriod}`;\n        }\n\n        onChange(formattedValue);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getTestId = (baseTestId: string): string => {\n        return id ? `${id}-${baseTestId}` : baseTestId;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHourInput = () => (\n        <div className={styles.inputContainer}>\n            <ClickableIcon\n                className={styles.switchButton}\n                aria-label=\"increase hour\"\n                name={EInputButtonName.HOUR_UP}\n                tabIndex={-1} /* Prevent tab, use arrow keys to change */\n                onClick={handleInputButtonClick}\n                data-testid={getTestId(\"hour-increment-button\")}\n            >\n                <ChevronUpIcon />\n            </ClickableIcon>\n            <InputBox className={styles.timeInputBox}>\n                <BasicInput\n                    className={styles.timeInput}\n                    aria-label=\"hour\"\n                    type=\"number\"\n                    name={EInputName.HOUR}\n                    id=\"hour\"\n                    maxLength={2}\n                    pattern=\"[0-9]{2}\"\n                    ref={hourInputRef}\n                    value={hourValue}\n                    onFocus={handleFocus}\n                    onChange={handleChange}\n                    onBlur={handleBlur}\n                    min={1}\n                    max={12}\n                    placeholder=\"HH\"\n                    data-testid={getTestId(\"hour-input\")}\n                />\n            </InputBox>\n            <ClickableIcon\n                className={styles.switchButton}\n                aria-label=\"decrease hour\"\n                name={EInputButtonName.HOUR_DOWN}\n                tabIndex={-1} /* Prevent tab, use arrow keys to change */\n                onClick={handleInputButtonClick}\n                data-testid={getTestId(\"hour-decrement-button\")}\n            >\n                <ChevronDownIcon />\n            </ClickableIcon>\n        </div>\n    );\n\n    const renderMinuteInput = () => (\n        <div className={styles.inputContainer}>\n            <ClickableIcon\n                className={styles.switchButton}\n                aria-label=\"increase minute\"\n                name={EInputButtonName.MINUTE_UP}\n                tabIndex={-1} /* Prevent tab, use arrow keys to change */\n                onClick={handleInputButtonClick}\n                data-testid={getTestId(\"minute-increment-button\")}\n            >\n                <ChevronUpIcon />\n            </ClickableIcon>\n            <InputBox className={styles.timeInputBox}>\n                <BasicInput\n                    className={styles.timeInput}\n                    aria-label=\"minute\"\n                    type=\"number\"\n                    name={EInputName.MINUTE}\n                    id=\"minute\"\n                    maxLength={2}\n                    pattern=\"[0-9]{2}\"\n                    ref={minuteInputRef}\n                    value={minuteValue}\n                    onChange={handleChange}\n                    onBlur={handleBlur}\n                    onFocus={handleFocus}\n                    min={0}\n                    max={59}\n                    placeholder=\"MM\"\n                    data-testid={getTestId(\"minute-input\")}\n                />\n            </InputBox>\n            <ClickableIcon\n                className={styles.switchButton}\n                aria-label=\"decrease minute\"\n                name={EInputButtonName.MINUTE_DOWN}\n                tabIndex={-1} /* Prevent tab, use arrow keys to change */\n                onClick={handleInputButtonClick}\n                data-testid={getTestId(\"minute-decrement-button\")}\n            >\n                <ChevronDownIcon />\n            </ClickableIcon>\n        </div>\n    );\n\n    const renderTimePeriodControl = () => (\n        <div className={styles.timePeriodSection}>\n            <Toggle\n                className={styles.timePeriodToggle}\n                checked={timePeriod === EPeriod.AM}\n                name={ETimePeriodToggleName.AM}\n                type=\"radio\"\n                onChange={handleTimePeriodChange}\n                data-testid={getTestId(\"am-toggle\")}\n                aria-label=\"AM\"\n            >\n                AM\n            </Toggle>\n            <Toggle\n                className={styles.timePeriodToggle}\n                checked={timePeriod === EPeriod.PM}\n                name={ETimePeriodToggleName.PM}\n                type=\"radio\"\n                onChange={handleTimePeriodChange}\n                data-testid={getTestId(\"pm-toggle\")}\n                aria-label=\"PM\"\n            >\n                PM\n            </Toggle>\n        </div>\n    );\n\n    return (\n        <div className={styles.root}>\n            <div\n                className={styles.container}\n                data-testid={getTestId(\"timepicker-dropdown\")}\n                inert={inertValue(!show)}\n            >\n                <div className={styles.inputSection}>\n                    <div className={styles.hourMinuteSection}>\n                        {renderHourInput()}\n                        <Typography.BodyBL className={styles.dividerLabel}>\n                            :\n                        </Typography.BodyBL>\n                        {renderMinuteInput()}\n                    </div>\n                    {renderTimePeriodControl()}\n                </div>\n                <div className={styles.controlSection}>\n                    <Button\n                        className={styles.controlButton}\n                        sizeType=\"small\"\n                        type=\"button\"\n                        onClick={handleConfirm}\n                        disabled={hourValue === \"\" || minuteValue === \"\"}\n                        data-testid={getTestId(\"confirm-button\")}\n                    >\n                        Done\n                    </Button>\n                    <Button\n                        className={styles.controlButton}\n                        sizeType=\"small\"\n                        type=\"button\"\n                        styleType=\"secondary\"\n                        onClick={onCancel}\n                        data-testid={getTestId(\"cancel-button\")}\n                    >\n                        Cancel\n                    </Button>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":["EInputButtonName","EInputName","ETimePeriodToggleName","id","value","show","format","onChange","onCancel","timeValues","TimeHelper","getTimeValues","hourValue","setHourValue","useState","hour","minuteValue","setMinuteValue","minute","timePeriod","setTimePeriod","period","hourInputRef","useRef","minuteInputRef","useEffect","current","focus","preventScroll","hourInput","minuteInput","addEventListener","handleKeyDown","removeEventListener","event","includes","code","key","preventDefault","handleInputButtonClick","useCallback","currentTarget","name","MINUTE_UP","updateMinutes","MINUTE_DOWN","HOUR_UP","updateHours","HOUR_DOWN","handleFocus","target","select","handleChange","HOUR","length","MINUTE","handleBlur","parseInt","isNaN","valueToSet","convertHourTo12HourFormat","StringHelper","padValue","handleTimePeriodChange","AM","EPeriod","PM","getTestId","baseTestId","_jsx","className","styles.root","children","_jsxs","styles.container","inert","inertValue","styles.inputSection","styles.hourMinuteSection","styles.inputContainer","ClickableIcon","styles.switchButton","tabIndex","onClick","ChevronUpIcon","InputBox","styles.timeInputBox","BasicInput","styles.timeInput","type","maxLength","pattern","ref","onFocus","onBlur","min","max","placeholder","ChevronDownIcon","Typography","BodyBL","styles.dividerLabel","styles.timePeriodSection","Toggle","styles.timePeriodToggle","checked","styles.controlSection","Button","styles.controlButton","sizeType","formattedValue","convertTo24HourFormat","disabled","styleType"],"mappings":"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"}

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

@@ -1,114 +1,2 @@
-"use strict";var e=require("styled-components"),i=require("../../button/button.js"),t=require("../../toggle/toggle.js"),r=require("../../typography/index.js"),n=require("../../v3_theme/index.js"),a=require("../clickable-icon/clickable-icon.js"),o=require("../input-wrapper/input-wrapper.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=d(e);const c=l.default.div`
-    overflow: hidden;
-
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        max-width: 100%;
-    }
-`,s=l.default.div`
-    position: relative;
-    width: 100%;
-    padding: ${n.V3_Spacing["spacing-8"]} ${n.V3_Spacing["spacing-20"]}
-        ${n.V3_Spacing["spacing-24"]} ${n.V3_Spacing["spacing-20"]};
-    display: flex;
-    flex-direction: column;
-    background: ${n.V3_Colour.bg};
-    border: ${n.V3_Border["width-010"]} ${n.V3_Border.solid}
-        ${n.V3_Colour.border};
-    border-radius: ${n.V3_Radius.sm};
-`,p=l.default.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        flex-direction: column;
-        width: 100%;
-    }
-`,u=l.default.div`
-    display: flex;
-    justify-content: flex-end;
-    margin-top: ${n.V3_Spacing["spacing-16"]};
-    gap: ${n.V3_Spacing["spacing-8"]};
-
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        flex-direction: column-reverse; // FIXME: this breaks tab focus
-        margin-top: ${n.V3_Spacing["spacing-32"]};
-    }
-`,x=l.default.div`
-    display: flex;
-    align-items: center;
-    margin-right: ${n.V3_Spacing["spacing-32"]};
-
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        margin-right: 0;
-        width: 100%;
-    }
-`,g=l.default.div`
-    display: flex;
-    gap: ${n.V3_Spacing["spacing-8"]};
-
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        flex-direction: column;
-    }
-
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        flex-direction: row;
-        width: 100%;
-    }
-`,h=l.default.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        width: 6rem;
-    }
-`,f=l.default(a.ClickableIcon)`
-    width: 5rem;
-    padding: ${n.V3_Spacing["spacing-16"]} 0;
-    color: ${n.V3_Colour.icon};
-
-    svg {
-        height: 1rem;
-        width: 1rem;
-    }
-
-    &:hover {
-        color: ${n.V3_Colour["icon-hover"]};
-    }
-`,m=l.default(r.Typography.BodyBL)`
-    flex-shrink: 0;
-    width: 1.5rem;
-    text-align: center;
-`,y=l.default(o.InputBox)`
-    height: calc(3rem - 2px);
-    width: 5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        width: 100%;
-    }
-`,_=l.default(o.BasicInput)`
-    text-align: center;
-    width: 100%;
-
-    &:focus::placeholder {
-        color: transparent;
-    }
-`,V=l.default(t.Toggle)`
-    min-width: 5rem;
-    flex: 1;
-`,$=l.default(i.Button.Small)`
-    width: 7rem;
-
-    ${n.V3_MediaQuery.MaxWidth.sm} {
-        flex: 1;
-    }
-
-    ${n.V3_MediaQuery.MaxWidth.xxs} {
-        width: 100%;
-    }
-`;exports.Container=s,exports.ControlButton=$,exports.ControlSection=u,exports.DividerLabel=m,exports.HourMinuteSection=x,exports.InputContainer=h,exports.InputSection=p,exports.StyledDiv=c,exports.SwitchButton=f,exports.TimeInput=_,exports.TimeInputBox=y,exports.TimePeriodSection=g,exports.TimePeriodToggle=V;
+"use strict";require("./timepicker-dropdown.styles_119l6k6.css");exports.container="c1o8b9oi",exports.controlButton="covfne3",exports.controlSection="c1ljojaz",exports.dividerLabel="d8auh4f",exports.hourMinuteSection="h1lh2mc9",exports.inputContainer="iew5x9r",exports.inputSection="i11svvg0",exports.root="ru5iz77",exports.switchButton="sn5alad",exports.timeInput="tr1n08z",exports.timeInputBox="t1b5fiv0",exports.timePeriodSection="t28scph",exports.timePeriodToggle="t1xgwy38";
 //# sourceMappingURL=timepicker-dropdown.styles.js.map

package/cjs/shared/timepicker-dropdown/timepicker-dropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker-dropdown.styles.js","sources":["../../../../src/shared/timepicker-dropdown/timepicker-dropdown.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../../button\";\nimport { Toggle } from \"../../toggle\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport { BasicInput, InputBox } from \"../input-wrapper/input-wrapper\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN WRAPPER\n// -----------------------------------------------------------------------------\nexport const StyledDiv = styled.div`\n    overflow: hidden;\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        max-width: 100%;\n    }\n`;\n\nexport const Container = styled.div`\n    position: relative;\n    width: 100%;\n    padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-20\"]}\n        ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-20\"]};\n    display: flex;\n    flex-direction: column;\n    background: ${V3_Colour[\"bg\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n`;\n\nexport const InputSection = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        flex-direction: column;\n        width: 100%;\n    }\n`;\n\nexport const ControlSection = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    margin-top: ${V3_Spacing[\"spacing-16\"]};\n    gap: ${V3_Spacing[\"spacing-8\"]};\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        flex-direction: column-reverse; // FIXME: this breaks tab focus\n        margin-top: ${V3_Spacing[\"spacing-32\"]};\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// INPUT COMPONENTS\n// -----------------------------------------------------------------------------\nexport const HourMinuteSection = styled.div`\n    display: flex;\n    align-items: center;\n    margin-right: ${V3_Spacing[\"spacing-32\"]};\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        margin-right: 0;\n        width: 100%;\n    }\n`;\n\nexport const TimePeriodSection = styled.div`\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        flex-direction: row;\n        width: 100%;\n    }\n`;\n\nexport const InputContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        width: 6rem;\n    }\n`;\n\nexport const SwitchButton = styled(ClickableIcon)`\n    width: 5rem;\n    padding: ${V3_Spacing[\"spacing-16\"]} 0;\n    color: ${V3_Colour[\"icon\"]};\n\n    svg {\n        height: 1rem;\n        width: 1rem;\n    }\n\n    &:hover {\n        color: ${V3_Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const DividerLabel = styled(Typography.BodyBL)`\n    flex-shrink: 0;\n    width: 1.5rem;\n    text-align: center;\n`;\n\nexport const TimeInputBox = styled(InputBox)`\n    height: calc(3rem - 2px);\n    width: 5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        width: 100%;\n    }\n`;\n\nexport const TimeInput = styled(BasicInput)`\n    text-align: center;\n    width: 100%;\n\n    &:focus::placeholder {\n        color: transparent;\n    }\n`;\n\nexport const TimePeriodToggle = styled(Toggle)`\n    min-width: 5rem;\n    flex: 1;\n`;\n\n// -----------------------------------------------------------------------------\n// CONTROL COMPONENTS\n// -----------------------------------------------------------------------------\nexport const ControlButton = styled(Button.Small)`\n    width: 7rem;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        flex: 1;\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        width: 100%;\n    }\n`;\n"],"names":["StyledDiv","styled","div","V3_MediaQuery","MaxWidth","xxs","Container","V3_Spacing","V3_Colour","V3_Border","V3_Radius","InputSection","ControlSection","HourMinuteSection","TimePeriodSection","lg","InputContainer","SwitchButton","ClickableIcon","DividerLabel","Typography","BodyBL","TimeInputBox","InputBox","TimeInput","BasicInput","TimePeriodToggle","Toggle","ControlButton","Button","Small","sm"],"mappings":"uXAsBO,MAAMA,EAAYC,EAAAA,QAAOC,GAAG;;;MAG7BC,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAYL,EAAAA,QAAOC,GAAG;;;eAGpBK,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;UAC3CA,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;;kBAG/BC,EAAAA,UAAc;cAClBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CD,EAAAA,UAAkB;qBACPE,EAAAA,UAAc;EAGtBC,EAAeV,EAAAA,QAAOC,GAAG;;;;;MAKhCC,EAAAA,cAAcC,SAASC;;;;EAMhBO,EAAiBX,EAAAA,QAAOC,GAAG;;;kBAGtBK,EAAAA,WAAW;WAClBA,EAAAA,WAAW;;MAEhBJ,EAAAA,cAAcC,SAASC;;sBAEPE,EAAAA,WAAW;;EAOpBM,EAAoBZ,EAAAA,QAAOC,GAAG;;;oBAGvBK,EAAAA,WAAW;;MAEzBJ,EAAAA,cAAcC,SAASC;;;;EAMhBS,EAAoBb,EAAAA,QAAOC,GAAG;;WAEhCK,EAAAA,WAAW;;MAEhBJ,EAAAA,cAAcC,SAASW;;;;MAIvBZ,EAAAA,cAAcC,SAASC;;;;EAMhBW,EAAiBf,EAAAA,QAAOC,GAAG;;;;;MAKlCC,EAAAA,cAAcC,SAASC;;;EAKhBY,EAAehB,EAAAA,QAAOiB,EAAAA,cAAc;;eAElCX,EAAAA,WAAW;aACbC,EAAAA,UAAgB;;;;;;;;iBAQZA,EAAAA,UAAU;;EAIdW,EAAelB,EAAAA,QAAOmB,aAAWC,OAAO;;;;EAMxCC,EAAerB,EAAAA,QAAOsB,EAAAA,SAAS;;;;;;;MAOtCpB,EAAAA,cAAcC,SAASC;;;EAKhBmB,EAAYvB,EAAAA,QAAOwB,EAAAA,WAAW;;;;;;;EAS9BC,EAAmBzB,EAAAA,QAAO0B,EAAAA,OAAO;;;EAQjCC,EAAgB3B,EAAAA,QAAO4B,SAAOC,MAAM;;;MAG3C3B,EAAAA,cAAcC,SAAS2B;;;;MAIvB5B,EAAAA,cAAcC,SAASC;;;"}
+{"version":3,"file":"timepicker-dropdown.styles.js","sources":["../../../../src/shared/timepicker-dropdown/timepicker-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN WRAPPER\n// -----------------------------------------------------------------------------\nexport const root = css`\n    overflow: hidden;\n\n    ${MediaQuery.MaxWidth.xxs} {\n        max-width: 100%;\n    }\n`;\n\nexport const container = css`\n    position: relative;\n    width: 100%;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-20\"]}\n        ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n    display: flex;\n    flex-direction: column;\n    background: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const inputSection = css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    ${MediaQuery.MaxWidth.xxs} {\n        flex-direction: column;\n        width: 100%;\n    }\n`;\n\nexport const controlSection = css`\n    display: flex;\n    flex-direction: row-reverse;\n    justify-content: flex-start;\n    margin-top: ${Spacing[\"spacing-16\"]};\n    gap: ${Spacing[\"spacing-8\"]};\n\n    ${MediaQuery.MaxWidth.xxs} {\n        flex-direction: column;\n        margin-top: ${Spacing[\"spacing-32\"]};\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// INPUT COMPONENTS\n// -----------------------------------------------------------------------------\nexport const hourMinuteSection = css`\n    display: flex;\n    align-items: center;\n    margin-right: ${Spacing[\"spacing-32\"]};\n\n    ${MediaQuery.MaxWidth.xxs} {\n        margin-right: 0;\n        width: 100%;\n    }\n`;\n\nexport const timePeriodSection = css`\n    display: flex;\n    gap: ${Spacing[\"spacing-8\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        flex-direction: row;\n        width: 100%;\n    }\n`;\n\nexport const inputContainer = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: 6rem;\n    }\n`;\n\nexport const switchButton = css`\n    width: 5rem;\n    padding: ${Spacing[\"spacing-16\"]} 0;\n    color: ${Colour[\"icon\"]};\n\n    svg {\n        height: 1rem;\n        width: 1rem;\n    }\n\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const dividerLabel = css`\n    flex-shrink: 0;\n    width: 1.5rem;\n    text-align: center;\n`;\n\nexport const timeInputBox = css`\n    height: calc(3rem - 2px);\n    width: 5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: 100%;\n    }\n`;\n\nexport const timeInput = css`\n    text-align: center;\n    width: 100%;\n\n    &:focus::placeholder {\n        color: transparent;\n    }\n`;\n\nexport const timePeriodToggle = css`\n    min-width: 5rem;\n    flex: 1;\n`;\n\n// -----------------------------------------------------------------------------\n// CONTROL COMPONENTS\n// -----------------------------------------------------------------------------\nexport const controlButton = css`\n    width: 7rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex: 1;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: 100%;\n    }\n`;\n"],"names":[],"mappings":"6HAmBsB,iCA4HI,iCArGC,gCAkEF,oCAlDK,kCAyBH,+BApDF,wBApBR,+BAkFQ,4BAiCH,+BAZG,qCA7CK,mCAkED"}

package/cjs/shared/timepicker-dropdown/timepicker-dropdown.styles_119l6k6.css

@@ -0,0 +1,13 @@
+.ru5iz77{overflow:hidden;}:where(body.fds-breakpoint-xxs-max) .ru5iz77{max-width:100%;}
+.c1o8b9oi{position:relative;width:100%;padding:var(--fds-spacing-8) var(--fds-spacing-20) var(--fds-spacing-24) var(--fds-spacing-20);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:var(--fds-colour-bg);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);}
+.i11svvg0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}:where(body.fds-breakpoint-xxs-max) .i11svvg0{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}
+.c1ljojaz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-top:var(--fds-spacing-16);gap:var(--fds-spacing-8);}:where(body.fds-breakpoint-xxs-max) .c1ljojaz{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-top:var(--fds-spacing-32);}
+.h1lh2mc9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:var(--fds-spacing-32);}:where(body.fds-breakpoint-xxs-max) .h1lh2mc9{margin-right:0;width:100%;}
+.t28scph{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-8);}:where(body.fds-breakpoint-lg-max) .t28scph{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}:where(body.fds-breakpoint-xxs-max) .t28scph{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;}
+.iew5x9r{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-xxs-max) .iew5x9r{width:6rem;}
+.sn5alad{width:5rem;padding:var(--fds-spacing-16) 0;color:var(--fds-colour-icon);}.sn5alad svg{height:1rem;width:1rem;}.sn5alad:hover{color:var(--fds-colour-icon-hover);}
+.d8auh4f{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:1.5rem;text-align:center;}
+.t1b5fiv0{height:calc(3rem - 2px);width:5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}:where(body.fds-breakpoint-xxs-max) .t1b5fiv0{width:100%;}
+.tr1n08z{text-align:center;width:100%;}.tr1n08z:focus::-webkit-input-placeholder{color:transparent;}.tr1n08z:focus::-moz-placeholder{color:transparent;}.tr1n08z:focus:-ms-input-placeholder{color:transparent;}.tr1n08z:focus::placeholder{color:transparent;}
+.t1xgwy38{min-width:5rem;-webkit-flex:1;-ms-flex:1;flex:1;}
+.covfne3{width:7rem;}:where(body.fds-breakpoint-sm-max) .covfne3{-webkit-flex:1;-ms-flex:1;flex:1;}:where(body.fds-breakpoint-xxs-max) .covfne3{width:100%;}

package/cjs/sidenav/sidenav-drawer-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@react-spring/web"),i=require("react"),n=require("../external/react-resize-detector/build/index.esm.js"),s=require("./sidenav-context.js"),a=require("./sidenav-drawer-item.styles.js");exports.SidenavDrawerItem=d=>{var{id:o,title:u,onClick:c,children:l}=d,h=e.__rest(d,["id","title","onClick","children"]);const[x,m]=i.useState(!0),[v,j]=i.useState(!1),{currentItem:C,setSelectedItem:S,setPreviouslySelectedItemId:g,setCurrentItem:p}=i.useContext(s.SidenavContext),[I]=i.useState(!0),b=`${I}-submenu`,q=r.useSpring({from:{opacity:0},to:{opacity:1}}),y=n.useResizeDetector(),w=y.ref,k=r.useSpring({height:l&&x?y.height:0}),D=l?{"aria-controls":b,"aria-expanded":x}:{};return t.jsxs(a.Container,Object.assign({onMouseEnter:()=>{j(!0)},onMouseLeave:()=>{j(!1)}},h,{style:q,children:[t.jsxs(a.LinkButton,Object.assign({type:"button",onClick:()=>{l?m(!x):(S({itemId:null==C?void 0:C.itemId,content:void 0}),p(void 0),g(void 0),c&&c(o))},$highlight:v&&x,$noChildren:!l},D,{children:[t.jsx(a.TextElement,{children:u}),l&&t.jsx(a.ChevronIcon,{"aria-hidden":!0,$expanded:x})]})),t.jsx(a.DrawerSubitemContainer,{style:k,children:t.jsx(a.DrawerContent,{id:b,ref:w,children:l})})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@lifesg/react-icons/chevron-up"),i=require("@react-spring/web"),s=require("clsx"),n=require("react"),a=require("../external/react-resize-detector/build/index.esm.js"),c=require("../shared/input-wrapper/input-wrapper.js"),d=require("./sidenav-context.js"),l=require("./sidenav-drawer-item.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=u(s);exports.SidenavDrawerItem=s=>{var{id:u,title:m,onClick:p,children:h,className:v}=s,x=e.__rest(s,["id","title","onClick","children","className"]);const[j,I]=n.useState(!0),{currentItem:b,setSelectedItem:f,setPreviouslySelectedItemId:q,setCurrentItem:C}=n.useContext(d.SidenavContext),[S]=n.useState(!0),g=`${S}-submenu`,y=i.useSpring({from:{opacity:0},to:{opacity:1}}),N=a.useResizeDetector(),w=N.ref,k=i.useSpring({height:h&&j?N.height:0}),B=h?{"aria-controls":g,"aria-expanded":j}:{};return t.jsxs(i.animated.li,Object.assign({},x,{className:v,style:y,children:[t.jsxs(c.BasicButton,Object.assign({type:"button",onClick:()=>{h?I(!j):(f({itemId:null==b?void 0:b.itemId,content:void 0}),C(void 0),q(void 0),p&&p(u))},className:o.default(l.linkButton,!h&&l.linkButtonNoChildren)},B,{children:[t.jsx("span",{className:l.textElement,children:m}),h&&t.jsx(r.ChevronUpIcon,{"aria-hidden":!0,className:o.default(l.chevronIcon,j&&l.chevronIconExpanded)})]})),t.jsx(i.animated.div,{"data-testid":"drawer-subitem-container",className:l.drawerSubitemContainer,style:k,children:t.jsx("ul",{id:g,ref:w,children:h})})]}))};
 //# sourceMappingURL=sidenav-drawer-item.js.map

package/cjs/sidenav/sidenav-drawer-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-item.js","sources":["../../../src/sidenav/sidenav-drawer-item.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type { HTMLAttributes } from \"react\";\nimport { useContext, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { SidenavContext } from \"./sidenav-context\";\nimport {\n    ChevronIcon,\n    Container,\n    DrawerContent,\n    DrawerSubitemContainer,\n    LinkButton,\n    TextElement,\n} from \"./sidenav-drawer-item.styles\";\nimport type { SidenavDrawerItemProps } from \"./types\";\n\nexport const SidenavDrawerItem = ({\n    id,\n    title,\n    onClick,\n    children,\n    ...otherProps\n}: SidenavDrawerItemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [expanded, setExpanded] = useState<boolean>(true);\n    const [highlight, setHighlight] = useState<boolean>(false);\n    const {\n        currentItem,\n        setSelectedItem,\n        setPreviouslySelectedItemId,\n        setCurrentItem,\n    } = useContext(SidenavContext);\n\n    const [internalId] = useState<boolean>(true);\n    const subitemId = `${internalId}-submenu`;\n\n    const containerAnimationProps = useSpring({\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n    });\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const contentAnimationProps = useSpring({\n        height: children && expanded ? resizeDetector.height : 0,\n    });\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleMouseEnter = () => {\n        setHighlight(true);\n    };\n\n    const handleMouseLeave = () => {\n        setHighlight(false);\n    };\n\n    const handleOnClick = () => {\n        if (children) {\n            setExpanded(!expanded);\n            return;\n        }\n        setSelectedItem({ itemId: currentItem?.itemId, content: undefined });\n        setCurrentItem(undefined);\n        setPreviouslySelectedItemId(undefined);\n        if (onClick) {\n            onClick(id);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const ariaControlProps: HTMLAttributes<HTMLButtonElement> = children\n        ? {\n              \"aria-controls\": subitemId,\n              \"aria-expanded\": expanded,\n          }\n        : {};\n\n    return (\n        <Container\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            {...otherProps}\n            style={containerAnimationProps}\n        >\n            <LinkButton\n                type=\"button\"\n                onClick={handleOnClick}\n                $highlight={highlight && expanded}\n                $noChildren={!children}\n                {...ariaControlProps}\n            >\n                <TextElement>{title}</TextElement>\n                {children && <ChevronIcon aria-hidden $expanded={expanded} />}\n            </LinkButton>\n            <DrawerSubitemContainer style={contentAnimationProps}>\n                <DrawerContent id={subitemId} ref={childRef}>\n                    {children}\n                </DrawerContent>\n            </DrawerSubitemContainer>\n        </Container>\n    );\n};\n"],"names":["_a","id","title","onClick","children","otherProps","__rest","expanded","setExpanded","useState","highlight","setHighlight","currentItem","setSelectedItem","setPreviouslySelectedItemId","setCurrentItem","useContext","SidenavContext","internalId","subitemId","containerAnimationProps","useSpring","from","opacity","to","resizeDetector","useResizeDetector","childRef","ref","contentAnimationProps","height","ariaControlProps","_jsxs","Container","Object","assign","onMouseEnter","onMouseLeave","style","LinkButton","type","itemId","content","undefined","$highlight","$noChildren","_jsx","TextElement","ChevronIcon","$expanded","DrawerSubitemContainer","DrawerContent"],"mappings":"gTAgBkCA,IAAA,IAAAC,GAC9BA,EAAEC,MACFA,EAAKC,QACLA,EAAOC,SACPA,GAAQJ,EACLK,EAAUC,EAAAA,OAAAN,EALiB,CAAA,KAAA,QAAA,UAAA,aAU9B,MAAOO,EAAUC,GAAeC,EAAAA,UAAkB,IAC3CC,EAAWC,GAAgBF,EAAAA,UAAkB,IAC9CG,YACFA,EAAWC,gBACXA,EAAeC,4BACfA,EAA2BC,eAC3BA,GACAC,EAAAA,WAAWC,mBAERC,GAAcT,EAAAA,UAAkB,GACjCU,EAAY,GAAGD,YAEfE,EAA0BC,EAAAA,UAAU,CACtCC,KAAM,CAAEC,QAAS,GACjBC,GAAI,CAAED,QAAS,KAEbE,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAC1BC,EAAwBR,EAAAA,UAAU,CACpCS,OAAQ1B,GAAYG,EAAWkB,EAAeK,OAAS,IA8BrDC,EAAsD3B,EACtD,CACI,gBAAiBe,EACjB,gBAAiBZ,GAErB,CAAA,EAEN,OACIyB,EAAAA,KAACC,EAAAA,UAASC,OAAAC,OAAA,CACNC,aAjCiB,KACrBzB,GAAa,EAAK,EAiCd0B,aA9BiB,KACrB1B,GAAa,EAAM,GA8BXN,EAAU,CACdiC,MAAOlB,EAAuBhB,SAAA,CAE9B4B,EAAAA,KAACO,EAAAA,0BACGC,KAAK,SACLrC,QAhCU,KACdC,EACAI,GAAaD,IAGjBM,EAAgB,CAAE4B,OAAQ7B,aAAW,EAAXA,EAAa6B,OAAQC,aAASC,IACxD5B,OAAe4B,GACf7B,OAA4B6B,GACxBxC,GACAA,EAAQF,GACZ,EAsB8B2C,WACVlC,GAAaH,EAAQsC,aACnBzC,GACV2B,EAAgB,CAAA3B,SAAA,CAEpB0C,EAAAA,IAACC,EAAAA,sBAAa7C,IACbE,GAAY0C,EAAAA,IAACE,EAAAA,YAAW,CAAA,eAAA,EAAAC,UAAwB1C,QAErDuC,EAAAA,IAACI,EAAAA,wBAAuBZ,MAAOT,EAAqBzB,SAChD0C,EAAAA,IAACK,EAAAA,cAAa,CAAClD,GAAIkB,EAAWS,IAAKD,WAC9BvB,SAGD"}
+{"version":3,"file":"sidenav-drawer-item.js","sources":["../../../src/sidenav/sidenav-drawer-item.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useContext, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport * as styles from \"./sidenav-drawer-item.styles\";\nimport type { SidenavDrawerItemProps } from \"./types\";\n\nexport const SidenavDrawerItem = ({\n    id,\n    title,\n    onClick,\n    children,\n    className,\n    ...otherProps\n}: SidenavDrawerItemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [expanded, setExpanded] = useState<boolean>(true);\n    const {\n        currentItem,\n        setSelectedItem,\n        setPreviouslySelectedItemId,\n        setCurrentItem,\n    } = useContext(SidenavContext);\n\n    const [internalId] = useState<boolean>(true);\n    const subitemId = `${internalId}-submenu`;\n\n    const containerAnimationProps = useSpring({\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n    });\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n    const contentAnimationProps = useSpring({\n        height: children && expanded ? resizeDetector.height : 0,\n    });\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOnClick = () => {\n        if (children) {\n            setExpanded(!expanded);\n            return;\n        }\n        setSelectedItem({ itemId: currentItem?.itemId, content: undefined });\n        setCurrentItem(undefined);\n        setPreviouslySelectedItemId(undefined);\n        if (onClick) {\n            onClick(id);\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const ariaControlProps: HTMLAttributes<HTMLButtonElement> = children\n        ? {\n              \"aria-controls\": subitemId,\n              \"aria-expanded\": expanded,\n          }\n        : {};\n\n    return (\n        <animated.li\n            {...otherProps}\n            className={className}\n            style={containerAnimationProps}\n        >\n            <BasicButton\n                type=\"button\"\n                onClick={handleOnClick}\n                className={clsx(\n                    styles.linkButton,\n                    !children && styles.linkButtonNoChildren\n                )}\n                {...ariaControlProps}\n            >\n                <span className={styles.textElement}>{title}</span>\n                {children && (\n                    <ChevronUpIcon\n                        aria-hidden\n                        className={clsx(\n                            styles.chevronIcon,\n                            expanded && styles.chevronIconExpanded\n                        )}\n                    />\n                )}\n            </BasicButton>\n            <animated.div\n                data-testid=\"drawer-subitem-container\"\n                className={styles.drawerSubitemContainer}\n                style={contentAnimationProps}\n            >\n                <ul id={subitemId} ref={childRef}>\n                    {children}\n                </ul>\n            </animated.div>\n        </animated.li>\n    );\n};\n"],"names":["_a","id","title","onClick","children","className","otherProps","__rest","expanded","setExpanded","useState","currentItem","setSelectedItem","setPreviouslySelectedItemId","setCurrentItem","useContext","SidenavContext","internalId","subitemId","containerAnimationProps","useSpring","from","opacity","to","resizeDetector","useResizeDetector","childRef","ref","contentAnimationProps","height","ariaControlProps","_jsxs","animated","li","style","BasicButton","Object","assign","type","itemId","content","undefined","clsx","styles.linkButton","styles.linkButtonNoChildren","_jsx","styles.textElement","ChevronUpIcon","styles.chevronIcon","styles.chevronIconExpanded","div","styles.drawerSubitemContainer"],"mappings":"ufAYkCA,IAAA,IAAAC,GAC9BA,EAAEC,MACFA,EAAKC,QACLA,EAAOC,SACPA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANiB,iDAW9B,MAAOQ,EAAUC,GAAeC,EAAAA,UAAkB,IAC5CC,YACFA,EAAWC,gBACXA,EAAeC,4BACfA,EAA2BC,eAC3BA,GACAC,EAAAA,WAAWC,mBAERC,GAAcP,EAAAA,UAAkB,GACjCQ,EAAY,GAAGD,YAEfE,EAA0BC,EAAAA,UAAU,CACtCC,KAAM,CAAEC,QAAS,GACjBC,GAAI,CAAED,QAAS,KAEbE,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAC1BC,EAAwBR,EAAAA,UAAU,CACpCS,OAAQzB,GAAYI,EAAWgB,EAAeK,OAAS,IAsBrDC,EAAsD1B,EACtD,CACI,gBAAiBc,EACjB,gBAAiBV,GAErB,CAAA,EAEN,OACIuB,EAAAA,KAACC,EAAAA,SAASC,oBACF3B,EAAU,CACdD,UAAWA,EACX6B,MAAOf,EAAuBf,SAAA,CAE9B2B,EAAAA,KAACI,EAAAA,YAAWC,OAAAC,OAAA,CACRC,KAAK,SACLnC,QA/BU,KACdC,EACAK,GAAaD,IAGjBI,EAAgB,CAAE2B,OAAQ5B,aAAW,EAAXA,EAAa4B,OAAQC,aAASC,IACxD3B,OAAe2B,GACf5B,OAA4B4B,GACxBtC,GACAA,EAAQF,GACZ,EAsBQI,UAAWqC,EAAAA,QACPC,EAAAA,YACCvC,GAAYwC,EAAAA,uBAEbd,EAAgB,CAAA1B,SAAA,CAEpByC,EAAAA,IAAA,OAAA,CAAMxC,UAAWyC,EAAAA,YAAkB1C,SAAGF,IACrCE,GACGyC,EAAAA,IAACE,EAAAA,cAAa,CAAA,eAAA,EAEV1C,UAAWqC,UACPM,EAAAA,YACAxC,GAAYyC,EAAAA,2BAK5BJ,EAAAA,IAACb,EAAAA,SAASkB,mBACM,2BACZ7C,UAAW8C,yBACXjB,MAAON,EAAqBxB,SAE5ByC,EAAAA,IAAA,KAAA,CAAI5C,GAAIiB,EAAWS,IAAKD,EAAQtB,SAC3BA,SAGC"}

package/cjs/sidenav/sidenav-drawer-item.styles.js

@@ -1,39 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-up"),r=require("@react-spring/web"),t=require("styled-components"),o=require("../shared/input-wrapper/input-wrapper.js"),n=require("../shared/styles/index.js"),a=require("../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(t);const d=r.animated(s.default.li``),u=s.default(o.BasicButton)`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border-radius: ${a.V3_Radius.md};
-
-    ${a.V3_Font["body-md-semibold"]}
-    color: ${a.V3_Colour.text};
-
-    ${e=>e.$noChildren?t.css`
-                  &:hover,
-                  &:focus {
-                      background: ${a.V3_Colour["bg-hover"]};
-                      color: ${a.V3_Colour["text-hover"]};
-                  }
-              `:t.css`
-                  &:hover,
-                  &:focus {
-                      background: ${a.V3_Colour["bg-hover-strong"]};
-                  }
-              `}
-`,l=r.animated(s.default.div`
-    margin: 0.125rem 0 0.125rem 0.5rem;
-    overflow: hidden;
-`),c=s.default(e.ChevronUpIcon)`
-    flex-shrink: 0;
-    color: ${a.V3_Colour.icon};
-    transform: rotate(${e=>e.$expanded?0:180}deg);
-    transition: transform ${a.V3_Motion["duration-150"]}
-        ${a.V3_Motion["ease-default"]};
-`,p=s.default.span`
-    ${n.lineClampCss(2)}
-    text-align: left;
-`,f=r.animated(s.default.ul``);exports.ChevronIcon=c,exports.Container=d,exports.DrawerContent=f,exports.DrawerSubitemContainer=l,exports.LinkButton=u,exports.TextElement=p;
+"use strict";require("./sidenav-drawer-item.styles_yp8cga.css");exports.chevronIcon="c1ey6q8x",exports.chevronIconExpanded="cpftd7o",exports.drawerSubitemContainer="dlg5ewg",exports.linkButton="l1011b8q",exports.linkButtonNoChildren="lmu4z67",exports.textElement="ttch7cq";
 //# sourceMappingURL=sidenav-drawer-item.styles.js.map

package/cjs/sidenav/sidenav-drawer-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../../src/sidenav/sidenav-drawer-item.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { V3_Colour, V3_Font, V3_Motion, V3_Radius } from \"../v3_theme\";\n\n//=============================================================================\n// STYLE INTERFACE\n//=============================================================================\ninterface LinkButtonStyleProp {\n    $highlight?: boolean | undefined;\n    $noChildren?: boolean | undefined;\n}\n\ninterface IconStyleProp {\n    $expanded?: boolean | undefined;\n}\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = animated(styled.li``);\n\nexport const LinkButton = styled(BasicButton)<LinkButtonStyleProp>`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${V3_Radius[\"md\"]};\n\n    ${V3_Font[\"body-md-semibold\"]}\n    color: ${V3_Colour.text};\n\n    ${(props) =>\n        props.$noChildren\n            ? css`\n                  &:hover,\n                  &:focus {\n                      background: ${V3_Colour[\"bg-hover\"]};\n                      color: ${V3_Colour[\"text-hover\"]};\n                  }\n              `\n            : css`\n                  &:hover,\n                  &:focus {\n                      background: ${V3_Colour[\"bg-hover-strong\"]};\n                  }\n              `}\n`;\n\nexport const DrawerSubitemContainer = animated(styled.div`\n    margin: 0.125rem 0 0.125rem 0.5rem;\n    overflow: hidden;\n`);\n\nexport const ChevronIcon = styled(ChevronUpIcon)<IconStyleProp>`\n    flex-shrink: 0;\n    color: ${V3_Colour.icon};\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform ${V3_Motion[\"duration-150\"]}\n        ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const TextElement = styled.span`\n    ${lineClampCss(2)}\n    text-align: left;\n`;\n\nexport const DrawerContent = animated(styled.ul``);\n"],"names":["Container","animated","styled","li","LinkButton","BasicButton","V3_Radius","V3_Font","V3_Colour","text","props","$noChildren","css","DrawerSubitemContainer","div","ChevronIcon","ChevronUpIcon","icon","$expanded","V3_Motion","TextElement","span","lineClampCss","DrawerContent","ul"],"mappings":"6UAuBO,MAAMA,EAAYC,EAAAA,SAASC,UAAOC,EAAE,IAE9BC,EAAaF,EAAAA,QAAOG,EAAAA,YAAiC;;;;;;;;qBAQ7CC,EAAAA,UAAc;;MAE7BC,EAAAA,QAAQ;aACDC,EAAAA,UAAUC;;MAEhBC,GACCA,EAAMC,YACAC,KAAG;;;oCAGmBJ,EAAAA,UAAU;+BACfA,EAAAA,UAAU;;gBAG3BI,KAAG;;;oCAGmBJ,EAAAA,UAAU;;;EAKjCK,EAAyBZ,EAAAA,SAASC,EAAAA,QAAOY,GAAG;;;GAK5CC,EAAcb,EAAAA,QAAOc,EAAAA,cAA6B;;aAElDR,EAAAA,UAAUS;wBACEP,GAAWA,EAAMQ,UAAY,EAAI;4BAC9BC,EAAAA,UAAU;UAC5BA,EAAAA,UAAU;EAGPC,EAAclB,EAAAA,QAAOmB,IAAI;MAChCC,EAAAA,aAAa;;EAINC,EAAgBtB,EAAAA,SAASC,UAAOsB,EAAE"}
+{"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../../src/sidenav/sidenav-drawer-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Motion, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text\"]};\n\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover-strong\"]};\n    }\n`;\n\nexport const linkButtonNoChildren = css`\n    &:hover,\n    &:focus {\n        background: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const drawerSubitemContainer = css`\n    margin: 0.125rem 0 0.125rem 0.5rem;\n    overflow: hidden;\n`;\n\nexport const chevronIcon = css`\n    flex-shrink: 0;\n    color: ${Colour[\"icon\"]};\n    transform: rotate(180deg);\n    transition: transform ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const textElement = css`\n    ${lineClampCss(2)}\n    text-align: left;\n`;\n"],"names":[],"mappings":"2GAwCwB,uCAOQ,yCAZG,6BA3BZ,wCAmBU,8BAwBT"}

package/cjs/sidenav/sidenav-drawer-item.styles_yp8cga.css

@@ -0,0 +1,6 @@
+.l1011b8q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:1rem;width:100%;padding:0.75rem 1rem;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}.l1011b8q:hover,.l1011b8q:focus{background:var(--fds-colour-bg-hover-strong);}
+.lmu4z67:hover,.lmu4z67:focus{background:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);}
+.dlg5ewg{margin:0.125rem 0 0.125rem 0.5rem;overflow:hidden;}
+.c1ey6q8x{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}
+.cpftd7o{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.ttch7cq{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;}

package/cjs/sidenav/sidenav-drawer-subitem.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),r=require("./sidenav-context.js"),n=require("./sidenav-drawer-subitem.styles.js");exports.SidenavDrawerSubitem=s=>{var{id:d,title:u,onClick:o}=s,c=e.__rest(s,["id","title","onClick"]);const{currentItem:l,setSelectedItem:a,setCurrentItem:v,setPreviouslySelectedItemId:m}=i.useContext(r.SidenavContext);return t.jsx(n.Container,Object.assign({},c,{children:t.jsx(n.LinkButton,{type:"button",onClick:()=>{o&&o(d),a({itemId:null==l?void 0:l.itemId,content:void 0}),v(void 0),m(void 0)},children:u})}))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),i=require("react"),s=require("../shared/input-wrapper/input-wrapper.js"),n=require("./sidenav-context.js"),a=require("./sidenav-drawer-subitem.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=u(r);exports.SidenavDrawerSubitem=r=>{var{id:u,title:c,onClick:d,className:o}=r,m=e.__rest(r,["id","title","onClick","className"]);const{currentItem:v,setSelectedItem:j,setCurrentItem:p,setPreviouslySelectedItemId:x}=i.useContext(n.SidenavContext);return t.jsx("li",Object.assign({},m,{className:l.default(o),children:t.jsx(s.BasicButton,{type:"button",onClick:()=>{d&&d(u),j({itemId:null==v?void 0:v.itemId,content:void 0}),p(void 0),x(void 0)},className:a.linkButton,children:c})}))};
 //# sourceMappingURL=sidenav-drawer-subitem.js.map

package/cjs/sidenav/sidenav-drawer-subitem.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-subitem.js","sources":["../../../src/sidenav/sidenav-drawer-subitem.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { SidenavContext } from \"./sidenav-context\";\nimport { Container, LinkButton } from \"./sidenav-drawer-subitem.styles\";\nimport type { SidenavDrawerSubitemProps } from \"./types\";\n\nexport const SidenavDrawerSubitem = ({\n    id,\n    title,\n    onClick,\n    ...otherProps\n}: SidenavDrawerSubitemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        currentItem,\n        setSelectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n    } = useContext(SidenavContext);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOnClick = () => {\n        if (onClick) {\n            onClick(id);\n        }\n        setSelectedItem({ itemId: currentItem?.itemId, content: undefined });\n        setCurrentItem(undefined);\n        setPreviouslySelectedItemId(undefined);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Container {...otherProps}>\n            <LinkButton type=\"button\" onClick={handleOnClick}>\n                {title}\n            </LinkButton>\n        </Container>\n    );\n};\n"],"names":["_a","id","title","onClick","otherProps","__rest","currentItem","setSelectedItem","setCurrentItem","setPreviouslySelectedItemId","useContext","SidenavContext","_jsx","Container","Object","assign","children","LinkButton","type","itemId","content","undefined"],"mappings":"qNAMqCA,QAAAC,GACjCA,EAAEC,MACFA,EAAKC,QACLA,KACGC,EAAUC,EAAAA,OAAAL,EAJoB,CAAA,KAAA,QAAA,YASjC,MAAMM,YACFA,EAAWC,gBACXA,EAAeC,eACfA,EAAcC,4BACdA,GACAC,EAAAA,WAAWC,kBAiBf,OACIC,EAAAA,IAACC,EAAAA,UAASC,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAY,SACrBJ,EAAAA,IAACK,EAAAA,WAAU,CAACC,KAAK,SAASf,QAdZ,KACdA,GACAA,EAAQF,GAEZM,EAAgB,CAAEY,OAAQb,aAAW,EAAXA,EAAaa,OAAQC,aAASC,IACxDb,OAAea,GACfZ,OAA4BY,EAAU,WAS7BnB,MAEG"}
+{"version":3,"file":"sidenav-drawer-subitem.js","sources":["../../../src/sidenav/sidenav-drawer-subitem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext } from \"react\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport * as styles from \"./sidenav-drawer-subitem.styles\";\nimport type { SidenavDrawerSubitemProps } from \"./types\";\n\nexport const SidenavDrawerSubitem = ({\n    id,\n    title,\n    onClick,\n    className,\n    ...otherProps\n}: SidenavDrawerSubitemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        currentItem,\n        setSelectedItem,\n        setCurrentItem,\n        setPreviouslySelectedItemId,\n    } = useContext(SidenavContext);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleOnClick = () => {\n        if (onClick) {\n            onClick(id);\n        }\n        setSelectedItem({ itemId: currentItem?.itemId, content: undefined });\n        setCurrentItem(undefined);\n        setPreviouslySelectedItemId(undefined);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <li {...otherProps} className={clsx(className)}>\n            <BasicButton\n                type=\"button\"\n                onClick={handleOnClick}\n                className={styles.linkButton}\n            >\n                {title}\n            </BasicButton>\n        </li>\n    );\n};\n"],"names":["_a","id","title","onClick","className","otherProps","__rest","currentItem","setSelectedItem","setCurrentItem","setPreviouslySelectedItemId","useContext","SidenavContext","_jsx","Object","assign","clsx","children","BasicButton","type","itemId","content","undefined","styles.linkButton"],"mappings":"gXAQqCA,IAAA,IAAAC,GACjCA,EAAEC,MACFA,EAAKC,QACLA,EAAOC,UACPA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALoB,CAAA,KAAA,QAAA,UAAA,cAUjC,MAAMO,YACFA,EAAWC,gBACXA,EAAeC,eACfA,EAAcC,4BACdA,GACAC,EAAAA,WAAWC,kBAiBf,OACIC,MAAA,KAAAC,OAAAC,OAAA,CAAA,EAAQV,EAAU,CAAED,UAAWY,UAAKZ,GAAUa,SAC1CJ,MAACK,EAAAA,aACGC,KAAK,SACLhB,QAhBU,KACdA,GACAA,EAAQF,GAEZO,EAAgB,CAAEY,OAAQb,aAAW,EAAXA,EAAaa,OAAQC,aAASC,IACxDb,OAAea,GACfZ,OAA4BY,EAAU,EAW9BlB,UAAWmB,EAAAA,WAAiBN,SAE3Bf,MAEJ"}

package/cjs/sidenav/sidenav-drawer-subitem.styles.js

@@ -1,17 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../shared/input-wrapper/input-wrapper.js"),t=require("../shared/styles/index.js"),o=require("../v3_theme/index.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=u(e);const n=i.default.li``,s=i.default(r.BasicButton)`
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border-radius: ${o.V3_Radius.md};
-
-    ${o.V3_Font["body-md-regular"]}
-    color: ${o.V3_Colour.text};
-    ${t.lineClampCss(2)}
-    text-align: left;
-
-    &:hover,
-    &:focus {
-        background-color: ${o.V3_Colour["bg-hover"]};
-        color: ${o.V3_Colour["text-hover"]};
-    }
-`;exports.Container=n,exports.LinkButton=s;
+"use strict";require("./sidenav-drawer-subitem.styles_1ylzfn5.css");exports.linkButton="l1ge7as9";
 //# sourceMappingURL=sidenav-drawer-subitem.styles.js.map

package/cjs/sidenav/sidenav-drawer-subitem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../../src/sidenav/sidenav-drawer-subitem.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { V3_Colour, V3_Font, V3_Radius } from \"../v3_theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.li``;\n\nexport const LinkButton = styled(BasicButton)`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${V3_Radius[\"md\"]};\n\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${V3_Colour[\"bg-hover\"]};\n        color: ${V3_Colour[\"text-hover\"]};\n    }\n`;\n"],"names":["Container","styled","li","LinkButton","BasicButton","V3_Radius","V3_Font","V3_Colour","lineClampCss"],"mappings":"wQASaA,EAAYC,EAAAA,QAAOC,EAAE,GAErBC,EAAaF,EAAAA,QAAOG,EAAAA,YAAY;;;qBAGxBC,EAAAA,UAAc;;MAE7BC,EAAAA,QAAQ;aACDC,EAAAA,UAAgB;MACvBC,EAAAA,aAAa;;;;;4BAKSD,EAAAA,UAAU;iBACrBA,EAAAA,UAAU;;"}
+{"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../../src/sidenav/sidenav-drawer-subitem.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n    width: 100%;\n    padding: 0.75rem 1rem;\n    border-radius: ${Radius[\"md\"]};\n\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n    ${lineClampCss(2)}\n    text-align: left;\n\n    &:hover,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n"],"names":[],"mappings":"8GAQuB"}

package/cjs/sidenav/sidenav-drawer-subitem.styles_1ylzfn5.css

@@ -0,0 +1 @@
+.l1ge7as9{width:100%;padding:0.75rem 1rem;border-radius:var(--fds-radius-md);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;}.l1ge7as9:hover,.l1ge7as9:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);}

package/cjs/sidenav/sidenav-group.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("../_virtual/_tslib.js"),e=require("react/jsx-runtime"),i=require("./sidenav-group.styles.js");exports.SidenavGroup=s=>{var{separator:t,children:a}=s,d=r.__rest(s,["separator","children"]);return e.jsxs(i.Container,Object.assign({},d,{children:[a,t&&e.jsx(i.Divider,{"data-testid":"divider"})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),a=require("./sidenav-group.styles.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(s);exports.SidenavGroup=s=>{var{separator:t,children:l,className:u}=s,c=e.__rest(s,["separator","children","className"]);return r.jsxs("ul",Object.assign({},c,{className:i.default(a.container,u),children:[l,t&&r.jsx("li",{"data-testid":"divider",className:a.divider})]}))};
 //# sourceMappingURL=sidenav-group.js.map

package/cjs/sidenav/sidenav-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-group.js","sources":["../../../src/sidenav/sidenav-group.tsx"],"sourcesContent":["import { Container, Divider } from \"./sidenav-group.styles\";\nimport type { SidenavGroupProps } from \"./types\";\n\nexport const SidenavGroup = ({\n    separator,\n    children,\n    ...otherProps\n}: SidenavGroupProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Container {...otherProps}>\n            {children}\n            {separator && <Divider data-testid=\"divider\" />}\n        </Container>\n    );\n};\n"],"names":["_a","separator","children","otherProps","__rest","_jsxs","Container","Object","assign","_jsx","Divider"],"mappings":"+IAG6BA,QAAAC,UACzBA,EAASC,SACTA,GAAQF,EACLG,EAAUC,EAAAA,OAAAJ,EAHY,0BAQzB,OACIK,EAAAA,KAACC,EAAAA,UAASC,OAAAC,OAAA,GAAKL,aACVD,EACAD,GAAaQ,EAAAA,IAACC,UAAO,CAAA,cAAa,eAC3B"}
+{"version":3,"file":"sidenav-group.js","sources":["../../../src/sidenav/sidenav-group.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./sidenav-group.styles\";\nimport type { SidenavGroupProps } from \"./types\";\n\nexport const SidenavGroup = ({\n    separator,\n    children,\n    className,\n    ...otherProps\n}: SidenavGroupProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <ul {...otherProps} className={clsx(styles.container, className)}>\n            {children}\n            {separator && (\n                <li data-testid=\"divider\" className={styles.divider} />\n            )}\n        </ul>\n    );\n};\n"],"names":["_a","separator","children","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.container","_jsx","styles.divider"],"mappings":"oPAK6BA,QAAAC,UACzBA,EAASC,SACTA,EAAQC,UACRA,KACGC,EAAUC,EAAAA,OAAAL,EAJY,CAAA,YAAA,WAAA,cASzB,OACIM,OAAA,KAAAC,OAAAC,OAAA,CAAA,EAAQJ,EAAU,CAAED,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,GAAUD,SAAA,CAC3DA,EACAD,GACGU,MAAA,KAAA,CAAA,cAAgB,UAAUR,UAAWS,EAAAA,aAExC"}

package/cjs/sidenav/sidenav-group.styles.js

@@ -1,13 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../v3_theme/index.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const o=i.default.ul`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    list-style: none;
-`,n=i.default.li`
-    margin-top: 1rem;
-    width: 6.5rem;
-    height: 1px;
-    background-color: ${t.V3_Colour.border};
-`;exports.Container=o,exports.Divider=n;
+"use strict";require("./sidenav-group.styles_1x604sw.css");exports.container="c4k7n35",exports.divider="d14gvick";
 //# sourceMappingURL=sidenav-group.styles.js.map

package/cjs/sidenav/sidenav-group.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-group.styles.js","sources":["../../../src/sidenav/sidenav-group.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Colour } from \"../v3_theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const Container = styled.ul`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n`;\n\nexport const Divider = styled.li`\n    margin-top: 1rem;\n    width: 6.5rem;\n    height: 1px;\n    background-color: ${V3_Colour.border};\n`;\n"],"names":["Container","styled","ul","Divider","li","V3_Colour","border"],"mappings":"qKAOO,MAAMA,EAAYC,EAAAA,QAAOC,EAAE;;;;;;EAQrBC,EAAUF,EAAAA,QAAOG,EAAE;;;;wBAIRC,EAAAA,UAAUC;"}
+{"version":3,"file":"sidenav-group.styles.js","sources":["../../../src/sidenav/sidenav-group.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const container = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    list-style: none;\n`;\n\nexport const divider = css`\n    margin-top: 1rem;\n    width: 6.5rem;\n    height: 1px;\n    background-color: ${Colour[\"border\"]};\n`;\n"],"names":[],"mappings":"oGAOsB,0BAQF"}

package/cjs/sidenav/sidenav-group.styles_1x604sw.css

@@ -0,0 +1,2 @@
+.c4k7n35{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;list-style:none;}
+.d14gvick{margin-top:1rem;width:6.5rem;height:1px;background-color:var(--fds-colour-border);}

package/cjs/sidenav/sidenav-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("@floating-ui/react"),n=require("react"),r=require("../external/react-resize-detector/build/index.esm.js"),s=require("../theme/theme-provider/hooks.js"),o=require("./sidenav-context.js"),l=require("./sidenav-item.styles.js");exports.SidenavItem=a=>{var{children:c,icon:d,title:u,onClick:h,selected:m}=a,g=e.__rest(a,["children","icon","title","onClick","selected"]);const{internalId:f,menuRef:p,currentItem:I,previouslySelectedItemId:x,selectedItem:v,setCurrentItem:j,setPreviouslySelectedItemId:y,setSelectedItem:S}=n.useContext(o.SidenavContext),C=g.id||u.toLowerCase().replaceAll(" ","-"),b=`${f}-drawer`,w=!!v&&v.itemId===C,R=!!I&&I.itemId===C,[q,P]=n.useState(!1),[k,F]=n.useState(null),[O,D]=n.useState(null),{floatingStyles:M,refs:$,context:z}=i.useFloating({open:q,onOpenChange:(e,t,i)=>{e?(p.current&&$.setPositionReference(p.current),c&&P(!0),"click"===i?N():"focus"!==i&&"hover"!==i||Q()):(P(!1),U())},placement:"right",middleware:[i.size({apply({elements:e}){const t=e.reference.getBoundingClientRect().height,i=`${Math.max(0,t)}px`;e.floating.style.height=i}})],elements:{reference:k,floating:O}}),T=i.useClick(z,{toggle:!1,stickIfOpen:!1}),_=i.useHover(z,{handleClose:i.safePolygon()}),B=i.useFocus(z,{visibleOnly:!1}),L=i.useDismiss(z,{enabled:!!c}),{getReferenceProps:A,getFloatingProps:E}=i.useInteractions([T,B,_,L]),{isMounted:H,styles:G}=i.useTransitionStyles(z),{themeProps:J,themeStyle:K}=s.useInheritedThemeScope(H);n.useEffect((()=>{m&&S({itemId:C,content:void 0})}),[C,m,S]),r.useResizeDetector({onResize:()=>{$.setPositionReference(p.current)},targetRef:p,refreshMode:"throttle",refreshRate:300});const N=()=>{y((()=>{if(c&&v)return x||v.itemId})()),j({itemId:C,content:c}),S({itemId:C,content:c}),h&&!c&&h(C)},Q=()=>{j({itemId:C,content:c})},U=()=>{j((e=>{if((null==e?void 0:e.itemId)!==C)return e}))},V=c?{"aria-controls":b,"aria-haspopup":!0,"aria-expanded":R&&!!I.content||w&&!!v.content}:{};return t.jsxs(l.Container,{children:[t.jsxs(l.DefaultButton,Object.assign({type:"button",ref:F,"aria-current":w?"page":void 0},V,g,{$highlight:w||R},A(),{onMouseLeave:()=>{q&&j(void 0)},children:[t.jsx(l.IconContainer,{"aria-hidden":!0,children:d}),t.jsx(l.TitleText,{inline:!0,children:u})]})),H&&t.jsx(i.FloatingPortal,{children:t.jsx(i.FloatingFocusManager,{context:z,modal:!1,initialFocus:-1,children:t.jsx("div",Object.assign({id:b,"data-testid":"sidenav-drawer",ref:D},J,{style:Object.assign(Object.assign({},K),M)},E(),{children:t.jsx(l.DesktopDrawer,{style:G,$showDrawer:q,$showShadow:R||w&&!I,children:c})}))})})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("@floating-ui/react"),s=require("clsx"),i=require("react"),n=require("../external/react-resize-detector/build/index.esm.js"),a=require("../shared/input-wrapper/input-wrapper.js"),l=require("../theme/theme-provider/hooks.js"),o=require("../typography/index.js"),c=require("./sidenav-context.js"),d=require("./sidenav-item.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=u(s);exports.SidenavItem=s=>{var{children:u,icon:m,title:p,onClick:f,selected:g,className:x}=s,j=e.__rest(s,["children","icon","title","onClick","selected","className"]);const{internalId:v,menuRef:I,currentItem:y,previouslySelectedItemId:S,selectedItem:q,setCurrentItem:C,setPreviouslySelectedItemId:b,setSelectedItem:w}=i.useContext(c.SidenavContext),R=j.id||p.toLowerCase().replaceAll(" ","-"),k=`${v}-drawer`,P=!!q&&q.itemId===R,F=!!y&&y.itemId===R,[N,O]=i.useState(!1),[B,M]=i.useState(null),[z,D]=i.useState(null),{floatingStyles:T,refs:_,context:H}=r.useFloating({open:N,onOpenChange:(e,t,r)=>{e?(I.current&&_.setPositionReference(I.current),u&&O(!0),"click"===r?V():"focus"!==r&&"hover"!==r||W()):(O(!1),Y())},placement:"right",middleware:[r.size({apply({elements:e}){const t=e.reference.getBoundingClientRect().height,r=`${Math.max(0,t)}px`;e.floating.style.height=r}})],elements:{reference:B,floating:z}}),L=r.useClick(H,{toggle:!1,stickIfOpen:!1}),$=r.useHover(H,{handleClose:r.safePolygon()}),A=r.useFocus(H,{visibleOnly:!1}),E=r.useDismiss(H,{enabled:!!u}),{getReferenceProps:X,getFloatingProps:G}=r.useInteractions([L,A,$,E]),{isMounted:J,styles:K}=r.useTransitionStyles(H),{themeProps:Q,themeStyle:U}=l.useInheritedThemeScope(J);i.useEffect((()=>{g&&w({itemId:R,content:void 0})}),[R,g,w]),n.useResizeDetector({onResize:()=>{_.setPositionReference(I.current)},targetRef:I,refreshMode:"throttle",refreshRate:300});const V=()=>{b((()=>{if(u&&q)return S||q.itemId})()),C({itemId:R,content:u}),w({itemId:R,content:u}),f&&!u&&f(R)},W=()=>{C({itemId:R,content:u})},Y=()=>{C((e=>{if((null==e?void 0:e.itemId)!==R)return e}))},Z=u?{"aria-controls":k,"aria-haspopup":!0,"aria-expanded":F&&!!y.content||P&&!!q.content}:{};return t.jsxs("li",{className:d.container,children:[t.jsxs(a.BasicButton,Object.assign({type:"button",ref:M,"aria-current":P?"page":void 0},Z,j,{className:h.default(d.defaultButton,(P||F)&&d.defaultButtonHighlight,x)},X(),{onMouseLeave:()=>{N&&C(void 0)},children:[t.jsx("span",{"aria-hidden":!0,className:d.iconContainer,children:m}),t.jsx(o.Typography.BodyXS,{inline:!0,className:d.titleText,children:p})]})),J&&t.jsx(r.FloatingPortal,{children:t.jsx(r.FloatingFocusManager,{context:H,modal:!1,initialFocus:-1,children:t.jsx("div",Object.assign({id:k,"data-testid":"sidenav-drawer",ref:D},Q,{style:Object.assign(Object.assign({},U),T)},G(),{children:t.jsx("ul",{style:K,className:h.default(d.desktopDrawer,(F||P&&!y)&&d.desktopDrawerShowShadow),children:u})}))})})]})};
 //# sourceMappingURL=sidenav-item.js.map