@elliemae/ds-form-date-time-picker 3.80.0-next.2 → 3.80.0-next.20

package/dist/esm/parts/Pickers/Calendar/CalendarBody.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarBody.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { CalendarMonthDays } from './CalendarMonthDays.js';\nimport { CalendarWeekDays } from './CalendarWeekDays.js';\nimport { StyledBody } from './Styleds.js';\n\ninterface CalendarBodyPropsT {\n  weekRowsNum: number;\n}\nexport const CalendarBody = React.memo(({ weekRowsNum }: CalendarBodyPropsT) => (\n  <span\n    role=\"grid\"\n    aria-label=\"calendar\"\n    aria-colcount={7}\n    aria-rowcount={weekRowsNum}\n    data-testid={ControlledDateTimePickerDatatestid.CALENDAR.TABLE_WRAPPER}\n  >\n    <CalendarWeekDays />\n    <StyledBody>\n      <CalendarMonthDays />\n    </StyledBody>\n  </span>\n));\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACUrB,SAOE,KAPF;AAVF,OAAOA,YAAW;AAClB,SAAS,0CAA0C;AACnD,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAKpB,MAAM,eAAeA,OAAM,KAAK,CAAC,EAAE,YAAY,MACpD;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,cAAW;AAAA,IACX,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,eAAa,mCAAmC,SAAS;AAAA,IAEzD;AAAA,0BAAC,oBAAiB;AAAA,MAClB,oBAAC,cACC,8BAAC,qBAAkB,GACrB;AAAA;AAAA;AACF,CACD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarMonthDays } from './CalendarMonthDays.js';\nimport { CalendarWeekDays } from './CalendarWeekDays.js';\nimport { StyledBody } from './Styleds.js';\n\ninterface CalendarBodyPropsT {\n  weekRowsNum: number;\n}\nexport const CalendarBody = React.memo(({ weekRowsNum }: CalendarBodyPropsT) => {\n  const { getProps } = React.useContext(ControlledDateTimePickerContext);\n\n  return (\n    <span\n      role=\"grid\"\n      aria-label=\"calendar\"\n      aria-colcount={7}\n      aria-rowcount={weekRowsNum}\n      data-testid={ControlledDateTimePickerDatatestid.CALENDAR.TABLE_WRAPPER}\n    >\n      <CalendarWeekDays />\n      <StyledBody getOwnerProps={getProps}>\n        <CalendarMonthDays />\n      </StyledBody>\n    </span>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACcnB,SAOE,KAPF;AAdJ,OAAOA,YAAW;AAClB,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAKpB,MAAM,eAAeA,OAAM,KAAK,CAAC,EAAE,YAAY,MAA0B;AAC9E,QAAM,EAAE,SAAS,IAAIA,OAAM,WAAW,+BAA+B;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,eAAa,mCAAmC,SAAS;AAAA,MAEzD;AAAA,4BAAC,oBAAiB;AAAA,QAClB,oBAAC,cAAW,eAAe,UACzB,8BAAC,qBAAkB,GACrB;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/Pickers/Calendar/CalendarContent.js

@@ -20,7 +20,7 @@ const CalendarContent = ({ className = "" }) => {
       className,
       "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR,
       getOwnerProps: getProps,
-      children: /* @__PURE__ */ jsxs(StyledCalendarWrapper, { $readOnlyStyles: readOnly || applyAriaDisabled, children: [
+      children: /* @__PURE__ */ jsxs(StyledCalendarWrapper, { $readOnlyStyles: readOnly || applyAriaDisabled, getOwnerProps: getProps, children: [
         /* @__PURE__ */ jsx(CalendarHead, {}),
         /* @__PURE__ */ jsx(CalendarBody, { weekRowsNum: daysMatrixByWeekday.length }),
         /* @__PURE__ */ jsx(CalendarFooter, {})

package/dist/esm/parts/Pickers/Calendar/CalendarContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarBody } from './CalendarBody.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { CalendarFooter } from './CalendarFooter.js';\nimport { CalendarHead } from './CalendarHead.js';\nimport { StyledCalendarWrapper, StyledShadowWrapper } from './Styleds.js';\n\n// ({ className = '' }: { className?: string })\n// <StyledShadowWrapper className={className}>\n// is required for styled-components, without this we can't styled(CalendarContent)...\n// https://stackoverflow.com/questions/52542817/styled-components-not-applying-style-to-custom-functional-react-component\nexport const CalendarContent = ({ className = '' }: { className?: string }): JSX.Element => {\n  const {\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n  const { daysMatrixByWeekday } = useContext(CalendarContext);\n\n  return (\n    <StyledShadowWrapper\n      className={className}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR}\n      getOwnerProps={getProps}\n    >\n      <StyledCalendarWrapper $readOnlyStyles={readOnly || applyAriaDisabled}>\n        <CalendarHead />\n        <CalendarBody weekRowsNum={daysMatrixByWeekday.length} />\n        <CalendarFooter />\n      </StyledCalendarWrapper>\n    </StyledShadowWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2BjB,SACE,KADF;AA1BN,SAAS,kBAAkB;AAC3B,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB,2BAA2B;AAMpD,MAAM,kBAAkB,CAAC,EAAE,YAAY,GAAG,MAA2C;AAC1F,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,IAAI,WAAW,+BAA+B;AAC9C,QAAM,EAAE,oBAAoB,IAAI,WAAW,eAAe;AAE1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,mCAAmC,qBAAqB;AAAA,MACrE,eAAe;AAAA,MAEf,+BAAC,yBAAsB,iBAAiB,YAAY,mBAClD;AAAA,4BAAC,gBAAa;AAAA,QACd,oBAAC,gBAAa,aAAa,oBAAoB,QAAQ;AAAA,QACvD,oBAAC,kBAAe;AAAA,SAClB;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport { useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarBody } from './CalendarBody.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { CalendarFooter } from './CalendarFooter.js';\nimport { CalendarHead } from './CalendarHead.js';\nimport { StyledCalendarWrapper, StyledShadowWrapper } from './Styleds.js';\n\n// ({ className = '' }: { className?: string })\n// <StyledShadowWrapper className={className}>\n// is required for styled-components, without this we can't styled(CalendarContent)...\n// https://stackoverflow.com/questions/52542817/styled-components-not-applying-style-to-custom-functional-react-component\nexport const CalendarContent = ({ className = '' }: { className?: string }): JSX.Element => {\n  const {\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n  const { daysMatrixByWeekday } = useContext(CalendarContext);\n\n  return (\n    <StyledShadowWrapper\n      className={className}\n      data-testid={ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.CALENDAR}\n      getOwnerProps={getProps}\n    >\n      <StyledCalendarWrapper $readOnlyStyles={readOnly || applyAriaDisabled} getOwnerProps={getProps}>\n        <CalendarHead />\n        <CalendarBody weekRowsNum={daysMatrixByWeekday.length} />\n        <CalendarFooter />\n      </StyledCalendarWrapper>\n    </StyledShadowWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2BjB,SACE,KADF;AA1BN,SAAS,kBAAkB;AAC3B,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB,2BAA2B;AAMpD,MAAM,kBAAkB,CAAC,EAAE,YAAY,GAAG,MAA2C;AAC1F,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,IAAI,WAAW,+BAA+B;AAC9C,QAAM,EAAE,oBAAoB,IAAI,WAAW,eAAe;AAE1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,mCAAmC,qBAAqB;AAAA,MACrE,eAAe;AAAA,MAEf,+BAAC,yBAAsB,iBAAiB,YAAY,mBAAmB,eAAe,UACpF;AAAA,4BAAC,gBAAa;AAAA,QACd,oBAAC,gBAAa,aAAa,oBAAoB,QAAQ;AAAA,QACvD,oBAAC,kBAAe;AAAA,SAClB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pickers/Calendar/CalendarHead.js

@@ -72,7 +72,7 @@ const CalendarHead = () => {
     },
     [currFocusDescriber, latestInteractionRegion, nextYearBtnRef]
   );
-  return /* @__PURE__ */ jsxs(StyledHeader, { children: [
+  return /* @__PURE__ */ jsxs(StyledHeader, { getOwnerProps: getProps, children: [
     /* @__PURE__ */ jsx(
       StyledHeaderButton,
       {

package/dist/esm/parts/Pickers/Calendar/CalendarHead.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarHead.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ChevronDoubleLeft, ChevronDoubleRight, ChevronLeft, ChevronRight } from '@elliemae/ds-icons';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from './Styleds.js';\n\nconst useGetFormattedCurrentDate = () => {\n  const { currentMonth, currentYear } = useContext(CalendarContext);\n\n  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n  const currentFormatedDate = useGetFormattedCurrentDate();\n  const {\n    handlePrevYear,\n    handlePrevMonth,\n    handleNextMonth,\n    handleNextYear,\n    handlePrevYearKeyDown,\n    handlePrevMonthKeyDown,\n    handleNextMonthKeyDown,\n    handleNextYearKeyDown,\n    onPrevYearFocus,\n    onPrevMonthFocus,\n    onNextMonthFocus,\n    onNextYearFocus,\n  } = useContext(CalendarContext);\n\n  const {\n    isControllerOnly,\n    autoFocusPrevMonthArrow,\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handlePrevYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n  );\n  const handlePrevMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n  );\n  const handleNextMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n  );\n  const handleNextYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n  );\n\n  return (\n    <StyledHeader>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevYear}\n        innerRef={handlePrevYearRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 0}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        autoFocus={autoFocusPrevMonthArrow}\n        aria-label=\"previous month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevMonth}\n        innerRef={handlePrevMonthRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n        type=\"button\"\n        getOwnerProps={getProps}\n        // this is a tabstop for when the calendar is open\n      >\n        <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderLabel\n        aria-live=\"polite\"\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.HEADER_LABEL}\n        getOwnerProps={getProps}\n      >\n        {currentFormatedDate}\n      </StyledHeaderLabel>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextMonth}\n        innerRef={handleNextMonthRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextYear}\n        innerRef={handleNextYearRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n    </StyledHeader>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity, @typescript-eslint/no-unsafe-member-access,  @typescript-eslint/no-unsafe-assignment */\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { ChevronDoubleLeft, ChevronDoubleRight, ChevronLeft, ChevronRight } from '@elliemae/ds-icons';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { getMonthNameByMonthNumber } from '../../../utils/dateHelpers.js';\nimport { CalendarContext } from './CalendarContext.js';\nimport { StyledHeader, StyledHeaderButton, StyledHeaderLabel } from './Styleds.js';\n\nconst useGetFormattedCurrentDate = () => {\n  const { currentMonth, currentYear } = useContext(CalendarContext);\n\n  const monthString = currentMonth >= 0 && currentMonth <= 11 ? `${getMonthNameByMonthNumber(currentMonth)} ` : '';\n\n  return useMemo(() => `${monthString}${currentYear}`, [monthString, currentYear]);\n};\nexport const CalendarHead = (): JSX.Element => {\n  const currentFormatedDate = useGetFormattedCurrentDate();\n  const {\n    handlePrevYear,\n    handlePrevMonth,\n    handleNextMonth,\n    handleNextYear,\n    handlePrevYearKeyDown,\n    handlePrevMonthKeyDown,\n    handleNextMonthKeyDown,\n    handleNextYearKeyDown,\n    onPrevYearFocus,\n    onPrevMonthFocus,\n    onNextMonthFocus,\n    onNextYearFocus,\n  } = useContext(CalendarContext);\n\n  const {\n    isControllerOnly,\n    autoFocusPrevMonthArrow,\n    prevYearBtnRef,\n    prevMonthBtnRef,\n    nextMonthBtnRef,\n    nextYearBtnRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handlePrevYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevYearBtnRef],\n  );\n  const handlePrevMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      prevMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-prev-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, prevMonthBtnRef],\n  );\n  const handleNextMonthRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextMonthBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-month')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextMonthBtnRef],\n  );\n  const handleNextYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      nextYearBtnRef.current = ButtonDomNode;\n      if (latestInteractionRegion === 'calendar-head' && currFocusDescriber === 'calendar-next-year')\n        ButtonDomNode?.focus?.();\n    },\n    [currFocusDescriber, latestInteractionRegion, nextYearBtnRef],\n  );\n\n  return (\n    <StyledHeader getOwnerProps={getProps}>\n      <StyledHeaderButton\n        aria-label=\"previous year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevYear}\n        innerRef={handlePrevYearRef}\n        onKeyDown={handlePrevYearKeyDown}\n        onFocus={onPrevYearFocus}\n        tabIndex={isControllerOnly ? -1 : 0}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronDoubleLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        autoFocus={autoFocusPrevMonthArrow}\n        aria-label=\"previous month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handlePrevMonth}\n        innerRef={handlePrevMonthRef}\n        onKeyDown={handlePrevMonthKeyDown}\n        onFocus={onPrevMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH}\n        type=\"button\"\n        getOwnerProps={getProps}\n        // this is a tabstop for when the calendar is open\n      >\n        <ChevronLeft height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderLabel\n        aria-live=\"polite\"\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.HEADER_LABEL}\n        getOwnerProps={getProps}\n      >\n        {currentFormatedDate}\n      </StyledHeaderLabel>\n      <StyledHeaderButton\n        aria-label=\"next month\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextMonth}\n        innerRef={handleNextMonthRef}\n        onKeyDown={handleNextMonthKeyDown}\n        onFocus={onNextMonthFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n      <StyledHeaderButton\n        aria-label=\"next year\"\n        buttonType=\"raw\"\n        size={BUTTON_SIZES.M}\n        onClick={handleNextYear}\n        innerRef={handleNextYearRef}\n        onKeyDown={handleNextYearKeyDown}\n        onFocus={onNextYearFocus}\n        data-testid={ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR}\n        type=\"button\"\n        getOwnerProps={getProps}\n      >\n        <ChevronDoubleRight height={14} width={14} fill=\"#25292f\" />\n      </StyledHeaderButton>\n    </StyledHeader>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgFnB,SAcI,KAdJ;AA/EJ,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB,oBAAoB,aAAa,oBAAoB;AACjF,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,uBAAuB;AAChC,SAAS,cAAc,oBAAoB,yBAAyB;AAEpE,MAAM,6BAA6B,MAAM;AACvC,QAAM,EAAE,cAAc,YAAY,IAAI,WAAW,eAAe;AAEhE,QAAM,cAAc,gBAAgB,KAAK,gBAAgB,KAAK,GAAG,0BAA0B,YAAY,CAAC,MAAM;AAE9G,SAAO,QAAQ,MAAM,GAAG,WAAW,GAAG,WAAW,IAAI,CAAC,aAAa,WAAW,CAAC;AACjF;AACO,MAAM,eAAe,MAAmB;AAC7C,QAAM,sBAAsB,2BAA2B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAE9C,QAAM,oBAAoB;AAAA,IACxB,CAAC,kBAAqC;AACpC,qBAAe,UAAU;AACzB,UAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,uBAAe,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,oBAAoB,yBAAyB,cAAc;AAAA,EAC9D;AACA,QAAM,qBAAqB;AAAA,IACzB,CAAC,kBAAqC;AACpC,sBAAgB,UAAU;AAC1B,UAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,uBAAe,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,qBAAqB;AAAA,IACzB,CAAC,kBAAqC;AACpC,sBAAgB,UAAU;AAC1B,UAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,uBAAe,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,oBAAoB;AAAA,IACxB,CAAC,kBAAqC;AACpC,qBAAe,UAAU;AACzB,UAAI,4BAA4B,mBAAmB,uBAAuB;AACxE,uBAAe,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,oBAAoB,yBAAyB,cAAc;AAAA,EAC9D;AAEA,SACE,qBAAC,gBAAa,eAAe,UAC3B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU,mBAAmB,KAAK;AAAA,QAClC,eAAa,mCAAmC,SAAS;AAAA,QACzD,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,qBAAkB,QAAQ,IAAI,OAAO,IAAI,MAAK,WAAU;AAAA;AAAA,IAC3D;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,mCAAmC,SAAS;AAAA,QACzD,MAAK;AAAA,QACL,eAAe;AAAA,QAGf,8BAAC,eAAY,QAAQ,IAAI,OAAO,IAAI,MAAK,WAAU;AAAA;AAAA,IACrD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAa,mCAAmC,SAAS;AAAA,QACzD,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,mCAAmC,SAAS;AAAA,QACzD,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,gBAAa,QAAQ,IAAI,OAAO,IAAI,MAAK,WAAU;AAAA;AAAA,IACtD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAM,aAAa;AAAA,QACnB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAS;AAAA,QACT,eAAa,mCAAmC,SAAS;AAAA,QACzD,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,sBAAmB,QAAQ,IAAI,OAAO,IAAI,MAAK,WAAU;AAAA;AAAA,IAC5D;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pickers/Calendar/CalendarWeekDays.js

@@ -1,29 +1,34 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
+import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
 import { StyledWeekDaysListWrapper, StyledWeekDaysHeaderItem } from "./Styleds.js";
-const CalendarWeekDays = React2.memo(() => /* @__PURE__ */ jsx("span", { role: "rowgroup", children: /* @__PURE__ */ jsxs(
-  StyledWeekDaysListWrapper,
-  {
-    role: "row",
-    cols: ["2.4615rem", "2.4615rem", "2.4615rem", "2.4615rem", "2.4615rem", "2.4615rem", "2.4615rem"],
-    rows: ["1.6923rem"],
-    py: "xxxs",
-    px: "6px",
-    justifyContent: "space-between",
-    alignItems: "center",
-    isHeader: true,
-    children: [
-      /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 1, children: "sun" }),
-      /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 2, children: "mon" }),
-      /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 3, children: "tue" }),
-      /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 4, children: "wed" }),
-      /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 5, children: "thu" }),
-      /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 6, children: "fri" }),
-      /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 7, children: "sat" })
-    ]
-  }
-) }));
+const CalendarWeekDays = React2.memo(() => {
+  const { getProps } = React2.useContext(ControlledDateTimePickerContext);
+  return /* @__PURE__ */ jsx("span", { role: "rowgroup", children: /* @__PURE__ */ jsxs(
+    StyledWeekDaysListWrapper,
+    {
+      role: "row",
+      cols: ["2.4615rem", "2.4615rem", "2.4615rem", "2.4615rem", "2.4615rem", "2.4615rem", "2.4615rem"],
+      rows: ["1.6923rem"],
+      py: "xxxs",
+      px: "6px",
+      justifyContent: "space-between",
+      alignItems: "center",
+      isHeader: true,
+      getOwnerProps: getProps,
+      children: [
+        /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 1, getOwnerProps: getProps, children: "sun" }),
+        /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 2, getOwnerProps: getProps, children: "mon" }),
+        /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 3, getOwnerProps: getProps, children: "tue" }),
+        /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 4, getOwnerProps: getProps, children: "wed" }),
+        /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 5, getOwnerProps: getProps, children: "thu" }),
+        /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 6, getOwnerProps: getProps, children: "fri" }),
+        /* @__PURE__ */ jsx(StyledWeekDaysHeaderItem, { role: "columnheader", "aria-colindex": 7, getOwnerProps: getProps, children: "sat" })
+      ]
+    }
+  ) });
+});
 export {
   CalendarWeekDays
 };

package/dist/esm/parts/Pickers/Calendar/CalendarWeekDays.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/CalendarWeekDays.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledWeekDaysListWrapper, StyledWeekDaysHeaderItem } from './Styleds.js';\n\nexport const CalendarWeekDays = React.memo(() => (\n  <span role=\"rowgroup\">\n    <StyledWeekDaysListWrapper\n      role=\"row\"\n      cols={['2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem']}\n      rows={['1.6923rem']}\n      py=\"xxxs\"\n      px=\"6px\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      isHeader\n    >\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={1}>\n        sun\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={2}>\n        mon\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={3}>\n        tue\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={4}>\n        wed\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={5}>\n        thu\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={6}>\n        fri\n      </StyledWeekDaysHeaderItem>\n      <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={7}>\n        sat\n      </StyledWeekDaysHeaderItem>\n    </StyledWeekDaysListWrapper>\n  </span>\n));\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACKnB,SAUE,KAVF;AALJ,OAAOA,YAAW;AAClB,SAAS,2BAA2B,gCAAgC;AAE7D,MAAM,mBAAmBA,OAAM,KAAK,MACzC,oBAAC,UAAK,MAAK,YACT;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,MAAM,CAAC,aAAa,aAAa,aAAa,aAAa,aAAa,aAAa,WAAW;AAAA,IAChG,MAAM,CAAC,WAAW;AAAA,IAClB,IAAG;AAAA,IACH,IAAG;AAAA,IACH,gBAAe;AAAA,IACf,YAAW;AAAA,IACX,UAAQ;AAAA,IAER;AAAA,0BAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,iBAEhE;AAAA,MACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,iBAEhE;AAAA,MACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,iBAEhE;AAAA,MACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,iBAEhE;AAAA,MACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,iBAEhE;AAAA,MACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,iBAEhE;AAAA,MACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,iBAEhE;AAAA;AAAA;AACF,GACF,CACD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledWeekDaysListWrapper, StyledWeekDaysHeaderItem } from './Styleds.js';\n\nexport const CalendarWeekDays = React.memo(() => {\n  const { getProps } = React.useContext(ControlledDateTimePickerContext);\n\n  return (\n    <span role=\"rowgroup\">\n      <StyledWeekDaysListWrapper\n        role=\"row\"\n        cols={['2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem', '2.4615rem']}\n        rows={['1.6923rem']}\n        py=\"xxxs\"\n        px=\"6px\"\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        isHeader\n        getOwnerProps={getProps}\n      >\n        <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={1} getOwnerProps={getProps}>\n          sun\n        </StyledWeekDaysHeaderItem>\n        <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={2} getOwnerProps={getProps}>\n          mon\n        </StyledWeekDaysHeaderItem>\n        <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={3} getOwnerProps={getProps}>\n          tue\n        </StyledWeekDaysHeaderItem>\n        <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={4} getOwnerProps={getProps}>\n          wed\n        </StyledWeekDaysHeaderItem>\n        <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={5} getOwnerProps={getProps}>\n          thu\n        </StyledWeekDaysHeaderItem>\n        <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={6} getOwnerProps={getProps}>\n          fri\n        </StyledWeekDaysHeaderItem>\n        <StyledWeekDaysHeaderItem role=\"columnheader\" aria-colindex={7} getOwnerProps={getProps}>\n          sat\n        </StyledWeekDaysHeaderItem>\n      </StyledWeekDaysListWrapper>\n    </span>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACSjB,SAWE,KAXF;AATN,OAAOA,YAAW;AAClB,SAAS,uCAAuC;AAChD,SAAS,2BAA2B,gCAAgC;AAE7D,MAAM,mBAAmBA,OAAM,KAAK,MAAM;AAC/C,QAAM,EAAE,SAAS,IAAIA,OAAM,WAAW,+BAA+B;AAErE,SACE,oBAAC,UAAK,MAAK,YACT;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAM,CAAC,aAAa,aAAa,aAAa,aAAa,aAAa,aAAa,WAAW;AAAA,MAChG,MAAM,CAAC,WAAW;AAAA,MAClB,IAAG;AAAA,MACH,IAAG;AAAA,MACH,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,UAAQ;AAAA,MACR,eAAe;AAAA,MAEf;AAAA,4BAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,eAAe,UAAU,iBAEzF;AAAA,QACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,eAAe,UAAU,iBAEzF;AAAA,QACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,eAAe,UAAU,iBAEzF;AAAA,QACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,eAAe,UAAU,iBAEzF;AAAA,QACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,eAAe,UAAU,iBAEzF;AAAA,QACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,eAAe,UAAU,iBAEzF;AAAA,QACA,oBAAC,4BAAyB,MAAK,gBAAe,iBAAe,GAAG,eAAe,UAAU,iBAEzF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/Pickers/Calendar/Styleds.js

@@ -2,7 +2,11 @@ import * as React from "react";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { Grid } from "@elliemae/ds-grid";
 import { css, styled } from "@elliemae/ds-system";
-import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../../../constants/index.js";
+import {
+  DSControlledDateTimePickerName,
+  DSControlledDateTimePickerSlots,
+  FORM_DATE_TIME_PICKER_SLOTS
+} from "../../../constants/index.js";
 const makeDiagonalLine = (getColor) => css`
   &:before {
     position: absolute;
@@ -54,13 +58,19 @@ const StyledShadowWrapper = styled("div", {
   name: DSControlledDateTimePickerName,
   slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR
 })``;
-const StyledCalendarWrapper = styled.div`
+const StyledCalendarWrapper = styled("div", {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_WRAPPER
+})`
   display: grid;
   min-width: 260px;
   background-color: ${({ theme, $readOnlyStyles }) => $readOnlyStyles ? theme.colors.neutral["050"] : theme.colors.neutral["000"]};
   grid-template-rows: auto auto;
 `;
-const StyledHeader = styled.section`
+const StyledHeader = styled("section", {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_HEADER
+})`
   * {
     margin: 0;
     padding: 0;
@@ -105,7 +115,10 @@ const StyledHeaderButton = styled(DSButtonV2, {
     background: ${({ theme }) => theme.colors.brand[200]};
   }
 `;
-const StyledBody = styled.section`
+const StyledBody = styled("section", {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_BODY
+})`
   padding: ${({ theme }) => theme.space.xxxs};
 `;
 const StyledDayBtn = styled(DSButtonV2, {
@@ -494,7 +507,10 @@ const StyledWeekDaysListWrapper = styled(Grid, {
     box-shadow: none;
   }
 `;
-const StyledWeekDaysHeaderItem = styled.div`
+const StyledWeekDaysHeaderItem = styled("div", {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_HEADER_WEEKLY_DAY_ITEM
+})`
   min-width: 2.4615rem;
   display: flex;
   justify-content: center;

package/dist/esm/parts/Pickers/Calendar/Styleds.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/Styleds.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\n// Diagonal line \u2014 shape only. Caller supplies the color function.\nconst makeDiagonalLine = (getColor: (props: { theme: Theme }) => string) => css`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ${getColor};\n  }\n`;\n// Default: neutral-500, used for active disabled/out-of-range days.\nconst diagonalLine = makeDiagonalLine(({ theme }) => theme.colors.neutral[500]);\n\n// Focus ring frame \u2014 shape only. Colour is always brand-700, injected in StyledWeekDaysListWrapper\n// under .focusedDay so a single rule governs the ring colour regardless of day state.\nconst focusBorder = css`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n`;\n\nconst backgroundDateRange = {\n  inRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[100]};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};\n  `,\n  startRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[100]};\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};\n  `,\n  endRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[100]};\n    border-radius: 0 50% 50% 0;\n  `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR,\n})`\n  color: ${({ theme }) => theme.colors.brand['800']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledShadowWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR,\n})``;\n\nexport const StyledCalendarWrapper = styled.div<{ $readOnlyStyles?: boolean }>`\n  display: grid;\n  min-width: 260px;\n  background-color: ${({ theme, $readOnlyStyles }) =>\n    $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n  grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled.section`\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  display: grid;\n  padding: ${({ theme }) => theme.space.xxxs};\n  grid-template-columns: min-content min-content 1fr min-content min-content;\n  grid-template-rows: 1fr;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledHeaderLabel = styled('h3', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL,\n})`\n  font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON,\n})`\n  position: relative;\n  width: 2.1538rem;\n  height: 2.1538rem;\n  &:focus {\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledBody = styled.section`\n  padding: ${({ theme }) => theme.space.xxxs};\n`;\n\n// StyledDayBtn owns shape, cursor, and the focus ring frame.\n// Hover colours live in StyledWeekDaysListWrapper using parent-class selectors whose\n// specificity (\u22650,6,0) beats DSButtonV2's internal transparent hover at (0,2,0).\nexport const StyledDayBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON,\n})<{ $readOnlyStyles?: boolean }>`\n  height: 2.4615rem;\n  width: 2.4615rem;\n  border-radius: 50%;\n  position: relative;\n  border-width: 2px;\n  border-style: solid;\n  border-color: transparent;\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  cursor: ${({ $readOnlyStyles }) => ($readOnlyStyles ? 'not-allowed' : 'pointer')};\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:focus {\n    ${focusBorder}\n  }\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})<{ isHeader?: boolean }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  justify-items: center;\n  ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n  ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     SELECTED (valid) \u2014 defect fix: brand-600, was brand-700\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.selectedDay,\n  .dayWrapper.startRangeDay,\n  .dayWrapper.endRangeDay {\n    &:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[600]};\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        font-weight: ${({ theme }) => theme.fontWeights.semibold};\n      }\n    }\n\n    /* selected invalid: danger-900 background */\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     INVALID (disabled / out-of-range) \u2014 base colour + diagonal\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.disabledDay,\n  .dayWrapper.outOfRangeDay {\n    ${StyledDayBtn} {\n      cursor: not-allowed;\n      color: ${({ theme }) => theme.colors.neutral[700]};\n      ${diagonalLine}\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     FOCUS RING \u2014 always brand-700 regardless of day state\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.focusedDay {\n    ${StyledDayBtn} {\n      ${focusBorder}\n      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    /* focused valid not-readOnly: brand text */\n    &:not(.readOnly):not(.disabledDay):not(.outOfRangeDay):not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n    }\n\n    /* focused invalid not-readOnly: brand text + brand diagonal */\n    &.disabledDay:not(.readOnly):not(.selectedDay):not(.startRangeDay):not(.endRangeDay),\n    &.outOfRangeDay:not(.readOnly):not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.brand[600]};\n        }\n      }\n    }\n\n    /* focused selected: white text, white inner border (gap), blue outer ring from generic rule */\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        border-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n\n    /* focused valid selected (non-readOnly): brand-800 background matches hover */\n    &.selectedDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n    &.startRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n    &.endRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[800]};\n      }\n    }\n\n    /* focused selected invalid: white text + white diagonal */\n    &.selectedDay.disabledDay,\n    &.selectedDay.outOfRangeDay,\n    &.startRangeDay.disabledDay,\n    &.startRangeDay.outOfRangeDay,\n    &.endRangeDay.disabledDay,\n    &.endRangeDay.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     HOVER BACKGROUNDS \u2014 new spec\n     Semi-bold on hover for all non-selected states.\n     Rules ordered low \u2192 high specificity so readOnly always wins.\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n  /* valid, not selected, not readOnly */\n  .dayWrapper:not(.disabledDay):not(.outOfRangeDay):not(.readOnly):not(.selectedDay):not(.startRangeDay):not(\n      .endRangeDay\n    ) {\n    ${StyledDayBtn}:hover {\n      background-color: ${({ theme }) => theme.colors.brand[100]};\n      color: ${({ theme }) => theme.colors.brand[700]};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n  }\n\n  /* invalid, not selected, not readOnly */\n  .dayWrapper.disabledDay:not(.selectedDay):not(.readOnly),\n  .dayWrapper.outOfRangeDay:not(.selectedDay):not(.readOnly) {\n    ${StyledDayBtn}:hover {\n      /* TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n         against common dimsum color combinations. Hardcoded until the theme token is fixed. */\n      background-color: #fffcfc; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n  }\n\n  /* selected valid, not readOnly */\n  .dayWrapper.selectedDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n  .dayWrapper.startRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n  .dayWrapper.endRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n    ${StyledDayBtn}:hover {\n      background-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  /* selected invalid, not readOnly */\n  .dayWrapper.selectedDay.disabledDay:not(.readOnly),\n  .dayWrapper.selectedDay.outOfRangeDay:not(.readOnly),\n  .dayWrapper.startRangeDay.disabledDay:not(.readOnly),\n  .dayWrapper.startRangeDay.outOfRangeDay:not(.readOnly),\n  .dayWrapper.endRangeDay.disabledDay:not(.readOnly),\n  .dayWrapper.endRangeDay.outOfRangeDay:not(.readOnly) {\n    ${StyledDayBtn}:hover {\n      background-color: ${({ theme }) => theme.colors.danger[950]};\n    }\n  }\n\n  /* readOnly, not selected (any validity) \u2014 wins over all non-readOnly hover rules */\n  .dayWrapper.readOnly:not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n    ${StyledDayBtn}:hover {\n      background-color: ${({ theme }) => theme.colors.neutral[100]};\n      color: ${({ theme }) => theme.colors.neutral[700]};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     READONLY REST STATES\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.selectedDay.readOnly,\n  .dayWrapper.startRangeDay.readOnly,\n  .dayWrapper.endRangeDay.readOnly {\n    ${StyledDayBtn} {\n      background-color: ${({ theme }) => theme.colors.neutral['500']};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n      /* (0,6,0) beats DSButtonV2's .liKnyT:hover { background: transparent } at (0,2,0) */\n      &:hover {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n      :focus {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n    }\n  }\n\n  .dayWrapper.disabledDay.readOnly,\n  .dayWrapper.outOfRangeDay.readOnly {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[700]};\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[700]};\n      }\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral[700]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral[700]};\n        }\n        &:after {\n          border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.selectedDay.disabledDay.readOnly,\n  .dayWrapper.selectedDay.outOfRangeDay.readOnly,\n  .dayWrapper.startRangeDay.disabledDay.readOnly,\n  .dayWrapper.startRangeDay.outOfRangeDay.readOnly,\n  .dayWrapper.endRangeDay.disabledDay.readOnly,\n  .dayWrapper.endRangeDay.outOfRangeDay.readOnly {\n    ${StyledDayBtn} {\n      background-color: ${({ theme }) => theme.colors.neutral['500']};\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      ${makeDiagonalLine(({ theme }) => theme.colors.neutral['000'])}\n      &:hover {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n      :focus {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n    }\n  }\n\n  .dayWrapper.inRangeDay.readOnly {\n    background-color: ${({ theme }) => theme.colors.neutral['100']};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral['100']};\n  }\n\n  .dayWrapper.inRangeDay.disabledDay.readOnly,\n  .dayWrapper.inRangeDay.outOfRangeDay.readOnly {\n    ${StyledDayBtn} {\n      background-color: transparent;\n      color: ${({ theme }) => theme.colors.neutral[700]};\n      ${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}\n    }\n  }\n\n  .dayWrapper.startRangeDay.inRangeImproperDay.readOnly {\n    background-color: ${({ theme }) => theme.colors.neutral['100']};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral['100']};\n  }\n\n  .dayWrapper.endRangeDay.inRangeImproperDay.readOnly {\n    background-color: ${({ theme }) => theme.colors.neutral['100']};\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     NOT CURRENT MONTH\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.notCurrentMonth {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n\n      &.disabledDay,\n      &.outOfRangeDay {\n        ${StyledDayBtn} {\n          color: ${({ theme }) => theme.colors.brand[600]};\n        }\n\n        &.inRangeDay,\n        &.startRangeDay,\n        &.endRangeDay {\n          ${StyledDayBtn} {\n            color: ${({ theme }) => theme.colors.neutral['000']};\n          }\n        }\n      }\n    }\n\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     RANGE DAYS\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.inRangeDay {\n    ${backgroundDateRange.inRange}\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        background-color: transparent;\n        color: ${({ theme }) => theme.colors.neutral[700]};\n        ${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}\n      }\n      &.focusedDay {\n        ${StyledDayBtn} {\n          &:after {\n            border-color: ${({ theme }) => theme.colors.brand[700]};\n          }\n        }\n      }\n    }\n  }\n\n  .dayWrapper.startRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.startRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.endRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay.startRangeDay {\n    background-color: transparent;\n    box-shadow: none;\n  }\n`;\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n  min-width: 2.4615rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const CalendarFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR,\n})<{ $readOnlyStyles?: boolean }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: ${({ theme, $readOnlyStyles }) =>\n    $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n  FORM_DATE_TIME_PICKER_SLOTS,\n} from '../../../constants/index.js';\n\n// Diagonal line \u2014 shape only. Caller supplies the color function.\nconst makeDiagonalLine = (getColor: (props: { theme: Theme }) => string) => css`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ${getColor};\n  }\n`;\n// Default: neutral-500, used for active disabled/out-of-range days.\nconst diagonalLine = makeDiagonalLine(({ theme }) => theme.colors.neutral[500]);\n\n// Focus ring frame \u2014 shape only. Colour is always brand-700, injected in StyledWeekDaysListWrapper\n// under .focusedDay so a single rule governs the ring colour regardless of day state.\nconst focusBorder = css`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n`;\n\nconst backgroundDateRange = {\n  inRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[100]};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};\n  `,\n  startRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[100]};\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[100]};\n  `,\n  endRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[100]};\n    border-radius: 0 50% 50% 0;\n  `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR,\n})`\n  color: ${({ theme }) => theme.colors.brand['800']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledShadowWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR,\n})``;\n\nexport const StyledCalendarWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_WRAPPER,\n})<{ $readOnlyStyles?: boolean }>`\n  display: grid;\n  min-width: 260px;\n  background-color: ${({ theme, $readOnlyStyles }) =>\n    $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n  grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled('section', {\n  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_HEADER,\n})`\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  display: grid;\n  padding: ${({ theme }) => theme.space.xxxs};\n  grid-template-columns: min-content min-content 1fr min-content min-content;\n  grid-template-rows: 1fr;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledHeaderLabel = styled('h3', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL,\n})`\n  font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON,\n})`\n  position: relative;\n  width: 2.1538rem;\n  height: 2.1538rem;\n  &:focus {\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledBody = styled('section', {\n  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_BODY,\n})`\n  padding: ${({ theme }) => theme.space.xxxs};\n`;\n\n// StyledDayBtn owns shape, cursor, and the focus ring frame.\n// Hover colours live in StyledWeekDaysListWrapper using parent-class selectors whose\n// specificity (\u22650,6,0) beats DSButtonV2's internal transparent hover at (0,2,0).\nexport const StyledDayBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON,\n})<{ $readOnlyStyles?: boolean }>`\n  height: 2.4615rem;\n  width: 2.4615rem;\n  border-radius: 50%;\n  position: relative;\n  border-width: 2px;\n  border-style: solid;\n  border-color: transparent;\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  cursor: ${({ $readOnlyStyles }) => ($readOnlyStyles ? 'not-allowed' : 'pointer')};\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:focus {\n    ${focusBorder}\n  }\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})<{ isHeader?: boolean }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  justify-items: center;\n  ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n  ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     SELECTED (valid) \u2014 defect fix: brand-600, was brand-700\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.selectedDay,\n  .dayWrapper.startRangeDay,\n  .dayWrapper.endRangeDay {\n    &:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[600]};\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        font-weight: ${({ theme }) => theme.fontWeights.semibold};\n      }\n    }\n\n    /* selected invalid: danger-900 background */\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     INVALID (disabled / out-of-range) \u2014 base colour + diagonal\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.disabledDay,\n  .dayWrapper.outOfRangeDay {\n    ${StyledDayBtn} {\n      cursor: not-allowed;\n      color: ${({ theme }) => theme.colors.neutral[700]};\n      ${diagonalLine}\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     FOCUS RING \u2014 always brand-700 regardless of day state\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.focusedDay {\n    ${StyledDayBtn} {\n      ${focusBorder}\n      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    /* focused valid not-readOnly: brand text */\n    &:not(.readOnly):not(.disabledDay):not(.outOfRangeDay):not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n    }\n\n    /* focused invalid not-readOnly: brand text + brand diagonal */\n    &.disabledDay:not(.readOnly):not(.selectedDay):not(.startRangeDay):not(.endRangeDay),\n    &.outOfRangeDay:not(.readOnly):not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.brand[600]};\n        }\n      }\n    }\n\n    /* focused selected: white text, white inner border (gap), blue outer ring from generic rule */\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        border-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n\n    /* focused valid selected (non-readOnly): brand-800 background matches hover */\n    &.selectedDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n    &.startRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n    &.endRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[800]};\n      }\n    }\n\n    /* focused selected invalid: white text + white diagonal */\n    &.selectedDay.disabledDay,\n    &.selectedDay.outOfRangeDay,\n    &.startRangeDay.disabledDay,\n    &.startRangeDay.outOfRangeDay,\n    &.endRangeDay.disabledDay,\n    &.endRangeDay.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     HOVER BACKGROUNDS \u2014 new spec\n     Semi-bold on hover for all non-selected states.\n     Rules ordered low \u2192 high specificity so readOnly always wins.\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n  /* valid, not selected, not readOnly */\n  .dayWrapper:not(.disabledDay):not(.outOfRangeDay):not(.readOnly):not(.selectedDay):not(.startRangeDay):not(\n      .endRangeDay\n    ) {\n    ${StyledDayBtn}:hover {\n      background-color: ${({ theme }) => theme.colors.brand[100]};\n      color: ${({ theme }) => theme.colors.brand[700]};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n  }\n\n  /* invalid, not selected, not readOnly */\n  .dayWrapper.disabledDay:not(.selectedDay):not(.readOnly),\n  .dayWrapper.outOfRangeDay:not(.selectedDay):not(.readOnly) {\n    ${StyledDayBtn}:hover {\n      /* TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n         against common dimsum color combinations. Hardcoded until the theme token is fixed. */\n      background-color: #fffcfc; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n  }\n\n  /* selected valid, not readOnly */\n  .dayWrapper.selectedDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n  .dayWrapper.startRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly),\n  .dayWrapper.endRangeDay:not(.disabledDay):not(.outOfRangeDay):not(.readOnly) {\n    ${StyledDayBtn}:hover {\n      background-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  /* selected invalid, not readOnly */\n  .dayWrapper.selectedDay.disabledDay:not(.readOnly),\n  .dayWrapper.selectedDay.outOfRangeDay:not(.readOnly),\n  .dayWrapper.startRangeDay.disabledDay:not(.readOnly),\n  .dayWrapper.startRangeDay.outOfRangeDay:not(.readOnly),\n  .dayWrapper.endRangeDay.disabledDay:not(.readOnly),\n  .dayWrapper.endRangeDay.outOfRangeDay:not(.readOnly) {\n    ${StyledDayBtn}:hover {\n      background-color: ${({ theme }) => theme.colors.danger[950]};\n    }\n  }\n\n  /* readOnly, not selected (any validity) \u2014 wins over all non-readOnly hover rules */\n  .dayWrapper.readOnly:not(.selectedDay):not(.startRangeDay):not(.endRangeDay) {\n    ${StyledDayBtn}:hover {\n      background-color: ${({ theme }) => theme.colors.neutral[100]};\n      color: ${({ theme }) => theme.colors.neutral[700]};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     READONLY REST STATES\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.selectedDay.readOnly,\n  .dayWrapper.startRangeDay.readOnly,\n  .dayWrapper.endRangeDay.readOnly {\n    ${StyledDayBtn} {\n      background-color: ${({ theme }) => theme.colors.neutral['500']};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n      /* (0,6,0) beats DSButtonV2's .liKnyT:hover { background: transparent } at (0,2,0) */\n      &:hover {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n      :focus {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n    }\n  }\n\n  .dayWrapper.disabledDay.readOnly,\n  .dayWrapper.outOfRangeDay.readOnly {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[700]};\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[700]};\n      }\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral[700]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral[700]};\n        }\n        &:after {\n          border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.selectedDay.disabledDay.readOnly,\n  .dayWrapper.selectedDay.outOfRangeDay.readOnly,\n  .dayWrapper.startRangeDay.disabledDay.readOnly,\n  .dayWrapper.startRangeDay.outOfRangeDay.readOnly,\n  .dayWrapper.endRangeDay.disabledDay.readOnly,\n  .dayWrapper.endRangeDay.outOfRangeDay.readOnly {\n    ${StyledDayBtn} {\n      background-color: ${({ theme }) => theme.colors.neutral['500']};\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      ${makeDiagonalLine(({ theme }) => theme.colors.neutral['000'])}\n      &:hover {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n      :focus {\n        background-color: ${({ theme }) => theme.colors.neutral['700']};\n      }\n    }\n  }\n\n  .dayWrapper.inRangeDay.readOnly {\n    background-color: ${({ theme }) => theme.colors.neutral['100']};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral['100']};\n  }\n\n  .dayWrapper.inRangeDay.disabledDay.readOnly,\n  .dayWrapper.inRangeDay.outOfRangeDay.readOnly {\n    ${StyledDayBtn} {\n      background-color: transparent;\n      color: ${({ theme }) => theme.colors.neutral[700]};\n      ${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}\n    }\n  }\n\n  .dayWrapper.startRangeDay.inRangeImproperDay.readOnly {\n    background-color: ${({ theme }) => theme.colors.neutral['100']};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.neutral['100']};\n  }\n\n  .dayWrapper.endRangeDay.inRangeImproperDay.readOnly {\n    background-color: ${({ theme }) => theme.colors.neutral['100']};\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     NOT CURRENT MONTH\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.notCurrentMonth {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n\n      &.disabledDay,\n      &.outOfRangeDay {\n        ${StyledDayBtn} {\n          color: ${({ theme }) => theme.colors.brand[600]};\n        }\n\n        &.inRangeDay,\n        &.startRangeDay,\n        &.endRangeDay {\n          ${StyledDayBtn} {\n            color: ${({ theme }) => theme.colors.neutral['000']};\n          }\n        }\n      }\n    }\n\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     RANGE DAYS\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n  .dayWrapper.inRangeDay {\n    ${backgroundDateRange.inRange}\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        background-color: transparent;\n        color: ${({ theme }) => theme.colors.neutral[700]};\n        ${makeDiagonalLine(({ theme }) => theme.colors.neutral[700])}\n      }\n      &.focusedDay {\n        ${StyledDayBtn} {\n          &:after {\n            border-color: ${({ theme }) => theme.colors.brand[700]};\n          }\n        }\n      }\n    }\n  }\n\n  .dayWrapper.startRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.startRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.endRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay.startRangeDay {\n    background-color: transparent;\n    box-shadow: none;\n  }\n`;\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport const StyledWeekDaysHeaderItem = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.CALENDAR_HEADER_WEEKLY_DAY_ITEM,\n})`\n  min-width: 2.4615rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const CalendarFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR,\n})<{ $readOnlyStyles?: boolean }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: ${({ theme, $readOnlyStyles }) =>\n    $readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Pickers/Calendar/usePopperTriggerLogic.js

@@ -11,6 +11,7 @@ const usePopperTriggerLogic = ({
   const {
     props: { onPickerOpen, onPickerClose, disabled },
     pickerButtonRef,
+    isWithTimeWheelToo,
     trackFocusCalendarMetafocusedDay,
     trackFocusCalendarPrevMonth,
     trackFocusPicker,
@@ -19,8 +20,9 @@ const usePopperTriggerLogic = ({
   } = useContext(ControlledDateTimePickerContext);
   const [referenceElement, setReferenceElement] = useState(null);
   const handleOnPickerOpen = useCallback(() => {
+    if (isWithTimeWheelToo) return;
     onPickerOpen();
-  }, [onPickerOpen]);
+  }, [isWithTimeWheelToo, onPickerOpen]);
   const openCalendar = useCallback(() => {
     if (disabled) return;
     if (focusedDay) trackFocusCalendarMetafocusedDay();
@@ -37,11 +39,18 @@ const usePopperTriggerLogic = ({
   ]);
   const closeCalendar = useCallback(() => {
     setShowCalendar(false);
-    onPickerClose();
+    if (!isWithTimeWheelToo) onPickerClose();
     resetFocusedDayToStartDate();
     trackFocusPicker();
     resetMonthYear();
-  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, trackFocusPicker, resetMonthYear]);
+  }, [
+    setShowCalendar,
+    isWithTimeWheelToo,
+    onPickerClose,
+    resetFocusedDayToStartDate,
+    trackFocusPicker,
+    resetMonthYear
+  ]);
   const handleToggleCalendar = useCallback(() => {
     const isOpening = !showCalendar;
     if (isOpening) openCalendar();

package/dist/esm/parts/Pickers/Calendar/usePopperTriggerLogic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/usePopperTriggerLogic.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useMemo, useCallback, useState, useContext } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { useFocusLogic } from './useFocusLogic.js';\n\ninterface UsePopperTriggerLogic {\n  focusLogic: ReturnType<typeof useFocusLogic>;\n  showCalendar: boolean;\n  setShowCalendar: TypescriptHelpersT.StateSetter<boolean>;\n  resetMonthYear: () => void;\n}\ninterface PopperTriggerLogicT {\n  referenceElement: HTMLButtonElement | null;\n  closeCalendar: () => void;\n  handleToggleCalendar: () => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport const usePopperTriggerLogic = ({\n  focusLogic,\n  showCalendar,\n  setShowCalendar,\n  resetMonthYear,\n}: UsePopperTriggerLogic): PopperTriggerLogicT => {\n  const { focusedDay, resetFocusedDayToStartDate } = focusLogic;\n  const {\n    props: { onPickerOpen, onPickerClose, disabled },\n\n    pickerButtonRef,\n    trackFocusCalendarMetafocusedDay,\n    trackFocusCalendarPrevMonth,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  // onOpen we try to focus the day we should focus, if we should focus one\n  const handleOnPickerOpen = useCallback(() => {\n    onPickerOpen();\n  }, [onPickerOpen]);\n  const openCalendar = useCallback(() => {\n    if (disabled) return;\n    if (focusedDay) trackFocusCalendarMetafocusedDay();\n    else setTimeout(() => trackFocusCalendarPrevMonth());\n    setShowCalendar(true);\n    handleOnPickerOpen();\n  }, [\n    disabled,\n    focusedDay,\n    handleOnPickerOpen,\n    setShowCalendar,\n    trackFocusCalendarMetafocusedDay,\n    trackFocusCalendarPrevMonth,\n  ]);\n\n  const closeCalendar = useCallback(() => {\n    setShowCalendar(false);\n    onPickerClose();\n    resetFocusedDayToStartDate();\n    trackFocusPicker();\n    resetMonthYear();\n  }, [setShowCalendar, onPickerClose, resetFocusedDayToStartDate, trackFocusPicker, resetMonthYear]);\n\n  const handleToggleCalendar = useCallback(() => {\n    const isOpening = !showCalendar;\n    if (isOpening) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendar]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef?.focus();\n    },\n    [currFocusDescriber, latestInteractionRegion, pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar();\n        trackFocusPicker();\n      }\n    },\n    [closeCalendar, trackFocusPicker],\n  );\n\n  return useMemo(\n    () => ({\n      referenceElement,\n      closeCalendar,\n      handleSetTriggerRef,\n      handleToggleCalendar,\n      handleMenuWrapperKeyDown,\n    }),\n    [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, referenceElement],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,aAAa,UAAU,kBAAkB;AAE3D,SAAS,uCAAuC;AAgBzC,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkD;AAChD,QAAM,EAAE,YAAY,2BAA2B,IAAI;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,eAAe,SAAS;AAAA,IAE/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAmC,IAAI;AAEvF,QAAM,qBAAqB,YAAY,MAAM;AAC3C,iBAAa;AAAA,EACf,GAAG,CAAC,YAAY,CAAC;AACjB,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,SAAU;AACd,QAAI,WAAY,kCAAiC;AAAA,QAC5C,YAAW,MAAM,4BAA4B,CAAC;AACnD,oBAAgB,IAAI;AACpB,uBAAmB;AAAA,EACrB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,YAAY,MAAM;AACtC,oBAAgB,KAAK;AACrB,kBAAc;AACd,+BAA2B;AAC3B,qBAAiB;AACjB,mBAAe;AAAA,EACjB,GAAG,CAAC,iBAAiB,eAAe,4BAA4B,kBAAkB,cAAc,CAAC;AAEjG,QAAM,uBAAuB,YAAY,MAAM;AAC7C,UAAM,YAAY,CAAC;AACnB,QAAI,UAAW,cAAa;AAAA,QACvB,eAAc;AAAA,EACrB,GAAG,CAAC,eAAe,cAAc,YAAY,CAAC;AAE9C,QAAM,sBAAsB;AAAA,IAC1B,CAAC,WAA8B;AAC7B,sBAAgB,UAAU;AAC1B,0BAAoB,MAAM;AAC1B,UAAI,4BAA4B,iBAAiB,uBAAuB,mBAAoB,SAAQ,MAAM;AAAA,IAC5G;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,2BAA2B;AAAA,IAC/B,CAAC,MAAwC;AACvC,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,QAAQ,UAAU;AACpB,sBAAc;AACd,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,eAAe,gBAAgB;AAAA,EAClC;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,0BAA0B,qBAAqB,sBAAsB,gBAAgB;AAAA,EACvG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useMemo, useCallback, useState, useContext } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { useFocusLogic } from './useFocusLogic.js';\n\ninterface UsePopperTriggerLogic {\n  focusLogic: ReturnType<typeof useFocusLogic>;\n  showCalendar: boolean;\n  setShowCalendar: TypescriptHelpersT.StateSetter<boolean>;\n  resetMonthYear: () => void;\n}\ninterface PopperTriggerLogicT {\n  referenceElement: HTMLButtonElement | null;\n  closeCalendar: () => void;\n  handleToggleCalendar: () => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\nexport const usePopperTriggerLogic = ({\n  focusLogic,\n  showCalendar,\n  setShowCalendar,\n  resetMonthYear,\n}: UsePopperTriggerLogic): PopperTriggerLogicT => {\n  const { focusedDay, resetFocusedDayToStartDate } = focusLogic;\n  const {\n    props: { onPickerOpen, onPickerClose, disabled },\n\n    pickerButtonRef,\n    isWithTimeWheelToo,\n    trackFocusCalendarMetafocusedDay,\n    trackFocusCalendarPrevMonth,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n\n  // True only for DATE_TIME, where this hook is nested inside `CalendarWithTimeWheel` \u2014 that parent\n  // owns the popper and calls the consumer callbacks itself, so reporting from here too made\n  // DATE_TIME fire them 3\u00D7 per interaction. Hard-false for DATE-only, which is unaffected.\n  const handleOnPickerOpen = useCallback(() => {\n    if (isWithTimeWheelToo) return;\n    onPickerOpen();\n  }, [isWithTimeWheelToo, onPickerOpen]);\n  // onOpen we try to focus the day we should focus, if we should focus one\n  const openCalendar = useCallback(() => {\n    if (disabled) return;\n    if (focusedDay) trackFocusCalendarMetafocusedDay();\n    else setTimeout(() => trackFocusCalendarPrevMonth());\n    setShowCalendar(true);\n    handleOnPickerOpen();\n  }, [\n    disabled,\n    focusedDay,\n    handleOnPickerOpen,\n    setShowCalendar,\n    trackFocusCalendarMetafocusedDay,\n    trackFocusCalendarPrevMonth,\n  ]);\n\n  const closeCalendar = useCallback(() => {\n    setShowCalendar(false);\n    if (!isWithTimeWheelToo) onPickerClose();\n    resetFocusedDayToStartDate();\n    trackFocusPicker();\n    resetMonthYear();\n  }, [\n    setShowCalendar,\n    isWithTimeWheelToo,\n    onPickerClose,\n    resetFocusedDayToStartDate,\n    trackFocusPicker,\n    resetMonthYear,\n  ]);\n\n  const handleToggleCalendar = useCallback(() => {\n    const isOpening = !showCalendar;\n    if (isOpening) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendar]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'date-picker-icon') newRef?.focus();\n    },\n    [currFocusDescriber, latestInteractionRegion, pickerButtonRef],\n  );\n  const handleMenuWrapperKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const { key } = e;\n      if (key === 'Escape') {\n        closeCalendar();\n        trackFocusPicker();\n      }\n    },\n    [closeCalendar, trackFocusPicker],\n  );\n\n  return useMemo(\n    () => ({\n      referenceElement,\n      closeCalendar,\n      handleSetTriggerRef,\n      handleToggleCalendar,\n      handleMenuWrapperKeyDown,\n    }),\n    [closeCalendar, handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleCalendar, referenceElement],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,aAAa,UAAU,kBAAkB;AAE3D,SAAS,uCAAuC;AAgBzC,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkD;AAChD,QAAM,EAAE,YAAY,2BAA2B,IAAI;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,eAAe,SAAS;AAAA,IAE/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,+BAA+B;AAC9C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAmC,IAAI;AAKvF,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,mBAAoB;AACxB,iBAAa;AAAA,EACf,GAAG,CAAC,oBAAoB,YAAY,CAAC;AAErC,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,SAAU;AACd,QAAI,WAAY,kCAAiC;AAAA,QAC5C,YAAW,MAAM,4BAA4B,CAAC;AACnD,oBAAgB,IAAI;AACpB,uBAAmB;AAAA,EACrB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,YAAY,MAAM;AACtC,oBAAgB,KAAK;AACrB,QAAI,CAAC,mBAAoB,eAAc;AACvC,+BAA2B;AAC3B,qBAAiB;AACjB,mBAAe;AAAA,EACjB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,uBAAuB,YAAY,MAAM;AAC7C,UAAM,YAAY,CAAC;AACnB,QAAI,UAAW,cAAa;AAAA,QACvB,eAAc;AAAA,EACrB,GAAG,CAAC,eAAe,cAAc,YAAY,CAAC;AAE9C,QAAM,sBAAsB;AAAA,IAC1B,CAAC,WAA8B;AAC7B,sBAAgB,UAAU;AAC1B,0BAAoB,MAAM;AAC1B,UAAI,4BAA4B,iBAAiB,uBAAuB,mBAAoB,SAAQ,MAAM;AAAA,IAC5G;AAAA,IACA,CAAC,oBAAoB,yBAAyB,eAAe;AAAA,EAC/D;AACA,QAAM,2BAA2B;AAAA,IAC/B,CAAC,MAAwC;AACvC,YAAM,EAAE,IAAI,IAAI;AAChB,UAAI,QAAQ,UAAU;AACpB,sBAAc;AACd,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,eAAe,gBAAgB;AAAA,EAClC;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,0BAA0B,qBAAqB,sBAAsB,gBAAgB;AAAA,EACvG;AACF;",
   "names": []
 }

package/dist/esm/parts/Pickers/PickersIcons.js

@@ -12,9 +12,10 @@ const PickersIcons = () => {
     hideTimePicker,
     hideDateTimePicker,
     isControllerOnly,
+    getProps,
     props: { hasError }
   } = React2.useContext(ControlledDateTimePickerContext);
-  return /* @__PURE__ */ jsxs(StyledPickersIconsWrapperGrid, { hasError, isControllerOnly, children: [
+  return /* @__PURE__ */ jsxs(StyledPickersIconsWrapperGrid, { hasError, isControllerOnly, getOwnerProps: getProps, children: [
     !hideDatePicker && hideTimePicker && hideDateTimePicker ? /* @__PURE__ */ jsx(Calendar, {}) : null,
     hideDatePicker && !hideTimePicker && hideDateTimePicker ? /* @__PURE__ */ jsx(TimeWheel, {}) : null,
     hideDatePicker && hideTimePicker && !hideDateTimePicker ? /* @__PURE__ */ jsx(CalendarWithTimeWheel, {}) : null

package/dist/esm/parts/Pickers/PickersIcons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Pickers/PickersIcons.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { StyledPickersIconsWrapperGrid } from '../Styleds.js';\nimport { CalendarWithTimeWheel } from './CalendarWithTimeWheel/CalendarWithTimeWheel.js';\nimport { Calendar } from './Calendar/Calendar.js';\nimport { TimeWheel } from './TimeWheel/TimeWheel.js';\n\nexport const PickersIcons = (): JSX.Element => {\n  const {\n    hideDatePicker,\n    hideTimePicker,\n    hideDateTimePicker,\n    isControllerOnly,\n    props: { hasError },\n  } = React.useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledPickersIconsWrapperGrid hasError={hasError} isControllerOnly={isControllerOnly}>\n      {!hideDatePicker && hideTimePicker && hideDateTimePicker ? <Calendar /> : null}\n      {hideDatePicker && !hideTimePicker && hideDateTimePicker ? <TimeWheel /> : null}\n      {hideDatePicker && hideTimePicker && !hideDateTimePicker ? <CalendarWithTimeWheel /> : null}\n    </StyledPickersIconsWrapperGrid>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiBnB,SAC6D,KAD7D;AAjBJ,OAAOA,YAAW;AAClB,SAAS,uCAAuC;AAChD,SAAS,qCAAqC;AAC9C,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAEnB,MAAM,eAAe,MAAmB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,IAAIA,OAAM,WAAW,+BAA+B;AAEpD,SACE,qBAAC,iCAA8B,UAAoB,kBAChD;AAAA,KAAC,kBAAkB,kBAAkB,qBAAqB,oBAAC,YAAS,IAAK;AAAA,IACzE,kBAAkB,CAAC,kBAAkB,qBAAqB,oBAAC,aAAU,IAAK;AAAA,IAC1E,kBAAkB,kBAAkB,CAAC,qBAAqB,oBAAC,yBAAsB,IAAK;AAAA,KACzF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { StyledPickersIconsWrapperGrid } from '../Styleds.js';\nimport { CalendarWithTimeWheel } from './CalendarWithTimeWheel/CalendarWithTimeWheel.js';\nimport { Calendar } from './Calendar/Calendar.js';\nimport { TimeWheel } from './TimeWheel/TimeWheel.js';\n\nexport const PickersIcons = (): JSX.Element => {\n  const {\n    hideDatePicker,\n    hideTimePicker,\n    hideDateTimePicker,\n    isControllerOnly,\n    getProps,\n    props: { hasError },\n  } = React.useContext(ControlledDateTimePickerContext);\n\n  return (\n    <StyledPickersIconsWrapperGrid hasError={hasError} isControllerOnly={isControllerOnly} getOwnerProps={getProps}>\n      {!hideDatePicker && hideTimePicker && hideDateTimePicker ? <Calendar /> : null}\n      {hideDatePicker && !hideTimePicker && hideDateTimePicker ? <TimeWheel /> : null}\n      {hideDatePicker && hideTimePicker && !hideDateTimePicker ? <CalendarWithTimeWheel /> : null}\n    </StyledPickersIconsWrapperGrid>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkBnB,SAC6D,KAD7D;AAlBJ,OAAOA,YAAW;AAClB,SAAS,uCAAuC;AAChD,SAAS,qCAAqC;AAC9C,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAEnB,MAAM,eAAe,MAAmB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,IAAIA,OAAM,WAAW,+BAA+B;AAEpD,SACE,qBAAC,iCAA8B,UAAoB,kBAAoC,eAAe,UACnG;AAAA,KAAC,kBAAkB,kBAAkB,qBAAqB,oBAAC,YAAS,IAAK;AAAA,IACzE,kBAAkB,CAAC,kBAAkB,qBAAqB,oBAAC,aAAU,IAAK;AAAA,IAC1E,kBAAkB,kBAAkB,CAAC,qBAAqB,oBAAC,yBAAsB,IAAK;AAAA,KACzF;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Pickers/TimeWheel/HoursList.js

@@ -54,8 +54,8 @@ const HoursList = () => {
   );
   const hasDisabledStyles = readOnly || applyAriaDisabled;
   const arrowColor = !hasDisabledStyles ? ["brand-primary", "700"] : void 0;
-  return /* @__PURE__ */ jsxs(StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, children: [
-    /* @__PURE__ */ jsx(StyledWheelListItem, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(StyledWheelList, { onFocus: handleWheelFocus, onBlur: handleWheelBlur, getOwnerProps: getProps, children: [
+    /* @__PURE__ */ jsx(StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
       StyledWheelChangeTimeBtn,
       {
         "aria-label": "subtract one hour",
@@ -74,7 +74,7 @@ const HoursList = () => {
     ) }),
     visibleHours.map((hourString) => {
       const key = `timewheel-hour-${hourString || ""}`;
-      if (!hourString) return /* @__PURE__ */ jsx(StyledWheelListItem, {}, key);
+      if (!hourString) return /* @__PURE__ */ jsx(StyledWheelListItem, { getOwnerProps: getProps }, key);
       const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;
       const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;
       const isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || hours === hourString;
@@ -96,7 +96,7 @@ const HoursList = () => {
         onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrHourOnKeyDown : void 0,
         innerRef: isTheItemVisuallyInTheCenter ? handleCurrYearRef : void 0
       };
-      return /* @__PURE__ */ jsx(StyledWheelListItem, { children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
         StyledTimeBtn,
         {
           $isTheItemVisuallyInTheCenter: isTheItemVisuallyInTheCenter,
@@ -115,7 +115,7 @@ const HoursList = () => {
         }
       ) }, key);
     }),
-    /* @__PURE__ */ jsx(StyledWheelListItem, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(StyledWheelListItem, { getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
       StyledWheelChangeTimeBtn,
       {
         "aria-label": "add one hour",