@elliemae/ds-form-date-time-picker 3.53.0-alpha.1 → 3.53.0-alpha.3

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\n\n// we memoize the Icon  for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarWithTimeWheelIconTrigger = (): JSX.Element => {\n  const {\n    handleSetTriggerRef,\n    handleToggleCalendarWithTimeWheel,\n    handlePickerIconKeyDown,\n    ariaCurrentValueForInputs,\n    disabled,\n  } = useContext(CalendarWithTimeWheelContext);\n  const {\n    getProps,\n    props: { tabIndex },\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        type=\"button\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        tabIndex={tabIndex}\n        onClick={handleToggleCalendarWithTimeWheel}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL}\n        disabled={disabled}\n        getOwnerProps={getProps}\n      >\n        <DatePicker color={disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      disabled,\n      getProps,\n      handlePickerIconKeyDown,\n      handleSetTriggerRef,\n      handleToggleCalendarWithTimeWheel,\n      tabIndex,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsCf;AAtCR,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AACxC,SAAS,uCAAuC;AAChD,SAAS,0CAA0C;AAK5C,MAAM,mCAAmC,MAAmB;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,4BAA4B;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,IAAI,WAAW,+BAA+B;AAC9C,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,0CAA0C,yBAAyB;AAAA,QAC/E,YAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,eAAe;AAAA,QAEf,8BAAC,cAAW,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IAC/E;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { BUTTON_SIZES } from '@elliemae/ds-button-v2';\nimport { DatePicker } from '@elliemae/ds-icons';\nimport { useContext, useMemo } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nimport { StyledIconTriggerButton } from './Styleds.js';\n\n// we memoize the Icon  for maximum optimization\n// this is particularly useful due to how usePopper needs to check the references\n// since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders\nexport const CalendarWithTimeWheelIconTrigger = (): JSX.Element => {\n  const {\n    handleSetTriggerRef,\n    handleToggleCalendarWithTimeWheel,\n    handlePickerIconKeyDown,\n    ariaCurrentValueForInputs,\n    disabled,\n  } = useContext(CalendarWithTimeWheelContext);\n  const {\n    getProps,\n    props: { tabIndex },\n  } = useContext(ControlledDateTimePickerContext);\n  return useMemo(\n    () => (\n      <StyledIconTriggerButton\n        aria-label={`date time picker context menu trigger, ${ariaCurrentValueForInputs}`}\n        buttonType=\"icon\"\n        type=\"button\"\n        size={BUTTON_SIZES.M}\n        innerRef={handleSetTriggerRef}\n        tabIndex={tabIndex}\n        onClick={handleToggleCalendarWithTimeWheel}\n        onKeyDown={handlePickerIconKeyDown}\n        data-testid={ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR_TIMEWHEEL}\n        disabled={disabled}\n        getOwnerProps={getProps}\n      >\n        <DatePicker color={disabled ? ['neutral', '500'] : ['brand-primary', '800']} />\n      </StyledIconTriggerButton>\n    ),\n    [\n      ariaCurrentValueForInputs,\n      disabled,\n      getProps,\n      handlePickerIconKeyDown,\n      handleSetTriggerRef,\n      handleToggleCalendarWithTimeWheel,\n      tabIndex,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCf;AAtCR,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,YAAY,eAAe;AACpC,SAAS,uCAAuC;AAChD,SAAS,0CAA0C;AACnD,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AAKjC,MAAM,mCAAmC,MAAmB;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,4BAA4B;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,SAAS;AAAA,EACpB,IAAI,WAAW,+BAA+B;AAC9C,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,0CAA0C,yBAAyB;AAAA,QAC/E,YAAW;AAAA,QACX,MAAK;AAAA,QACL,MAAM,aAAa;AAAA,QACnB,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,WAAW;AAAA,QACX,eAAa,mCAAmC,aAAa;AAAA,QAC7D;AAAA,QACA,eAAe;AAAA,QAEf,8BAAC,cAAW,OAAO,WAAW,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IAC/E;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js

@@ -1,16 +1,16 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
 import { styled } from "@elliemae/ds-system";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
-import { CalendarWithTimeWheelContent } from "./CalendarWithTimeWheelContent.js";
-import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext.js";
+import { useContext } from "react";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
 import {
+  ControlledDateTimePickerDatatestid,
   DSControlledDateTimePickerName,
   DSControlledDateTimePickerSlots
-} from "../../../ControlledDateTimePickerDefinitions.js";
+} from "../../../constants/index.js";
+import { CalendarWithTimeWheelContent } from "./CalendarWithTimeWheelContent.js";
+import { CalendarWithTimeWheelContext } from "./CalendarWithTimeWheelContext.js";
 const StyledPopper = styled(DSPopperJS, {
   name: DSControlledDateTimePickerName,
   slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\nconst StyledPopper = styled(DSPopperJS, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,\n})``;\n\nexport const CalendarWithTimeWheelWrapper = () => {\n  const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n  const { getProps } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n  if (!referenceElement) return null;\n  return (\n    <StyledPopper\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n      getOwnerProps={getProps}\n      aria-label=\"calendar header\"\n      role=\"dialog\"\n    >\n      <CalendarWithTimeWheelContent />\n    </StyledPopper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmBQ;AAnB/B,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,0CAA0C;AACnD,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,SAAS,uCAAuC;AAChD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,IAAI,WAAW,4BAA4B;AACrG,QAAM,EAAE,SAAS,IAAI,WAAW,+BAA+B;AAC/D,MAAI,iBAAkB,QAAO,oBAAC,gCAA6B;AAC3D,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,gCAA6B;AAAA;AAAA,EAChC;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport { useContext } from 'react';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport {\n  ControlledDateTimePickerDatatestid,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { CalendarWithTimeWheelContent } from './CalendarWithTimeWheelContent.js';\nimport { CalendarWithTimeWheelContext } from './CalendarWithTimeWheelContext.js';\nconst StyledPopper = styled(DSPopperJS, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,\n})``;\n\nexport const CalendarWithTimeWheelWrapper = () => {\n  const { referenceElement, closeCalendar, isControllerOnly } = useContext(CalendarWithTimeWheelContext);\n  const { getProps } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n  if (!referenceElement) return null;\n  return (\n    <StyledPopper\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeCalendar}\n      getOwnerProps={getProps}\n      aria-label=\"calendar header\"\n      role=\"dialog\"\n    >\n      <CalendarWithTimeWheelContent />\n    </StyledPopper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBQ;AAnB/B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,uCAAuC;AAChD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,IAAI,WAAW,4BAA4B;AACrG,QAAM,EAAE,SAAS,IAAI,WAAW,+BAA+B;AAC/D,MAAI,iBAAkB,QAAO,oBAAC,gCAA6B;AAC3D,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,8BAAC,gCAA6B;AAAA;AAAA,EAChC;AAEJ;",
   "names": []
 }

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

@@ -1,11 +1,8 @@
 import * as React from "react";
-import { styled } from "@elliemae/ds-system";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
+import { styled } from "@elliemae/ds-system";
+import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../../../constants/index.js";
 import { CalendarContent } from "../Calendar/CalendarContent.js";
-import {
-  DSControlledDateTimePickerName,
-  DSControlledDateTimePickerSlots
-} from "../../../ControlledDateTimePickerDefinitions.js";
 const StyledIconTriggerButton = styled(DSButtonV2, {
   name: DSControlledDateTimePickerName,
   slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL
@@ -22,7 +19,9 @@ const StyledCalendarWithTimeWheelWrapper = styled("div", {
   display: grid;
   grid-template-columns: 260px 192px;
   grid-template-rows: 1fr;
-  column-gap: 0;
+  // this gap and background color simulate the border separator between the calendar and time wheel
+  column-gap: 1px;
+  background-color: ${({ theme }) => theme.colors.neutral["200"]};
 `;
 const StyledCalendar = styled(CalendarContent)`
   box-shadow: none;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/Styleds.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { CalendarContent } from '../Calendar/CalendarContent.js';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['800']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL,\n})<{ readOnlyStyles?: boolean }>`\n  background: ${({ theme, readOnlyStyles }) =>\n    readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n  display: grid;\n  grid-template-columns: 260px 192px;\n  grid-template-rows: 1fr;\n  column-gap: 0;\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL,\n})<{ readOnlyStyles?: boolean }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  padding: ${({ theme }) => theme.space.xxs2};\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  grid-column: 1/3;\n  background-color: ${({ theme, readOnlyStyles }) =>\n    readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,0BAA0B,OAAO,YAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,aAAa;AACrD,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAK5C,MAAM,qCAAqC,OAAO,OAAO;AAAA,EAC9D,MAAM;AAAA,EACN,MAAM,gCAAgC,qBAAqB;AAC7D,CAAC;AAAA,gBACe,CAAC,EAAE,OAAO,eAAe,MACrC,iBAAiB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvE,MAAM,iBAAiB,OAAO,eAAe;AAAA;AAAA;AAI7C,MAAM,qCAAqC,OAAO,OAAO;AAAA,EAC9D,MAAM;AAAA,EACN,MAAM,gCAAgC,QAAQ;AAChD,CAAC;AAAA,0BACyB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,aACrD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA,sBAGtC,CAAC,EAAE,OAAO,eAAe,MAC3C,iBAAiB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\nimport { CalendarContent } from '../Calendar/CalendarContent.js';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['800']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL,\n})<{ readOnlyStyles?: boolean }>`\n  background: ${({ theme, readOnlyStyles }) =>\n    readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n  display: grid;\n  grid-template-columns: 260px 192px;\n  grid-template-rows: 1fr;\n  // this gap and background color simulate the border separator between the calendar and time wheel\n  column-gap: 1px;\n  background-color: ${({ theme }) => theme.colors.neutral['200']};\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL,\n})<{ readOnlyStyles?: boolean }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  padding: ${({ theme }) => theme.space.xxs2};\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  grid-column: 1/3;\n  background-color: ${({ theme, readOnlyStyles }) =>\n    readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,gCAAgC,uCAAuC;AAChF,SAAS,uBAAuB;AAEzB,MAAM,0BAA0B,OAAO,YAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,aAAa;AACrD,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAK5C,MAAM,qCAAqC,OAAO,OAAO;AAAA,EAC9D,MAAM;AAAA,EACN,MAAM,gCAAgC,qBAAqB;AAC7D,CAAC;AAAA,gBACe,CAAC,EAAE,OAAO,eAAe,MACrC,iBAAiB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGzD,MAAM,iBAAiB,OAAO,eAAe;AAAA;AAAA;AAI7C,MAAM,qCAAqC,OAAO,OAAO;AAAA,EAC9D,MAAM;AAAA,EACN,MAAM,gCAAgC,QAAQ;AAChD,CAAC;AAAA,0BACyB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,aACrD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,eACnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA,sBAGtC,CAAC,EAAE,OAAO,eAAe,MAC3C,iBAAiB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
   "names": []
 }

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { useMemo, useState, useCallback, useContext } from "react";
-import { CONTROLLED_DATE_TIME_PICKER_TYPES } from "../../../ControlledDateTimePickerTypes.js";
+import { useCallback, useContext, useMemo, useState } from "react";
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from "../../../constants/ControlledDateTimePickerTypes.js";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
 import { CalendarContext } from "../Calendar/CalendarContext.js";
 import { TimeWheelContext } from "../TimeWheel/TimeWheelContext.js";

package/dist/esm/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useMemo, useState, useCallback, useContext } from 'react';\nimport { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../../ControlledDateTimePickerTypes.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { CalendarContext } from '../Calendar/CalendarContext.js';\nimport { TimeWheelContext } from '../TimeWheel/TimeWheelContext.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\nexport interface CalendarWithTimeWheelContextT {\n  referenceElement: HTMLButtonElement | null;\n  ariaCurrentValueForInputs: string;\n  showCalendarWithTimeWheel: boolean;\n  closeCalendar: () => void;\n  handleToggleCalendarWithTimeWheel: (\n    e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,\n  ) => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isControllerOnly: boolean;\n  disabled: boolean;\n  applyAriaDisabled?: boolean;\n}\nexport const useConfigCalendarWithTimeWheelCTX = (): CalendarWithTimeWheelContextT => {\n  const {\n    pickerButtonRef,\n    props: { type, onPickerOpen, onPickerClose, disabled, applyAriaDisabled },\n    withAnyInputs,\n    isWithTimeInputs,\n    ariaCurrentValueForInputs,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const { handleToggleCalendar } = useContext(CalendarContext);\n  const { handleToggleTimePicker } = useContext(TimeWheelContext);\n  const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = useState(false);\n  const onHomeKeyDown = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      if (['Home', 'End'].includes(key)) e.preventDefault();\n      if (['Home', 'End'].includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else trackFocusYearInput();\n      }\n    },\n    [isWithTimeInputs, onHomeKeyDown, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs],\n  );\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const openCalendar = useCallback(() => {\n    if (disabled) return;\n    setShowCalendarWithTimeWheel(true);\n    onPickerOpen();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerOpen, disabled]);\n  const closeCalendar = useCallback(() => {\n    setShowCalendarWithTimeWheel(false);\n    onPickerClose();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerClose]);\n\n  const handleToggleCalendarWithTimeWheel = useCallback(() => {\n    if (!showCalendarWithTimeWheel) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'datetime-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  const isControllerOnly = useMemo(() => type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);\n\n  return useMemo(\n    () => ({\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      applyAriaDisabled,\n      ariaCurrentValueForInputs,\n    }),\n    [\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      applyAriaDisabled,\n      ariaCurrentValueForInputs,\n    ],\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport type React from 'react';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../../constants/ControlledDateTimePickerTypes.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../../sharedTypes.js';\nimport { CalendarContext } from '../Calendar/CalendarContext.js';\nimport { TimeWheelContext } from '../TimeWheel/TimeWheelContext.js';\nexport interface CalendarWithTimeWheelContextT {\n  referenceElement: HTMLButtonElement | null;\n  ariaCurrentValueForInputs: string;\n  showCalendarWithTimeWheel: boolean;\n  closeCalendar: () => void;\n  handleToggleCalendarWithTimeWheel: (\n    e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,\n  ) => void;\n  handleSetTriggerRef: (instance: HTMLButtonElement) => void;\n  handleMenuWrapperKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n  handlePickerIconKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isControllerOnly: boolean;\n  disabled: boolean;\n  applyAriaDisabled?: boolean;\n}\nexport const useConfigCalendarWithTimeWheelCTX = (): CalendarWithTimeWheelContextT => {\n  const {\n    pickerButtonRef,\n    props: { type, onPickerOpen, onPickerClose, disabled, applyAriaDisabled },\n    withAnyInputs,\n    isWithTimeInputs,\n    ariaCurrentValueForInputs,\n    trackFocusFirstSegment,\n    trackFocusMeridiemInput,\n    trackFocusYearInput,\n    trackFocusPicker,\n    latestInteractionRegion,\n    currFocusDescriber,\n  } = useContext(ControlledDateTimePickerContext);\n  const { handleToggleCalendar } = useContext(CalendarContext);\n  const { handleToggleTimePicker } = useContext(TimeWheelContext);\n  const [showCalendarWithTimeWheel, setShowCalendarWithTimeWheel] = useState(false);\n  const onHomeKeyDown = useCallback(() => {\n    trackFocusFirstSegment();\n  }, [trackFocusFirstSegment]);\n  const handlePickerIconKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown<HTMLButtonElement> = useCallback(\n    (e) => {\n      const { key } = e;\n      if (['Home', 'End'].includes(key)) e.preventDefault();\n      if (['Home', 'End'].includes(key)) e.stopPropagation();\n      if (key === 'Home') onHomeKeyDown();\n      if (key === 'Backspace' && withAnyInputs) {\n        if (isWithTimeInputs) trackFocusMeridiemInput();\n        else trackFocusYearInput();\n      }\n    },\n    [isWithTimeInputs, onHomeKeyDown, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs],\n  );\n  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n  const openCalendar = useCallback(() => {\n    if (disabled) return;\n    setShowCalendarWithTimeWheel(true);\n    onPickerOpen();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerOpen, disabled]);\n  const closeCalendar = useCallback(() => {\n    setShowCalendarWithTimeWheel(false);\n    onPickerClose();\n    setTimeout(() => handleToggleCalendar());\n    setTimeout(() => handleToggleTimePicker());\n  }, [handleToggleCalendar, handleToggleTimePicker, onPickerClose]);\n\n  const handleToggleCalendarWithTimeWheel = useCallback(() => {\n    if (!showCalendarWithTimeWheel) openCalendar();\n    else closeCalendar();\n  }, [closeCalendar, openCalendar, showCalendarWithTimeWheel]);\n\n  const handleSetTriggerRef = useCallback(\n    (newRef: HTMLButtonElement) => {\n      pickerButtonRef.current = newRef;\n      setReferenceElement(newRef);\n      if (latestInteractionRegion === 'picker-icon' && currFocusDescriber === 'datetime-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  const isControllerOnly = useMemo(() => type === CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);\n\n  return useMemo(\n    () => ({\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      applyAriaDisabled,\n      ariaCurrentValueForInputs,\n    }),\n    [\n      referenceElement,\n      showCalendarWithTimeWheel,\n      closeCalendar,\n      handleToggleCalendarWithTimeWheel,\n      handleSetTriggerRef,\n      handleMenuWrapperKeyDown,\n      handlePickerIconKeyDown,\n      isControllerOnly,\n      disabled,\n      applyAriaDisabled,\n      ariaCurrentValueForInputs,\n    ],\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useCallback } from "react";
-import { ChevronSmallUp, ChevronSmallDown } from "@elliemae/ds-icons";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
+import { ChevronSmallDown, ChevronSmallUp } from "@elliemae/ds-icons";
+import { useCallback, useContext } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../constants/index.js";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
 import { convertToPositiveNumberIfPossible } from "../../../utils/numberHelpers.js";
-import { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from "./Styleds.js";
+import { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from "./Styleds.js";
 import { TimeWheelContext } from "./TimeWheelContext.js";
 const HoursList = () => {
   const {
@@ -69,6 +69,14 @@ const HoursList = () => {
       const isDisabled = getIsDisabledTime(currHourTimeString);
       const tabIndex = isCurrentListItem ? 0 : -1;
       const btnProps = {
+        role: "spinbutton",
+        "aria-valuenow": convertToPositiveNumberIfPossible(hourString),
+        "aria-valuetext": `${hourString} hours`,
+        "aria-valuemin": 1,
+        "aria-valuemax": 12,
+        "aria-label": `${hourString} hours`,
+        "aria-disabled": isDisabled || readOnly || applyAriaDisabled,
+        "aria-readonly": readOnly || applyAriaDisabled,
         onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : void 0,
         innerRef: isCurrentListItem ? handleCurrYearRef : void 0
       };
@@ -84,14 +92,9 @@ const HoursList = () => {
           autoFocus: autoFocusHourTimeWheel && isCurrentListItem,
           "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? "CURRENT_HOUR" : "HOUR"],
           selected: isSelected,
-          "aria-label": `${hourString} hours`,
-          "aria-disabled": isDisabled || readOnly || applyAriaDisabled,
           applyAriaDisabled,
-          buttonType: "raw",
-          size: "m",
           onClick: (e) => handleTimeWheelBtnChangeHours(hourString, e),
           tabIndex,
-          type: "button",
           ...btnProps,
           getOwnerProps: getProps,
           readOnly: readOnly || applyAriaDisabled,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/HoursList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown, type SvgIconT } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const HoursList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleHours,\n    handlePrevHour,\n    handleNextHour,\n    handleTimeWheelBtnChangeHours,\n    handleCurrHourOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevHourBtnRef,\n    currHourBtnRef,\n    nextHourBtnRef,\n    getIsDisabledTime,\n    autoFocusHourTimeWheel,\n    hours,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handleCurrYearRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currHourBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currHourBtnRef],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevHour}\n          innerRef={prevHourBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR}\n          aria-disabled={readOnly || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getProps}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleHours.map((hourString) => {\n        const key = `timewheel-hour-${hourString || ''}`;\n        if (!hourString) return <StyledWheelListItem key={key} />;\n        const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;\n\n        const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isDisabled = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrYearRef : undefined,\n        };\n        const styleProps = {\n          isCurrentListItem,\n          isDisabled,\n        };\n        const isSelected = hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        return (\n          <StyledWheelListItem isCurrentListItem={isCurrentListItem} key={key}>\n            <StyledTimeBtn\n              {...styleProps}\n              autoFocus={autoFocusHourTimeWheel && isCurrentListItem}\n              data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR']}\n              selected={isSelected}\n              aria-label={`${hourString} hours`}\n              aria-disabled={isDisabled || readOnly || applyAriaDisabled}\n              applyAriaDisabled={applyAriaDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) =>\n                handleTimeWheelBtnChangeHours(hourString, e)\n              }\n              tabIndex={tabIndex}\n              type=\"button\"\n              {...btnProps}\n              getOwnerProps={getProps}\n              readOnly={readOnly || applyAriaDisabled}\n            >\n              {hourString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextHour}\n          innerRef={nextHourBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR}\n          aria-disabled={readOnly || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getProps}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const HoursList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleHours,\n    handlePrevHour,\n    handleNextHour,\n    handleTimeWheelBtnChangeHours,\n    handleCurrHourOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevHourBtnRef,\n    currHourBtnRef,\n    nextHourBtnRef,\n    getIsDisabledTime,\n    autoFocusHourTimeWheel,\n    hours,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handleCurrYearRef = useCallback(\n    (ButtonDomNode: HTMLDivElement) => {\n      setTimeout(() => {\n        currHourBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-hour')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currHourBtnRef],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevHour}\n          innerRef={prevHourBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR}\n          aria-disabled={readOnly || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getProps}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleHours.map((hourString) => {\n        const key = `timewheel-hour-${hourString || ''}`;\n        if (!hourString) return <StyledWheelListItem key={key} />;\n        const currHourTimeString = `${hourString}:${currMinuteNum} ${currMeridiem}`;\n\n        const isEmptyCurrValueCurrentListItem = !hours && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isDisabled = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          role: 'spinbutton',\n          'aria-valuenow': convertToPositiveNumberIfPossible(hourString),\n          'aria-valuetext': `${hourString} hours`,\n          'aria-valuemin': 1,\n          'aria-valuemax': 12,\n          'aria-label': `${hourString} hours`,\n          'aria-disabled': isDisabled || readOnly || applyAriaDisabled,\n          'aria-readonly': readOnly || applyAriaDisabled,\n          onKeyDown: isCurrentListItem ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrYearRef : undefined,\n        };\n        const styleProps = {\n          isCurrentListItem,\n          isDisabled,\n        };\n        const isSelected = hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        return (\n          <StyledWheelListItem isCurrentListItem={isCurrentListItem} key={key}>\n            <StyledTimeBtn\n              {...styleProps}\n              autoFocus={autoFocusHourTimeWheel && isCurrentListItem}\n              data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_HOUR' : 'HOUR']}\n              selected={isSelected}\n              applyAriaDisabled={applyAriaDisabled}\n              onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n                handleTimeWheelBtnChangeHours(hourString, e)\n              }\n              tabIndex={tabIndex}\n              {...btnProps}\n              getOwnerProps={getProps}\n              readOnly={readOnly || applyAriaDisabled}\n            >\n              {hourString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one hour\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextHour}\n          innerRef={nextHourBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR}\n          aria-disabled={readOnly || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getProps}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useCallback } from "react";
-import { ChevronSmallUp, ChevronSmallDown } from "@elliemae/ds-icons";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
+import { ChevronSmallDown, ChevronSmallUp } from "@elliemae/ds-icons";
+import { useCallback, useContext } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../constants/index.js";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
-import { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from "./Styleds.js";
+import { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from "./Styleds.js";
 import { TimeWheelContext } from "./TimeWheelContext.js";
 const MeridiemList = () => {
   const { currMeridiem, handleTimeWheelBtnChangeMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);
@@ -41,6 +41,11 @@ const MeridiemList = () => {
     },
     [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef]
   );
+  const btnProps = {
+    "aria-valuetext": currMeridiem,
+    "aria-label": `${currMeridiem} meridiem`,
+    "aria-disabled": isDisabledAm || isDisabledPm || readOnly || applyAriaDisabled
+  };
   const hasDisabledStyles = readOnly || applyAriaDisabled;
   const arrowColor = !hasDisabledStyles ? ["brand-primary", "700"] : void 0;
   return /* @__PURE__ */ jsxs(StyledWheelList, { children: [
@@ -65,18 +70,17 @@ const MeridiemList = () => {
     /* @__PURE__ */ jsx(StyledWheelListItem, { isCurrentListItem: isAmCurrent, children: /* @__PURE__ */ jsx(
       StyledTimeBtn,
       {
+        role: "spinbutton",
+        ...currMeridiem === "AM" || currMeridiem === "" ? btnProps : {},
         ...styledPropsCurrentAmMeridiem,
         "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? "CURRENT_MERIDIEM" : "MERIDIEM"],
         selected: currMeridiem === "AM",
         "aria-label": `AM ${isAmCurrent ? "selected" : ""}`,
         "aria-disabled": isDisabledAm || readOnly || applyAriaDisabled,
-        buttonType: "raw",
-        size: "m",
         onClick: (e) => handleTimeWheelBtnChangeMeridiem("AM", e),
         onKeyDown: isAmCurrent ? handleCurrMeridiemOnKeyDown : void 0,
         innerRef: isAmCurrent ? handleCurrMeridiemRef : void 0,
         tabIndex: isAmCurrent ? 0 : -1,
-        type: "button",
         getOwnerProps: getProps,
         readOnly: readOnly || applyAriaDisabled,
         children: "AM"
@@ -85,18 +89,17 @@ const MeridiemList = () => {
     /* @__PURE__ */ jsx(StyledWheelListItem, { isCurrentListItem: isPmCurrent, children: /* @__PURE__ */ jsx(
       StyledTimeBtn,
       {
+        role: "spinbutton",
+        ...currMeridiem === "PM" ? btnProps : {},
         ...styledPropsCurrentPmMeridiem,
         "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? "CURRENT_MERIDIEM" : "MERIDIEM"],
         selected: currMeridiem === "PM",
         "aria-label": `PM ${isPmCurrent ? "selected" : ""}`,
         "aria-disabled": isDisabledPm || readOnly || applyAriaDisabled,
-        buttonType: "raw",
-        size: "m",
         onClick: (e) => handleTimeWheelBtnChangeMeridiem("PM", e),
         onKeyDown: isPmCurrent ? handleCurrMeridiemOnKeyDown : void 0,
         innerRef: isPmCurrent ? handleCurrMeridiemRef : void 0,
         tabIndex: isPmCurrent ? 0 : -1,
-        type: "button",
         getOwnerProps: getProps,
         readOnly: readOnly || applyAriaDisabled,
         children: "PM"

package/dist/esm/parts/Pickers/TimeWheel/MeridiemList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/MeridiemList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown, type SvgIconT } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const MeridiemList = (): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const isPmCurrent = currMeridiem === 'PM';\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const amTimeString = `${hourMinuteString} AM`;\n  const pmTimeString = `${hourMinuteString} PM`;\n  const isDisabledAm = getIsDisabledTime(amTimeString);\n  const isDisabledPm = getIsDisabledTime(pmTimeString);\n  const styledPropsPrevMeridiem = { isDisabled: isDisabledAm };\n  const styledPropsCurrentAmMeridiem = { isCurrentListItem: isAmCurrent, isDisabled: isDisabledAm };\n  const styledPropsCurrentPmMeridiem = { isCurrentListItem: isPmCurrent, isDisabled: isDisabledPm };\n  const styledPropsNextMeridiem = { isDisabled: isDisabledPm };\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsPrevMeridiem}\n          aria-label=\"set am meridiem\"\n          aria-disabled={isDisabledAm || readOnly || applyAriaDisabled}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) =>\n            handleTimeWheelBtnChangeMeridiem('AM', e)\n          }\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem isCurrentListItem={isAmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentAmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'AM'}\n          aria-label={`AM ${isAmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledAm || readOnly || applyAriaDisabled}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) =>\n            handleTimeWheelBtnChangeMeridiem('AM', e)\n          }\n          onKeyDown={isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isAmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isAmCurrent ? 0 : -1}\n          type=\"button\"\n          getOwnerProps={getProps}\n          readOnly={readOnly || applyAriaDisabled}\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem isCurrentListItem={isPmCurrent}>\n        <StyledTimeBtn\n          {...styledPropsCurrentPmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'PM'}\n          aria-label={`PM ${isPmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledPm || readOnly || applyAriaDisabled}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) =>\n            handleTimeWheelBtnChangeMeridiem('PM', e)\n          }\n          onKeyDown={isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isPmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isPmCurrent ? 0 : -1}\n          type=\"button\"\n          getOwnerProps={getProps}\n          readOnly={readOnly || applyAriaDisabled}\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsNextMeridiem}\n          aria-label=\"set pm meridiem\"\n          aria-disabled={isDisabledPm || readOnly || applyAriaDisabled}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) =>\n            handleTimeWheelBtnChangeMeridiem('PM', e)\n          }\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const MeridiemList = (): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const isPmCurrent = currMeridiem === 'PM';\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const amTimeString = `${hourMinuteString} AM`;\n  const pmTimeString = `${hourMinuteString} PM`;\n  const isDisabledAm = getIsDisabledTime(amTimeString);\n  const isDisabledPm = getIsDisabledTime(pmTimeString);\n  const styledPropsPrevMeridiem = { isDisabled: isDisabledAm };\n  const styledPropsCurrentAmMeridiem = { isCurrentListItem: isAmCurrent, isDisabled: isDisabledAm };\n  const styledPropsCurrentPmMeridiem = { isCurrentListItem: isPmCurrent, isDisabled: isDisabledPm };\n  const styledPropsNextMeridiem = { isDisabled: isDisabledPm };\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLDivElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n\n  const btnProps = {\n    'aria-valuetext': currMeridiem,\n    'aria-label': `${currMeridiem} meridiem`,\n    'aria-disabled': isDisabledAm || isDisabledPm || readOnly || applyAriaDisabled,\n  };\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsPrevMeridiem}\n          aria-label=\"set am meridiem\"\n          aria-disabled={isDisabledAm || readOnly || applyAriaDisabled}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) =>\n            handleTimeWheelBtnChangeMeridiem('AM', e)\n          }\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem isCurrentListItem={isAmCurrent}>\n        <StyledTimeBtn\n          role=\"spinbutton\"\n          {...(currMeridiem === 'AM' || currMeridiem === '' ? btnProps : {})}\n          {...styledPropsCurrentAmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isAmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'AM'}\n          aria-label={`AM ${isAmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledAm || readOnly || applyAriaDisabled}\n          onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n            handleTimeWheelBtnChangeMeridiem('AM', e)\n          }\n          onKeyDown={isAmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isAmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isAmCurrent ? 0 : -1}\n          getOwnerProps={getProps}\n          readOnly={readOnly || applyAriaDisabled}\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem isCurrentListItem={isPmCurrent}>\n        <StyledTimeBtn\n          role=\"spinbutton\"\n          {...(currMeridiem === 'PM' ? btnProps : {})}\n          {...styledPropsCurrentPmMeridiem}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL[isPmCurrent ? 'CURRENT_MERIDIEM' : 'MERIDIEM']}\n          selected={currMeridiem === 'PM'}\n          aria-label={`PM ${isPmCurrent ? 'selected' : ''}`}\n          aria-disabled={isDisabledPm || readOnly || applyAriaDisabled}\n          onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n            handleTimeWheelBtnChangeMeridiem('PM', e)\n          }\n          onKeyDown={isPmCurrent ? handleCurrMeridiemOnKeyDown : undefined}\n          innerRef={isPmCurrent ? handleCurrMeridiemRef : undefined}\n          tabIndex={isPmCurrent ? 0 : -1}\n          getOwnerProps={getProps}\n          readOnly={readOnly || applyAriaDisabled}\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem /> : null}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          {...styledPropsNextMeridiem}\n          aria-label=\"set pm meridiem\"\n          aria-disabled={isDisabledPm || readOnly || applyAriaDisabled}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MERIDIEM}\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={(e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) =>\n            handleTimeWheelBtnChangeMeridiem('PM', e)\n          }\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useCallback } from "react";
-import { ChevronSmallUp, ChevronSmallDown } from "@elliemae/ds-icons";
-import { ControlledDateTimePickerDatatestid } from "../../../ControlledDateTimePickerDatatestid.js";
+import { ChevronSmallDown, ChevronSmallUp } from "@elliemae/ds-icons";
+import { useCallback, useContext } from "react";
+import { ControlledDateTimePickerDatatestid } from "../../../constants/index.js";
 import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePickerCTX.js";
 import { convertToPositiveNumberIfPossible } from "../../../utils/numberHelpers.js";
-import { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from "./Styleds.js";
+import { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from "./Styleds.js";
 import { TimeWheelContext } from "./TimeWheelContext.js";
 const MinutesList = () => {
   const {
@@ -67,6 +67,13 @@ const MinutesList = () => {
       const isDisabled = getIsDisabledTime(currMinutesTimeString);
       const tabIndex = isCurrentListItem ? 0 : -1;
       const btnProps = {
+        role: "spinbutton",
+        "aria-valuenow": convertToPositiveNumberIfPossible(minutesString),
+        "aria-valuetext": `${minutesString} minutes`,
+        "aria-label": `${minutesString} minutes`,
+        "aria-valuemin": 1,
+        "aria-valuemax": 59,
+        "aria-disabled": isDisabled || readOnly || applyAriaDisabled,
         onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : void 0,
         innerRef: isCurrentListItem ? handleCurrMeridiemRef : void 0
       };
@@ -82,10 +89,6 @@ const MinutesList = () => {
               ...styledProps,
               "data-testid": ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? "CURRENT_MINUTE" : "MINUTE"],
               selected: minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum,
-              "aria-label": `${minutesString} minutes`,
-              "aria-disabled": isDisabled || readOnly || applyAriaDisabled,
-              buttonType: "raw",
-              size: "m",
               onClick: (e) => handleTimeWheelBtnChangeMinutes(minutesString, e),
               tabIndex,
               type: "button",

package/dist/esm/parts/Pickers/TimeWheel/MinutesList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useCallback } from 'react';\nimport { ChevronSmallUp, ChevronSmallDown, type SvgIconT } from '@elliemae/ds-icons';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledWheelList, StyledWheelListItem, StyledTimeBtn, StyledWheelChangeTimeBtn } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const MinutesList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleMinutes,\n    handlePrevMinute,\n    handleNextMinute,\n    handleTimeWheelBtnChangeMinutes,\n    handleCurrMinutesOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevMinutesBtnRef,\n    currMinutesBtnRef,\n    nextMinutesBtnRef,\n    getIsDisabledTime,\n    minutes,\n    currFocusDescriber,\n    latestInteractionRegion,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLButtonElement) => {\n      setTimeout(() => {\n        currMinutesBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevMinute}\n          innerRef={prevMinutesBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE}\n          aria-disabled={readOnly || applyAriaDisabled}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleMinutes.map((minutesString) => {\n        const key = `timewheel-minutes-${minutesString || ''}`;\n        if (!minutesString) return <StyledWheelListItem key={key} />;\n        const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;\n        const isEmptyCurrValueCurrentListItem =\n          !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isDisabled = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrMeridiemRef : undefined,\n        };\n        const styledProps = { isCurrentListItem, isDisabled };\n        return (\n          <StyledWheelListItem\n            key={key}\n            isCurrentListItem={isCurrentListItem}\n            selected={convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n          >\n            <StyledTimeBtn\n              {...styledProps}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\n              selected={minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n              aria-label={`${minutesString} minutes`}\n              aria-disabled={isDisabled || readOnly || applyAriaDisabled}\n              buttonType=\"raw\"\n              size=\"m\"\n              onClick={(e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) =>\n                handleTimeWheelBtnChangeMinutes(minutesString, e)\n              }\n              tabIndex={tabIndex}\n              type=\"button\"\n              {...btnProps}\n              getOwnerProps={getProps}\n              readOnly={readOnly || applyAriaDisabled}\n            >\n              {minutesString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextMinute}\n          innerRef={nextMinutesBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE}\n          tabIndex={-1}\n          aria-disabled={readOnly || applyAriaDisabled}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { StyledTimeBtn, StyledWheelChangeTimeBtn, StyledWheelList, StyledWheelListItem } from './Styleds.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nexport const MinutesList = (): JSX.Element => {\n  const {\n    currHourNum,\n    currMinuteNum,\n    currMeridiem,\n    visibleMinutes,\n    handlePrevMinute,\n    handleNextMinute,\n    handleTimeWheelBtnChangeMinutes,\n    handleCurrMinutesOnKeyDown,\n  } = useContext(TimeWheelContext);\n  const {\n    prevMinutesBtnRef,\n    currMinutesBtnRef,\n    nextMinutesBtnRef,\n    getIsDisabledTime,\n    minutes,\n    currFocusDescriber,\n    latestInteractionRegion,\n    getProps,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const handleCurrMeridiemRef = useCallback(\n    (ButtonDomNode: HTMLDivElement) => {\n      setTimeout(() => {\n        currMinutesBtnRef.current = ButtonDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-minute')\n          ButtonDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMinutesBtnRef],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"subtract one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handlePrevMinute}\n          innerRef={prevMinutesBtnRef}\n          tabIndex={-1}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE}\n          aria-disabled={readOnly || applyAriaDisabled}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {visibleMinutes.map((minutesString) => {\n        const key = `timewheel-minutes-${minutesString || ''}`;\n        if (!minutesString) return <StyledWheelListItem key={key} />;\n        const currMinutesTimeString = `${currHourNum}:${minutesString} ${currMeridiem}`;\n        const isEmptyCurrValueCurrentListItem =\n          !minutes && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const isCurrentListItem = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isDisabled = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isCurrentListItem ? 0 : -1;\n        const btnProps = {\n          role: 'spinbutton',\n          'aria-valuenow': convertToPositiveNumberIfPossible(minutesString),\n          'aria-valuetext': `${minutesString} minutes`,\n          'aria-label': `${minutesString} minutes`,\n          'aria-valuemin': 1,\n          'aria-valuemax': 59,\n          'aria-disabled': isDisabled || readOnly || applyAriaDisabled,\n          onKeyDown: isCurrentListItem ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isCurrentListItem ? handleCurrMeridiemRef : undefined,\n        };\n        const styledProps = { isCurrentListItem, isDisabled };\n        return (\n          <StyledWheelListItem\n            key={key}\n            isCurrentListItem={isCurrentListItem}\n            selected={convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n          >\n            <StyledTimeBtn\n              {...styledProps}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isCurrentListItem ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\n              selected={minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum}\n              onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n                handleTimeWheelBtnChangeMinutes(minutesString, e)\n              }\n              tabIndex={tabIndex}\n              type=\"button\"\n              {...btnProps}\n              getOwnerProps={getProps}\n              readOnly={readOnly || applyAriaDisabled}\n            >\n              {minutesString}\n            </StyledTimeBtn>\n          </StyledWheelListItem>\n        );\n      })}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"add one minute\"\n          buttonType=\"raw\"\n          size=\"m\"\n          onClick={handleNextMinute}\n          innerRef={nextMinutesBtnRef}\n          data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE}\n          tabIndex={-1}\n          aria-disabled={readOnly || applyAriaDisabled}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+CnB,SAcM,KAdN;AA9CJ,SAAS,kBAAkB,sBAAqC;AAChE,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,yCAAyC;AAClD,SAAS,eAAe,0BAA0B,iBAAiB,2BAA2B;AAC9F,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,kBAAkB;AAAA,EACvC,IAAI,WAAW,+BAA+B;AAE9C,QAAM,wBAAwB;AAAA,IAC5B,CAAC,kBAAkC;AACjC,iBAAW,MAAM;AACf,0BAAkB,UAAU;AAC5B,YAAI,4BAA4B,eAAe,uBAAuB;AACpE,yBAAe,QAAQ;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,IACA,CAAC,oBAAoB,yBAAyB,iBAAiB;AAAA,EACjE;AAEA,QAAM,oBAAoB,YAAY;AAEtC,QAAM,aAAa,CAAC,oBAAqB,CAAC,iBAAiB,KAAK,IAA2B;AAC3F,SACE,qBAAC,mBACC;AAAA,wBAAC,uBACC;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAa,mCAAmC,UAAU;AAAA,QAC1D,iBAAe,YAAY;AAAA,QAC3B,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,kBAAe,OAAO,YAAY;AAAA;AAAA,IACrC,GACF;AAAA,IACC,eAAe,IAAI,CAAC,kBAAkB;AACrC,YAAM,MAAM,qBAAqB,iBAAiB,EAAE;AACpD,UAAI,CAAC,cAAe,QAAO,oBAAC,yBAAyB,GAAK;AAC1D,YAAM,wBAAwB,GAAG,WAAW,IAAI,aAAa,IAAI,YAAY;AAC7E,YAAM,kCACJ,CAAC,WAAW,kCAAkC,aAAa,MAAM;AACnE,YAAM,oBAAoB,mCAAmC,YAAY;AACzE,YAAM,aAAa,kBAAkB,qBAAqB;AAE1D,YAAM,WAAW,oBAAoB,IAAI;AACzC,YAAM,WAAW;AAAA,QACf,MAAM;AAAA,QACN,iBAAiB,kCAAkC,aAAa;AAAA,QAChE,kBAAkB,GAAG,aAAa;AAAA,QAClC,cAAc,GAAG,aAAa;AAAA,QAC9B,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,iBAAiB,cAAc,YAAY;AAAA,QAC3C,WAAW,oBAAoB,6BAA6B;AAAA,QAC5D,UAAU,oBAAoB,wBAAwB;AAAA,MACxD;AACA,YAAM,cAAc,EAAE,mBAAmB,WAAW;AACpD,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,UAAU,kCAAkC,aAAa,MAAM;AAAA,UAE/D;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,eACE,mCAAmC,UAAU,oBAAoB,mBAAmB,QAAQ;AAAA,cAE9F,UAAU,QAAQ,WAAW,KAAK,kCAAkC,aAAa,MAAM;AAAA,cACvF,SAAS,CAAC,MACR,gCAAgC,eAAe,CAAC;AAAA,cAElD;AAAA,cACA,MAAK;AAAA,cACJ,GAAG;AAAA,cACJ,eAAe;AAAA,cACf,UAAU,YAAY;AAAA,cAErB;AAAA;AAAA,UACH;AAAA;AAAA,QApBK;AAAA,MAqBP;AAAA,IAEJ,CAAC;AAAA,IACD,oBAAC,uBACC;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,YAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,mCAAmC,UAAU;AAAA,QAC1D,UAAU;AAAA,QACV,iBAAe,YAAY;AAAA,QAC3B,MAAK;AAAA,QACL,eAAe;AAAA,QAEf,8BAAC,oBAAiB,OAAO,YAAY;AAAA;AAAA,IACvC,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,sBAAQ;",
   "names": []
 }

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

@@ -1,11 +1,8 @@
 import * as React from "react";
-import { css, styled } from "@elliemae/ds-system";
-import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
-import {
-  DSControlledDateTimePickerName,
-  DSControlledDateTimePickerSlots
-} from "../../../ControlledDateTimePickerDefinitions.js";
+import { Grid } from "@elliemae/ds-grid";
+import { css, styled } from "@elliemae/ds-system";
+import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../../../constants/index.js";
 const focusBorder = css`
   &:after {
     position: absolute;
@@ -139,7 +136,7 @@ const StyledTimePickerWheelWrapper = styled.div`
     border-right: 1px solid ${({ theme }) => theme.colors.neutral[200]};
   }
 `;
-const StyledTimeBtn = styled(DSButtonV2, {
+const StyledTimeBtn = styled(Grid, {
   name: DSControlledDateTimePickerName,
   slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON
 })`
@@ -152,6 +149,10 @@ const StyledTimeBtn = styled(DSButtonV2, {
     background-color: ${hoverBgPerStatus};
   }
 
+  &:focus {
+    outline: none;
+  }
+
   color: ${fontColorPerStatus};
 
   ${({ selected, isCurrentListItem }) => isCurrentListItem && !selected ? focusBorder : ``}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/Styleds.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/indent */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\n\ninterface StyledWheelListItemPropsT {\n  isCurrentListItem?: boolean;\n  selected?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n  showShadow?: boolean;\n  isControllerOnly: boolean;\n}\n\nconst focusBorder = css<{ isDisabled: boolean }>`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n    border-radius: 50%;\n    border: 2px solid ${({ theme, isDisabled }) => (isDisabled ? theme.colors.danger[900] : theme.colors.brand[700])};\n  }\n`;\n\nconst diagonalLine = css<{ isCurrentListItem: boolean; selected: boolean }>`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -1px;\n    height: 1px;\n    width: calc(100% + 2px);\n    transform: rotate(45deg);\n    background-color: ${({ theme, isCurrentListItem, selected }) => {\n      if (selected) return theme.colors.neutral['000'];\n      if (isCurrentListItem) return theme.colors.danger[900];\n      return theme.colors.neutral[500];\n    }};\n  }\n`;\n\nconst fontColorPerStatus = css<{ isCurrentListItem: boolean; selected: boolean; isDisabled: boolean }>`\n  ${({ theme, isDisabled, isCurrentListItem, selected }) => {\n    if (selected) return theme.colors.neutral['000'];\n    if (isDisabled && isCurrentListItem) return theme.colors.danger[900];\n    if (isDisabled) return theme.colors.neutral[500];\n    if (isCurrentListItem) return theme.colors.brand[600];\n    return theme.colors.neutral[800];\n  }};\n`;\n\nconst hoverBgPerStatus = css<{ isDisabled: boolean; selected: boolean }>`\n  ${({ theme, selected, isDisabled }) => {\n    if (isDisabled && selected) return theme.colors.danger[900];\n    if (selected) return theme.colors.brand[700];\n    return theme.colors.neutral['000'];\n  }}\n`;\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['800']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledWheelList = styled.div`\n  width: 100%;\n  height: 100%;\n  margin: auto;\n  padding: 0;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  &:focus-within {\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n`;\n\nexport const StyledTimePickerContainer = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.TIMEWHEEL,\n})<StyledTimePickerContainerT>`\n  display: grid;\n  position: relative;\n  grid-template-columns: 192px;\n  grid-template-rows: 36px 30px auto;\n  grid-template-areas:\n    'TimePickerHead'\n    'TimePickerWheelsLegend'\n    'VerticalWheelWrapper';\n`;\n\nexport const StyledTimePickerHead = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL,\n})`\n  width: 100%;\n  grid-area: TimePickerHead;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n  width: 100%;\n  height: 100%;\n  grid-area: TimePickerWheelsLegend;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div<{ readOnlyStyles?: boolean }>`\n  background-color: ${({ theme, readOnlyStyles }) =>\n    readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n  width: 100%;\n  grid-area: VerticalWheelWrapper;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  grid-template-rows: 100%;\n  & ul:not(:last-child) {\n    position: relative;\n    &:after {\n      content: '';\n      position: absolute;\n      left: 100%;\n      top: 5%;\n      height: 90%;\n      width: 1px;\n      background: ${({ theme }) => theme.colors.neutral['300']};\n    }\n  }\n\n  > *:not(:last-child) {\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledTimeBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})`\n  position: relative;\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n\n  &:hover {\n    background-color: ${hoverBgPerStatus};\n  }\n\n  color: ${fontColorPerStatus};\n\n  ${({ selected, isCurrentListItem }) => (isCurrentListItem && !selected ? focusBorder : ``)}\n\n  ${({ isDisabled }) =>\n    isDisabled\n      ? css`\n          cursor: not-allowed;\n          ${diagonalLine};\n        `\n      : ``}\n\n  ${({ theme, selected, isDisabled }) =>\n    selected\n      ? css`\n    font-weight: ${theme.fontWeights.semibold};\n    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};\n    `\n      : ``};\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  ${({ theme, readOnly, selected }) => {\n    if (readOnly && selected) {\n      return `\n        background-color:  ${theme.colors.neutral['500']};\n        font-weight: semibold;\n        color: ${theme.colors.neutral['000']};\n        &:before {\n          background-color: ${theme.colors.neutral['000']};\n        }\n        :hover {\n          background-color: ${theme.colors.neutral['700']};\n        }\n        :focus {\n          background-color: ${theme.colors.neutral['700']};\n        }\n      `;\n    }\n    if (readOnly && !selected) {\n      return `\n        :hover {\n          background-color: ${theme.colors.neutral['100']};\n        }\n          `;\n    }\n    return ``;\n  }}\n`;\n\nexport const StyledWheelListItem = styled.div<StyledWheelListItemPropsT>`\n  margin: auto;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})<{ readOnlyStyles?: boolean }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  padding: ${({ theme }) => theme.space.xxs2};\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 */\n/* eslint-disable @typescript-eslint/indent */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\ninterface StyledWheelListItemPropsT {\n  isCurrentListItem?: boolean;\n  selected?: boolean;\n  isDisabled?: boolean;\n  readOnly?: boolean;\n  applyAriaDisabled?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n  showShadow?: boolean;\n  isControllerOnly: boolean;\n}\n\nconst focusBorder = css<{ isDisabled?: boolean }>`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n    border-radius: 50%;\n    border: 2px solid ${({ theme, isDisabled }) => (isDisabled ? theme.colors.danger[900] : theme.colors.brand[700])};\n  }\n`;\n\nconst diagonalLine = css<{ isCurrentListItem?: boolean; selected?: boolean }>`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -1px;\n    height: 1px;\n    width: calc(100% + 2px);\n    transform: rotate(45deg);\n    background-color: ${({ theme, isCurrentListItem, selected }) => {\n      if (selected) return theme.colors.neutral['000'];\n      if (isCurrentListItem) return theme.colors.danger[900];\n      return theme.colors.neutral[500];\n    }};\n  }\n`;\n\nconst fontColorPerStatus = css<{ isCurrentListItem?: boolean; selected?: boolean; isDisabled?: boolean }>`\n  ${({ theme, isDisabled, isCurrentListItem, selected }) => {\n    if (selected) return theme.colors.neutral['000'];\n    if (isDisabled && isCurrentListItem) return theme.colors.danger[900];\n    if (isDisabled) return theme.colors.neutral[500];\n    if (isCurrentListItem) return theme.colors.brand[600];\n    return theme.colors.neutral[800];\n  }};\n`;\n\nconst hoverBgPerStatus = css<{ isDisabled?: boolean; selected?: boolean }>`\n  ${({ theme, selected, isDisabled }) => {\n    if (isDisabled && selected) return theme.colors.danger[900];\n    if (selected) return theme.colors.brand[700];\n    return theme.colors.neutral['000'];\n  }}\n`;\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['800']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledWheelList = styled.div`\n  width: 100%;\n  height: 100%;\n  margin: auto;\n  padding: 0;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  &:focus-within {\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      box-shadow: 0 0 2px ${({ theme }) => theme.colors.brand[700]};\n    }\n  }\n`;\n\nexport const StyledTimePickerContainer = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.TIMEWHEEL,\n})<StyledTimePickerContainerT>`\n  display: grid;\n  position: relative;\n  grid-template-columns: 192px;\n  grid-template-rows: 36px 30px auto;\n  grid-template-areas:\n    'TimePickerHead'\n    'TimePickerWheelsLegend'\n    'VerticalWheelWrapper';\n`;\n\nexport const StyledTimePickerHead = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.HEADER_LABEL,\n})`\n  width: 100%;\n  grid-area: TimePickerHead;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelsLegend = styled.div`\n  width: 100%;\n  height: 100%;\n  grid-area: TimePickerWheelsLegend;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledTimePickerWheelWrapper = styled.div<{ readOnlyStyles?: boolean }>`\n  background-color: ${({ theme, readOnlyStyles }) =>\n    readOnlyStyles ? theme.colors.neutral['050'] : theme.colors.neutral['000']};\n  width: 100%;\n  grid-area: VerticalWheelWrapper;\n  display: grid;\n  grid-template-columns: ${({ theme }) => theme.space.xl} ${({ theme }) => theme.space.xl} ${({ theme }) =>\n      theme.space.xl};\n  grid-template-rows: 100%;\n  & ul:not(:last-child) {\n    position: relative;\n    &:after {\n      content: '';\n      position: absolute;\n      left: 100%;\n      top: 5%;\n      height: 90%;\n      width: 1px;\n      background: ${({ theme }) => theme.colors.neutral['300']};\n    }\n  }\n\n  > *:not(:last-child) {\n    border-right: 1px solid ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledTimeBtn = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})<StyledWheelListItemPropsT>`\n  position: relative;\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n\n  &:hover {\n    background-color: ${hoverBgPerStatus};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  color: ${fontColorPerStatus};\n\n  ${({ selected, isCurrentListItem }) => (isCurrentListItem && !selected ? focusBorder : ``)}\n\n  ${({ isDisabled }) =>\n    isDisabled\n      ? css`\n          cursor: not-allowed;\n          ${diagonalLine};\n        `\n      : ``}\n\n  ${({ theme, selected, isDisabled }) =>\n    selected\n      ? css`\n    font-weight: ${theme.fontWeights.semibold};\n    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};\n    `\n      : ``};\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  ${({ theme, readOnly, selected }) => {\n    if (readOnly && selected) {\n      return `\n        background-color:  ${theme.colors.neutral['500']};\n        font-weight: semibold;\n        color: ${theme.colors.neutral['000']};\n        &:before {\n          background-color: ${theme.colors.neutral['000']};\n        }\n        :hover {\n          background-color: ${theme.colors.neutral['700']};\n        }\n        :focus {\n          background-color: ${theme.colors.neutral['700']};\n        }\n      `;\n    }\n    if (readOnly && !selected) {\n      return `\n        :hover {\n          background-color: ${theme.colors.neutral['100']};\n        }\n          `;\n    }\n    return ``;\n  }}\n`;\n\nexport const StyledWheelListItem = styled.div<StyledWheelListItemPropsT>`\n  margin: auto;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})<{ readOnlyStyles?: boolean }>`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  padding: ${({ theme }) => theme.space.xxs2};\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": []
 }