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

package/cjs/shared/internal-calendar/week/week-day-cell.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../../external/dayjs/dayjs.min.js"),a=require("../../../util/calendar-helper.js"),r=require("../../../util/date-helper.js");require("react"),require("../../../util/string-helper.js");var l=require("../day-cell/day-cell.js");exports.WeekDayCell=({date:n,calendarDate:d,selectedDate:s,hoverDate:o,focusDate:i,minDate:c,maxDate:u,disabledDates:D,allowDisabledSelection:y,onSelect:m,onHover:b,onFocus:f,setFocusCell:p,tabIndex:v})=>{const h=a.CalendarHelper.isDisabledDay(n,D,c,u),M=!h||y,{start:j,end:S}=a.CalendarHelper.getWeekStartEnd(r.DateHelper.toDayjs(s)),{start:Y,end:g}=a.CalendarHelper.getWeekStartEnd(r.DateHelper.toDayjs(o)),{start:w,end:H}=a.CalendarHelper.getWeekStartEnd(n),k=n.isSame(w,"day"),q=s&&n.isBetween(j,S,"day","[]"),x=o&&n.isBetween(Y,g,"day","[]"),C=q&&n.isSame(j)||x&&n.isSame(Y),E=q&&n.isSame(S)||x&&n.isSame(g),F=`From ${t.default(w).format("D MMMM")} to ${t.default(H).format("D MMMM")}, ${h?"Unavailable":"Available"}`,W=()=>{m(n,!M)},A={date:n,calendarDate:d,disabled:h,interactive:M,currentDateIndicator:!0,onSelect:W,onHover:()=>{b(n.format("YYYY-MM-DD"),!M)},onFocus:()=>{f(n.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(M&&W());(e=>{let t;const a={ArrowUp:()=>n.subtract(7,"day"),ArrowDown:()=>n.add(7,"day"),Home:()=>n.startOf("week"),End:()=>n.endOf("week"),PageUp:()=>e.shiftKey?n.subtract(1,"year"):n.subtract(1,"month"),PageDown:()=>e.shiftKey?n.add(1,"year"):n.add(1,"month")}[e.key];a&&(e.preventDefault(),t=a(),p(t.format("YYYY-MM-DD")))})(e)},focusDate:t.default(i),tabIndex:v,label:F,ariaHidden:!k||void 0,role:k?"button":"none"};return e.jsx(l.DayCell,Object.assign({},A,(()=>{const e={};return d.month()!==n.month()?e.labelType="unavailable":t.default().isSame(n,"day")&&!h&&(e.labelType="current"),e})(),(()=>{const e={};let t,a;return q&&x?(t="selected-hover-outline",a="selected-hover"):q?(t="selected-outline",a="selected"):x&&(t="hover",a="hover"),t&&(e.labelType=a,C?e.circleLeft=t:e.bgLeft=t,E?e.circleRight=t:e.bgRight=t),e})()))};
+"use strict";var e=require("react/jsx-runtime"),a=require("../../../external/dayjs/dayjs.min.js"),t=require("../../../util/calendar-helper.js"),r=require("../../../util/date-helper.js");require("react"),require("../../../util/simple-id-generator.js"),require("../../../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("../day-cell/day-cell.js");exports.WeekDayCell=({date:n,calendarDate:s,selectedDate:d,hoverDate:i,focusDate:o,minDate:c,maxDate:u,disabledDates:D,allowDisabledSelection:y,onSelect:m,onHover:b,onFocus:f,setFocusCell:p,tabIndex:v})=>{const h=t.CalendarHelper.isDisabledDay(n,D,c,u),M=!h||y,{start:j,end:g}=t.CalendarHelper.getWeekStartEnd(r.DateHelper.toDayjs(d)),{start:S,end:Y}=t.CalendarHelper.getWeekStartEnd(r.DateHelper.toDayjs(i)),{start:w,end:H}=t.CalendarHelper.getWeekStartEnd(n),q=n.isSame(w,"day"),k=d&&n.isBetween(j,g,"day","[]"),x=i&&n.isBetween(S,Y,"day","[]"),C=k&&n.isSame(j)||x&&n.isSame(S),E=k&&n.isSame(g)||x&&n.isSame(Y),F=`From ${a.default(w).format("D MMMM")} to ${a.default(H).format("D MMMM")}, ${h?"Unavailable":"Available"}`,W=()=>{m(n,!M)},A={date:n,calendarDate:s,disabled:h,interactive:M,currentDateIndicator:!0,onSelect:W,onHover:()=>{b(n.format("YYYY-MM-DD"),!M)},onFocus:()=>{f(n.format("YYYY-MM-DD"))},onKeyDown:e=>{const a=e.key;if("Enter"===a||" "===a)return e.preventDefault(),void(M&&W());(e=>{let a;const t={ArrowUp:()=>n.subtract(7,"day"),ArrowDown:()=>n.add(7,"day"),Home:()=>n.startOf("week"),End:()=>n.endOf("week"),PageUp:()=>e.shiftKey?n.subtract(1,"year"):n.subtract(1,"month"),PageDown:()=>e.shiftKey?n.add(1,"year"):n.add(1,"month")}[e.key];t&&(e.preventDefault(),a=t(),p(a.format("YYYY-MM-DD")))})(e)},focusDate:a.default(o),tabIndex:v,label:F,ariaHidden:!q||void 0,role:q?"button":"none"};return e.jsx(l.DayCell,Object.assign({},A,(()=>{const e={};return s.month()!==n.month()?e.labelType="unavailable":a.default().isSame(n,"day")&&!h&&(e.labelType="current"),e})(),(()=>{const e={};let a,t;return k&&x?(a="selected-hover-outline",t="selected-hover"):k?(a="selected-outline",t="selected"):x&&(a="hover",t="hover"),a&&(e.labelType=t,C?e.circleLeft=a:e.bgLeft=a,E?e.circleRight=a:e.bgRight=a),e})()))};
 //# sourceMappingURL=week-day-cell.js.map

package/cjs/shared/internal-calendar/week/week-day-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"week-day-cell.js","sources":["../../../../../src/shared/internal-calendar/week/week-day-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper, DateHelper } from \"../../../util\";\nimport type {\n    CellStyleProps,\n    CellType,\n    DayCellProps,\n    LabelType,\n} from \"../day-cell\";\nimport { DayCell } from \"../day-cell\";\n\ninterface Props {\n    date: Dayjs;\n    calendarDate: Dayjs;\n    selectedDate: string | undefined;\n    hoverDate: string;\n    focusDate: string;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    disabledDates?: string[] | undefined;\n    allowDisabledSelection?: boolean | undefined;\n    onSelect: (value: Dayjs, disabled: boolean) => void;\n    onHover: (value: string, disabled: boolean) => void;\n    onFocus: (value: string) => void;\n    setFocusCell: (value: string) => void;\n    tabIndex: number;\n}\n\nexport const WeekDayCell = ({\n    date,\n    calendarDate,\n    selectedDate,\n    hoverDate,\n    focusDate,\n    minDate,\n    maxDate,\n    disabledDates,\n    allowDisabledSelection,\n    onSelect,\n    onHover,\n    onFocus,\n    setFocusCell,\n    tabIndex,\n}: Props) => {\n    // =========================================================================\n    // CONSTS\n    // =========================================================================\n    const disabled = CalendarHelper.isDisabledDay(\n        date,\n        disabledDates,\n        minDate,\n        maxDate\n    );\n    const interactive = !disabled || allowDisabledSelection;\n    const { start: selectedStart, end: selectedEnd } =\n        CalendarHelper.getWeekStartEnd(DateHelper.toDayjs(selectedDate));\n    const { start: hoverStart, end: hoverEnd } = CalendarHelper.getWeekStartEnd(\n        DateHelper.toDayjs(hoverDate)\n    );\n\n    const { start: weekStart, end: weekEnd } =\n        CalendarHelper.getWeekStartEnd(date);\n    const isFirstDayOfWeek = date.isSame(weekStart, \"day\");\n\n    const isSelected =\n        selectedDate && date.isBetween(selectedStart, selectedEnd, \"day\", \"[]\");\n    const isHover =\n        hoverDate && date.isBetween(hoverStart, hoverEnd, \"day\", \"[]\");\n    const isStart =\n        (isSelected && date.isSame(selectedStart)) ||\n        (isHover && date.isSame(hoverStart));\n    const isEnd =\n        (isSelected && date.isSame(selectedEnd)) ||\n        (isHover && date.isSame(hoverEnd));\n\n    // For accessible label\n    const label = `From ${dayjs(weekStart).format(\"D MMMM\")} to ${dayjs(\n        weekEnd\n    ).format(\"D MMMM\")}, ${disabled ? \"Unavailable\" : \"Available\"}`;\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelect = () => {\n        onSelect(date, !interactive);\n    };\n\n    const handleHover = () => {\n        onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n    };\n\n    const handleFocus = () => {\n        onFocus(date.format(\"YYYY-MM-DD\"));\n    };\n\n    const handleKeyNavigation = (event: React.KeyboardEvent) => {\n        let newFocusSelection: Dayjs | undefined;\n\n        // No left and right arrow keys for week view\n        const keyActions: Record<string, () => dayjs.Dayjs> = {\n            ArrowUp: () => date.subtract(7, \"day\"),\n            ArrowDown: () => date.add(7, \"day\"),\n            Home: () => date.startOf(\"week\"),\n            End: () => date.endOf(\"week\"),\n            PageUp: () => {\n                return event.shiftKey\n                    ? date.subtract(1, \"year\")\n                    : date.subtract(1, \"month\");\n            },\n            PageDown: () => {\n                return event.shiftKey\n                    ? date.add(1, \"year\")\n                    : date.add(1, \"month\");\n            },\n        };\n\n        const action = keyActions[event.key];\n        if (action) {\n            event.preventDefault();\n            newFocusSelection = action();\n            setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n        const selectedKey = keyboardEvent.key;\n\n        if (selectedKey === \"Enter\" || selectedKey === \" \") {\n            event.preventDefault();\n            if (interactive) {\n                handleSelect();\n            }\n            return;\n        }\n\n        handleKeyNavigation(event);\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getRangeStyle = (): CellStyleProps => {\n        const props: CellStyleProps = {};\n\n        let type: CellType | undefined = undefined;\n        let labelType: LabelType | undefined = undefined;\n        if (isSelected && isHover) {\n            type = \"selected-hover-outline\";\n            labelType = \"selected-hover\";\n        } else if (isSelected) {\n            type = \"selected-outline\";\n            labelType = \"selected\";\n        } else if (isHover) {\n            type = \"hover\";\n            labelType = \"hover\";\n        }\n\n        if (type) {\n            props.labelType = labelType;\n\n            if (isStart) {\n                props.circleLeft = type;\n            } else {\n                props.bgLeft = type;\n            }\n\n            if (isEnd) {\n                props.circleRight = type;\n            } else {\n                props.bgRight = type;\n            }\n        }\n\n        return props;\n    };\n\n    const getCellStyle = () => {\n        const props: CellStyleProps = {};\n\n        if (calendarDate.month() !== date.month()) {\n            props.labelType = \"unavailable\";\n        } else if (dayjs().isSame(date, \"day\") && !disabled) {\n            props.labelType = \"current\";\n        }\n\n        return props;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const commonProps: DayCellProps = {\n        date,\n        calendarDate,\n        disabled,\n        interactive,\n        currentDateIndicator: true,\n        onSelect: handleSelect,\n        onHover: handleHover,\n        onFocus: handleFocus,\n        onKeyDown: handleKeyDown,\n        focusDate: dayjs(focusDate),\n        tabIndex,\n        label,\n        // Aria hidden for all but the first day of the week\n        // To ensure the same labels dont show in accessibility tree\n        ariaHidden: isFirstDayOfWeek ? undefined : true,\n        role: isFirstDayOfWeek ? \"button\" : \"none\",\n    };\n\n    return (\n        <DayCell {...commonProps} {...getCellStyle()} {...getRangeStyle()} />\n    );\n};\n"],"names":["date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","start","selectedStart","end","selectedEnd","getWeekStartEnd","DateHelper","toDayjs","hoverStart","hoverEnd","weekStart","weekEnd","isFirstDayOfWeek","isSame","isSelected","isBetween","isHover","isStart","isEnd","label","dayjs","format","handleSelect","commonProps","currentDateIndicator","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowUp","subtract","ArrowDown","add","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","ariaHidden","undefined","role","_jsx","DayCell","Object","assign","props","month","labelType","getCellStyle","type","circleLeft","bgLeft","circleRight","bgRight","getRangeStyle"],"mappings":"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"}
+{"version":3,"file":"week-day-cell.js","sources":["../../../../../src/shared/internal-calendar/week/week-day-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper, DateHelper } from \"../../../util\";\nimport type {\n    CellStyleProps,\n    CellType,\n    DayCellProps,\n    LabelType,\n} from \"../day-cell\";\nimport { DayCell } from \"../day-cell\";\n\ninterface Props {\n    date: Dayjs;\n    calendarDate: Dayjs;\n    selectedDate: string | undefined;\n    hoverDate: string;\n    focusDate: string;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    disabledDates?: string[] | undefined;\n    allowDisabledSelection?: boolean | undefined;\n    onSelect: (value: Dayjs, disabled: boolean) => void;\n    onHover: (value: string, disabled: boolean) => void;\n    onFocus: (value: string) => void;\n    setFocusCell: (value: string) => void;\n    tabIndex: number;\n}\n\nexport const WeekDayCell = ({\n    date,\n    calendarDate,\n    selectedDate,\n    hoverDate,\n    focusDate,\n    minDate,\n    maxDate,\n    disabledDates,\n    allowDisabledSelection,\n    onSelect,\n    onHover,\n    onFocus,\n    setFocusCell,\n    tabIndex,\n}: Props) => {\n    // =========================================================================\n    // CONSTS\n    // =========================================================================\n    const disabled = CalendarHelper.isDisabledDay(\n        date,\n        disabledDates,\n        minDate,\n        maxDate\n    );\n    const interactive = !disabled || allowDisabledSelection;\n    const { start: selectedStart, end: selectedEnd } =\n        CalendarHelper.getWeekStartEnd(DateHelper.toDayjs(selectedDate));\n    const { start: hoverStart, end: hoverEnd } = CalendarHelper.getWeekStartEnd(\n        DateHelper.toDayjs(hoverDate)\n    );\n\n    const { start: weekStart, end: weekEnd } =\n        CalendarHelper.getWeekStartEnd(date);\n    const isFirstDayOfWeek = date.isSame(weekStart, \"day\");\n\n    const isSelected =\n        selectedDate && date.isBetween(selectedStart, selectedEnd, \"day\", \"[]\");\n    const isHover =\n        hoverDate && date.isBetween(hoverStart, hoverEnd, \"day\", \"[]\");\n    const isStart =\n        (isSelected && date.isSame(selectedStart)) ||\n        (isHover && date.isSame(hoverStart));\n    const isEnd =\n        (isSelected && date.isSame(selectedEnd)) ||\n        (isHover && date.isSame(hoverEnd));\n\n    // For accessible label\n    const label = `From ${dayjs(weekStart).format(\"D MMMM\")} to ${dayjs(\n        weekEnd\n    ).format(\"D MMMM\")}, ${disabled ? \"Unavailable\" : \"Available\"}`;\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSelect = () => {\n        onSelect(date, !interactive);\n    };\n\n    const handleHover = () => {\n        onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n    };\n\n    const handleFocus = () => {\n        onFocus(date.format(\"YYYY-MM-DD\"));\n    };\n\n    const handleKeyNavigation = (event: React.KeyboardEvent) => {\n        let newFocusSelection: Dayjs | undefined;\n\n        // No left and right arrow keys for week view\n        const keyActions: Record<string, () => dayjs.Dayjs> = {\n            ArrowUp: () => date.subtract(7, \"day\"),\n            ArrowDown: () => date.add(7, \"day\"),\n            Home: () => date.startOf(\"week\"),\n            End: () => date.endOf(\"week\"),\n            PageUp: () => {\n                return event.shiftKey\n                    ? date.subtract(1, \"year\")\n                    : date.subtract(1, \"month\");\n            },\n            PageDown: () => {\n                return event.shiftKey\n                    ? date.add(1, \"year\")\n                    : date.add(1, \"month\");\n            },\n        };\n\n        const action = keyActions[event.key];\n        if (action) {\n            event.preventDefault();\n            newFocusSelection = action();\n            setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n        const selectedKey = keyboardEvent.key;\n\n        if (selectedKey === \"Enter\" || selectedKey === \" \") {\n            event.preventDefault();\n            if (interactive) {\n                handleSelect();\n            }\n            return;\n        }\n\n        handleKeyNavigation(event);\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const getRangeStyle = (): CellStyleProps => {\n        const props: CellStyleProps = {};\n\n        let type: CellType | undefined = undefined;\n        let labelType: LabelType | undefined = undefined;\n        if (isSelected && isHover) {\n            type = \"selected-hover-outline\";\n            labelType = \"selected-hover\";\n        } else if (isSelected) {\n            type = \"selected-outline\";\n            labelType = \"selected\";\n        } else if (isHover) {\n            type = \"hover\";\n            labelType = \"hover\";\n        }\n\n        if (type) {\n            props.labelType = labelType;\n\n            if (isStart) {\n                props.circleLeft = type;\n            } else {\n                props.bgLeft = type;\n            }\n\n            if (isEnd) {\n                props.circleRight = type;\n            } else {\n                props.bgRight = type;\n            }\n        }\n\n        return props;\n    };\n\n    const getCellStyle = () => {\n        const props: CellStyleProps = {};\n\n        if (calendarDate.month() !== date.month()) {\n            props.labelType = \"unavailable\";\n        } else if (dayjs().isSame(date, \"day\") && !disabled) {\n            props.labelType = \"current\";\n        }\n\n        return props;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const commonProps: DayCellProps = {\n        date,\n        calendarDate,\n        disabled,\n        interactive,\n        currentDateIndicator: true,\n        onSelect: handleSelect,\n        onHover: handleHover,\n        onFocus: handleFocus,\n        onKeyDown: handleKeyDown,\n        focusDate: dayjs(focusDate),\n        tabIndex,\n        label,\n        // Aria hidden for all but the first day of the week\n        // To ensure the same labels dont show in accessibility tree\n        ariaHidden: isFirstDayOfWeek ? undefined : true,\n        role: isFirstDayOfWeek ? \"button\" : \"none\",\n    };\n\n    return (\n        <DayCell {...commonProps} {...getCellStyle()} {...getRangeStyle()} />\n    );\n};\n"],"names":["date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","start","selectedStart","end","selectedEnd","getWeekStartEnd","DateHelper","toDayjs","hoverStart","hoverEnd","weekStart","weekEnd","isFirstDayOfWeek","isSame","isSelected","isBetween","isHover","isStart","isEnd","label","dayjs","format","handleSelect","commonProps","currentDateIndicator","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowUp","subtract","ArrowDown","add","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","ariaHidden","undefined","role","_jsx","DayCell","Object","assign","props","month","labelType","getCellStyle","type","circleLeft","bgLeft","circleRight","bgRight","getRangeStyle"],"mappings":"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"}

package/cjs/shared/progress-bar/progress-bar.js

@@ -1,33 +1,2 @@
-"use strict";var t=require("react/jsx-runtime"),e=require("styled-components"),r=require("../../v3_theme/index.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const s=o(e).default.div`
-    position: relative;
-    width: 100%;
-    height: 8px;
-    background: transparent;
-
-    progress {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-    }
-
-    ${t=>{const{$color:o}=t;let s;return s=o&&"string"==typeof o?o:o?o(t):r.V3_Colour["icon-primary-subtle"](t),e.css`
-            border: ${r.V3_Border["width-010"]} ${r.V3_Border.solid}
-                ${s};
-            border-radius: ${r.V3_Radius.sm};
-
-            &:after {
-                content: "";
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                border-radius: inherit;
-                background: ${s};
-                width: ${100*t.$innerWidth}%;
-            }
-        `}}
-`;exports.ProgressBar=({className:e,progress:r,color:o,"data-testid":i})=>t.jsx(s,{className:e,$innerWidth:r,$color:o,"data-testid":i,children:t.jsx("progress",{value:100*r,max:100})});
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),s=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var t=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var u=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var i=require("./progress-bar.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=a(r);exports.ProgressBar=({className:r,progress:a,colour:l,"data-testid":n})=>{const m=null!=l?l:t.Colour["icon-primary-subtle"],d=s.useRef(null);return u.useApplyStyle(d,{[i.tokens.barColour]:m,[i.tokens.barWidth]:100*a+"%"}),e.jsx("div",{className:o.default(i.bar,r),"data-testid":n,ref:d,children:e.jsx("progress",{value:100*a,max:100})})};
 //# sourceMappingURL=progress-bar.js.map

package/cjs/shared/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../../../src/shared/progress-bar/progress-bar.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Border, V3_Colour, V3_Radius } from \"../../v3_theme\";\nimport type { getPrimitiveColour } from \"../../v3_theme/colour-primitive/theme-helper\";\nimport type { getSemanticColour } from \"../../v3_theme/colour-semantic/theme-helper\";\n\ntype ThemeColorFunctions = ReturnType<\n    typeof getSemanticColour | typeof getPrimitiveColour\n>;\n\ninterface Props {\n    className?: string | undefined;\n    /** Progress from 0 to 1 */\n    progress: number;\n    color?: string | ThemeColorFunctions | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ProgressBar = ({\n    className,\n    progress,\n    color,\n    \"data-testid\": testId,\n}: Props) => (\n    <Bar\n        className={className}\n        $innerWidth={progress}\n        $color={color}\n        data-testid={testId}\n    >\n        <progress value={progress * 100} max={100} />\n    </Bar>\n);\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $color?: string | ThemeColorFunctions | undefined;\n    $innerWidth: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst Bar = styled.div<StyleProps>`\n    position: relative;\n    width: 100%;\n    height: 8px;\n    background: transparent;\n\n    progress {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n    }\n\n    ${(props) => {\n        const { $color: color } = props;\n        let colorToUse: string;\n        if (color && typeof color === \"string\") {\n            colorToUse = color;\n        } else if (color) {\n            colorToUse = (color as ThemeColorFunctions)(props);\n        } else {\n            colorToUse = V3_Colour[\"icon-primary-subtle\"](props);\n        }\n\n        return css`\n            border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n                ${colorToUse};\n            border-radius: ${V3_Radius[\"sm\"]};\n\n            &:after {\n                content: \"\";\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                left: 0;\n                border-radius: inherit;\n                background: ${colorToUse};\n                width: ${props.$innerWidth * 100}%;\n            }\n        `;\n    }}\n`;\n"],"names":["Bar","styled","div","props","$color","color","colorToUse","V3_Colour","css","V3_Border","V3_Radius","$innerWidth","className","progress","testId","_jsx","value","max"],"mappings":"kMA6CMA,OAAMC,QAAOC,GAAe;;;;;;;;;;;;;;;MAe3BC,IACC,MAAQC,OAAQC,GAAUF,EAC1B,IAAIG,EASJ,OAPIA,EADAD,GAA0B,iBAAVA,EACHA,EACNA,EACOA,EAA8BF,GAE/BI,EAAAA,UAAU,uBAAuBJ,GAG3CK,KAAG;sBACIC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;kBAC/CH;6BACWI,EAAAA,UAAc;;;;;;;;;8BASbJ;yBACe,IAApBH,EAAMQ;;SAEtB;sBApEkB,EACvBC,YACAC,WACAR,QACA,cAAeS,KAEfC,EAAAA,IAACf,EAAG,CACAY,UAAWA,cACEC,EAAQT,OACbC,EAAK,cACAS,WAEbC,EAAAA,IAAA,WAAA,CAAUC,MAAkB,IAAXH,EAAgBI,IAAK"}
+{"version":3,"file":"progress-bar.js","sources":["../../../../src/shared/progress-bar/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { ColourCSSVariableString } from \"../../theme\";\nimport { Colour, useApplyStyle } from \"../../theme\";\nimport * as styles from \"./progress-bar.styles\";\n\ninterface Props {\n    className?: string | undefined;\n    /** Progress from 0 to 1 */\n    progress: number;\n    colour?: string | ColourCSSVariableString | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ProgressBar = ({\n    className,\n    progress,\n    colour,\n    \"data-testid\": testId,\n}: Props) => {\n    const colourToUse = colour ?? Colour[\"icon-primary-subtle\"];\n\n    const barRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(barRef, {\n        [styles.tokens.barColour]: colourToUse,\n        [styles.tokens.barWidth]: `${progress * 100}%`,\n    });\n\n    return (\n        <div\n            className={clsx(styles.bar, className)}\n            data-testid={testId}\n            ref={barRef}\n        >\n            <progress value={progress * 100} max={100} />\n        </div>\n    );\n};\n"],"names":["className","progress","colour","testId","colourToUse","Colour","barRef","useRef","useApplyStyle","styles.tokens","barColour","barWidth","_jsx","clsx","styles.bar","ref","children","value","max"],"mappings":"slBAe2B,EACvBA,YACAC,WAAQC,OACRA,EACA,cAAeC,MAEf,MAAMC,EAAcF,QAAAA,EAAUG,EAAAA,OAAO,uBAE/BC,EAASC,EAAAA,OAAuB,MAOtC,OALAC,EAAAA,cAAcF,EAAQ,CAClB,CAACG,EAAAA,OAAcC,WAAYN,EAC3B,CAACK,EAAAA,OAAcE,UAAyB,IAAXV,EAAH,MAI1BW,EAAAA,IAAA,MAAA,CACIZ,UAAWa,EAAAA,QAAKC,EAAAA,IAAYd,GAAU,cACzBG,EACbY,IAAKT,EAAMU,SAEXJ,EAAAA,IAAA,WAAA,CAAUK,MAAkB,IAAXhB,EAAgBiB,IAAK,OACpC"}

package/cjs/shared/progress-bar/progress-bar.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./progress-bar.styles_125ri7a.css");exports.bar="b1gldp2k",exports.tokens={barColour:"--fds-internal-progressBar-colour",barWidth:"--fds-internal-progressBar-width"};
+//# sourceMappingURL=progress-bar.styles.js.map

package/cjs/shared/progress-bar/progress-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.styles.js","sources":["../../../../src/shared/progress-bar/progress-bar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Radius } from \"../../theme\";\n\nexport const tokens = {\n    barColour: \"--fds-internal-progressBar-colour\",\n    barWidth: \"--fds-internal-progressBar-width\",\n};\n\nexport const bar = css`\n    position: relative;\n    width: 100%;\n    height: 8px;\n    background: transparent;\n\n    border-style: ${Border[\"solid\"]};\n    border-width: ${Border[\"width-010\"]};\n    border-radius: ${Radius[\"sm\"]};\n    border-color: var(${tokens.barColour});\n\n    progress {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0;\n    }\n\n    &:after {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: inherit;\n        background: var(${tokens.barColour});\n        width: var(${tokens.barWidth});\n    }\n`;\n"],"names":["barColour","barWidth"],"mappings":"yGASgB,0BALM,CAClBA,UAAW,oCACXC,SAAU"}

package/cjs/shared/progress-bar/progress-bar.styles_125ri7a.css

@@ -0,0 +1 @@
+.b1gldp2k{position:relative;width:100%;height:8px;background:transparent;border-style:var(--fds-border-style-solid);border-width:var(--fds-border-width-010);border-radius:var(--fds-radius-sm);border-color:var(--fds-internal-progressBar-colour);}.b1gldp2k progress{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;}.b1gldp2k:after{content:"";position:absolute;top:0;bottom:0;left:0;border-radius:inherit;background:var(--fds-internal-progressBar-colour);width:var(--fds-internal-progressBar-width);}

package/cjs/shared/range-input-inner-container/range-input-inner-container.js

@@ -1,2 +1,2 @@
-"use strict";var r=require("react/jsx-runtime"),e=require("./range-input-inner-container.styles.js");exports.RangeInputInnerContainer=({children:n,currentActive:a,error:t,className:i,wrap:s})=>{const[c,o]=n;return r.jsxs(e.Wrapper,{className:i,$wrap:s,children:[r.jsx(e.ElementContainer,{"data-id":"range-container-elem1-container",children:c}),r.jsx(e.ArrowRight,{}),s&&r.jsx(e.Break,{}),r.jsx(e.ElementContainer,{"data-id":"range-container-elem2-container",children:o}),r.jsx(e.Indicator,{"data-id":"range-container-indicator",$position:a,$error:t,$wrap:s})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("clsx"),n=require("./range-input-inner-container.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=i(a);exports.RangeInputInnerContainer=({children:a,currentActive:i,error:s,className:c,wrap:d})=>{const[o,l]=a;return e.jsxs("div",{className:t.default(n.wrapper,d&&n.wrapperWrap,c),children:[e.jsx("div",{className:n.elementContainer,"data-id":"range-container-elem1-container",children:o}),e.jsx(r.ArrowRightIcon,{"aria-hidden":"true",className:n.arrowRight}),d&&e.jsx("div",{className:n.lineBreak}),e.jsx("div",{className:n.elementContainer,"data-id":"range-container-elem2-container",children:l}),e.jsx("div",{className:t.default(n.indicator,s&&n.indicatorError,d&&n.indicatorWrap),"data-id":"range-container-indicator","data-position":i})]})};
 //# sourceMappingURL=range-input-inner-container.js.map

package/cjs/shared/range-input-inner-container/range-input-inner-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-input-inner-container.js","sources":["../../../../src/shared/range-input-inner-container/range-input-inner-container.tsx"],"sourcesContent":["import {\n    ArrowRight,\n    Break,\n    ElementContainer,\n    Indicator,\n    Wrapper,\n} from \"./range-input-inner-container.styles\";\nimport type { RangeInputInnerContainerProps } from \"./types\";\n\n/**\n * This component allows for input fields to be added within the containers\n * and renders the slider based on the focused element.\n */\nexport const RangeInputInnerContainer = ({\n    children,\n    currentActive,\n    error,\n    className,\n    wrap,\n}: RangeInputInnerContainerProps) => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const [elem1, elem2] = children;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Wrapper className={className} $wrap={wrap}>\n            <ElementContainer data-id=\"range-container-elem1-container\">\n                {elem1}\n            </ElementContainer>\n            <ArrowRight />\n            {wrap && <Break />}\n            <ElementContainer data-id=\"range-container-elem2-container\">\n                {elem2}\n            </ElementContainer>\n            <Indicator\n                data-id=\"range-container-indicator\"\n                $position={currentActive}\n                $error={error}\n                $wrap={wrap}\n            />\n        </Wrapper>\n    );\n};\n"],"names":["children","currentActive","error","className","wrap","elem1","elem2","_jsxs","Wrapper","$wrap","_jsx","ElementContainer","ArrowRight","Break","Indicator","$position","$error"],"mappings":"sIAawC,EACpCA,WACAC,gBACAC,QACAC,YACAC,WAKA,MAAOC,EAAOC,GAASN,EAKvB,OACIO,EAAAA,KAACC,UAAO,CAACL,UAAWA,EAASM,MAASL,EAAIJ,SAAA,CACtCU,MAACC,EAAAA,iBAAgB,CAAA,UAAS,2CACrBN,IAELK,EAAAA,IAACE,aAAU,CAAA,GACVR,GAAQM,EAAAA,IAACG,EAAAA,MAAK,IACfH,MAACC,EAAAA,4BAAyB,kCAAiCX,SACtDM,IAELI,MAACI,EAAAA,UAAS,CAAA,UACE,4BAA2BC,UACxBd,EAAae,OAChBd,QACDE,MAEL"}
+{"version":3,"file":"range-input-inner-container.js","sources":["../../../../src/shared/range-input-inner-container/range-input-inner-container.tsx"],"sourcesContent":["import { ArrowRightIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\n\nimport * as styles from \"./range-input-inner-container.styles\";\nimport type { RangeInputInnerContainerProps } from \"./types\";\n\n/**\n * This component allows for input fields to be added within the containers\n * and renders the slider based on the focused element.\n */\nexport const RangeInputInnerContainer = ({\n    children,\n    currentActive,\n    error,\n    className,\n    wrap,\n}: RangeInputInnerContainerProps) => {\n    // =========================================================================\n    // CONST, STATE\n    // =========================================================================\n    const [elem1, elem2] = children;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <div\n            className={clsx(\n                styles.wrapper,\n                wrap && styles.wrapperWrap,\n                className\n            )}\n        >\n            <div\n                className={styles.elementContainer}\n                data-id=\"range-container-elem1-container\"\n            >\n                {elem1}\n            </div>\n            <ArrowRightIcon aria-hidden=\"true\" className={styles.arrowRight} />\n            {wrap && <div className={styles.lineBreak} />}\n            <div\n                className={styles.elementContainer}\n                data-id=\"range-container-elem2-container\"\n            >\n                {elem2}\n            </div>\n            <div\n                className={clsx(\n                    styles.indicator,\n                    error && styles.indicatorError,\n                    wrap && styles.indicatorWrap\n                )}\n                data-id=\"range-container-indicator\"\n                data-position={currentActive}\n            />\n        </div>\n    );\n};\n"],"names":["children","currentActive","error","className","wrap","elem1","elem2","_jsxs","clsx","styles.wrapper","styles.wrapperWrap","_jsx","styles.elementContainer","ArrowRightIcon","styles.arrowRight","styles.lineBreak","styles.indicator","styles.indicatorError","styles.indicatorWrap"],"mappings":"4QAUwC,EACpCA,WACAC,gBACAC,QACAC,YACAC,WAKA,MAAOC,EAAOC,GAASN,EAKvB,OACIO,EAAAA,YACIJ,UAAWK,EAAAA,QACPC,EAAAA,QACAL,GAAQM,EAAAA,YACRP,GACHH,SAAA,CAEDW,EAAAA,WACIR,UAAWS,EAAAA,2BACH,kCAAiCZ,SAExCK,IAELM,EAAAA,IAACE,EAAAA,eAAc,CAAA,cAAa,OAAOV,UAAWW,EAAAA,aAC7CV,GAAQO,EAAAA,IAAA,MAAA,CAAKR,UAAWY,EAAAA,YACzBJ,EAAAA,IAAA,MAAA,CACIR,UAAWS,EAAAA,iBAAuB,UAC1B,2CAEPN,IAELK,EAAAA,IAAA,MAAA,CACIR,UAAWK,EAAAA,QACPQ,EAAAA,UACAd,GAASe,EAAAA,eACTb,GAAQc,EAAAA,eACX,UACO,4CACOjB,MAEjB"}

package/cjs/shared/range-input-inner-container/range-input-inner-container.styles.js

@@ -1,65 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons"),t=require("styled-components"),n=require("../../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(t);const o=a.default.div`
-    position: relative;
-    height: 100%;
-    display: flex;
-    flex: 1;
-
-    ${e=>{if(e.$wrap)return t.css`
-                /* Parent container need to provide space */
-                flex-wrap: wrap;
-
-                [data-id="range-container-elem1-container"],
-                [data-id="range-container-elem2-container"] {
-                    // 100% - Icon size - 2padding
-                    max-width: calc(
-                        100% - ${n.V3_Font.Spec["body-size-baseline"]} -
-                            ${n.V3_Spacing["spacing-16"]}
-                    );
-                    flex: unset;
-                }
-
-                [data-id="range-container-elem2-container"] {
-                    margin-top: ${n.V3_Spacing["spacing-8"]};
-                }
-            `}}
-`,r=a.default.div`
-    width: 100%; // Force next flex item to break to next line
-`,s=a.default.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-`,c=a.default(e.ArrowRightIcon)`
-    color: ${n.V3_Colour.icon};
-    width: ${n.V3_Font.Spec["body-size-baseline"]};
-    height: ${n.V3_Font.Spec["body-size-baseline"]};
-    flex-shrink: 0;
-    margin: 0 ${n.V3_Spacing["spacing-8"]};
-    align-self: center;
-`,d=a.default.div`
-    position: absolute;
-    background: ${e=>e.$error?n.V3_Colour["border-error-focus-strong"]:n.V3_Colour["border-focus-strong"]};
-    height: 2px;
-    // half - half padding - half icon width
-    width: calc(
-        50% - ${n.V3_Spacing["spacing-8"]} -
-            (${n.V3_Font.Spec["body-size-baseline"]} / 2)
-    );
-    transition: left ${n.V3_Motion["duration-350"]} ${n.V3_Motion["ease-standard"]},
-        opacity ${n.V3_Motion["duration-350"]} ${n.V3_Motion["ease-standard"]};
-    left: 0;
-    bottom: 0;
-
-    ${e=>{switch(e.$position){case"start":return t.css`
-                    opacity: 1;
-                `;case"end":return t.css`
-                    left: calc(50% + ${n.V3_Spacing["spacing-16"]});
-                    opacity: 1;
-                `;case"none":return t.css`
-                    opacity: 0;
-                `}}}
-
-    ${e=>{if(e.$wrap)return t.css`
-                display: none;
-            `}}
-`;exports.ArrowRight=c,exports.Break=r,exports.ElementContainer=s,exports.Indicator=d,exports.Wrapper=o;
+"use strict";require("./range-input-inner-container.styles_1v61utg.css");exports.arrowRight="a1uc2vum",exports.elementContainer="e13aheiu",exports.indicator="i1c4xw6e",exports.indicatorError="i1gifs7v",exports.indicatorWrap="i175ocg1",exports.lineBreak="lk3rj3g",exports.wrapper="w1i0lopf",exports.wrapperWrap="ws05n6a";
 //# sourceMappingURL=range-input-inner-container.styles.js.map

package/cjs/shared/range-input-inner-container/range-input-inner-container.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-input-inner-container.styles.js","sources":["../../../../src/shared/range-input-inner-container/range-input-inner-container.styles.tsx"],"sourcesContent":["import { ArrowRightIcon } from \"@lifesg/react-icons\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font, V3_Motion, V3_Spacing } from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface GeneralStyleProps {\n    $wrap?: boolean;\n}\n\ninterface IndicatorStyleProps extends GeneralStyleProps {\n    $position: \"start\" | \"end\" | \"none\";\n    $error: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Wrapper = styled.div<GeneralStyleProps>`\n    position: relative;\n    height: 100%;\n    display: flex;\n    flex: 1;\n\n    ${(props) => {\n        if (props.$wrap) {\n            return css`\n                /* Parent container need to provide space */\n                flex-wrap: wrap;\n\n                [data-id=\"range-container-elem1-container\"],\n                [data-id=\"range-container-elem2-container\"] {\n                    // 100% - Icon size - 2padding\n                    max-width: calc(\n                        100% - ${V3_Font.Spec[\"body-size-baseline\"]} -\n                            ${V3_Spacing[\"spacing-16\"]}\n                    );\n                    flex: unset;\n                }\n\n                [data-id=\"range-container-elem2-container\"] {\n                    margin-top: ${V3_Spacing[\"spacing-8\"]};\n                }\n            `;\n        }\n    }}\n`;\n\nexport const Break = styled.div`\n    width: 100%; // Force next flex item to break to next line\n`;\n\nexport const ElementContainer = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n`;\n\nexport const ArrowRight = styled(ArrowRightIcon)`\n    color: ${V3_Colour[\"icon\"]};\n    width: ${V3_Font.Spec[\"body-size-baseline\"]};\n    height: ${V3_Font.Spec[\"body-size-baseline\"]};\n    flex-shrink: 0;\n    margin: 0 ${V3_Spacing[\"spacing-8\"]};\n    align-self: center;\n`;\n\nexport const Indicator = styled.div<IndicatorStyleProps>`\n    position: absolute;\n    background: ${(props) =>\n        props.$error\n            ? V3_Colour[\"border-error-focus-strong\"]\n            : V3_Colour[\"border-focus-strong\"]};\n    height: 2px;\n    // half - half padding - half icon width\n    width: calc(\n        50% - ${V3_Spacing[\"spacing-8\"]} -\n            (${V3_Font.Spec[\"body-size-baseline\"]} / 2)\n    );\n    transition: left ${V3_Motion[\"duration-350\"]} ${V3_Motion[\"ease-standard\"]},\n        opacity ${V3_Motion[\"duration-350\"]} ${V3_Motion[\"ease-standard\"]};\n    left: 0;\n    bottom: 0;\n\n    ${(props) => {\n        switch (props.$position) {\n            case \"start\":\n                return css`\n                    opacity: 1;\n                `;\n            case \"end\":\n                return css`\n                    left: calc(50% + ${V3_Spacing[\"spacing-16\"]});\n                    opacity: 1;\n                `;\n            case \"none\":\n                return css`\n                    opacity: 0;\n                `;\n        }\n    }}\n\n    ${(props) => {\n        if (props.$wrap) {\n            return css`\n                display: none;\n            `;\n        }\n    }}\n`;\n"],"names":["Wrapper","styled","div","props","$wrap","css","V3_Font","Spec","V3_Spacing","Break","ElementContainer","ArrowRight","ArrowRightIcon","V3_Colour","Indicator","$error","V3_Motion","$position"],"mappings":"yMAqBO,MAAMA,EAAUC,EAAAA,QAAOC,GAAsB;;;;;;MAM7CC,IACC,GAAIA,EAAMC,MACN,OAAOC,KAAG;;;;;;;;iCAQWC,EAAAA,QAAQC,KAAK;8BAChBC,EAAAA,WAAW;;;;;;kCAMPA,EAAAA,WAAW;;aAGrC;EAIKC,EAAQR,EAAAA,QAAOC,GAAG;;EAIlBQ,EAAmBT,EAAAA,QAAOC,GAAG;;;;EAM7BS,EAAaV,EAAAA,QAAOW,EAAAA,eAAe;aACnCC,EAAAA,UAAgB;aAChBP,EAAAA,QAAQC,KAAK;cACZD,EAAAA,QAAQC,KAAK;;gBAEXC,EAAAA,WAAW;;EAIdM,EAAYb,EAAAA,QAAOC,GAAwB;;kBAErCC,GACXA,EAAMY,OACAF,EAAAA,UAAU,6BACVA,EAAAA,UAAU;;;;gBAIRL,EAAAA,WAAW;eACZF,EAAAA,QAAQC,KAAK;;uBAELS,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;kBAC5CA,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;;;;MAIlDb,IACC,OAAQA,EAAMc,WACV,IAAK,QACD,OAAOZ,KAAG;;kBAGd,IAAK,MACD,OAAOA,KAAG;uCACaG,EAAAA,WAAW;;kBAGtC,IAAK,OACD,OAAOH,KAAG;;;;MAMnBF,IACC,GAAIA,EAAMC,MACN,OAAOC,KAAG;;aAGd;"}
+{"version":3,"file":"range-input-inner-container.styles.js","sources":["../../../../src/shared/range-input-inner-container/range-input-inner-container.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../../theme\";\n\nexport const wrapper = css`\n    position: relative;\n    height: 100%;\n    display: flex;\n    flex: 1;\n`;\n\nexport const wrapperWrap = css`\n    /* Parent container need to provide space */\n    flex-wrap: wrap;\n\n    [data-id=\"range-container-elem1-container\"],\n    [data-id=\"range-container-elem2-container\"] {\n        // 100% - Icon size - 2padding\n        max-width: calc(\n            100% - ${Font.Spec[\"body-size-baseline\"]} - ${Spacing[\"spacing-16\"]}\n        );\n        flex: unset;\n    }\n\n    [data-id=\"range-container-elem2-container\"] {\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const elementContainer = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n`;\n\nexport const arrowRight = css`\n    color: ${Colour[\"icon\"]};\n    width: ${Font.Spec[\"body-size-baseline\"]};\n    height: ${Font.Spec[\"body-size-baseline\"]};\n    flex-shrink: 0;\n    margin: 0 ${Spacing[\"spacing-8\"]};\n    align-self: center;\n`;\n\nexport const lineBreak = css`\n    width: 100%; // Force next flex item to break to next line\n`;\n\nexport const indicator = css`\n    position: absolute;\n    background: ${Colour[\"border-focus-strong\"]};\n    height: 2px;\n    // half - half padding - half icon width\n    width: calc(\n        50% - ${Spacing[\"spacing-8\"]} - (${Font.Spec[\"body-size-baseline\"]} / 2)\n    );\n    transition: left ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]},\n        opacity ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n    left: 0;\n    bottom: 0;\n    opacity: 0;\n\n    &[data-position=\"start\"] {\n        opacity: 1;\n    }\n\n    &[data-position=\"end\"] {\n        left: calc(50% + ${Spacing[\"spacing-16\"]});\n        opacity: 1;\n    }\n`;\n\nexport const indicatorError = css`\n    background: ${Colour[\"border-error-focus-strong\"]};\n`;\n\nexport const indicatorWrap = css`\n    display: none;\n`;\n"],"names":[],"mappings":"8IAmCuB,oCANM,6BAmBP,kCAwBK,iCAID,6BAhCJ,0BAxCF,+BAOI"}

package/cjs/shared/range-input-inner-container/range-input-inner-container.styles_1v61utg.css

@@ -0,0 +1,12 @@
+.w1i0lopf{position:relative;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;}
+.ws05n6a{-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}.ws05n6a [data-id="range-container-elem1-container"],.ws05n6a [data-id="range-container-elem2-container"]{max-width:calc(
+            100% - var(--fds-font-body-size-baseline) - var(--fds-spacing-16)
+        );-webkit-flex:unset;-ms-flex:unset;flex:unset;}.ws05n6a [data-id="range-container-elem2-container"]{margin-top:var(--fds-spacing-8);}
+.e13aheiu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.a1uc2vum{color:var(--fds-colour-icon);width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0 var(--fds-spacing-8);-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
+.lk3rj3g{width:100%;}
+.i1c4xw6e{position:absolute;background:var(--fds-colour-border-focus-strong);height:2px;width:calc(
+        50% - var(--fds-spacing-8) - (var(--fds-font-body-size-baseline) / 2)
+    );-webkit-transition:left var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard),opacity var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:left var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard),opacity var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);left:0;bottom:0;opacity:0;}.i1c4xw6e[data-position="start"]{opacity:1;}.i1c4xw6e[data-position="end"]{left:calc(50% + var(--fds-spacing-16));opacity:1;}
+.i1gifs7v{background:var(--fds-colour-border-error-focus-strong);}
+.i175ocg1{display:none;}

package/cjs/shared/standalone-date-input/standalone-date-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../external/dayjs/dayjs.min.js"),n=require("../../external/dayjs/plugin/customParseFormat.js"),r=require("react");require("../../util/calendar-helper.js");var a=require("../../util/date-input-helper.js"),u=require("../../util/string-helper.js"),l=require("../../util/use-state-ref.js"),o=require("./standalone-date-input.style.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(r);t.default.extend(n.default);const c=({disabled:n,readOnly:i,names:s,value:c,focused:d,hoverValue:f,placeholder:p,label:v,onChange:h,onFocus:m,onBlur:g,hideInputKeyboard:y,inputLabels:x=["Date","Month","Year"]},j)=>{const b=y?"none":"numeric",[Y,D,I]=l.useStateRef(""),[M,$,S]=l.useStateRef(""),[C,q,R]=l.useStateRef(""),[k,w]=r.useState("none"),[B,F]=r.useState(!1),V=r.useRef(null),E=r.useRef(null),H=r.useRef(null),L=r.useRef(null),[O,K,P]=N(f);r.useEffect((()=>{var e;const[t="",n="",r=""]=N(c);D(t),$(n),q(r),t||n||r||!V.current||!V.current.contains(document.activeElement)||null===(e=E.current)||void 0===e||e.focus()}),[c]),r.useEffect((()=>{var e;d||w("none"),d&&(F(!0),V.current&&!V.current.contains(document.activeElement)&&(null===(e=E.current)||void 0===e||e.focus()))}),[d]),r.useImperativeHandle(j,(()=>({ref:V,resetPlaceholder(){F(!1)},resetInput(){const[e="",t="",n=""]=N(c);D(e),$(t),q(n)},focusYearRef(){var e;null===(e=L.current)||void 0===e||e.focus()}})),[D,$,q,c]);const z=e=>{var t;e.preventDefault(),null===(t=E.current)||void 0===t||t.focus()},T=e=>{e.target.select();const t=e.target.name;w(t)},A=e=>{const[n,r,a]=s,l={[n]:I.current,[r]:S.current,[a]:R.current},o=e.target.name,i=l[o],c=o!==a?u.StringHelper.padValue(i,!0):i;switch(o){case n:l[n]=c,D(c);break;case r:l[r]=c,$(c)}const d=`${l[a]}-${l[r]}-${l[n]}`,f=t.default(d,"YYYY-MM-DD",!0).isValid(),p=!l[n]&&!l[r]&&!l[a];f&&i!==c&&h(d),V.current&&!V.current.contains(e.relatedTarget)&&(w("none"),null==g||g(p||f))},G=e=>{var n,r;if(f)return;const a=e.target.name,u=e.target.value.replace(/[^0-9]/g,""),l={day:Y,month:M,year:C};switch(a){case s[0]:l.day=u,D(u),2===u.length&&(null===(n=H.current)||void 0===n||n.focus());break;case s[1]:l.month=u,$(u),2===u.length&&(null===(r=L.current)||void 0===r||r.focus());break;case s[2]:l.year=u,q(u)}if(!l.day&&!l.month&&!l.year)return void h("");const o=`${l.year}-${l.month}-${l.day}`;t.default(o,"YYYY-MM-DD",!0).isValid()&&h(o)},J=e=>{var t,n;"Backspace"!==e.code&&"Backspace"!==e.key||(k===s[1]&&0===M.length&&(null===(t=E.current)||void 0===t||t.focus()),k===s[2]&&0===C.length&&(null===(n=H.current)||void 0===n||n.focus()))};function N(e){if(e){const n=a.DateInputHelper.sanitizeInput(e);if(!n)return[void 0,void 0,void 0];const r=t.default(n,"YYYY-MM-DD",!0);return[u.StringHelper.padValue(r.date().toString()),u.StringHelper.padValue((r.month()+1).toString()),r.year().toString()]}return[void 0,void 0,void 0]}return e.jsxs(o.InputSection,{role:"group","aria-label":v,onClick:()=>{var e;n||i||(F(!0),V.current&&!V.current.contains(document.activeElement)&&(null===(e=E.current)||void 0===e||e.focus()))},onFocus:e=>{n||(F(!0),d||null==m||m(e))},children:[e.jsxs(o.InputContainer,{ref:V,$hover:!!f,children:[e.jsx(o.DayInput,{ref:E,name:s[0],maxLength:2,value:null!=O?O:Y,onFocus:T,onBlur:A,onChange:G,type:"text",inputMode:b,pattern:"[0-9]{2}","data-testid":`${s[0]}-input`,"aria-label":x[0],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[0]||i?"DD":""}),e.jsx(o.Divider,{$inactive:0===Y.length,children:"/"}),e.jsx(o.MonthInput,{ref:H,name:s[1],maxLength:2,value:null!=K?K:M,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:b,pattern:"[0-9]{2}","data-testid":`${s[1]}-input`,"aria-label":x[1],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[1]||i?"MM":""}),e.jsx(o.Divider,{$inactive:0===M.length,children:"/"}),e.jsx(o.YearInput,{ref:L,name:s[2],maxLength:4,value:null!=P?P:C,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:b,pattern:"[0-9]{4}","data-testid":`${s[2]}-input`,"aria-label":x[2],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[2]||i?"YYYY":""})]}),(()=>{if(!c&&!i&&p)return e.jsx(o.Placeholder,{$hide:B,$disabled:n,onMouseDown:z,children:p})})()]})},d=s.default.forwardRef(c);exports.Component=c,exports.StandaloneDateInput=d;
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("../../external/dayjs/dayjs.min.js"),n=require("../../external/dayjs/plugin/customParseFormat.js"),r=require("react");require("../../util/calendar-helper.js");var u=require("../../util/date-input-helper.js");require("../../util/simple-id-generator.js");var l=require("../../util/string-helper.js");require("@react-aria/live-announcer");var s=require("../../util/use-state-ref.js"),o=require("./standalone-date-input.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=i(t),c=i(r);a.default.extend(n.default);const p=({disabled:t,readOnly:n,names:i,value:c,focused:p,hoverValue:f,placeholder:v,label:m,onChange:h,onFocus:g,onBlur:x,hideInputKeyboard:y,inputLabels:b=["Date","Month","Year"]},j)=>{const S=y?"none":"numeric",[I,Y,D]=s.useStateRef(""),[M,q,H]=s.useStateRef(""),[N,C,B]=s.useStateRef(""),[R,$]=r.useState("none"),[k,z]=r.useState(!1),w=r.useRef(null),F=r.useRef(null),V=r.useRef(null),E=r.useRef(null),[L,O,K]=Q(f);r.useEffect((()=>{var e;const[t="",a="",n=""]=Q(c);Y(t),q(a),C(n),t||a||n||!w.current||!w.current.contains(document.activeElement)||null===(e=F.current)||void 0===e||e.focus()}),[c]),r.useEffect((()=>{var e;p||$("none"),p&&(z(!0),w.current&&!w.current.contains(document.activeElement)&&(null===(e=F.current)||void 0===e||e.focus()))}),[p]),r.useImperativeHandle(j,(()=>({ref:w,resetPlaceholder(){z(!1)},resetInput(){const[e="",t="",a=""]=Q(c);Y(e),q(t),C(a)},focusYearRef(){var e;null===(e=E.current)||void 0===e||e.focus()}})),[Y,q,C,c]);const P=e=>{var t;e.preventDefault(),null===(t=F.current)||void 0===t||t.focus()},T=e=>{e.target.select();const t=e.target.name;$(t)},A=e=>{const[t,n,r]=i,u={[t]:D.current,[n]:H.current,[r]:B.current},s=e.target.name,o=u[s],d=s!==r?l.StringHelper.padValue(o,!0):o;switch(s){case t:u[t]=d,Y(d);break;case n:u[n]=d,q(d)}const c=`${u[r]}-${u[n]}-${u[t]}`,p=a.default(c,"YYYY-MM-DD",!0).isValid(),f=!u[t]&&!u[n]&&!u[r];p&&o!==d&&h(c),w.current&&!w.current.contains(e.relatedTarget)&&($("none"),null==x||x(f||p))},G=e=>{var t,n;if(f)return;const r=e.target.name,u=e.target.value.replace(/[^0-9]/g,""),l={day:I,month:M,year:N};switch(r){case i[0]:l.day=u,Y(u),2===u.length&&(null===(t=V.current)||void 0===t||t.focus());break;case i[1]:l.month=u,q(u),2===u.length&&(null===(n=E.current)||void 0===n||n.focus());break;case i[2]:l.year=u,C(u)}if(!l.day&&!l.month&&!l.year)return void h("");const s=`${l.year}-${l.month}-${l.day}`;a.default(s,"YYYY-MM-DD",!0).isValid()&&h(s)},J=e=>{var t,a;"Backspace"!==e.code&&"Backspace"!==e.key||(R===i[1]&&0===M.length&&(null===(t=F.current)||void 0===t||t.focus()),R===i[2]&&0===N.length&&(null===(a=V.current)||void 0===a||a.focus()))};function Q(e){if(e){const t=u.DateInputHelper.sanitizeInput(e);if(!t)return[void 0,void 0,void 0];const n=a.default(t,"YYYY-MM-DD",!0);return[l.StringHelper.padValue(n.date().toString()),l.StringHelper.padValue((n.month()+1).toString()),n.year().toString()]}return[void 0,void 0,void 0]}return e.jsxs("div",{role:"group","aria-label":m,className:o.inputSection,onClick:()=>{var e;t||n||(z(!0),w.current&&!w.current.contains(document.activeElement)&&(null===(e=F.current)||void 0===e||e.focus()))},onFocus:e=>{t||(z(!0),p||null==g||g(e))},children:[e.jsxs("div",{ref:w,className:o.inputContainer,children:[e.jsx("span",{className:d.default(o.inputSizerBase,o.dayInputSizer),children:e.jsx("input",{ref:F,name:i[0],maxLength:2,value:null!=L?L:I,onFocus:T,onBlur:A,onChange:G,type:"text",inputMode:S,pattern:"[0-9]{2}","data-testid":`${i[0]}-input`,"aria-label":b[0],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==i[0]||n?"DD":"",className:d.default(o.baseInput,!!f&&o.baseInputHover)})}),e.jsx("span",{className:d.default(o.divider,!!f&&o.dividerHover),children:"/"}),e.jsx("span",{className:d.default(o.inputSizerBase,o.monthInputSizer),children:e.jsx("input",{ref:V,name:i[1],maxLength:2,value:null!=O?O:M,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:S,pattern:"[0-9]{2}","data-testid":`${i[1]}-input`,"aria-label":b[1],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==i[1]||n?"MM":"",className:d.default(o.baseInput,!!f&&o.baseInputHover)})}),e.jsx("span",{className:d.default(o.divider,!!f&&o.dividerHover),children:"/"}),e.jsx("span",{className:d.default(o.inputSizerBase,o.yearInputSizer),children:e.jsx("input",{ref:E,name:i[2],maxLength:4,value:null!=K?K:N,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:S,pattern:"[0-9]{4}","data-testid":`${i[2]}-input`,"aria-label":b[2],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==i[2]||n?"YYYY":"",className:d.default(o.baseInput,!!f&&o.baseInputHover)})})]}),(()=>{if(!c&&!n&&v)return e.jsx("div",{className:d.default(o.placeholder,t&&o.placeholderDisabled,k&&o.placeholderHide),onMouseDown:P,children:v})})()]})},f=c.default.forwardRef(p);exports.Component=p,exports.StandaloneDateInput=f;
 //# sourceMappingURL=standalone-date-input.js.map

package/cjs/shared/standalone-date-input/standalone-date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone-date-input.js","sources":["../../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport {\n    DayInput,\n    Divider,\n    InputContainer,\n    InputSection,\n    MonthInput,\n    Placeholder,\n    YearInput,\n} from \"./standalone-date-input.style\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n    | StartInputNames[number]\n    | EndInputNames[number]\n    | \"none\";\n\ninterface Props {\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    hideInputKeyboard?: boolean | undefined;\n    names: StartInputNames | EndInputNames;\n    value: string | undefined;\n    hoverValue?: string | undefined;\n    focused: boolean;\n    placeholder?: string | undefined;\n    label?: string | undefined;\n    inputLabels?: string[] | undefined;\n    onChange: (value: string) => void;\n    onFocus?: ((event: React.FocusEvent) => void) | undefined;\n    onBlur?: ((valid: boolean) => void) | undefined;\n}\n\nexport interface StandaloneDateInputRef {\n    ref: React.RefObject<HTMLDivElement>;\n    resetPlaceholder: () => void;\n    resetInput: () => void;\n    focusYearRef: () => void;\n}\n\nexport const Component = (\n    {\n        disabled,\n        readOnly,\n        names,\n        value,\n        focused,\n        hoverValue,\n        placeholder,\n        label,\n        onChange,\n        onFocus,\n        onBlur,\n        hideInputKeyboard,\n        inputLabels = [\"Date\", \"Month\", \"Year\"],\n    }: Props,\n    ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n    const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n    const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n    const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n    const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n    const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const dayInputRef = useRef<HTMLInputElement>(null);\n    const monthInputRef = useRef<HTMLInputElement>(null);\n    const yearInputRef = useRef<HTMLInputElement>(null);\n\n    const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n        parseToInputValues(hoverValue);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n        setDayValue(day);\n        setMonthValue(month);\n        setYearValue(year);\n\n        // re-focus on day input if all 3 inputs get cleared while typing\n        if (\n            !day &&\n            !month &&\n            !year &&\n            nodeRef.current &&\n            nodeRef.current.contains(document.activeElement)\n        )\n            dayInputRef.current?.focus();\n    }, [value]);\n\n    useEffect(() => {\n        // clear internal focus state\n        if (!focused) {\n            setCurrentFocus(\"none\");\n        }\n\n        // ensure at least one input is focused\n        if (focused) {\n            setHidePlaceholder(true);\n\n            if (\n                nodeRef.current &&\n                !nodeRef.current.contains(document.activeElement)\n            ) {\n                dayInputRef.current?.focus();\n            }\n        }\n    }, [focused]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            ref: nodeRef,\n            resetPlaceholder() {\n                setHidePlaceholder(false);\n            },\n            resetInput() {\n                const [day = \"\", month = \"\", year = \"\"] =\n                    parseToInputValues(value);\n                setDayValue(day);\n                setMonthValue(month);\n                setYearValue(year);\n            },\n            focusYearRef() {\n                yearInputRef.current?.focus();\n            },\n        }),\n        [setDayValue, setMonthValue, setYearValue, value]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSectionClick = () => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (\n            nodeRef.current &&\n            !nodeRef.current.contains(document.activeElement)\n        ) {\n            dayInputRef.current?.focus();\n        }\n    };\n\n    const handleSectionFocus = (event: React.FocusEvent) => {\n        if (disabled) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (!focused) {\n            onFocus?.(event);\n        }\n    };\n\n    const handlePlaceholderClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        dayInputRef.current?.focus();\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        event.target.select();\n        const targetName = event.target.name as FieldType;\n        setCurrentFocus(targetName);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const [dayName, monthName, yearName] = names;\n        const date = {\n            [dayName]: dayValueRef.current,\n            [monthName]: monthValueRef.current,\n            [yearName]: yearValueRef.current,\n        };\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = date[targetName];\n\n        // pad single digits for day and month inputs\n\n        const paddedValue =\n            targetName !== yearName\n                ? StringHelper.padValue(targetValue, true)\n                : targetValue;\n\n        switch (targetName) {\n            case dayName:\n                date[dayName] = paddedValue;\n                setDayValue(paddedValue);\n                break;\n            case monthName:\n                date[monthName] = paddedValue;\n                setMonthValue(paddedValue);\n                break;\n            case yearName:\n            default:\n                break;\n        }\n\n        const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n        const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n        const isPadded = targetValue !== paddedValue;\n\n        if (isValid && isPadded) {\n            onChange(value);\n        }\n\n        if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n            // entire field was blurred\n            setCurrentFocus(\"none\");\n            onBlur?.(isEmpty || isValid);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (hoverValue) {\n            // do not modify inputs when selecting date from another source\n            return;\n        }\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n        const date = {\n            day: dayValue,\n            month: monthValue,\n            year: yearValue,\n        };\n\n        switch (targetName) {\n            case names[0]:\n                date.day = targetValue;\n                setDayValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    monthInputRef.current?.focus();\n                }\n                break;\n            case names[1]:\n                date.month = targetValue;\n                setMonthValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    yearInputRef.current?.focus();\n                }\n                break;\n            case names[2]:\n                date.year = targetValue;\n                setYearValue(targetValue);\n                break;\n            default:\n                break;\n        }\n\n        if (!date.day && !date.month && !date.year) {\n            onChange(\"\");\n            return;\n        }\n\n        const value = `${date.year}-${date.month}-${date.day}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n        if (isValid) {\n            onChange(value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === names[1] && monthValue.length === 0) {\n                dayInputRef.current?.focus();\n            }\n\n            if (currentFocus === names[2] && yearValue.length === 0) {\n                monthInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function parseToInputValues(stringVal: string | undefined) {\n        if (!stringVal) {\n            return [undefined, undefined, undefined];\n        } else {\n            const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n            if (!sanitized) {\n                return [undefined, undefined, undefined];\n            }\n\n            const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n            return [\n                StringHelper.padValue(day.date().toString()),\n                StringHelper.padValue((day.month() + 1).toString()),\n                day.year().toString(),\n            ];\n        }\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPlaceholder = () => {\n        if (value || readOnly || !placeholder) {\n            return;\n        }\n\n        return (\n            <Placeholder\n                $hide={hidePlaceholder}\n                $disabled={disabled}\n                onMouseDown={handlePlaceholderClick}\n            >\n                {placeholder}\n            </Placeholder>\n        );\n    };\n\n    return (\n        <InputSection\n            role=\"group\"\n            aria-label={label}\n            onClick={handleSectionClick}\n            onFocus={handleSectionFocus}\n        >\n            <InputContainer ref={nodeRef} $hover={!!hoverValue}>\n                <DayInput\n                    ref={dayInputRef}\n                    name={names[0]}\n                    maxLength={2}\n                    value={hoverDayValue ?? dayValue}\n                    onFocus={handleInputFocus}\n                    onBlur={handleInputBlur}\n                    onChange={handleInputChange}\n                    type=\"text\"\n                    inputMode={inputMode}\n                    pattern=\"[0-9]{2}\"\n                    data-testid={`${names[0]}-input`}\n                    aria-label={inputLabels[0]}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    tabIndex={readOnly ? -1 : 0}\n                    autoComplete=\"off\"\n                    placeholder={\n                        currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n                    }\n                />\n                <Divider $inactive={dayValue.length === 0}>/</Divider>\n                <MonthInput\n                    ref={monthInputRef}\n                    name={names[1]}\n                    maxLength={2}\n                    value={hoverMonthValue ?? monthValue}\n                    onFocus={handleInputFocus}\n                    onBlur={handleInputBlur}\n                    onChange={handleInputChange}\n                    onKeyDown={handleKeyDown}\n                    type=\"text\"\n                    inputMode={inputMode}\n                    pattern=\"[0-9]{2}\"\n                    data-testid={`${names[1]}-input`}\n                    aria-label={inputLabels[1]}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    tabIndex={readOnly ? -1 : 0}\n                    autoComplete=\"off\"\n                    placeholder={\n                        currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n                    }\n                />\n                <Divider $inactive={monthValue.length === 0}>/</Divider>\n                <YearInput\n                    ref={yearInputRef}\n                    name={names[2]}\n                    maxLength={4}\n                    value={hoverYearValue ?? yearValue}\n                    onFocus={handleInputFocus}\n                    onBlur={handleInputBlur}\n                    onChange={handleInputChange}\n                    onKeyDown={handleKeyDown}\n                    type=\"text\"\n                    inputMode={inputMode}\n                    pattern=\"[0-9]{4}\"\n                    data-testid={`${names[2]}-input`}\n                    aria-label={inputLabels[2]}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    tabIndex={readOnly ? -1 : 0}\n                    autoComplete=\"off\"\n                    placeholder={\n                        currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n                    }\n                />\n            </InputContainer>\n            {renderPlaceholder()}\n        </InputSection>\n    );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","InputSection","role","onClick","children","InputContainer","$hover","_jsx","DayInput","maxLength","type","pattern","tabIndex","autoComplete","Divider","$inactive","MonthInput","onKeyDown","YearInput","Placeholder","$hide","$disabled","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"standalone-date-input.js","sources":["../../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport * as styles from \"./standalone-date-input.styles\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n    | StartInputNames[number]\n    | EndInputNames[number]\n    | \"none\";\n\ninterface Props {\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    hideInputKeyboard?: boolean | undefined;\n    names: StartInputNames | EndInputNames;\n    value: string | undefined;\n    hoverValue?: string | undefined;\n    focused: boolean;\n    placeholder?: string | undefined;\n    label?: string | undefined;\n    inputLabels?: string[] | undefined;\n    onChange: (value: string) => void;\n    onFocus?: ((event: React.FocusEvent) => void) | undefined;\n    onBlur?: ((valid: boolean) => void) | undefined;\n}\n\nexport interface StandaloneDateInputRef {\n    ref: React.RefObject<HTMLDivElement>;\n    resetPlaceholder: () => void;\n    resetInput: () => void;\n    focusYearRef: () => void;\n}\n\nexport const Component = (\n    {\n        disabled,\n        readOnly,\n        names,\n        value,\n        focused,\n        hoverValue,\n        placeholder,\n        label,\n        onChange,\n        onFocus,\n        onBlur,\n        hideInputKeyboard,\n        inputLabels = [\"Date\", \"Month\", \"Year\"],\n    }: Props,\n    ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n    const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n    const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n    const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n    const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n    const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const dayInputRef = useRef<HTMLInputElement>(null);\n    const monthInputRef = useRef<HTMLInputElement>(null);\n    const yearInputRef = useRef<HTMLInputElement>(null);\n\n    const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n        parseToInputValues(hoverValue);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n        setDayValue(day);\n        setMonthValue(month);\n        setYearValue(year);\n\n        // re-focus on day input if all 3 inputs get cleared while typing\n        if (\n            !day &&\n            !month &&\n            !year &&\n            nodeRef.current &&\n            nodeRef.current.contains(document.activeElement)\n        )\n            dayInputRef.current?.focus();\n    }, [value]);\n\n    useEffect(() => {\n        // clear internal focus state\n        if (!focused) {\n            setCurrentFocus(\"none\");\n        }\n\n        // ensure at least one input is focused\n        if (focused) {\n            setHidePlaceholder(true);\n\n            if (\n                nodeRef.current &&\n                !nodeRef.current.contains(document.activeElement)\n            ) {\n                dayInputRef.current?.focus();\n            }\n        }\n    }, [focused]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            ref: nodeRef,\n            resetPlaceholder() {\n                setHidePlaceholder(false);\n            },\n            resetInput() {\n                const [day = \"\", month = \"\", year = \"\"] =\n                    parseToInputValues(value);\n                setDayValue(day);\n                setMonthValue(month);\n                setYearValue(year);\n            },\n            focusYearRef() {\n                yearInputRef.current?.focus();\n            },\n        }),\n        [setDayValue, setMonthValue, setYearValue, value]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSectionClick = () => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (\n            nodeRef.current &&\n            !nodeRef.current.contains(document.activeElement)\n        ) {\n            dayInputRef.current?.focus();\n        }\n    };\n\n    const handleSectionFocus = (event: React.FocusEvent) => {\n        if (disabled) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (!focused) {\n            onFocus?.(event);\n        }\n    };\n\n    const handlePlaceholderClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        dayInputRef.current?.focus();\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        event.target.select();\n        const targetName = event.target.name as FieldType;\n        setCurrentFocus(targetName);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const [dayName, monthName, yearName] = names;\n        const date = {\n            [dayName]: dayValueRef.current,\n            [monthName]: monthValueRef.current,\n            [yearName]: yearValueRef.current,\n        };\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = date[targetName];\n\n        // pad single digits for day and month inputs\n\n        const paddedValue =\n            targetName !== yearName\n                ? StringHelper.padValue(targetValue, true)\n                : targetValue;\n\n        switch (targetName) {\n            case dayName:\n                date[dayName] = paddedValue;\n                setDayValue(paddedValue);\n                break;\n            case monthName:\n                date[monthName] = paddedValue;\n                setMonthValue(paddedValue);\n                break;\n            case yearName:\n            default:\n                break;\n        }\n\n        const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n        const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n        const isPadded = targetValue !== paddedValue;\n\n        if (isValid && isPadded) {\n            onChange(value);\n        }\n\n        if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n            // entire field was blurred\n            setCurrentFocus(\"none\");\n            onBlur?.(isEmpty || isValid);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (hoverValue) {\n            // do not modify inputs when selecting date from another source\n            return;\n        }\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n        const date = {\n            day: dayValue,\n            month: monthValue,\n            year: yearValue,\n        };\n\n        switch (targetName) {\n            case names[0]:\n                date.day = targetValue;\n                setDayValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    monthInputRef.current?.focus();\n                }\n                break;\n            case names[1]:\n                date.month = targetValue;\n                setMonthValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    yearInputRef.current?.focus();\n                }\n                break;\n            case names[2]:\n                date.year = targetValue;\n                setYearValue(targetValue);\n                break;\n            default:\n                break;\n        }\n\n        if (!date.day && !date.month && !date.year) {\n            onChange(\"\");\n            return;\n        }\n\n        const value = `${date.year}-${date.month}-${date.day}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n        if (isValid) {\n            onChange(value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === names[1] && monthValue.length === 0) {\n                dayInputRef.current?.focus();\n            }\n\n            if (currentFocus === names[2] && yearValue.length === 0) {\n                monthInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function parseToInputValues(stringVal: string | undefined) {\n        if (!stringVal) {\n            return [undefined, undefined, undefined];\n        } else {\n            const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n            if (!sanitized) {\n                return [undefined, undefined, undefined];\n            }\n\n            const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n            return [\n                StringHelper.padValue(day.date().toString()),\n                StringHelper.padValue((day.month() + 1).toString()),\n                day.year().toString(),\n            ];\n        }\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPlaceholder = () => {\n        if (value || readOnly || !placeholder) {\n            return;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.placeholder,\n                    disabled && styles.placeholderDisabled,\n                    hidePlaceholder && styles.placeholderHide\n                )}\n                onMouseDown={handlePlaceholderClick}\n            >\n                {placeholder}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            role=\"group\"\n            aria-label={label}\n            className={styles.inputSection}\n            onClick={handleSectionClick}\n            onFocus={handleSectionFocus}\n        >\n            <div ref={nodeRef} className={styles.inputContainer}>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.dayInputSizer\n                    )}\n                >\n                    <input\n                        ref={dayInputRef}\n                        name={names[0]}\n                        maxLength={2}\n                        value={hoverDayValue ?? dayValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[0]}-input`}\n                        aria-label={inputLabels[0]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n                <span\n                    className={clsx(\n                        styles.divider,\n                        !!hoverValue && styles.dividerHover\n                    )}\n                >\n                    /\n                </span>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.monthInputSizer\n                    )}\n                >\n                    <input\n                        ref={monthInputRef}\n                        name={names[1]}\n                        maxLength={2}\n                        value={hoverMonthValue ?? monthValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[1]}-input`}\n                        aria-label={inputLabels[1]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n                <span\n                    className={clsx(\n                        styles.divider,\n                        !!hoverValue && styles.dividerHover\n                    )}\n                >\n                    /\n                </span>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.yearInputSizer\n                    )}\n                >\n                    <input\n                        ref={yearInputRef}\n                        name={names[2]}\n                        maxLength={4}\n                        value={hoverYearValue ?? yearValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{4}\"\n                        data-testid={`${names[2]}-input`}\n                        aria-label={inputLabels[2]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n            </div>\n            {renderPlaceholder()}\n        </div>\n    );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","role","className","styles.inputSection","onClick","children","styles.inputContainer","_jsx","clsx","styles.inputSizerBase","styles.dayInputSizer","maxLength","type","pattern","tabIndex","autoComplete","styles.baseInput","styles.baseInputHover","styles.divider","styles.dividerHover","styles.monthInputSizer","onKeyDown","styles.yearInputSizer","styles.placeholder","styles.placeholderDisabled","styles.placeholderHide","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"klBAQAA,EAAAA,QAAMC,OAAOC,EAAAA,SAiCN,MAAMC,EAAY,EAEjBC,WACAC,WACAC,QACAC,QACAC,UACAC,aACAC,cACAC,QACAC,WACAC,UACAC,SACAC,oBACAC,cAAc,CAAC,OAAQ,QAAS,SAEpCC,KAKA,MAAMC,EAAYH,EAAoB,OAAS,WAExCI,EAAUC,EAAaC,GAAeC,EAAAA,YAAoB,KAC1DC,EAAYC,EAAeC,GAAiBH,EAAAA,YAAoB,KAChEI,EAAWC,EAAcC,GAAgBN,EAAAA,YAAoB,KAC7DO,EAAcC,GAAmBC,EAAAA,SAAoB,SACrDC,EAAiBC,GAAsBF,EAAAA,UAAkB,GAE1DG,EAAUC,EAAAA,OAAuB,MACjCC,EAAcD,EAAAA,OAAyB,MACvCE,EAAgBF,EAAAA,OAAyB,MACzCG,EAAeH,EAAAA,OAAyB,OAEvCI,EAAeC,EAAiBC,GACnCC,EAAmBjC,GAKvBkC,EAAAA,WAAU,WACN,MAAOC,EAAM,GAAIC,EAAQ,GAAIC,EAAO,IAAMJ,EAAmBnC,GAC7Da,EAAYwB,GACZpB,EAAcqB,GACdlB,EAAamB,GAIRF,GACAC,GACAC,IACDZ,EAAQa,UACRb,EAAQa,QAAQC,SAASC,SAASC,gBAEf,QAAnBC,EAAAf,EAAYW,eAAO,IAAAI,GAAAA,EAAEC,OAAO,GACjC,CAAC7C,IAEJoC,EAAAA,WAAU,WAEDnC,GACDsB,EAAgB,QAIhBtB,IACAyB,GAAmB,GAGfC,EAAQa,UACPb,EAAQa,QAAQC,SAASC,SAASC,iBAEhB,QAAnBC,EAAAf,EAAYW,eAAO,IAAAI,GAAAA,EAAEC,SAE7B,GACD,CAAC5C,IAEJ6C,EAAAA,oBACIpC,GACA,KAAA,CACIA,IAAKiB,EACL,gBAAAoB,GACIrB,GAAmB,EACvB,EACA,UAAAsB,GACI,MAAOX,EAAM,GAAIC,EAAQ,GAAIC,EAAO,IAChCJ,EAAmBnC,GACvBa,EAAYwB,GACZpB,EAAcqB,GACdlB,EAAamB,EACjB,EACA,YAAAU,SACwB,QAApBL,EAAAb,EAAaS,eAAO,IAAAI,GAAAA,EAAEC,OAC1B,KAEJ,CAAChC,EAAaI,EAAeG,EAAcpB,IAM/C,MA2BMkD,EAA0BC,UAC5BA,EAAMC,iBACa,QAAnBR,EAAAf,EAAYW,eAAO,IAAAI,GAAAA,EAAEC,OAAO,EAG1BQ,EAAoBF,IACtBA,EAAMG,OAAOC,SACb,MAAMC,EAAaL,EAAMG,OAAOG,KAChClC,EAAgBiC,EAAW,EAGzBE,EAAmBP,IACrB,MAAOQ,EAASC,EAAWC,GAAY9D,EACjC+D,EAAO,CACTH,CAACA,GAAU7C,EAAY0B,QACvBoB,CAACA,GAAY1C,EAAcsB,QAC3BqB,CAACA,GAAWxC,EAAamB,SAGvBgB,EAAaL,EAAMG,OAAOG,KAC1BM,EAAcD,EAAKN,GAInBQ,EACFR,IAAeK,EACTI,eAAaC,SAASH,GAAa,GACnCA,EAEV,OAAQP,GACJ,KAAKG,EACDG,EAAKH,GAAWK,EAChBnD,EAAYmD,GACZ,MACJ,KAAKJ,EACDE,EAAKF,GAAaI,EAClB/C,EAAc+C,GAOtB,MAAMhE,EAAQ,GAAG8D,EAAKD,MAAaC,EAAKF,MAAcE,EAAKH,KACrDQ,EAAU1E,EAAAA,QAAMO,EAAO,cAAc,GAAMmE,UAC3CC,GAAWN,EAAKH,KAAaG,EAAKF,KAAeE,EAAKD,GAGxDM,GAFaJ,IAAgBC,GAG7B3D,EAASL,GAGT2B,EAAQa,UAAYb,EAAQa,QAAQC,SAASU,EAAMkB,iBAEnD9C,EAAgB,QAChBhB,SAAAA,EAAS6D,GAAWD,GACxB,EAGEG,EAAqBnB,YACvB,GAAIjD,EAEA,OAGJ,MAAMsD,EAAaL,EAAMG,OAAOG,KAC1BM,EAAcZ,EAAMG,OAAOtD,MAAMuE,QAAQ,UAAW,IAEpDT,EAAO,CACTzB,IAAKzB,EACL0B,MAAOtB,EACPuB,KAAMpB,GAGV,OAAQqC,GACJ,KAAKzD,EAAM,GACP+D,EAAKzB,IAAM0B,EACXlD,EAAYkD,GAEe,IAAvBA,EAAYS,SACS,QAArB5B,EAAAd,EAAcU,eAAO,IAAAI,GAAAA,EAAEC,SAE3B,MACJ,KAAK9C,EAAM,GACP+D,EAAKxB,MAAQyB,EACb9C,EAAc8C,GAEa,IAAvBA,EAAYS,SACQ,QAApBC,EAAA1C,EAAaS,eAAO,IAAAiC,GAAAA,EAAE5B,SAE1B,MACJ,KAAK9C,EAAM,GACP+D,EAAKvB,KAAOwB,EACZ3C,EAAa2C,GAMrB,IAAKD,EAAKzB,MAAQyB,EAAKxB,QAAUwB,EAAKvB,KAElC,YADAlC,EAAS,IAIb,MAAML,EAAQ,GAAG8D,EAAKvB,QAAQuB,EAAKxB,SAASwB,EAAKzB,MACjC5C,EAAAA,QAAMO,EAAO,cAAc,GAAMmE,WAG7C9D,EAASL,EACb,EAGE0E,EAAiBvB,YAKA,cAAfA,EAAMwB,MAAsC,cAAdxB,EAAMyB,MAChCtD,IAAiBvB,EAAM,IAA4B,IAAtBiB,EAAWwD,SACrB,QAAnB5B,EAAAf,EAAYW,eAAO,IAAAI,GAAAA,EAAEC,SAGrBvB,IAAiBvB,EAAM,IAA2B,IAArBoB,EAAUqD,SAClB,QAArBC,EAAA3C,EAAcU,eAAO,IAAAiC,GAAAA,EAAE5B,SAE/B,EAMJ,SAASV,EAAmB0C,GACxB,GAAKA,EAEE,CACH,MAAMC,EAAYC,EAAAA,gBAAgBC,cAAcH,GAEhD,IAAKC,EACD,MAAO,MAACG,OAAWA,OAAWA,GAGlC,MAAM5C,EAAM5C,EAAAA,QAAMqF,EAAW,cAAc,GAE3C,MAAO,CACHb,EAAAA,aAAaC,SAAS7B,EAAIyB,OAAOoB,YACjCjB,EAAAA,aAAaC,UAAU7B,EAAIC,QAAU,GAAG4C,YACxC7C,EAAIE,OAAO2C,WAEnB,CAfI,MAAO,MAACD,OAAWA,OAAWA,EAgBtC,CAwBA,OACIE,EAAAA,KAAA,MAAA,CACIC,KAAK,QAAO,aACAhF,EACZiF,UAAWC,EAAAA,aACXC,QA7MmB,WACnB1F,GAAYC,IAIhB4B,GAAmB,GAGfC,EAAQa,UACPb,EAAQa,QAAQC,SAASC,SAASC,iBAEhB,QAAnBC,EAAAf,EAAYW,eAAO,IAAAI,GAAAA,EAAEC,SACzB,EAkMIvC,QA/LoB6C,IACpBtD,IAIJ6B,GAAmB,GAEdzB,GACDK,SAAAA,EAAU6C,GACd,EAsL+BqC,SAAA,CAE3BL,OAAA,MAAA,CAAKzE,IAAKiB,EAAS0D,UAAWI,EAAAA,eAAqBD,SAAA,CAC/CE,EAAAA,IAAA,OAAA,CACIL,UAAWM,EAAAA,QACPC,EAAAA,eACAC,EAAAA,eACHL,SAEDE,EAAAA,IAAA,QAAA,CACIhF,IAAKmB,EACL4B,KAAM1D,EAAM,GACZ+F,UAAW,EACX9F,MAAOgC,QAAAA,EAAiBpB,EACxBN,QAAS+C,EACT9C,OAAQmD,EACRrD,SAAUiE,EACVyB,KAAK,OACLpF,UAAWA,EACXqF,QAAQ,WAAU,cACL,GAAGjG,EAAM,WAAU,aACpBU,EAAY,GACxBZ,SAAUA,EACVC,SAAUA,EACVmG,SAAUnG,GAAW,EAAK,EAC1BoG,aAAa,MACb/F,YACImB,IAAiBvB,EAAM,IAAOD,EAAgB,KAAL,GAE7CuF,UAAWM,EAAAA,QACPQ,EAAAA,YACEjG,GAAckG,EAAAA,oBAI5BV,EAAAA,IAAA,OAAA,CACIL,UAAWM,EAAAA,QACPU,EAAAA,UACEnG,GAAcoG,EAAAA,cACnBd,SAAA,MAILE,EAAAA,IAAA,OAAA,CACIL,UAAWM,EAAAA,QACPC,EAAAA,eACAW,EAAAA,iBACHf,SAEDE,EAAAA,IAAA,QAAA,CACIhF,IAAKoB,EACL2B,KAAM1D,EAAM,GACZ+F,UAAW,EACX9F,MAAOiC,QAAAA,EAAmBjB,EAC1BV,QAAS+C,EACT9C,OAAQmD,EACRrD,SAAUiE,EACVkC,UAAW9B,EACXqB,KAAK,OACLpF,UAAWA,EACXqF,QAAQ,WAAU,cACL,GAAGjG,EAAM,WAAU,aACpBU,EAAY,GACxBZ,SAAUA,EACVC,SAAUA,EACVmG,SAAUnG,GAAW,EAAK,EAC1BoG,aAAa,MACb/F,YACImB,IAAiBvB,EAAM,IAAOD,EAAgB,KAAL,GAE7CuF,UAAWM,EAAAA,QACPQ,EAAAA,YACEjG,GAAckG,EAAAA,oBAI5BV,EAAAA,IAAA,OAAA,CACIL,UAAWM,UACPU,EAAAA,UACEnG,GAAcoG,EAAAA,cACnBd,SAAA,MAILE,MAAA,OAAA,CACIL,UAAWM,EAAAA,QACPC,iBACAa,EAAAA,gBACHjB,SAEDE,EAAAA,IAAA,QAAA,CACIhF,IAAKqB,EACL0B,KAAM1D,EAAM,GACZ+F,UAAW,EACX9F,MAAOkC,QAAAA,EAAkBf,EACzBb,QAAS+C,EACT9C,OAAQmD,EACRrD,SAAUiE,EACVkC,UAAW9B,EACXqB,KAAK,OACLpF,UAAWA,EACXqF,QAAQ,WAAU,cACL,GAAGjG,EAAM,WAAU,aACpBU,EAAY,GACxBZ,SAAUA,EACVC,SAAUA,EACVmG,SAAUnG,GAAW,EAAK,EAC1BoG,aAAa,MACb/F,YACImB,IAAiBvB,EAAM,IAAOD,EAAgB,OAAL,GAE7CuF,UAAWM,EAAAA,QACPQ,EAAAA,YACEjG,GAAckG,EAAAA,uBA1Id,MACtB,IAAIpG,IAASF,GAAaK,EAI1B,OACIuF,EAAAA,IAAA,MAAA,CACIL,UAAWM,EAAAA,QACPe,EAAAA,YACA7G,GAAY8G,EAAAA,oBACZlF,GAAmBmF,EAAAA,iBAEvBC,YAAa3D,EAAsBsC,SAElCrF,GACC,EAgIL2G,KACC,EAIDC,EAAsBC,EAAAA,QAAMC,WAAWrH"}

package/cjs/shared/standalone-date-input/standalone-date-input.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./standalone-date-input.styles_1m0da43.css");exports.baseInput="b11lxf0g",exports.baseInputHover="b1owk99f",exports.dayInputSizer="d1tizbfo",exports.divider="d1hrb2q6",exports.dividerHover="d1ednuur",exports.inputContainer="i12gn07d",exports.inputSection="i48x656",exports.inputSizerBase="iay8f6w",exports.monthInputSizer="m8v7mt3",exports.placeholder="p1kizbwh",exports.placeholderDisabled="pzrktuq",exports.placeholderHide="p1jcopfd",exports.yearInputSizer="y1nfq8ts";
+//# sourceMappingURL=standalone-date-input.styles.js.map

package/cjs/shared/standalone-date-input/standalone-date-input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"standalone-date-input.styles.js","sources":["../../../../src/shared/standalone-date-input/standalone-date-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSection = css`\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    flex: 1;\n`;\n\nexport const baseInput = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    display: block;\n    background: transparent;\n    border: none;\n    outline: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    text-align: center;\n    position: absolute;\n    inset: 0;\n\n    &:disabled {\n        color: ${Colour[\"text-subtler\"]};\n\n        &:hover {\n            cursor: not-allowed;\n        }\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    // Chrome, Safari, Edge, Opera\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    // Safari (remove top shadow)\n    --webkit-appearance: none;\n\n    // Firefox\n    --moz-appearance: textfield;\n`;\n\nexport const baseInputHover = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const divider = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const dividerHover = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const inputContainer = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const inputSizerBase = css`\n    display: inline-block;\n    position: relative;\n\n    &::after {\n        ${Font[\"body-baseline-regular\"]}\n        visibility: hidden;\n        pointer-events: none;\n        white-space: pre;\n    }\n`;\n\nexport const dayInputSizer = css`\n    &::after {\n        content: \"DD\";\n    }\n`;\n\nexport const monthInputSizer = css`\n    &::after {\n        content: \"MM\";\n    }\n`;\n\nexport const yearInputSizer = css`\n    &::after {\n        content: \"YYYY\";\n    }\n`;\n\nexport const placeholder = css`\n    ${Font[\"body-baseline-regular\"]}\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text-subtler\"]};\n    position: absolute;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const placeholderDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n`;\n\nexport const placeholderHide = css`\n    display: none;\n`;\n"],"names":[],"mappings":"iIAesB,kCAyCK,iCA+BD,2BA3BN,gCAKK,kCAIE,gCA9DF,iCAoEE,kCAkBC,8BAYJ,uCAWQ,kCAKJ,kCAtBD"}

package/cjs/shared/standalone-date-input/standalone-date-input.styles_1m0da43.css

@@ -0,0 +1,13 @@
+.i48x656{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;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;}
+.b11lxf0g{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);display:block;background:transparent;border:none;outline:none;box-shadow:none;padding:0;margin:0;text-align:center;position:absolute;inset:0;--webkit-appearance:none;--moz-appearance:textfield;}.b11lxf0g:disabled{color:var(--fds-colour-text-subtler);}.b11lxf0g:disabled:hover{cursor:not-allowed;}.b11lxf0g::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::-webkit-outer-spin-button,.b11lxf0g::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.b11lxf0g::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::-moz-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::placeholder{color:var(--fds-colour-text-subtler);}
+.b1owk99f{color:var(--fds-colour-text-subtler);}
+.d1hrb2q6{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}
+.d1ednuur{color:var(--fds-colour-text-subtler);}
+.i12gn07d{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;gap:var(--fds-spacing-4);}
+.iay8f6w{display:inline-block;position:relative;}.iay8f6w::after{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);visibility:hidden;pointer-events:none;white-space:pre;}
+.d1tizbfo::after{content:"DD";}
+.m8v7mt3::after{content:"MM";}
+.y1nfq8ts::after{content:"YYYY";}
+.p1kizbwh{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);background-color:var(--fds-colour-bg);color:var(--fds-colour-text-subtler);position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;}
+.pzrktuq{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;}
+.p1jcopfd{display:none;}

package/cjs/shared/styles/index.js

@@ -1,7 +1,2 @@
-"use strict";var e=require("styled-components");exports.lineClampCss=i=>e.css`
-    display: -webkit-box;
-    -webkit-line-clamp: ${i};
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-`;
+"use strict";exports.lineClampCss=e=>`\n    display: -webkit-box;\n    -webkit-line-clamp: ${e};\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n`;
 //# sourceMappingURL=index.js.map

package/cjs/shared/styles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/shared/styles/index.ts"],"sourcesContent":["import { css } from \"styled-components\";\n\nexport const lineClampCss = (lines: number) => css`\n    display: -webkit-box;\n    -webkit-line-clamp: ${lines};\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n`;\n"],"names":["lines","css"],"mappings":"qEAE6BA,GAAkBC,KAAG;;0BAExBD"}
+{"version":3,"file":"index.js","sources":["../../../../src/shared/styles/index.ts"],"sourcesContent":["/**\n * Generates CSS for limiting text to a specified number of lines after which it\n * is truncated with an ellipsis.\n */\nexport const lineClampCss = (lines: number) => `\n    display: -webkit-box;\n    -webkit-line-clamp: ${lines};\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n`;\n\n/**\n * Generates CSS for limiting text to a number of lines (specified via a CSS\n * variable) after which it is truncated with an ellipsis.\n *\n * @example\n * ```\n * css`\n *   ${lineClampDynamicCss(\"--my-variable\")}\n *   --my-variable: 3;\n * `\n * ```\n */\nexport const lineClampDynamicCss = (variableName: string) => `\n    /* reset variable to prevent leaking to child components */\n    ${variableName}: initial;\n    display: -webkit-box;\n    -webkit-line-clamp: var(${variableName});\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n`;\n"],"names":["lines"],"mappings":"kCAI6BA,GAAkB,wDAErBA"}

package/cjs/shared/time-slot/time-slot.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),t=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var s=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var o=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./time-slot.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(r);const u=t.forwardRef((({className:r,"data-testid":i,bgColor:u,bgColor2:n,children:d,clickable:c,hoverBgColor:m,hoverBgColor2:q,nonClickableCursor:h,onClick:j,styleType:k,tabIndex:p},v)=>{const y=t.useRef(null);s.useApplyStyle(y,{[l.tokens.slot.bgColor]:u,[l.tokens.slot.bgColor2]:n,[l.tokens.slot.hoverBgColor]:m,[l.tokens.slot.hoverBgColor2]:q,[l.tokens.slot.cursor]:h});return e.jsx("div",{ref:o.mergeRefs(y,v),className:a.default(l.timeSlot,r),"data-style-type":k,"data-clickable":!!c,"data-hoverable":!!(c&&("stripes"===k?m||q:m)),onClick:j,"data-testid":i,tabIndex:p,children:d})}));exports.TimeSlot=u;
+//# sourceMappingURL=time-slot.js.map

package/cjs/shared/time-slot/time-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot.js","sources":["../../../../src/shared/time-slot/time-slot.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { mergeRefs } from \"../../util\";\nimport * as styles from \"./time-slot.styles\";\nimport type { SlotStyle } from \"./types\";\n\nexport interface TimeSlotProps {\n    \"data-testid\"?: string | undefined;\n    bgColor: string;\n    bgColor2?: string | undefined;\n    children?: ReactNode;\n    className?: string | undefined;\n    clickable?: boolean | undefined;\n    hoverBgColor?: string | undefined;\n    hoverBgColor2?: string | undefined;\n    nonClickableCursor?: \"default\" | \"not-allowed\" | undefined;\n    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n    styleType: SlotStyle;\n    tabIndex?: number | undefined;\n}\n\nconst Component = (\n    {\n        className,\n        \"data-testid\": dataTestId,\n        bgColor,\n        bgColor2,\n        children,\n        clickable,\n        hoverBgColor,\n        hoverBgColor2,\n        nonClickableCursor,\n        onClick,\n        styleType,\n        tabIndex,\n    }: TimeSlotProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const slotRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(slotRef, {\n        [styles.tokens.slot.bgColor]: bgColor,\n        [styles.tokens.slot.bgColor2]: bgColor2,\n        [styles.tokens.slot.hoverBgColor]: hoverBgColor,\n        [styles.tokens.slot.hoverBgColor2]: hoverBgColor2,\n        [styles.tokens.slot.cursor]: nonClickableCursor,\n    });\n\n    const isHoverable = () => {\n        if (!clickable) {\n            return false;\n        }\n\n        if (styleType === \"stripes\") {\n            return !!(hoverBgColor || hoverBgColor2);\n        }\n\n        return !!hoverBgColor;\n    };\n\n    return (\n        <div\n            ref={mergeRefs(slotRef, ref)}\n            className={clsx(styles.timeSlot, className)}\n            data-style-type={styleType}\n            data-clickable={!!clickable}\n            data-hoverable={isHoverable()}\n            onClick={onClick}\n            data-testid={dataTestId}\n            tabIndex={tabIndex}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const TimeSlot = forwardRef(Component);\n"],"names":["TimeSlot","forwardRef","className","dataTestId","bgColor","bgColor2","children","clickable","hoverBgColor","hoverBgColor2","nonClickableCursor","onClick","styleType","tabIndex","ref","slotRef","useRef","useApplyStyle","styles.tokens","slot","cursor","_jsx","mergeRefs","clsx","styles.timeSlot"],"mappings":"mzBAwBA,MAuDaA,EAAWC,EAAAA,YAvDN,EAEVC,YACA,cAAeC,EACfC,UACAC,WACAC,WACAC,YACAC,eACAC,gBACAC,qBACAC,UACAC,YACAC,YAEJC,KAEA,MAAMC,EAAUC,EAAAA,OAAuB,MAEvCC,EAAAA,cAAcF,EAAS,CACnB,CAACG,EAAAA,OAAcC,KAAKf,SAAUA,EAC9B,CAACc,EAAAA,OAAcC,KAAKd,UAAWA,EAC/B,CAACa,EAAAA,OAAcC,KAAKX,cAAeA,EACnC,CAACU,EAAAA,OAAcC,KAAKV,eAAgBA,EACpC,CAACS,EAAAA,OAAcC,KAAKC,QAASV,IAejC,OACIW,EAAAA,WACIP,IAAKQ,EAAAA,UAAUP,EAASD,GACxBZ,UAAWqB,EAAAA,QAAKC,EAAAA,SAAiBtB,GAAU,kBAC1BU,EAAS,mBACRL,EAAS,oBAhB1BA,IAIa,YAAdK,EACUJ,GAAgBC,EAGrBD,IAULG,QAASA,gBACIR,EACbU,SAAUA,WAETP,GACC"}

package/cjs/shared/time-slot/time-slot.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./time-slot.styles_1r9na3f.css");exports.timeSlot="tsti7hb",exports.tokens={slot:{bgColor:"--fds-internal-timeSlot-slot-bgColor",bgColor2:"--fds-internal-timeSlot-slot-bgColor2",hoverBgColor:"--fds-internal-timeSlot-slot-hoverBgColor",hoverBgColor2:"--fds-internal-timeSlot-slot-hoverBgColor2",cursor:"--fds-internal-timeSlot-slot-cursor"}};
+//# sourceMappingURL=time-slot.styles.js.map

package/cjs/shared/time-slot/time-slot.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot.styles.js","sources":["../../../../src/shared/time-slot/time-slot.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../../theme\";\n\nexport const tokens = {\n    slot: {\n        bgColor: \"--fds-internal-timeSlot-slot-bgColor\",\n        bgColor2: \"--fds-internal-timeSlot-slot-bgColor2\",\n        hoverBgColor: \"--fds-internal-timeSlot-slot-hoverBgColor\",\n        hoverBgColor2: \"--fds-internal-timeSlot-slot-hoverBgColor2\",\n        cursor: \"--fds-internal-timeSlot-slot-cursor\",\n    },\n};\n\nexport const timeSlot = css`\n    ${tokens.slot.bgColor}: ${Colour[\"bg-stronger\"]};\n    ${tokens.slot.bgColor2}: ${Colour[\"bg-strongest\"]};\n    ${tokens.slot.hoverBgColor}: ${Colour[\"bg-stronger\"]};\n    ${tokens.slot.hoverBgColor2}: ${Colour[\"bg-strongest\"]};\n\n    cursor: var(${tokens.slot.cursor}, default);\n\n    &[data-clickable=\"true\"] {\n        cursor: pointer;\n    }\n\n    &[data-style-type=\"default\"] {\n        background-color: var(${tokens.slot.bgColor});\n    }\n\n    &[data-style-type=\"default\"][data-hoverable=\"true\"] {\n        &:hover {\n            background-color: var(${tokens.slot.hoverBgColor});\n        }\n    }\n\n    &[data-style-type=\"stripes\"] {\n        background: repeating-linear-gradient(\n            135deg,\n            var(${tokens.slot.bgColor2}) 0px,\n            var(${tokens.slot.bgColor2}) 6px,\n            var(${tokens.slot.bgColor}) 6px,\n            var(${tokens.slot.bgColor}) 12px\n        );\n    }\n\n    &[data-style-type=\"stripes\"][data-hoverable=\"true\"] {\n        &:hover {\n            background: repeating-linear-gradient(\n                135deg,\n                var(${tokens.slot.hoverBgColor2}, var(${tokens.slot.bgColor2}))\n                    0px,\n                var(${tokens.slot.hoverBgColor2}, var(${tokens.slot.bgColor2}))\n                    6px,\n                var(${tokens.slot.hoverBgColor}, var(${tokens.slot.bgColor}))\n                    6px,\n                var(${tokens.slot.hoverBgColor}, var(${tokens.slot.bgColor}))\n                    12px\n            );\n        }\n    }\n`;\n"],"names":["slot","bgColor","bgColor2","hoverBgColor","hoverBgColor2","cursor"],"mappings":"wGAcqB,yBAVC,CAClBA,KAAM,CACFC,QAAS,uCACTC,SAAU,wCACVC,aAAc,4CACdC,cAAe,6CACfC,OAAQ"}

package/cjs/shared/time-slot/time-slot.styles_1r9na3f.css

@@ -0,0 +1,17 @@
+.tsti7hb{--fds-internal-timeSlot-slot-bgColor:var(--fds-colour-bg-stronger);--fds-internal-timeSlot-slot-bgColor2:var(--fds-colour-bg-strongest);--fds-internal-timeSlot-slot-hoverBgColor:var(--fds-colour-bg-stronger);--fds-internal-timeSlot-slot-hoverBgColor2:var(--fds-colour-bg-strongest);cursor:var(--fds-internal-timeSlot-slot-cursor, default);}.tsti7hb[data-clickable="true"]{cursor:pointer;}.tsti7hb[data-style-type="default"]{background-color:var(--fds-internal-timeSlot-slot-bgColor);}.tsti7hb[data-style-type="default"][data-hoverable="true"]:hover{background-color:var(--fds-internal-timeSlot-slot-hoverBgColor);}.tsti7hb[data-style-type="stripes"]{background:repeating-linear-gradient(
+            135deg,
+            var(--fds-internal-timeSlot-slot-bgColor2) 0px,
+            var(--fds-internal-timeSlot-slot-bgColor2) 6px,
+            var(--fds-internal-timeSlot-slot-bgColor) 6px,
+            var(--fds-internal-timeSlot-slot-bgColor) 12px
+        );}.tsti7hb[data-style-type="stripes"][data-hoverable="true"]:hover{background:repeating-linear-gradient(
+                135deg,
+                var(--fds-internal-timeSlot-slot-hoverBgColor2, var(--fds-internal-timeSlot-slot-bgColor2))
+                    0px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor2, var(--fds-internal-timeSlot-slot-bgColor2))
+                    6px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor, var(--fds-internal-timeSlot-slot-bgColor))
+                    6px,
+                var(--fds-internal-timeSlot-slot-hoverBgColor, var(--fds-internal-timeSlot-slot-bgColor))
+                    12px
+            );}