npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1629) hide show

package/{cjs/shared/internal-calendar/internal-calendar-month.styles_1pk3ynj.css → shared/internal-calendar/internal-calendar-month.styles_14oh57f.css} RENAMED Viewed

@@ -1,8 +1,8 @@
-.w1tx88ym{width:100%;height:100%;display:-ms-grid;display:grid;-ms-grid-columns:repeat(2, 1fr);grid-template-columns:repeat(2, 1fr);-ms-grid-rows:repeat(6, 2.5rem);grid-template-rows:repeat(6, 2.5rem);-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;gap:0.5rem 0;}
-.m37bydr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border-radius:var(--fds-radius-md);margin:0 0.5rem;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fds-colour-text);cursor:default;}
+@layer fds{.w1tx88ym{width:100%;height:100%;display:-ms-grid;display:grid;-ms-grid-columns:repeat(2, 1fr);grid-template-columns:repeat(2, 1fr);-ms-grid-rows:repeat(6, 2.5rem);grid-template-rows:repeat(6, 2.5rem);-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;gap:0.5rem 0;}
+.m37bydr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border-radius:var(--fds-radius-md);margin:0 0.5rem;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fds-colour-text);cursor:default;}
 .m10033nc{cursor:not-allowed;color:var(--fds-colour-text-disabled-subtlest);}
 .mhzr9th{cursor:pointer;}
 .m1t53w7a{color:var(--fds-colour-text-primary);font-weight:var(--fds-font-weight-semibold);}
 .mznpfg{background:var(--fds-colour-bg-selected);border-color:var(--fds-colour-border-selected);color:var(--fds-colour-text-selected);font-weight:var(--fds-font-weight-semibold);}
 .mgh0mxh:hover{background:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);font-weight:var(--fds-font-weight-semibold);}
-.mhccb5n:hover{background:var(--fds-colour-bg-selected-hover);border-color:var(--fds-colour-border-selected-hover);color:var(--fds-colour-text-selected-hover);font-weight:var(--fds-font-weight-semibold);}
+.mhccb5n:hover{background:var(--fds-colour-bg-selected-hover);border-color:var(--fds-colour-border-selected-hover);color:var(--fds-colour-text-selected-hover);font-weight:var(--fds-font-weight-semibold);}}

package/shared/internal-calendar/internal-calendar-year.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./internal-calendar-year.styles_1azy42u.css";const y="w3rwm60",r="y6pbhbr",a="y1iq0wsu",e="ylfpv0z",n="y9ky3r3",l="y1w3dlxt",s="ynkab5y",t="yivyhzm",c="y1pbdzuc";export{y as wrapper,r as yearCell,l as yearCellCurrentYear,t as yearCellDefaultHover,a as yearCellDisabledDisplay,e as yearCellInteractive,n as yearCellOtherDecade,c as yearCellSelectedHover,s as yearCellSelectedYear};
+import"./internal-calendar-year.styles_therlc.css";const y="w3rwm60",r="y6pbhbr",a="y1iq0wsu",e="ylfpv0z",l="y9ky3r3",n="y1w3dlxt",t="ynkab5y",s="yivyhzm",c="y1pbdzuc";export{y as wrapper,r as yearCell,n as yearCellCurrentYear,s as yearCellDefaultHover,a as yearCellDisabledDisplay,e as yearCellInteractive,l as yearCellOtherDecade,c as yearCellSelectedHover,t as yearCellSelectedYear};
 //# sourceMappingURL=internal-calendar-year.styles.js.map

package/shared/internal-calendar/internal-calendar-year.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal-calendar-year.styles.js","sources":["../../../src/shared/internal-calendar/internal-calendar-year.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n width: 100%;\n height: 100%;\n display: grid;\n align-content: center;\n align-items: center;\n grid-template-columns: repeat(3, 1fr);\n`;\n\nexport const yearCell = css`\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 1rem 0.5rem;\n transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n padding: 0.5rem;\n\n ${Font[\"body-md-regular\"]}\n border-radius: ${Radius[\"md\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n background-clip: border-box;\n color: ${Colour[\"text\"]};\n cursor: default;\n`;\n\nexport const yearCellDisabledDisplay = css`\n cursor: not-allowed;\n color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const yearCellInteractive = css`\n cursor: pointer;\n`;\n\nexport const yearCellOtherDecade = css`\n color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const yearCellCurrentYear = css`\n color: ${Colour[\"text-primary\"]};\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const yearCellSelectedYear = css`\n background: ${Colour[\"bg-selected\"]};\n border-color: ${Colour[\"border-selected\"]};\n color: ${Colour[\"text-selected\"]};\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const yearCellDefaultHover = css`\n &:hover {\n background: ${Colour[\"bg-hover\"]};\n color: ${Colour[\"text-hover\"]};\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n }\n`;\n\nexport const yearCellSelectedHover = css`\n &:hover {\n background: ${Colour[\"bg-selected-hover\"]};\n border-color: ${Colour[\"border-selected-hover\"]};\n color: ${Colour[\"text-selected-hover\"]};\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n }\n`;\n"],"names":["wrapper","yearCell","yearCellDisabledDisplay","yearCellInteractive","yearCellOtherDecade","yearCellCurrentYear","yearCellSelectedYear","yearCellDefaultHover","yearCellSelectedHover"],"mappings":"~~4FAOO~~,MAAMA,EAAO,UASPC,EAAQ,UAgBRC,EAAuB,WAKvBC,EAAmB,UAInBC,EAAmB,UAInBC,EAAmB,WAKnBC,EAAoB,UAOpBC,EAAoB,UAQpBC,EAAqB"}
1	+ {"version":3,"file":"internal-calendar-year.styles.js","sources":["../../../src/shared/internal-calendar/internal-calendar-year.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Radius } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n width: 100%;\n height: 100%;\n display: grid;\n align-content: center;\n align-items: center;\n grid-template-columns: repeat(3, 1fr);\n`;\n\nexport const yearCell = css`\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 1rem 0.5rem;\n transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n padding: 0.5rem;\n\n ${Font[\"body-md-regular\"]}\n border-radius: ${Radius[\"md\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n background-clip: border-box;\n color: ${Colour[\"text\"]};\n cursor: default;\n`;\n\nexport const yearCellDisabledDisplay = css`\n cursor: not-allowed;\n color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const yearCellInteractive = css`\n cursor: pointer;\n`;\n\nexport const yearCellOtherDecade = css`\n color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const yearCellCurrentYear = css`\n color: ${Colour[\"text-primary\"]};\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const yearCellSelectedYear = css`\n background: ${Colour[\"bg-selected\"]};\n border-color: ${Colour[\"border-selected\"]};\n color: ${Colour[\"text-selected\"]};\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const yearCellDefaultHover = css`\n &:hover {\n background: ${Colour[\"bg-hover\"]};\n color: ${Colour[\"text-hover\"]};\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n }\n`;\n\nexport const yearCellSelectedHover = css`\n &:hover {\n background: ${Colour[\"bg-selected-hover\"]};\n border-color: ${Colour[\"border-selected-hover\"]};\n color: ${Colour[\"text-selected-hover\"]};\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n }\n`;\n"],"names":["wrapper","yearCell","yearCellDisabledDisplay","yearCellInteractive","yearCellOtherDecade","yearCellCurrentYear","yearCellSelectedYear","yearCellDefaultHover","yearCellSelectedHover"],"mappings":"2FAOO,MAAMA,EAAO,UASPC,EAAQ,UAgBRC,EAAuB,WAKvBC,EAAmB,UAInBC,EAAmB,UAInBC,EAAmB,WAKnBC,EAAoB,UAOpBC,EAAoB,UAQpBC,EAAqB"}

package/shared/internal-calendar/{internal-calendar-year.styles_1azy42u.css → internal-calendar-year.styles_therlc.css} RENAMED Viewed

@@ -1,9 +1,9 @@
-.w3rwm60{width:100%;height:100%;display:-ms-grid;display:grid;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:repeat(3, 1fr);grid-template-columns:repeat(3, 1fr);}
-.y6pbhbr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:1rem 0.5rem;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);padding:0.5rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);border-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fds-colour-text);cursor:default;}
+@layer fds{.w3rwm60{width:100%;height:100%;display:-ms-grid;display:grid;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:repeat(3, 1fr);grid-template-columns:repeat(3, 1fr);}
+.y6pbhbr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:1rem 0.5rem;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);padding:0.5rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);border-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fds-colour-text);cursor:default;}
 .y1iq0wsu{cursor:not-allowed;color:var(--fds-colour-text-disabled-subtlest);}
 .ylfpv0z{cursor:pointer;}
 .y9ky3r3{color:var(--fds-colour-text-disabled-subtlest);}
 .y1w3dlxt{color:var(--fds-colour-text-primary);font-weight:var(--fds-font-weight-semibold);}
 .ynkab5y{background:var(--fds-colour-bg-selected);border-color:var(--fds-colour-border-selected);color:var(--fds-colour-text-selected);font-weight:var(--fds-font-weight-semibold);}
 .yivyhzm:hover{background:var(--fds-colour-bg-hover);color:var(--fds-colour-text-hover);font-weight:var(--fds-font-weight-semibold);}
-.y1pbdzuc:hover{background:var(--fds-colour-bg-selected-hover);border-color:var(--fds-colour-border-selected-hover);color:var(--fds-colour-text-selected-hover);font-weight:var(--fds-font-weight-semibold);}
+.y1pbdzuc:hover{background:var(--fds-colour-bg-selected-hover);border-color:var(--fds-colour-border-selected-hover);color:var(--fds-colour-text-selected-hover);font-weight:var(--fds-font-weight-semibold);}}

package/shared/internal-calendar/internal-calendar.styles_gnc3eq.css CHANGED Viewed

	@@ -1 +1 @@
1	- .c3n22sv{width:100%;background:var(--fds-colour-bg);}
1	+ @layer fds{.c3n22sv{width:100%;background:var(--fds-colour-bg);}}

package/shared/internal-calendar/single/single-cell.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import t from"../../../external/dayjs/dayjs.min.js";import{CalendarHelper as a}from"../../../util/calendar-helper.js";import"react";import"../../../util/simple-id-generator.js";import"../../../util/string-helper.js";import"@react-aria/live-announcer";import{DayCell as r}from"../day-cell/day-cell.js";const o=({date:o,calendarDate:l,selectedDate:n,hoverDate:i,focusDate:c,minDate:s,maxDate:d,disabledDates:m,allowDisabledSelection:u,showActiveMonthDaysOnly:y,onSelect:D,onHover:h,onFocus:p,setFocusCell:f,tabIndex:b})=>{const v=a.isDisabledDay(o,m,s,d),Y=!v||u,w=()=>{D(o,!Y)},g={date:o,calendarDate:l,disabled:v,interactive:Y,currentDateIndicator:!0,onSelect:w,onHover:()=>{h(o.format("YYYY-MM-DD"),!Y)},onFocus:()=>{p(o.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(Y&&w());(e=>{let t;const a={ArrowLeft:()=>o.subtract(1,"day"),ArrowRight:()=>o.add(1,"day"),ArrowUp:()=>o.subtract(7,"day"),ArrowDown:()=>o.add(7,"day"),Home:()=>o.startOf("week"),End:()=>o.endOf("week"),PageUp:()=>e.shiftKey?o.subtract(1,"year"):o.subtract(1,"month"),PageDown:()=>e.shiftKey?o.add(1,"year"):o.add(1,"month")}[e.key];a&&(e.preventDefault(),t=a(),f(t.format("YYYY-MM-DD")))})(e)},role:"gridcell",focusDate:t(c),tabIndex:b};return e(r,Object.assign({},g,(()=>{const e={};l.month()!==o.month()?e.labelType=y?"hidden":"unavailable":t().isSame(o,"day")&&!v&&(e.labelType="current");const a=o.isSame(n,"day"),r=o.isSame(i,"day");return a&&r?(e.labelType="selected-hover",e.circleLeft="selected-hover-outline",e.circleRight="selected-hover-outline"):a?(e.labelType="selected",e.circleLeft="selected-outline",e.circleRight="selected-outline"):r&&(e.labelType="hover",e.circleLeft="hover-subtle",e.circleRight="hover-subtle"),e})()))};export{o as SingleCell};
+import{jsx as e}from"react/jsx-runtime";import t from"../../../external/dayjs/dayjs.min.js";import{CalendarHelper as a}from"../../../util/calendar-helper.js";import"react";import"../../../util/simple-id-generator.js";import"../../../util/string-helper.js";import"@react-aria/live-announcer";import{DayCell as r}from"../day-cell/day-cell.js";const o=({date:o,calendarDate:l,selectedDate:n,hoverDate:i,focusDate:c,minDate:s,maxDate:d,disabledDates:m,allowDisabledSelection:u,showActiveMonthDaysOnly:y,onSelect:D,onHover:h,onFocus:p,setFocusCell:f,tabIndex:b})=>{const v=a.isDisabledDay(o,m,s,d),Y=!v||u,w=()=>{D(o,!Y)},g={date:o,calendarDate:l,disabled:v,interactive:Y,currentDateIndicator:!0,onSelect:w,onHover:()=>{h(o.format("YYYY-MM-DD"),!Y)},onFocus:()=>{p(o.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(Y&&w());(e=>{let t;const a={ArrowLeft:()=>o.subtract(1,"day"),ArrowRight:()=>o.add(1,"day"),ArrowUp:()=>o.subtract(7,"day"),ArrowDown:()=>o.add(7,"day"),Home:()=>o.startOf("week"),End:()=>o.endOf("week"),PageUp:()=>e.shiftKey?o.subtract(1,"year"):o.subtract(1,"month"),PageDown:()=>e.shiftKey?o.add(1,"year"):o.add(1,"month")}[e.key];a&&(e.preventDefault(),t=a(),f(t.format("YYYY-MM-DD")))})(e)},role:"gridcell",focusDate:t(c),tabIndex:b};return e(r,Object.assign({},g,(()=>{const e={};l.month()!==o.month()?e.labelType=y?"hidden":"unavailable":t().isSame(o,"day")&&!v&&(e.labelType="current");const a=n&&o.isSame(n,"day"),r=o.isSame(i,"day");return a&&r?(e.labelType="selected-hover",e.circleLeft="selected-hover-outline",e.circleRight="selected-hover-outline"):a?(e.labelType="selected",e.circleLeft="selected-outline",e.circleRight="selected-outline"):r&&(e.labelType="hover",e.circleLeft="hover-subtle",e.circleRight="hover-subtle"),e})()))};export{o as SingleCell};
 //# sourceMappingURL=single-cell.js.map

package/shared/internal-calendar/single/single-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"single-cell.js","sources":["../../../../src/shared/internal-calendar/single/single-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper } from \"../../../util\";\nimport type { CellStyleProps, DayCellProps } from \"../day-cell\";\nimport { DayCell } from \"../day-cell\";\n\ninterface Props {\n date: Dayjs;\n calendarDate: Dayjs;\n selectedDate: string \| undefined;\n hoverDate: string \| undefined;\n focusDate: string;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n disabledDates?: string[] \| undefined;\n allowDisabledSelection?: boolean \| undefined;\n showActiveMonthDaysOnly?: 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 SingleCell = ({\n date,\n calendarDate,\n selectedDate,\n hoverDate,\n focusDate,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\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\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 const keyActions: Record<string, () => dayjs.Dayjs> = {\n ArrowLeft: () => date.subtract(1, \"day\"),\n ArrowRight: () => date.add(1, \"day\"),\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 getCellStyle = () => {\n const props: CellStyleProps = {};\n\n if (calendarDate.month() !== date.month()) {\n props.labelType = showActiveMonthDaysOnly\n ? \"hidden\"\n : \"unavailable\";\n } else if (dayjs().isSame(date, \"day\") && !disabled) {\n props.labelType = \"current\";\n }\n\n const isSelected = date.isSame(selectedDate, \"day\");\n const isHover = date.isSame(hoverDate, \"day\");\n\n if (isSelected && isHover) {\n props.labelType = \"selected-hover\";\n props.circleLeft = \"selected-hover-outline\";\n props.circleRight = \"selected-hover-outline\";\n } else if (isSelected) {\n props.labelType = \"selected\";\n props.circleLeft = \"selected-outline\";\n props.circleRight = \"selected-outline\";\n } else if (isHover) {\n props.labelType = \"hover\";\n props.circleLeft = \"hover-subtle\";\n props.circleRight = \"hover-subtle\";\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 role: \"gridcell\",\n focusDate: dayjs(focusDate),\n tabIndex,\n };\n\n return <DayCell {...commonProps} {...getCellStyle()} />;\n};\n"],"names":["SingleCell","date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","dayjs","_jsx","DayCell","Object","assign","props","month","labelType","isSame","isSelected","isHover","circleLeft","circleRight","getCellStyle"],"mappings":"qVAyBO,MAAMA,EAAa,EACtBC,OACAC,eACAC,eACAC,YACAC,YACAC,UACAC,UACAC,gBACAC,yBACAC,0BACAC,WACAC,UACAC,UACAC,eACAC,eAKA,MAAMC,EAAWC,EAAeC,cAC5BjB,EACAO,EACAF,EACAC,GAEEY,GAAeH,GAAYP,EAK3BW,EAAe,KACjBT,EAASV,GAAOkB,EAAY,EA8F1BE,EAA4B,CAC9BpB,OACAC,eACAc,WACAG,cACAG,sBAAsB,EACtBX,SAAUS,EACVR,QAlGgB,KAChBA,EAAQX,EAAKsB,OAAO,eAAgBJ,EAAY,EAkGhDN,QA/FgB,KAChBA,EAAQZ,EAAKsB,OAAO,cAAc,EA+FlCC,UA9DmBC,IACnB,MACMC,EADgBD,EACYE,IAElC,GAAoB,UAAhBD,GAA2C,MAAhBA,EAK3B,OAJAD,EAAMG,sBACFT,GACAC,KArCgB,CAACK,IACzB,IAAII,EAEJ,MAmBMC,EAnBgD,CAClDC,UAAW,IAAM9B,EAAK+B,SAAS,EAAG,OAClCC,WAAY,IAAMhC,EAAKiC,IAAI,EAAG,OAC9BC,QAAS,IAAMlC,EAAK+B,SAAS,EAAG,OAChCI,UAAW,IAAMnC,EAAKiC,IAAI,EAAG,OAC7BG,KAAM,IAAMpC,EAAKqC,QAAQ,QACzBC,IAAK,IAAMtC,EAAKuC,MAAM,QACtBC,OAAQ,IACGhB,EAAMiB,SACPzC,EAAK+B,SAAS,EAAG,QACjB/B,EAAK+B,SAAS,EAAG,SAE3BW,SAAU,IACClB,EAAMiB,SACPzC,EAAKiC,IAAI,EAAG,QACZjC,EAAKiC,IAAI,EAAG,UAIAT,EAAME,KAC5BG,IACAL,EAAMG,iBACNC,EAAoBC,IACpBhB,EAAae,EAAkBN,OAAO,eAC1C,EAeAqB,CAAoBnB,EAAM,EAmD1BoB,KAAM,WACNxC,UAAWyC,EAAMzC,GACjBU,YAGJ,OAAOgC,EAACC,EAAOC,OAAAC,OAAA,CAAA,EAAK7B,EAlDC,MACjB,MAAM8B,EAAwB,CAAA,EAE1BjD,EAAakD,UAAYnD,EAAKmD,QAC9BD,EAAME,UAAY3C,EACZ,SACA,cACCoC,IAAQQ,OAAOrD,EAAM,SAAWe,IACvCmC,EAAME,UAAY,WAGtB,MAAME,~~EAAatD~~,EAAKqD,OAAOnD,EAAc,~~OACvCqD~~,EAAUvD,EAAKqD,OAAOlD,EAAW,OAgBvC,OAdImD,GAAcC,GACdL,EAAME,UAAY,iBAClBF,EAAMM,WAAa,yBACnBN,EAAMO,YAAc,0BACbH,GACPJ,EAAME,UAAY,WAClBF,EAAMM,WAAa,mBACnBN,EAAMO,YAAc,oBACbF,IACPL,EAAME,UAAY,QAClBF,EAAMM,WAAa,eACnBN,EAAMO,YAAc,gBAGjBP,CAAK,EAsBqBQ,IAAkB"}
1	+ {"version":3,"file":"single-cell.js","sources":["../../../../src/shared/internal-calendar/single/single-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper } from \"../../../util\";\nimport type { CellStyleProps, DayCellProps } from \"../day-cell\";\nimport { DayCell } from \"../day-cell\";\n\ninterface Props {\n date: Dayjs;\n calendarDate: Dayjs;\n selectedDate: string \| undefined;\n hoverDate: string \| undefined;\n focusDate: string;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n disabledDates?: string[] \| undefined;\n allowDisabledSelection?: boolean \| undefined;\n showActiveMonthDaysOnly?: 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 SingleCell = ({\n date,\n calendarDate,\n selectedDate,\n hoverDate,\n focusDate,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\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\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 const keyActions: Record<string, () => dayjs.Dayjs> = {\n ArrowLeft: () => date.subtract(1, \"day\"),\n ArrowRight: () => date.add(1, \"day\"),\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 getCellStyle = () => {\n const props: CellStyleProps = {};\n\n if (calendarDate.month() !== date.month()) {\n props.labelType = showActiveMonthDaysOnly\n ? \"hidden\"\n : \"unavailable\";\n } else if (dayjs().isSame(date, \"day\") && !disabled) {\n props.labelType = \"current\";\n }\n\n const isSelected = selectedDate && date.isSame(selectedDate, \"day\");\n const isHover = date.isSame(hoverDate, \"day\");\n\n if (isSelected && isHover) {\n props.labelType = \"selected-hover\";\n props.circleLeft = \"selected-hover-outline\";\n props.circleRight = \"selected-hover-outline\";\n } else if (isSelected) {\n props.labelType = \"selected\";\n props.circleLeft = \"selected-outline\";\n props.circleRight = \"selected-outline\";\n } else if (isHover) {\n props.labelType = \"hover\";\n props.circleLeft = \"hover-subtle\";\n props.circleRight = \"hover-subtle\";\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 role: \"gridcell\",\n focusDate: dayjs(focusDate),\n tabIndex,\n };\n\n return <DayCell {...commonProps} {...getCellStyle()} />;\n};\n"],"names":["SingleCell","date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","dayjs","_jsx","DayCell","Object","assign","props","month","labelType","isSame","isSelected","isHover","circleLeft","circleRight","getCellStyle"],"mappings":"qVAyBO,MAAMA,EAAa,EACtBC,OACAC,eACAC,eACAC,YACAC,YACAC,UACAC,UACAC,gBACAC,yBACAC,0BACAC,WACAC,UACAC,UACAC,eACAC,eAKA,MAAMC,EAAWC,EAAeC,cAC5BjB,EACAO,EACAF,EACAC,GAEEY,GAAeH,GAAYP,EAK3BW,EAAe,KACjBT,EAASV,GAAOkB,EAAY,EA8F1BE,EAA4B,CAC9BpB,OACAC,eACAc,WACAG,cACAG,sBAAsB,EACtBX,SAAUS,EACVR,QAlGgB,KAChBA,EAAQX,EAAKsB,OAAO,eAAgBJ,EAAY,EAkGhDN,QA/FgB,KAChBA,EAAQZ,EAAKsB,OAAO,cAAc,EA+FlCC,UA9DmBC,IACnB,MACMC,EADgBD,EACYE,IAElC,GAAoB,UAAhBD,GAA2C,MAAhBA,EAK3B,OAJAD,EAAMG,sBACFT,GACAC,KArCgB,CAACK,IACzB,IAAII,EAEJ,MAmBMC,EAnBgD,CAClDC,UAAW,IAAM9B,EAAK+B,SAAS,EAAG,OAClCC,WAAY,IAAMhC,EAAKiC,IAAI,EAAG,OAC9BC,QAAS,IAAMlC,EAAK+B,SAAS,EAAG,OAChCI,UAAW,IAAMnC,EAAKiC,IAAI,EAAG,OAC7BG,KAAM,IAAMpC,EAAKqC,QAAQ,QACzBC,IAAK,IAAMtC,EAAKuC,MAAM,QACtBC,OAAQ,IACGhB,EAAMiB,SACPzC,EAAK+B,SAAS,EAAG,QACjB/B,EAAK+B,SAAS,EAAG,SAE3BW,SAAU,IACClB,EAAMiB,SACPzC,EAAKiC,IAAI,EAAG,QACZjC,EAAKiC,IAAI,EAAG,UAIAT,EAAME,KAC5BG,IACAL,EAAMG,iBACNC,EAAoBC,IACpBhB,EAAae,EAAkBN,OAAO,eAC1C,EAeAqB,CAAoBnB,EAAM,EAmD1BoB,KAAM,WACNxC,UAAWyC,EAAMzC,GACjBU,YAGJ,OAAOgC,EAACC,EAAOC,OAAAC,OAAA,CAAA,EAAK7B,EAlDC,MACjB,MAAM8B,EAAwB,CAAA,EAE1BjD,EAAakD,UAAYnD,EAAKmD,QAC9BD,EAAME,UAAY3C,EACZ,SACA,cACCoC,IAAQQ,OAAOrD,EAAM,SAAWe,IACvCmC,EAAME,UAAY,WAGtB,MAAME,EAAapD,GAAgBF,EAAKqD,OAAOnD,EAAc,OACvDqD,EAAUvD,EAAKqD,OAAOlD,EAAW,OAgBvC,OAdImD,GAAcC,GACdL,EAAME,UAAY,iBAClBF,EAAMM,WAAa,yBACnBN,EAAMO,YAAc,0BACbH,GACPJ,EAAME,UAAY,WAClBF,EAAMM,WAAa,mBACnBN,EAAMO,YAAc,oBACbF,IACPL,EAAME,UAAY,QAClBF,EAAMM,WAAa,eACnBN,EAAMO,YAAc,gBAGjBP,CAAK,EAsBqBQ,IAAkB"}

package/shared/internal-calendar/standard/standard-calendar-day-view.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./standard-calendar-day-view.styles_1dbvup3.css";const a="w1fb9dn4",d="hd5h60i",r="r7m17b5";export{d as headerCell,r as rowDayCell,a as wrapper};
+import"./standard-calendar-day-view.styles_1bw26au.css";const a="w1fb9dn4",d="hd5h60i",r="r7m17b5";export{d as headerCell,r as rowDayCell,a as wrapper};
 //# sourceMappingURL=standard-calendar-day-view.styles.js.map

package/shared/internal-calendar/standard/standard-calendar-day-view.styles_1bw26au.css ADDED Viewed

@@ -0,0 +1,3 @@
+@layer fds{.w1fb9dn4{width:100%;display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);row-gap:0.25rem;}
+.hd5h60i{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:2.5rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text);}
+.r7m17b5{-ms-grid-column:1/-1;grid-column:1/-1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}

package/shared/progress-bar/progress-bar.styles_125ri7a.css CHANGED Viewed

	@@ -1 +1 @@
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);}
1	+ @layer fds{.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/shared/range-input-inner-container/range-input-inner-container.styles_1v61utg.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.w1i0lopf{position:relative;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;}
+@layer fds{.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);}
@@ -9,4 +9,4 @@
         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;}
+.i175ocg1{display:none;}}

package/shared/standalone-date-input/standalone-date-input.js CHANGED Viewed

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

package/shared/standalone-date-input/standalone-date-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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":"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"}
1	+ {"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 disabled && styles.dividerDisabled,\n !disabled &&\n dayValue.length === 0 &&\n styles.dividerInactive\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 disabled && styles.dividerDisabled,\n !disabled &&\n monthValue.length === 0 &&\n styles.dividerInactive\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.dividerDisabled","styles.dividerInactive","styles.monthInputSizer","onKeyDown","styles.yearInputSizer","styles.placeholder","styles.placeholderDisabled","styles.placeholderHide","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}

package/shared/standalone-date-input/standalone-date-input.styles.d.ts CHANGED Viewed

@@ -3,6 +3,8 @@ export declare const baseInput: import("@linaria/core").LinariaClassName;
 export declare const baseInputHover: import("@linaria/core").LinariaClassName;
 export declare const divider: import("@linaria/core").LinariaClassName;
 export declare const dividerHover: import("@linaria/core").LinariaClassName;
+export declare const dividerInactive: import("@linaria/core").LinariaClassName;
+export declare const dividerDisabled: import("@linaria/core").LinariaClassName;
 export declare const inputContainer: import("@linaria/core").LinariaClassName;
 export declare const inputSizerBase: import("@linaria/core").LinariaClassName;
 export declare const dayInputSizer: import("@linaria/core").LinariaClassName;

package/shared/standalone-date-input/standalone-date-input.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./standalone-date-input.styles_1m0da43.css";const t="i48x656",d="b11lxf0g",n="b1owk99f",a="d1hrb2q6",s="d1ednuur",e="i12gn07d",i="iay8f6w",o="d1tizbfo",p="m8v7mt3",f="y1nfq8ts",r="p1kizbwh",b="pzrktuq",u="p1jcopfd";export{d as baseInput,n as baseInputHover,o as dayInputSizer,a as divider,s as dividerHover,e as inputContainer,t as inputSection,i as inputSizerBase,p as monthInputSizer,r as placeholder,b as placeholderDisabled,u as placeholderHide,f as yearInputSizer};
+import"./standalone-date-input.styles_157qo89.css";const t="i48x656",d="b11lxf0g",n="b1owk99f",o="d1hrb2q6",p="d1ednuur",s="d12gn07d",a="day8f6w",e="i1tizbfo",i="i8v7mt3",b="d1nfq8ts",f="m1kizbwh",r="yzrktuq",u="p1jcopfd",c="p10ypbkc",q="p1yc7tqu";export{d as baseInput,n as baseInputHover,b as dayInputSizer,o as divider,a as dividerDisabled,p as dividerHover,s as dividerInactive,e as inputContainer,t as inputSection,i as inputSizerBase,f as monthInputSizer,u as placeholder,c as placeholderDisabled,q as placeholderHide,r as yearInputSizer};
 //# sourceMappingURL=standalone-date-input.styles.js.map

package/shared/standalone-date-input/standalone-date-input.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
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":["inputSection","baseInput","baseInputHover","divider","dividerHover","inputContainer","inputSizerBase","dayInputSizer","monthInputSizer","yearInputSizer","placeholder","placeholderDisabled","placeholderHide"],"mappings":"+FAOO,MAAMA,EAAY,UAQZC,EAAS,WAyCTC,EAAc,WAIdC,EAAO,WAKPC,EAAY,WAIZC,EAAc,WAMdC,EAAc,UAYdC,EAAa,WAMbC,EAAe,~~UAMfC~~,EAAc,~~WAMdC~~,EAAW,WAWXC,EAAmB,~~UAKnBC~~,EAAe"}
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 dividerInactive = css`\n color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const dividerDisabled = css`\n color: ${Colour[\"text-disabled\"]};\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":["inputSection","baseInput","baseInputHover","divider","dividerHover","dividerInactive","dividerDisabled","inputContainer","inputSizerBase","dayInputSizer","monthInputSizer","yearInputSizer","placeholder","placeholderDisabled","placeholderHide"],"mappings":"+FAOO,MAAMA,EAAY,UAQZC,EAAS,WAyCTC,EAAc,WAIdC,EAAO,WAKPC,EAAY,WAIZC,EAAe,WAIfC,EAAe,UAIfC,EAAc,WAMdC,EAAc,UAYdC,EAAa,WAMbC,EAAe,WAMfC,EAAc,UAMdC,EAAW,WAWXC,EAAmB,WAKnBC,EAAe"}

package/shared/standalone-date-input/standalone-date-input.styles_157qo89.css ADDED Viewed

@@ -0,0 +1,15 @@
+@layer fds{.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-body);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-body);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);}
+.d12gn07d{color:var(--fds-colour-text-subtler);}
+.day8f6w{color:var(--fds-colour-text-disabled);}
+.i1tizbfo{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);}
+.i8v7mt3{display:inline-block;position:relative;}.i8v7mt3::after{font-family:var(--fds-font-family-body);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;}
+.d1nfq8ts::after{content:"DD";}
+.m1kizbwh::after{content:"MM";}
+.yzrktuq::after{content:"YYYY";}
+.p1jcopfd{font-family:var(--fds-font-family-body);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%;}
+.p10ypbkc{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;}
+.p1yc7tqu{display:none;}}

package/shared/time-slot/time-slot.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ export interface TimeSlotProps {
     children?: ReactNode;
     className?: string | undefined;
     clickable?: boolean | undefined;
+    fill?: "default" | "top" | "bottom" | undefined;
     hoverBgColor?: string | undefined;
     hoverBgColor2?: string | undefined;
     nonClickableCursor?: "default" | "not-allowed" | undefined;

package/shared/time-slot/time-slot.js CHANGED Viewed

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

package/shared/time-slot/time-slot.js.map CHANGED Viewed

	@@ -1 +1 @@
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":"~~kwBAwBA~~,~~MAuDaA~~,EAAWC,~~GAvDN~~,EAEVC,YACA,cAAeC,EACfC,UACAC,WACAC,WACAC,YACAC,eACAC,gBACAC,qBACAC,UACAC,YACAC,YAEJC,KAEA,MAAMC,EAAUC,EAAuB,MAEvCC,EAAcF,EAAS,CACnB,CAACG,EAAcC,~~KAAKf~~,SAAUA,EAC9B,~~CAACc~~,EAAcC,~~KAAKd~~,UAAWA,EAC/B,~~CAACa~~,EAAcC,KAAKX,cAAeA,EACnC,CAACU,EAAcC,KAAKV,eAAgBA,EACpC,CAACS,EAAcC,KAAKC,QAASV,IAejC,OACIW,~~SACIP~~,IAAKQ,EAAUP,EAASD,~~GACxBZ~~,~~UAAWqB~~,~~EAAKC~~,~~EAAiBtB~~,~~GAAU~~,~~kBAC1BU~~,EAAS,~~mBACRL~~,EAAS,~~oBAhB1BA~~,IAIa,~~YAAdK~~,EACUJ,GAAgBC,EAGrBD,~~IAULG~~,QAASA,~~gBACIR~~,~~EACbU~~,SAAUA,~~WAETP~~,GACC"}
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 fill?: \"default\" \| \"top\" \| \"bottom\" \| 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 fill = \"default\",\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(\n styles.timeSlot,\n {\n [styles.timeSlotHalfFillTop]: fill === \"top\",\n [styles.timeSlotHalfFillBottom]: fill === \"bottom\",\n },\n className\n )}\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","fill","hoverBgColor","hoverBgColor2","nonClickableCursor","onClick","styleType","tabIndex","ref","slotRef","useRef","useApplyStyle","styles.tokens","slot","cursor","_jsx","mergeRefs","clsx","styles.timeSlot","timeSlotHalfFillTop","styles.timeSlotHalfFillTop","timeSlotHalfFillBottom","styles.timeSlotHalfFillBottom"],"mappings":"uzBAyBA,MA+DaA,EAAWC,GA/DN,EAEVC,YACA,cAAeC,EACfC,UACAC,WACAC,WACAC,YACAC,OAAO,UACPC,eACAC,gBACAC,qBACAC,UACAC,YACAC,YAEJC,KAEA,MAAMC,EAAUC,EAAuB,MAEvCC,EAAcF,EAAS,CACnB,CAACG,EAAcC,KAAKhB,SAAUA,EAC9B,CAACe,EAAcC,KAAKf,UAAWA,EAC/B,CAACc,EAAcC,KAAKX,cAAeA,EACnC,CAACU,EAAcC,KAAKV,eAAgBA,EACpC,CAACS,EAAcC,KAAKC,QAASV,IAejC,OACIW,EAAA,MAAA,CACIP,IAAKQ,EAAUP,EAASD,GACxBb,UAAWsB,EACPC,EACA,CACIC,CAACC,GAAsC,QAATnB,EAC9BoB,CAACC,GAAyC,WAATrB,GAErCN,GACH,kBACgBW,EAAS,mBACRN,EAAS,oBAvB1BA,IAIa,YAAdM,EACUJ,GAAgBC,EAGrBD,IAiBLG,QAASA,EAAO,cACHT,EACbW,SAAUA,EAAQR,SAEjBA,GACC"}

package/shared/time-slot/time-slot.styles.d.ts CHANGED Viewed

@@ -8,3 +8,5 @@ export declare const tokens: {
     };
 };
 export declare const timeSlot: import("@linaria/core").LinariaClassName;
+export declare const timeSlotHalfFillTop: import("@linaria/core").LinariaClassName;
+export declare const timeSlotHalfFillBottom: import("@linaria/core").LinariaClassName;

package/shared/time-slot/time-slot.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./time-slot.styles_1r9na3f.css";const o={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"}},t="tsti7hb";export{t as timeSlot,o as tokens};
+import"./time-slot.styles_18s0to7.css";const o={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"}},t="tsti7hb",l="tmgdrss",r="t31kbad";export{t as timeSlot,r as timeSlotHalfFillBottom,l as timeSlotHalfFillTop,o as tokens};
 //# sourceMappingURL=time-slot.styles.js.map

package/shared/time-slot/time-slot.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
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":["tokens","slot","bgColor","bgColor2","hoverBgColor","hoverBgColor2","cursor","timeSlot"],"mappings":"uEAIO,MAAMA,EAAS,CAClBC,KAAM,CACFC,QAAS,uCACTC,SAAU,wCACVC,aAAc,4CACdC,cAAe,6CACfC,OAAQ,~~wCAIHC~~,EAAQ"}
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\nconst stripesGradient = `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\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: ${stripesGradient};\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\nexport const timeSlotHalfFillTop = css`\n &[data-style-type=\"default\"] {\n background: linear-gradient(\n to top,\n var(${tokens.slot.bgColor}) 50%,\n ${Colour[\"bg-strongest\"]} 50%\n );\n }\n\n &[data-style-type=\"stripes\"] {\n background: linear-gradient(\n to top,\n transparent 50%,\n ${Colour[\"bg-strongest\"]} 50%\n ),\n ${stripesGradient};\n }\n`;\n\nexport const timeSlotHalfFillBottom = css`\n &[data-style-type=\"default\"] {\n background: linear-gradient(\n to bottom,\n var(${tokens.slot.bgColor}) 50%,\n ${Colour[\"bg-strongest\"]} 50%\n );\n }\n\n &[data-style-type=\"stripes\"] {\n background: linear-gradient(\n to bottom,\n transparent 50%,\n ${Colour[\"bg-strongest\"]} 50%\n ),\n ${stripesGradient};\n }\n`;\n"],"names":["tokens","slot","bgColor","bgColor2","hoverBgColor","hoverBgColor2","cursor","timeSlot","timeSlotHalfFillTop","timeSlotHalfFillBottom"],"mappings":"uEAIO,MAAMA,EAAS,CAClBC,KAAM,CACFC,QAAS,uCACTC,SAAU,wCACVC,aAAc,4CACdC,cAAe,6CACfC,OAAQ,wCAYHC,EAAQ,UA2CRC,EAAmB,UAmBnBC,EAAsB"}

package/shared/time-slot/time-slot.styles_18s0to7.css ADDED Viewed

@@ -0,0 +1,29 @@
+@layer fds{.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
+            );}
+.tmgdrss[data-style-type="default"]{background:linear-gradient(
+            to top,
+            var(--fds-internal-timeSlot-slot-bgColor) 50%,
+            var(--fds-colour-bg-strongest) 50%
+        );}.tmgdrss[data-style-type="stripes"]{background:linear-gradient(
+                to top,
+                transparent 50%,
+                var(--fds-colour-bg-strongest) 50%
+            ),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 );}
+.t31kbad[data-style-type="default"]{background:linear-gradient(
+            to bottom,
+            var(--fds-internal-timeSlot-slot-bgColor) 50%,
+            var(--fds-colour-bg-strongest) 50%
+        );}.t31kbad[data-style-type="stripes"]{background:linear-gradient(
+                to bottom,
+                transparent 50%,
+                var(--fds-colour-bg-strongest) 50%
+            ),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 );}}

package/shared/timepicker-dropdown/timepicker-dropdown.styles_119l6k6.css CHANGED Viewed

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

package/sidenav/sidenav-drawer-item.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./sidenav-drawer-item.styles_yp8cga.css";const e="l1011b8q",t="lmu4z67",c="dlg5ewg",s="c1ey6q8x",d="cpftd7o",a="ttch7cq";export{s as chevronIcon,d as chevronIconExpanded,c as drawerSubitemContainer,e as linkButton,t as linkButtonNoChildren,a as textElement};
+import"./sidenav-drawer-item.styles_1ljnyx2.css";const e="l1011b8q",t="lmu4z67",s="dlg5ewg",c="c1ey6q8x",d="cpftd7o",l="ttch7cq";export{c as chevronIcon,d as chevronIconExpanded,s as drawerSubitemContainer,e as linkButton,t as linkButtonNoChildren,l as textElement};
 //# sourceMappingURL=sidenav-drawer-item.styles.js.map

package/sidenav/sidenav-drawer-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../src/sidenav/sidenav-drawer-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Motion, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n\n width: 100%;\n padding: 0.75rem 1rem;\n border-radius: ${Radius[\"md\"]};\n\n ${Font[\"body-md-semibold\"]}\n color: ${Colour[\"text\"]};\n\n &:hover,\n &:focus {\n background: ${Colour[\"bg-hover-strong\"]};\n }\n`;\n\nexport const linkButtonNoChildren = css`\n &:hover,\n &:focus {\n background: ${Colour[\"bg-hover\"]};\n color: ${Colour[\"text-hover\"]};\n }\n`;\n\nexport const drawerSubitemContainer = css`\n margin: 0.125rem 0 0.125rem 0.5rem;\n overflow: hidden;\n`;\n\nexport const chevronIcon = css`\n flex-shrink: 0;\n color: ${Colour[\"icon\"]};\n transform: rotate(180deg);\n transition: transform ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(0deg);\n`;\n\nexport const textElement = css`\n ${lineClampCss(2)}\n text-align: left;\n`;\n"],"names":["linkButton","linkButtonNoChildren","drawerSubitemContainer","chevronIcon","chevronIconExpanded","textElement"],"mappings":"~~uEAQO~~,MAAMA,EAAU,WAmBVC,EAAoB,UAQpBC,EAAsB,UAKtBC,EAAW,WAOXC,EAAmB,UAInBC,EAAW"}
1	+ {"version":3,"file":"sidenav-drawer-item.styles.js","sources":["../../src/sidenav/sidenav-drawer-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Motion, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n\n width: 100%;\n padding: 0.75rem 1rem;\n border-radius: ${Radius[\"md\"]};\n\n ${Font[\"body-md-semibold\"]}\n color: ${Colour[\"text\"]};\n\n &:hover,\n &:focus {\n background: ${Colour[\"bg-hover-strong\"]};\n }\n`;\n\nexport const linkButtonNoChildren = css`\n &:hover,\n &:focus {\n background: ${Colour[\"bg-hover\"]};\n color: ${Colour[\"text-hover\"]};\n }\n`;\n\nexport const drawerSubitemContainer = css`\n margin: 0.125rem 0 0.125rem 0.5rem;\n overflow: hidden;\n`;\n\nexport const chevronIcon = css`\n flex-shrink: 0;\n color: ${Colour[\"icon\"]};\n transform: rotate(180deg);\n transition: transform ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(0deg);\n`;\n\nexport const textElement = css`\n ${lineClampCss(2)}\n text-align: left;\n`;\n"],"names":["linkButton","linkButtonNoChildren","drawerSubitemContainer","chevronIcon","chevronIconExpanded","textElement"],"mappings":"wEAQO,MAAMA,EAAU,WAmBVC,EAAoB,UAQpBC,EAAsB,UAKtBC,EAAW,WAOXC,EAAmB,UAInBC,EAAW"}

package/sidenav/sidenav-drawer-item.styles_1ljnyx2.css ADDED Viewed

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

package/sidenav/sidenav-drawer-subitem.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./sidenav-drawer-subitem.styles_1ylzfn5.css";const s="l1ge7as9";export{s as linkButton};
+import"./sidenav-drawer-subitem.styles_2y58kf.css";const s="l1ge7as9";export{s as linkButton};
 //# sourceMappingURL=sidenav-drawer-subitem.styles.js.map

package/sidenav/sidenav-drawer-subitem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../src/sidenav/sidenav-drawer-subitem.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n width: 100%;\n padding: 0.75rem 1rem;\n border-radius: ${Radius[\"md\"]};\n\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n ${lineClampCss(2)}\n text-align: left;\n\n &:hover,\n &:focus {\n background-color: ${Colour[\"bg-hover\"]};\n color: ${Colour[\"text-hover\"]};\n }\n`;\n"],"names":["linkButton"],"mappings":"~~2EAQO~~,MAAMA,EAAU"}
1	+ {"version":3,"file":"sidenav-drawer-subitem.styles.js","sources":["../../src/sidenav/sidenav-drawer-subitem.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport { Colour, Font, Radius } from \"../theme\";\n\n//=============================================================================\n// STYLING\n//=============================================================================\nexport const linkButton = css`\n width: 100%;\n padding: 0.75rem 1rem;\n border-radius: ${Radius[\"md\"]};\n\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n ${lineClampCss(2)}\n text-align: left;\n\n &:hover,\n &:focus {\n background-color: ${Colour[\"bg-hover\"]};\n color: ${Colour[\"text-hover\"]};\n }\n`;\n"],"names":["linkButton"],"mappings":"0EAQO,MAAMA,EAAU"}

package/sidenav/sidenav-drawer-subitem.styles_2y58kf.css ADDED Viewed

@@ -0,0 +1 @@

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

package/sidenav/sidenav-group.styles_1x604sw.css CHANGED Viewed

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

package/sidenav/sidenav-item.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./sidenav-item.styles_1eew8px.css";const s="cfxt5d9",e="i1rznncx",d="tegzrsi",t="d5cbs2m",c="d1g4locu",i="d1ao5fhb",n="d1m7u3sj";export{s as container,t as defaultButton,c as defaultButtonHighlight,i as desktopDrawer,n as desktopDrawerShowShadow,e as iconContainer,d as titleText};
+import"./sidenav-item.styles_lqw3kh.css";const s="cfxt5d9",d="i1rznncx",t="tegzrsi",c="d5cbs2m",e="d1g4locu",i="d1ao5fhb",n="d1m7u3sj";export{s as container,c as defaultButton,e as defaultButtonHighlight,i as desktopDrawer,n as desktopDrawerShowShadow,d as iconContainer,t as titleText};
 //# sourceMappingURL=sidenav-item.styles.js.map