npm - @elliemae/ds-form-date-time-picker - Versions diffs - 3.62.1 → 3.70.0-alpha.9 - Mend

@elliemae/ds-form-date-time-picker 3.62.1 → 3.70.0-alpha.9

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

Files changed (114) hide show

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js CHANGED Viewed

@@ -33,30 +33,42 @@ __export(CalendarWithTimeWheelWrapper_exports, {
 module.exports = __toCommonJS(CalendarWithTimeWheelWrapper_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
-var import_ds_system = require("@elliemae/ds-system");
 var import_react = require("react");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+var import_ds_system = require("@elliemae/ds-system");
 var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
 var import_constants = require("../../../constants/index.js");
 var import_CalendarWithTimeWheelContent = require("./CalendarWithTimeWheelContent.js");
 var import_CalendarWithTimeWheelContext = require("./CalendarWithTimeWheelContext.js");
-const StyledPopper = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS, {
+const StyledFloatingWrapper = (0, import_ds_system.styled)(import_ds_floating_context.FloatingWrapper, {
   name: import_constants.DSControlledDateTimePickerName,
   slot: import_constants.DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL
 })``;
 const CalendarWithTimeWheelWrapper = () => {
   const { referenceElement, closeCalendar, isControllerOnly } = (0, import_react.useContext)(import_CalendarWithTimeWheelContext.CalendarWithTimeWheelContext);
   const { getProps } = (0, import_react.useContext)(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const {
+    refs,
+    floatingStyles,
+    context,
+    isOpen: isFloatingOpen
+  } = (0, import_ds_floating_context.useFloatingContext)({
+    externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
+    externalReferenceElement: referenceElement,
+    withoutAnimation: true,
+    customOffset: [0, 0],
+    onClickOutside: isControllerOnly ? void 0 : closeCalendar
+  });
   if (isControllerOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarWithTimeWheelContent.CalendarWithTimeWheelContent, {});
   if (!referenceElement) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    StyledPopper,
+    StyledFloatingWrapper,
     {
-      showPopover: true,
+      innerRef: refs.setFloating,
+      isOpen: isFloatingOpen,
+      floatingStyles,
+      context,
       "data-testid": import_constants.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL,
-      referenceElement,
-      withoutArrow: true,
-      onClickOutside: closeCalendar,
       getOwnerProps: getProps,
       "aria-label": "calendar header",
       role: "dialog",

package/dist/cjs/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBQ;AAnB/B,yBAA2B;AAC3B,uBAAuB;AACvB,mBAA2B;AAC3B,yCAAgD;AAChD,uBAIO;AACP,0CAA6C;AAC7C,0CAA6C;AAC7C,MAAM,mBAAe,yBAAO,+BAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,iDAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,QAAI,yBAAW,gEAA4B;AACrG,QAAM,EAAE,SAAS,QAAI,yBAAW,kEAA+B;AAC/D,MAAI,iBAAkB,QAAO,4CAAC,oEAA6B;AAC3D,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,oDAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,sDAAC,oEAA6B;AAAA;AAAA,EAChC;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\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';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\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\n  const {\n    refs,\n    floatingStyles,\n    context,\n    isOpen: isFloatingOpen,\n  } = useFloatingContext({\n    externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n    externalReferenceElement: referenceElement,\n    withoutAnimation: true,\n    customOffset: [0, 0],\n    onClickOutside: isControllerOnly ? undefined : closeCalendar,\n  });\n\n  if (isControllerOnly) return <CalendarWithTimeWheelContent />;\n  if (!referenceElement) return null;\n\n  return (\n    <StyledFloatingWrapper\n      innerRef={refs.setFloating}\n      isOpen={isFloatingOpen}\n      floatingStyles={floatingStyles}\n      context={context}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.CALENDAR_TIMEWHEEL}\n      getOwnerProps={getProps}\n      aria-label=\"calendar header\"\n      role=\"dialog\"\n    >\n      <CalendarWithTimeWheelContent />\n    </StyledFloatingWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCQ;AAlC/B,mBAAkC;AAClC,iCAAoD;AACpD,uBAAuB;AACvB,yCAAgD;AAChD,uBAIO;AACP,0CAA6C;AAC7C,0CAA6C;AAE7C,MAAM,4BAAwB,yBAAO,4CAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iDAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,kBAAkB,eAAe,iBAAiB,QAAI,yBAAW,gEAA4B;AACrG,QAAM,EAAE,SAAS,QAAI,yBAAW,kEAA+B;AAE/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,4CAAC,oEAA6B;AAC3D,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,oDAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,sDAAC,oEAA6B;AAAA;AAAA,EAChC;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js CHANGED Viewed

@@ -97,8 +97,8 @@ const HoursList = () => {
         onClick: handlePrevHour,
         innerRef: prevHourBtnRef,
         "data-testid": import_constants.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_HOUR,
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         getOwnerProps: getProps,
         tabIndex: -1,
         type: "button",
@@ -158,8 +158,8 @@ const HoursList = () => {
         innerRef: nextHourBtnRef,
         tabIndex: -1,
         "data-testid": import_constants.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_HOUR,
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         getOwnerProps: getProps,
         type: "button",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: arrowColor })

package/dist/cjs/parts/Pickers/TimeWheel/HoursList.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/HoursList.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } 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    trackFocusTimewheelCurrHour,\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 [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrHour();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrHour]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur}>\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          // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n          // Kept here as double safety and explicit documentation of intent.\n          aria-disabled={readOnly || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled || readOnly}\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 isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isNotAValidSelection = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n        const isSelected = hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const btnProps = {\n          role: 'spinbutton',\n          ...(isSelected && {\n            'aria-valuenow': convertToPositiveNumberIfPossible(hourString),\n            'aria-valuetext': `${hourString} hours`,\n          }),\n          'aria-valuemin': 1,\n          'aria-valuemax': 12,\n          'aria-label': `${hourString} hours`,\n          'aria-disabled': readOnly || applyAriaDisabled,\n          'aria-invalid': isNotAValidSelection,\n          'aria-readonly': readOnly || applyAriaDisabled,\n          onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isTheItemVisuallyInTheCenter ? handleCurrYearRef : undefined,\n        };\n        return (\n          <StyledWheelListItem key={key}>\n            <StyledTimeBtn\n              $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n              $isNotAValidSelection={isNotAValidSelection}\n              $selected={isSelected}\n              $isUnset={!hours}\n              $readOnly={readOnly || applyAriaDisabled}\n              $isFocusedWheel={isFocusedWheel}\n              autoFocus={autoFocusHourTimeWheel && isTheItemVisuallyInTheCenter}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_HOUR' : 'HOUR']\n              }\n              onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n                handleTimeWheelBtnChangeHours(hourString, e)\n              }\n              tabIndex={tabIndex}\n              {...btnProps}\n              getOwnerProps={getProps}\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          // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n          // Kept here as double safety and explicit documentation of intent.\n          aria-disabled={readOnly || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled || readOnly}\n          getOwnerProps={getProps}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } 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    trackFocusTimewheelCurrHour,\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 [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrHour();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrHour]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur}>\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\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 isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || hours === hourString;\n        const isNotAValidSelection = getIsDisabledTime(currHourTimeString);\n        const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n        const isSelected = hours.length === 2 && convertToPositiveNumberIfPossible(hourString) === currHourNum;\n        const btnProps = {\n          role: 'spinbutton',\n          ...(isSelected && {\n            'aria-valuenow': convertToPositiveNumberIfPossible(hourString),\n            'aria-valuetext': `${hourString} hours`,\n          }),\n          'aria-valuemin': 1,\n          'aria-valuemax': 12,\n          'aria-label': `${hourString} hours`,\n          'aria-disabled': readOnly || applyAriaDisabled,\n          'aria-invalid': isNotAValidSelection,\n          'aria-readonly': readOnly || applyAriaDisabled,\n          onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrHourOnKeyDown : undefined,\n          innerRef: isTheItemVisuallyInTheCenter ? handleCurrYearRef : undefined,\n        };\n        return (\n          <StyledWheelListItem key={key}>\n            <StyledTimeBtn\n              $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n              $isNotAValidSelection={isNotAValidSelection}\n              $selected={isSelected}\n              $isUnset={!hours}\n              $readOnly={readOnly || applyAriaDisabled}\n              $isFocusedWheel={isFocusedWheel}\n              autoFocus={autoFocusHourTimeWheel && isTheItemVisuallyInTheCenter}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_HOUR' : 'HOUR']\n              }\n              onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) =>\n                handleTimeWheelBtnChangeHours(hourString, e)\n              }\n              tabIndex={tabIndex}\n              {...btnProps}\n              getOwnerProps={getProps}\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          getOwnerProps={getProps}\n          type=\"button\"\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js CHANGED Viewed

@@ -136,8 +136,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
         innerRef: prevMeridiemBtnRef,
         tabIndex: -1,
         type: "button",
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         getOwnerProps: getProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallUp, { color: arrowColor })
       }
@@ -194,8 +194,8 @@ const MeridiemVisualLayer = ({ isFocusedWheel }) => {
         innerRef: nextMeridiemBtnRef,
         tabIndex: -1,
         type: "button",
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         getOwnerProps: getProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: arrowColor })
       }

package/dist/cjs/parts/Pickers/TimeWheel/MeridiemList.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/MeridiemList.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } 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\nconst srOnlyStyle: React.CSSProperties = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  margin: '-1px',\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n  pointerEvents: 'none',\n};\n\n/**\n * A11y layer: the true semantic contract for screen readers and keyboard users.\n * It is visually hidden and pointer-event-free \u2014 it exists solely to provide a\n * valid, focused listbox with two options that AT can read and keyboard can operate.\n * The visual layer below is fully aria-hidden; this layer is the single source of\n * truth for all assistive technology interaction.\n */\nconst MeridiemA11yLayer = (): JSX.Element => {\n  const { currMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    currMeridiemBtnRef,\n    meridiem,\n    instanceUid,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const amId = `${instanceUid}-meridiem-am`;\n  const pmId = `${instanceUid}-meridiem-pm`;\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const isCurrentMeridiemInvalid = isAmCurrent\n    ? getIsDisabledTime(`${hourMinuteString} AM`)\n    : getIsDisabledTime(`${hourMinuteString} PM`);\n\n  const handleListboxRef = useCallback(\n    (listboxDomNode: HTMLDivElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = listboxDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          listboxDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n\n  return (\n    <div\n      role=\"listbox\"\n      aria-label=\"Meridiem\"\n      aria-orientation=\"vertical\"\n      aria-disabled={readOnly || applyAriaDisabled}\n      aria-invalid={isCurrentMeridiemInvalid}\n      aria-activedescendant={isAmCurrent ? amId : pmId}\n      tabIndex={0}\n      onKeyDown={handleCurrMeridiemOnKeyDown}\n      ref={handleListboxRef}\n      style={srOnlyStyle}\n      data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MERIDIEM}\n    >\n      <div role=\"option\" id={amId} aria-selected={meridiem === 'AM'}>\n        AM\n      </div>\n      <div role=\"option\" id={pmId} aria-selected={meridiem === 'PM'}>\n        PM\n      </div>\n    </div>\n  );\n};\n\n/**\n * Visual layer: the presentation surface that mouse users see and interact with.\n * All elements are aria-hidden \u2014 AT never reaches this layer. The chevron buttons\n * and AM/PM items are click-only affordances; on click they update state and redirect\n * focus to the a11y layer above so keyboard can continue from there. No ARIA roles,\n * labels, or keyboard handlers live here.\n */\nconst MeridiemVisualLayer = ({ isFocusedWheel }: { isFocusedWheel: boolean }): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    meridiem,\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 isNotAValidAm = getIsDisabledTime(`${hourMinuteString} AM`);\n  const isNotAValidPm = getIsDisabledTime(`${hourMinuteString} PM`);\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n\n  return (\n    <>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"set am meridiem\"\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            currMeridiemBtnRef.current?.focus();\n          }}\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n          // Kept here as double safety and explicit documentation of intent.\n          aria-disabled={readOnly || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled || readOnly}\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem aria-hidden=\"true\" /> : null}\n      <StyledWheelListItem aria-hidden=\"true\">\n        <StyledTimeBtn\n          $isTheItemVisuallyInTheCenter={isAmCurrent}\n          $isNotAValidSelection={isNotAValidAm}\n          $selected={isAmCurrent && !!meridiem}\n          $isUnset={!meridiem}\n          $isFocusedWheel={isFocusedWheel}\n          data-testid={\n            ControlledDateTimePickerDatatestid.TIMEWHEEL[\n              isAmCurrent ? 'CURRENT_MERIDIEM_VISUAL_ELEMENT' : 'MERIDIEM_VISUAL_ELEMENT'\n            ]\n          }\n          onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n            handleTimeWheelBtnChangeMeridiem('AM', e);\n            currMeridiemBtnRef.current?.focus();\n          }}\n          getOwnerProps={getProps}\n          $readOnly={readOnly || applyAriaDisabled}\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem aria-hidden=\"true\">\n        <StyledTimeBtn\n          $isTheItemVisuallyInTheCenter={isPmCurrent}\n          $selected={isPmCurrent && !!meridiem}\n          $isNotAValidSelection={isNotAValidPm}\n          $isUnset={!meridiem}\n          $isFocusedWheel={isFocusedWheel}\n          data-testid={\n            ControlledDateTimePickerDatatestid.TIMEWHEEL[\n              isPmCurrent ? 'CURRENT_MERIDIEM_VISUAL_ELEMENT' : 'MERIDIEM_VISUAL_ELEMENT'\n            ]\n          }\n          onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n            handleTimeWheelBtnChangeMeridiem('PM', e);\n            currMeridiemBtnRef.current?.focus();\n          }}\n          getOwnerProps={getProps}\n          $readOnly={readOnly || applyAriaDisabled}\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem aria-hidden=\"true\" /> : null}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"set pm meridiem\"\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            currMeridiemBtnRef.current?.focus();\n          }}\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n          // Kept here as double safety and explicit documentation of intent.\n          aria-disabled={readOnly || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled || readOnly}\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </>\n  );\n};\n\nexport const MeridiemList = (): JSX.Element => {\n  const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n  const { trackFocusTimewheelCurrMeridiem } = useContext(ControlledDateTimePickerContext);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrMeridiem();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrMeridiem]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur}>\n      <MeridiemA11yLayer />\n      <MeridiemVisualLayer isFocusedWheel={isFocusedWheel} />\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } 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\nconst srOnlyStyle: React.CSSProperties = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  margin: '-1px',\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n  pointerEvents: 'none',\n};\n\n/**\n * A11y layer: the true semantic contract for screen readers and keyboard users.\n * It is visually hidden and pointer-event-free \u2014 it exists solely to provide a\n * valid, focused listbox with two options that AT can read and keyboard can operate.\n * The visual layer below is fully aria-hidden; this layer is the single source of\n * truth for all assistive technology interaction.\n */\nconst MeridiemA11yLayer = (): JSX.Element => {\n  const { currMeridiem, handleCurrMeridiemOnKeyDown } = useContext(TimeWheelContext);\n  const {\n    currMeridiemBtnRef,\n    meridiem,\n    instanceUid,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    props: { readOnly, applyAriaDisabled },\n  } = useContext(ControlledDateTimePickerContext);\n\n  const isAmCurrent = !currMeridiem || currMeridiem === 'AM';\n  const amId = `${instanceUid}-meridiem-am`;\n  const pmId = `${instanceUid}-meridiem-pm`;\n  const hourMinuteString = `${hours || '01'}:${minutes || '00'}`;\n  const isCurrentMeridiemInvalid = isAmCurrent\n    ? getIsDisabledTime(`${hourMinuteString} AM`)\n    : getIsDisabledTime(`${hourMinuteString} PM`);\n\n  const handleListboxRef = useCallback(\n    (listboxDomNode: HTMLDivElement) => {\n      setTimeout(() => {\n        currMeridiemBtnRef.current = listboxDomNode;\n        if (latestInteractionRegion === 'timewheel' && currFocusDescriber === 'timewheel-curr-meridiem')\n          listboxDomNode?.focus?.();\n      });\n    },\n    [currFocusDescriber, latestInteractionRegion, currMeridiemBtnRef],\n  );\n\n  return (\n    <div\n      role=\"listbox\"\n      aria-label=\"Meridiem\"\n      aria-orientation=\"vertical\"\n      aria-disabled={readOnly || applyAriaDisabled}\n      aria-invalid={isCurrentMeridiemInvalid}\n      aria-activedescendant={isAmCurrent ? amId : pmId}\n      tabIndex={0}\n      onKeyDown={handleCurrMeridiemOnKeyDown}\n      ref={handleListboxRef}\n      style={srOnlyStyle}\n      data-testid={ControlledDateTimePickerDatatestid.TIMEWHEEL.CURRENT_MERIDIEM}\n    >\n      <div role=\"option\" id={amId} aria-selected={meridiem === 'AM'}>\n        AM\n      </div>\n      <div role=\"option\" id={pmId} aria-selected={meridiem === 'PM'}>\n        PM\n      </div>\n    </div>\n  );\n};\n\n/**\n * Visual layer: the presentation surface that mouse users see and interact with.\n * All elements are aria-hidden \u2014 AT never reaches this layer. The chevron buttons\n * and AM/PM items are click-only affordances; on click they update state and redirect\n * focus to the a11y layer above so keyboard can continue from there. No ARIA roles,\n * labels, or keyboard handlers live here.\n */\nconst MeridiemVisualLayer = ({ isFocusedWheel }: { isFocusedWheel: boolean }): JSX.Element => {\n  const { currMeridiem, handleTimeWheelBtnChangeMeridiem } = useContext(TimeWheelContext);\n  const {\n    prevMeridiemBtnRef,\n    currMeridiemBtnRef,\n    nextMeridiemBtnRef,\n    getIsDisabledTime,\n    hours,\n    minutes,\n    meridiem,\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 isNotAValidAm = getIsDisabledTime(`${hourMinuteString} AM`);\n  const isNotAValidPm = getIsDisabledTime(`${hourMinuteString} PM`);\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n\n  return (\n    <>\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"set am meridiem\"\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            currMeridiemBtnRef.current?.focus();\n          }}\n          innerRef={prevMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallUp color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'AM' || currMeridiem === '' ? <StyledWheelListItem aria-hidden=\"true\" /> : null}\n      <StyledWheelListItem aria-hidden=\"true\">\n        <StyledTimeBtn\n          $isTheItemVisuallyInTheCenter={isAmCurrent}\n          $isNotAValidSelection={isNotAValidAm}\n          $selected={isAmCurrent && !!meridiem}\n          $isUnset={!meridiem}\n          $isFocusedWheel={isFocusedWheel}\n          data-testid={\n            ControlledDateTimePickerDatatestid.TIMEWHEEL[\n              isAmCurrent ? 'CURRENT_MERIDIEM_VISUAL_ELEMENT' : 'MERIDIEM_VISUAL_ELEMENT'\n            ]\n          }\n          onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n            handleTimeWheelBtnChangeMeridiem('AM', e);\n            currMeridiemBtnRef.current?.focus();\n          }}\n          getOwnerProps={getProps}\n          $readOnly={readOnly || applyAriaDisabled}\n        >\n          AM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      <StyledWheelListItem aria-hidden=\"true\">\n        <StyledTimeBtn\n          $isTheItemVisuallyInTheCenter={isPmCurrent}\n          $selected={isPmCurrent && !!meridiem}\n          $isNotAValidSelection={isNotAValidPm}\n          $isUnset={!meridiem}\n          $isFocusedWheel={isFocusedWheel}\n          data-testid={\n            ControlledDateTimePickerDatatestid.TIMEWHEEL[\n              isPmCurrent ? 'CURRENT_MERIDIEM_VISUAL_ELEMENT' : 'MERIDIEM_VISUAL_ELEMENT'\n            ]\n          }\n          onClick={(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n            handleTimeWheelBtnChangeMeridiem('PM', e);\n            currMeridiemBtnRef.current?.focus();\n          }}\n          getOwnerProps={getProps}\n          $readOnly={readOnly || applyAriaDisabled}\n        >\n          PM\n        </StyledTimeBtn>\n      </StyledWheelListItem>\n      {currMeridiem === 'PM' ? <StyledWheelListItem aria-hidden=\"true\" /> : null}\n      <StyledWheelListItem>\n        <StyledWheelChangeTimeBtn\n          aria-label=\"set pm meridiem\"\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            currMeridiemBtnRef.current?.focus();\n          }}\n          innerRef={nextMeridiemBtnRef}\n          tabIndex={-1}\n          type=\"button\"\n          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </>\n  );\n};\n\nexport const MeridiemList = (): JSX.Element => {\n  const [isFocusedWheel, setIsFocusedWheel] = useState(false);\n  const { trackFocusTimewheelCurrMeridiem } = useContext(ControlledDateTimePickerContext);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrMeridiem();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrMeridiem]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur}>\n      <MeridiemA11yLayer />\n      <MeridiemVisualLayer isFocusedWheel={isFocusedWheel} />\n    </StyledWheelList>\n  );\n};\n\nexport default MeridiemList;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js CHANGED Viewed

@@ -98,8 +98,8 @@ const MinutesList = () => {
         innerRef: prevMinutesBtnRef,
         tabIndex: -1,
         "data-testid": import_constants.ControlledDateTimePickerDatatestid.TIMEWHEEL.PREV_MINUTE,
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         type: "button",
         getOwnerProps: getProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallUp, { color: arrowColor })
@@ -158,8 +158,8 @@ const MinutesList = () => {
         innerRef: nextMinutesBtnRef,
         "data-testid": import_constants.ControlledDateTimePickerDatatestid.TIMEWHEEL.NEXT_MINUTE,
         tabIndex: -1,
-        "aria-disabled": readOnly || applyAriaDisabled,
-        applyAriaDisabled: applyAriaDisabled || readOnly,
+        applyAriaDisabled,
+        readOnly,
         type: "button",
         getOwnerProps: getProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, { color: arrowColor })

package/dist/cjs/parts/Pickers/TimeWheel/MinutesList.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/MinutesList.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } 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    trackFocusTimewheelCurrMinute,\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 [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrMinute();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrMinute]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur}>\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          // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n          // Kept here as double safety and explicit documentation of intent.\n          aria-disabled={readOnly || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled || readOnly}\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 isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isNotAValidSelection = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n        const isSelected = minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const btnProps = {\n          role: 'spinbutton',\n          ...(isSelected && {\n            'aria-valuenow': convertToPositiveNumberIfPossible(minutesString),\n            'aria-valuetext': `${minutesString} minutes`,\n          }),\n          'aria-label': `${minutesString} minutes`,\n          'aria-valuemin': 0,\n          'aria-valuemax': 59,\n          'aria-disabled': readOnly || applyAriaDisabled,\n          'aria-invalid': isNotAValidSelection,\n          'aria-readonly': readOnly || applyAriaDisabled,\n          onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isTheItemVisuallyInTheCenter ? handleCurrMeridiemRef : undefined,\n        };\n        return (\n          <StyledWheelListItem key={key}>\n            <StyledTimeBtn\n              $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n              $isNotAValidSelection={isNotAValidSelection}\n              $selected={isSelected}\n              $isUnset={!minutes}\n              $readOnly={readOnly || applyAriaDisabled}\n              $isFocusedWheel={isFocusedWheel}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\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            >\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          // DSButtonV2 internally computes aria-disabled={applyAriaDisabled || disabled} and overrides any explicit prop.\n          // Kept here as double safety and explicit documentation of intent.\n          aria-disabled={readOnly || applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled || readOnly}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { ChevronSmallDown, ChevronSmallUp, type SvgIconT } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext, useState } 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    trackFocusTimewheelCurrMinute,\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 [isFocusedWheel, setIsFocusedWheel] = useState(false);\n\n  const handleWheelFocus = useCallback(() => {\n    setIsFocusedWheel(true);\n    trackFocusTimewheelCurrMinute();\n  }, [setIsFocusedWheel, trackFocusTimewheelCurrMinute]);\n\n  const handleWheelBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsFocusedWheel(false);\n    },\n    [setIsFocusedWheel],\n  );\n\n  const hasDisabledStyles = readOnly || applyAriaDisabled;\n\n  const arrowColor = !hasDisabledStyles ? (['brand-primary', '700'] as SvgIconT.ColorType) : undefined;\n  return (\n    <StyledWheelList onFocus={handleWheelFocus} onBlur={handleWheelBlur}>\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\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 isTheItemVisuallyInTheCenter = isEmptyCurrValueCurrentListItem || minutes === minutesString;\n        const isNotAValidSelection = getIsDisabledTime(currMinutesTimeString);\n\n        const tabIndex = isTheItemVisuallyInTheCenter ? 0 : -1;\n        const isSelected = minutes.length === 2 && convertToPositiveNumberIfPossible(minutesString) === currMinuteNum;\n        const btnProps = {\n          role: 'spinbutton',\n          ...(isSelected && {\n            'aria-valuenow': convertToPositiveNumberIfPossible(minutesString),\n            'aria-valuetext': `${minutesString} minutes`,\n          }),\n          'aria-label': `${minutesString} minutes`,\n          'aria-valuemin': 0,\n          'aria-valuemax': 59,\n          'aria-disabled': readOnly || applyAriaDisabled,\n          'aria-invalid': isNotAValidSelection,\n          'aria-readonly': readOnly || applyAriaDisabled,\n          onKeyDown: isTheItemVisuallyInTheCenter ? handleCurrMinutesOnKeyDown : undefined,\n          innerRef: isTheItemVisuallyInTheCenter ? handleCurrMeridiemRef : undefined,\n        };\n        return (\n          <StyledWheelListItem key={key}>\n            <StyledTimeBtn\n              $isTheItemVisuallyInTheCenter={isTheItemVisuallyInTheCenter}\n              $isNotAValidSelection={isNotAValidSelection}\n              $selected={isSelected}\n              $isUnset={!minutes}\n              $readOnly={readOnly || applyAriaDisabled}\n              $isFocusedWheel={isFocusedWheel}\n              data-testid={\n                ControlledDateTimePickerDatatestid.TIMEWHEEL[isTheItemVisuallyInTheCenter ? 'CURRENT_MINUTE' : 'MINUTE']\n              }\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            >\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          applyAriaDisabled={applyAriaDisabled}\n          readOnly={readOnly}\n          type=\"button\"\n          getOwnerProps={getProps}\n        >\n          <ChevronSmallDown color={arrowColor} />\n        </StyledWheelChangeTimeBtn>\n      </StyledWheelListItem>\n    </StyledWheelList>\n  );\n};\n\nexport default MinutesList;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/Styleds.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/Styleds.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable prefer-destructuring */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\ninterface StyledWheelListItemPropsT {\n  $isTheItemVisuallyInTheCenter?: boolean;\n  $selected?: boolean;\n  $isNotAValidSelection?: boolean;\n  $readOnly?: boolean;\n  $isUnset?: boolean;\n  $isFocusedWheel?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n  showShadow?: boolean;\n  isControllerOnly: boolean;\n}\n\n// Focus ring \u2014 always brand-700 regardless of validity or readOnly state.\n// Only rendered for the visually centred item when the wheel is focused and the item is not selected.\nconst focusBorder = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $isTheItemVisuallyInTheCenter, $selected, $isFocusedWheel } = props;\n  if ($isTheItemVisuallyInTheCenter && !$selected && $isFocusedWheel)\n    return css<StyledWheelListItemPropsT>`\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.colors.brand[700]};\n      }\n    `;\n  return css``;\n};\n\n// Diagonal line for invalid items. Colour is neutral at rest in all states \u2014\n// the focus ring (::after) is the sole blue/brand focus signal.\nconst diagonalLine = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $isNotAValidSelection, $readOnly } = props;\n  if (!$isNotAValidSelection) return css``;\n\n  let beforeBgColor = theme.colors.neutral[500]; // idle not-selected\n  if ($readOnly && !$selected) beforeBgColor = theme.colors.neutral[700]; // readOnly not-selected\n  if ($selected) beforeBgColor = theme.colors.neutral['000']; // selected always white\n\n  return css<StyledWheelListItemPropsT>`\n    cursor: not-allowed;\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: ${beforeBgColor};\n    }\n  `;\n};\n\n// Text colour. On focus the invalid case resolves to brand-700 (not danger-900) for\n// consistency with the universal blue focus ring decision.\nconst fontColor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $readOnly, $isNotAValidSelection, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n  let color = theme.colors.neutral[700]; // default\n  if ($selected) color = theme.colors.neutral['000']; // selected always white\n\n  // For items that can't receive :focus (meridiem visual layer), drive focused-center colour via props.\n  // Hours/minutes also benefit from this \u2014 :focus below applies the same value.\n  if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && !$selected && !$readOnly) {\n    color = theme.colors.brand[700]; // always brand, matches the blue focus ring\n  }\n\n  // Hover: valid not-selected not-readOnly \u2192 brand-700; all other cases \u2192 no change\n  const hoverColor = !$selected && !$readOnly && !$isNotAValidSelection ? theme.colors.brand[700] : '';\n\n  // Focus (:focus fires on hours/minutes; meridiem relies on the prop-driven path above)\n  // Matches focus ring: always brand when interactive, no change when readOnly or selected\n  const focusColor = !$selected && !$readOnly ? theme.colors.brand[700] : '';\n\n  return css<StyledWheelListItemPropsT>`\n    color: ${color};\n    &:hover {\n      color: ${hoverColor};\n    }\n    &:focus {\n      color: ${focusColor};\n    }\n  `;\n};\n\n// Background colours at rest and on hover.\n// Hover matrix (readOnly always wins):\n//   readOnly  \u2192 selected: neutral-700 | not-selected: neutral-100\n//   invalid   \u2192 selected: danger-950  | not-selected: danger-200 hardcoded to #fffcfc due to contrast failure of danger-200 token\n//   valid     \u2192 selected: brand-800   | not-selected: brand-100\nconst btnBgColorPerStatus = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $isNotAValidSelection, $readOnly, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n  // Rest background: only selected items have a non-transparent background.\n  let bgColor = '';\n  if ($selected) {\n    bgColor = theme.colors.brand[600];\n    if ($isNotAValidSelection) bgColor = theme.colors.danger[900]; // invalid selected: red\n    if ($readOnly) bgColor = theme.colors.neutral[500]; // readOnly always wins: grey\n  }\n\n  // When the wheel column is active (focused), drive the selected centre item to the\n  // same colour as its hover state \u2014 :hover won't fire on keyboard navigation and\n  // meridiem visual items can't receive :focus at all.\n  if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && $selected) {\n    if ($readOnly) bgColor = theme.colors.neutral[700];\n    else if ($isNotAValidSelection) bgColor = theme.colors.danger[950];\n    else bgColor = theme.colors.brand[800];\n  }\n\n  // Hover background \u2014 new spec, clean if/else, no empty-string leaks.\n  let hoverBgColor: string;\n  if ($readOnly) {\n    hoverBgColor = $selected ? theme.colors.neutral[700] : theme.colors.neutral[100];\n  } else if ($isNotAValidSelection) {\n    // TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n    // against common dimsum color combinations. Hardcoded until the theme token is fixed.\n    hoverBgColor = $selected ? theme.colors.danger[950] : '#fffcfc'; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n  } else {\n    hoverBgColor = $selected ? theme.colors.brand[800] : theme.colors.brand[100];\n  }\n\n  return css`\n    background-color: ${bgColor};\n    &:hover {\n      background-color: ${hoverBgColor};\n    }\n  `;\n};\n\nconst cursor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const cursorStyle = props.$readOnly || props.$isNotAValidSelection ? 'not-allowed' : 'pointer';\n  return css`\n    cursor: ${cursorStyle};\n  `;\n};\n\n// Font weight: selected \u2192 semibold at rest (no hover override needed, it is already semibold).\n// Not selected \u2192 semibold on hover only.\nconst fontWeight = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected } = props;\n  if ($selected) {\n    return css`\n      font-weight: ${theme.fontWeights.semibold};\n    `;\n  }\n  return css`\n    &:hover {\n      font-weight: ${theme.fontWeights.semibold};\n    }\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  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:focus {\n    outline: none;\n  }\n  ${cursor}\n  ${fontColor}\n  ${diagonalLine}\n  ${btnBgColorPerStatus}\n  ${focusBorder}\n  ${fontWeight}\n`;\n\nexport const StyledWheelListItem = styled.div`\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAAwC;AACxC,uBAAgF;AAkBhF,MAAM,cAAc,CAAC,UAAwD;AAC3E,QAAM,EAAE,OAAO,+BAA+B,WAAW,gBAAgB,IAAI;AAC7E,MAAI,iCAAiC,CAAC,aAAa;AACjD,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BASiB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAGjD,SAAO;AACT;AAIA,MAAM,eAAe,CAAC,UAAwD;AAC5E,QAAM,EAAE,OAAO,WAAW,uBAAuB,UAAU,IAAI;AAC/D,MAAI,CAAC,sBAAuB,QAAO;AAEnC,MAAI,gBAAgB,MAAM,OAAO,QAAQ,GAAG;AAC5C,MAAI,aAAa,CAAC,UAAW,iBAAgB,MAAM,OAAO,QAAQ,GAAG;AACrE,MAAI,UAAW,iBAAgB,MAAM,OAAO,QAAQ,KAAK;AAEzD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAUiB,aAAa;AAAA;AAAA;AAGvC;AAIA,MAAM,YAAY,CAAC,UAAwD;AACzE,QAAM,EAAE,OAAO,WAAW,WAAW,uBAAuB,iBAAiB,8BAA8B,IAAI;AAE/G,MAAI,QAAQ,MAAM,OAAO,QAAQ,GAAG;AACpC,MAAI,UAAW,SAAQ,MAAM,OAAO,QAAQ,KAAK;AAIjD,MAAI,iCAAiC,mBAAmB,CAAC,aAAa,CAAC,WAAW;AAChF,YAAQ,MAAM,OAAO,MAAM,GAAG;AAAA,EAChC;AAGA,QAAM,aAAa,CAAC,aAAa,CAAC,aAAa,CAAC,wBAAwB,MAAM,OAAO,MAAM,GAAG,IAAI;AAIlG,QAAM,aAAa,CAAC,aAAa,CAAC,YAAY,MAAM,OAAO,MAAM,GAAG,IAAI;AAExE,SAAO;AAAA,aACI,KAAK;AAAA;AAAA,eAEH,UAAU;AAAA;AAAA;AAAA,eAGV,UAAU;AAAA;AAAA;AAGzB;AAOA,MAAM,sBAAsB,CAAC,UAAwD;AACnF,QAAM,EAAE,OAAO,WAAW,uBAAuB,WAAW,iBAAiB,8BAA8B,IAAI;AAG/G,MAAI,UAAU;AACd,MAAI,WAAW;AACb,cAAU,MAAM,OAAO,MAAM,GAAG;AAChC,QAAI,sBAAuB,WAAU,MAAM,OAAO,OAAO,GAAG;AAC5D,QAAI,UAAW,WAAU,MAAM,OAAO,QAAQ,GAAG;AAAA,EACnD;AAKA,MAAI,iCAAiC,mBAAmB,WAAW;AACjE,QAAI,UAAW,WAAU,MAAM,OAAO,QAAQ,GAAG;AAAA,aACxC,sBAAuB,WAAU,MAAM,OAAO,OAAO,GAAG;AAAA,QAC5D,WAAU,MAAM,OAAO,MAAM,GAAG;AAAA,EACvC;AAGA,MAAI;AACJ,MAAI,WAAW;AACb,mBAAe,YAAY,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA,EACjF,WAAW,uBAAuB;AAGhC,mBAAe,YAAY,MAAM,OAAO,OAAO,GAAG,IAAI;AAAA,EACxD,OAAO;AACL,mBAAe,YAAY,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG;AAAA,EAC7E;AAEA,SAAO;AAAA,wBACe,OAAO;AAAA;AAAA,0BAEL,YAAY;AAAA;AAAA;AAGtC;AAEA,MAAM,SAAS,CAAC,UAAwD;AACtE,QAAM,cAAc,MAAM,aAAa,MAAM,wBAAwB,gBAAgB;AACrF,SAAO;AAAA,cACK,WAAW;AAAA;AAEzB;AAIA,MAAM,aAAa,CAAC,UAAwD;AAC1E,QAAM,EAAE,OAAO,UAAU,IAAI;AAC7B,MAAI,WAAW;AACb,WAAO;AAAA,qBACU,MAAM,YAAY,QAAQ;AAAA;AAAA,EAE7C;AACA,SAAO;AAAA;AAAA,qBAEY,MAAM,YAAY,QAAQ;AAAA;AAAA;AAG/C;AAEO,MAAM,8BAA0B,yBAAO,gCAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iDAAgC,aAAa;AACrD,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAK5C,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAkBZ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,4BACpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAK3D,MAAM,gCAA4B,yBAAO,OAAO;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,iDAAgC,qBAAqB;AAC7D,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWM,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,iDAAgC,UAAU;AAClD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKe,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGnD,MAAM,+BAA+B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKxB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,MAChG,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA,gBAIJ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGnD,MAAM,+BAA+B,wBAAO;AAAA,sBAC7B,CAAC,EAAE,OAAO,gBAAgB,MAC5C,kBAAkB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,2BAIpD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,MAChG,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWA,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKhC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI/D,MAAM,oBAAgB,yBAAO,qBAAM;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,iDAAgC,UAAU;AAClD,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQnC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA;AAGP,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUnC,MAAM,+BAA2B,yBAAO,gCAAY;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,iDAAgC,UAAU;AAClD,CAAC;AAAA,YACW,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA,eACxB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAIpC,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,iDAAgC,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,sBAEtC,CAAC,EAAE,OAAO,gBAAgB,MAC5C,kBAAkB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
+  "sourcesContent": ["/* eslint-disable prefer-destructuring */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled, type Theme } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../constants/index.js';\n\ninterface StyledWheelListItemPropsT {\n  $isTheItemVisuallyInTheCenter?: boolean;\n  $selected?: boolean;\n  $isNotAValidSelection?: boolean;\n  $readOnly?: boolean;\n  $isUnset?: boolean;\n  $isFocusedWheel?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n  showShadow?: boolean;\n  isControllerOnly: boolean;\n}\n\n// Focus ring \u2014 always brand-700 regardless of validity or readOnly state.\n// Only rendered for the visually centred item when the wheel is focused and the item is not selected.\nconst focusBorder = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $isTheItemVisuallyInTheCenter, $selected, $isFocusedWheel } = props;\n  if ($isTheItemVisuallyInTheCenter && !$selected && $isFocusedWheel)\n    return css<StyledWheelListItemPropsT>`\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.colors.brand[700]};\n      }\n    `;\n  return css``;\n};\n\n// Diagonal line for invalid items. Colour is neutral at rest in all states \u2014\n// the focus ring (::after) is the sole blue/brand focus signal.\nconst diagonalLine = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $isNotAValidSelection, $readOnly } = props;\n  if (!$isNotAValidSelection) return css``;\n\n  let beforeBgColor = theme.colors.neutral[500]; // idle not-selected\n  if ($readOnly && !$selected) beforeBgColor = theme.colors.neutral[700]; // readOnly not-selected\n  if ($selected) beforeBgColor = theme.colors.neutral['000']; // selected always white\n\n  return css<StyledWheelListItemPropsT>`\n    cursor: not-allowed;\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: ${beforeBgColor};\n    }\n  `;\n};\n\n// Text colour. On focus the invalid case resolves to brand-700 (not danger-900) for\n// consistency with the universal blue focus ring decision.\nconst fontColor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $readOnly, $isNotAValidSelection, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n  let color = theme.colors.neutral[700]; // default\n  if ($selected) color = theme.colors.neutral['000']; // selected always white\n\n  // For items that can't receive :focus (meridiem visual layer), drive focused-center colour via props.\n  // Hours/minutes also benefit from this \u2014 :focus below applies the same value.\n  if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && !$selected && !$readOnly) {\n    color = theme.colors.brand[700]; // always brand, matches the blue focus ring\n  }\n\n  // Hover: valid not-selected not-readOnly \u2192 brand-700; all other cases \u2192 no change\n  const hoverColor = !$selected && !$readOnly && !$isNotAValidSelection ? theme.colors.brand[700] : '';\n\n  // Focus (:focus fires on hours/minutes; meridiem relies on the prop-driven path above)\n  // Matches focus ring: always brand when interactive, no change when readOnly or selected\n  const focusColor = !$selected && !$readOnly ? theme.colors.brand[700] : '';\n\n  return css<StyledWheelListItemPropsT>`\n    color: ${color};\n    &:hover {\n      color: ${hoverColor};\n    }\n    &:focus {\n      color: ${focusColor};\n    }\n  `;\n};\n\n// Background colours at rest and on hover.\n// Hover matrix (readOnly always wins):\n//   readOnly  \u2192 selected: neutral-700 | not-selected: neutral-100\n//   invalid   \u2192 selected: danger-950  | not-selected: danger-200 hardcoded to #fffcfc due to contrast failure of danger-200 token\n//   valid     \u2192 selected: brand-800   | not-selected: brand-100\nconst btnBgColorPerStatus = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected, $isNotAValidSelection, $readOnly, $isFocusedWheel, $isTheItemVisuallyInTheCenter } = props;\n\n  // Rest background: only selected items have a non-transparent background.\n  let bgColor = '';\n  if ($selected) {\n    bgColor = theme.colors.brand[600];\n    if ($isNotAValidSelection) bgColor = theme.colors.danger[900]; // invalid selected: red\n    if ($readOnly) bgColor = theme.colors.neutral[500]; // readOnly always wins: grey\n  }\n\n  // When the wheel column is active (focused), drive the selected centre item to the\n  // same colour as its hover state \u2014 :hover won't fire on keyboard navigation and\n  // meridiem visual items can't receive :focus at all.\n  if ($isTheItemVisuallyInTheCenter && $isFocusedWheel && $selected) {\n    if ($readOnly) bgColor = theme.colors.neutral[700];\n    else if ($isNotAValidSelection) bgColor = theme.colors.danger[950];\n    else bgColor = theme.colors.brand[800];\n  }\n\n  // Hover background \u2014 new spec, clean if/else, no empty-string leaks.\n  let hoverBgColor: string;\n  if ($readOnly) {\n    hoverBgColor = $selected ? theme.colors.neutral[700] : theme.colors.neutral[100];\n  } else if ($isNotAValidSelection) {\n    // TODO: danger[200] and danger[400] are currently the same token and both fail contrast\n    // against common dimsum color combinations. Hardcoded until the theme token is fixed.\n    hoverBgColor = $selected ? theme.colors.danger[950] : '#fffcfc'; // this is hardcoded because danger 200 fails contrast, pending theme token fix\n  } else {\n    hoverBgColor = $selected ? theme.colors.brand[800] : theme.colors.brand[100];\n  }\n\n  return css`\n    background-color: ${bgColor};\n    &:hover {\n      background-color: ${hoverBgColor};\n    }\n  `;\n};\n\nconst cursor = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const cursorStyle = props.$readOnly || props.$isNotAValidSelection ? 'not-allowed' : 'pointer';\n  return css`\n    cursor: ${cursorStyle};\n  `;\n};\n\n// Font weight: selected \u2192 semibold at rest (no hover override needed, it is already semibold).\n// Not selected \u2192 semibold on hover only.\nconst fontWeight = (props: StyledWheelListItemPropsT & { theme: Theme }) => {\n  const { theme, $selected } = props;\n  if ($selected) {\n    return css`\n      font-weight: ${theme.fontWeights.semibold};\n    `;\n  }\n  return css`\n    &:hover {\n      font-weight: ${theme.fontWeights.semibold};\n    }\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  display: flex;\n  justify-content: center;\n  align-items: center;\n  &:focus {\n    outline: none;\n  }\n  ${cursor}\n  ${fontColor}\n  ${diagonalLine}\n  ${btnBgColorPerStatus}\n  ${focusBorder}\n  ${fontWeight}\n`;\n\nexport const StyledWheelListItem = styled.div`\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelWrapper.js CHANGED Viewed

@@ -33,30 +33,42 @@ __export(TimeWheelWrapper_exports, {
 module.exports = __toCommonJS(TimeWheelWrapper_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
 var import_ds_system = require("@elliemae/ds-system");
 var import_react = __toESM(require("react"));
 var import_constants = require("../../../constants/index.js");
 var import_ControlledDateTimePickerCTX = require("../../../ControlledDateTimePickerCTX.js");
 var import_TimeWheelContent = require("./TimeWheelContent.js");
 var import_TimeWheelContext = require("./TimeWheelContext.js");
-const StyledPopper = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS, {
+const StyledFloatingWrapper = (0, import_ds_system.styled)(import_ds_floating_context.FloatingWrapper, {
   name: import_constants.DSControlledDateTimePickerName,
   slot: import_constants.DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL
 })``;
 const TimeWheelWrapper = () => {
   const { referenceElement, closeTimePicker } = import_react.default.useContext(import_TimeWheelContext.TimeWheelContext);
   const { isControllerOnly, getProps } = import_react.default.useContext(import_ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const {
+    refs,
+    floatingStyles,
+    context,
+    isOpen: isFloatingOpen
+  } = (0, import_ds_floating_context.useFloatingContext)({
+    externallyControlledIsOpen: !isControllerOnly && !!referenceElement,
+    externalReferenceElement: referenceElement,
+    withoutAnimation: true,
+    customOffset: [0, 0],
+    onClickOutside: isControllerOnly ? void 0 : closeTimePicker
+  });
   if (isControllerOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeWheelContent.TimeWheelContent, {});
   if (!referenceElement) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    StyledPopper,
+    StyledFloatingWrapper,
     {
-      showPopover: true,
+      innerRef: refs.setFloating,
+      isOpen: isFloatingOpen,
+      floatingStyles,
+      context,
       "data-testid": import_constants.ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL,
-      referenceElement,
-      withoutArrow: true,
-      onClickOutside: closeTimePicker,
       getOwnerProps: getProps,
       "aria-label": "time wheel header",
       role: "dialog",

package/dist/cjs/parts/Pickers/TimeWheel/TimeWheelWrapper.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/TimeWheel/TimeWheelWrapper.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n  ControlledDateTimePickerDatatestid,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { TimeWheelContent } from './TimeWheelContent.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nconst StyledPopper = styled(DSPopperJS, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL,\n})``;\n\nexport const TimeWheelWrapper = () => {\n  const { referenceElement, closeTimePicker } = React.useContext(TimeWheelContext);\n  const { isControllerOnly, getProps } = React.useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <TimeWheelContent />;\n  if (!referenceElement) return null;\n  return (\n    <StyledPopper\n      showPopover\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n      referenceElement={referenceElement}\n      withoutArrow\n      onClickOutside={closeTimePicker}\n      getOwnerProps={getProps}\n      aria-label=\"time wheel header\"\n      role=\"dialog\"\n    >\n      <TimeWheelContent />\n    </StyledPopper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBQ;AApB/B,yBAA2B;AAC3B,uBAAuB;AACvB,mBAAkB;AAClB,uBAIO;AACP,yCAAgD;AAChD,8BAAiC;AACjC,8BAAiC;AAEjC,MAAM,mBAAe,yBAAO,+BAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,iDAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,kBAAkB,gBAAgB,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AAC/E,QAAM,EAAE,kBAAkB,SAAS,IAAI,aAAAA,QAAM,WAAW,kEAA+B;AACvF,MAAI,iBAAkB,QAAO,4CAAC,4CAAiB;AAC/C,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,oDAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,sDAAC,4CAAiB;AAAA;AAAA,EACpB;AAEJ;",
+  "sourcesContent": ["import { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n  ControlledDateTimePickerDatatestid,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../constants/index.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { TimeWheelContent } from './TimeWheelContent.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\n\nconst StyledFloatingWrapper = styled(FloatingWrapper, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL,\n})``;\n\nexport const TimeWheelWrapper = () => {\n  const { referenceElement, closeTimePicker } = React.useContext(TimeWheelContext);\n  const { isControllerOnly, getProps } = React.useContext(ControlledDateTimePickerContext);\n\n  const {\n    refs,\n    floatingStyles,\n    context,\n    isOpen: isFloatingOpen,\n  } = useFloatingContext({\n    externallyControlledIsOpen: !isControllerOnly && !!referenceElement,\n    externalReferenceElement: referenceElement,\n    withoutAnimation: true,\n    customOffset: [0, 0],\n    onClickOutside: isControllerOnly ? undefined : closeTimePicker,\n  });\n\n  if (isControllerOnly) return <TimeWheelContent />;\n  if (!referenceElement) return null;\n\n  return (\n    <StyledFloatingWrapper\n      innerRef={refs.setFloating}\n      isOpen={isFloatingOpen}\n      floatingStyles={floatingStyles}\n      context={context}\n      data-testid={ControlledDateTimePickerDatatestid.CONTEXTUAL_MENU.TIMEWHEEL}\n      getOwnerProps={getProps}\n      aria-label=\"time wheel header\"\n      role=\"dialog\"\n    >\n      <TimeWheelContent />\n    </StyledFloatingWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCQ;AAlC/B,iCAAoD;AACpD,uBAAuB;AACvB,mBAAkB;AAClB,uBAIO;AACP,yCAAgD;AAChD,8BAAiC;AACjC,8BAAiC;AAEjC,MAAM,4BAAwB,yBAAO,4CAAiB;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,iDAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,kBAAkB,gBAAgB,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AAC/E,QAAM,EAAE,kBAAkB,SAAS,IAAI,aAAAA,QAAM,WAAW,kEAA+B;AAEvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B,CAAC,oBAAoB,CAAC,CAAC;AAAA,IACnD,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,gBAAgB,mBAAmB,SAAY;AAAA,EACjD,CAAC;AAED,MAAI,iBAAkB,QAAO,4CAAC,4CAAiB;AAC/C,MAAI,CAAC,iBAAkB,QAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa,oDAAmC,gBAAgB;AAAA,MAChE,eAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MAEL,sDAAC,4CAAiB;AAAA;AAAA,EACpB;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/Styleds.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Styleds.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, th } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../constants/index.js';\n\nconst ResettedInput = styled('input')`\n  border: none;\n  box-shadow: none;\n  background: none;\n  text-align: center;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  :focus {\n    outline: none;\n  }\n  :disabled {\n    cursor: not-allowed;\n  }\n  padding-top: 2px;\n\n  color: ${th.color('neutral-700')};\n\n  ::placeholder {\n    font-weight: ${th.fontWeight('regular')};\n    color: ${th.color('neutral-500')};\n  }\n`;\n\nexport const StyledSeparator = styled(Grid)`\n  padding-top: 2px;\n  margin: auto;\n  color: neutral-500;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n  padding-bottom: 1px;\n  margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledDateInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.DAY,\n})``;\n\nexport const StyledMonthInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.MONTH,\n})``;\n\nexport const StyledYearInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.YEAR,\n})``;\n\nexport const StyledHourInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.HOUR,\n})``;\n\nexport const StyledMinuteInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MINUTE,\n})``;\n\nexport const StyledMeridiemInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM,\n})``;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTAINER,\n})<{\n  isControllerOnly: boolean;\n  onlyPicker: boolean;\n  hasError: boolean;\n  justPicker: boolean;\n  disabled: boolean;\n  $readOnlyStyles?: boolean;\n}>`\n  width: max-content;\n  align-items: center;\n  background-color: white;\n  ${({ isControllerOnly }) =>\n    isControllerOnly\n      ? ``\n      : `\n  height: 2.153rem;    \n  border-width: 1px;\n  border-style: solid;\n  `}\n\n  border-color: ${({ theme, hasError }) => {\n    if (hasError) return theme.colors.danger[900];\n    return theme.colors.neutral[400];\n  }};\n\n  border-radius: 2px;\n  padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n\n  position: relative;\n  ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n  ${({ $readOnlyStyles, hasError, onlyPicker, theme }) =>\n    $readOnlyStyles &&\n    !hasError &&\n    !onlyPicker &&\n    `\n    border-left: 1px solid ${theme.colors.neutral['080']};\n    border-top: 1px solid ${theme.colors.neutral['080']};\n    border-right: 1px solid ${theme.colors.neutral['080']};\n\n  `}\n   ${({ $readOnlyStyles, hasError, theme }) =>\n    $readOnlyStyles &&\n    !hasError &&\n    `\n    background-color: ${theme.colors.neutral['050']};\n  `}\n`;\n\nexport const StyledDateInputsWrapperGrid = styled.div`\n  display: grid;\n  grid-template-columns: 24px min-content 24px min-content 48px;\n  grid-template-rows: min-content;\n  padding: 6px 0;\n  gap: 0px 0px;\n  align-items: center;\n  input,\n  p {\n    margin: 0;\n  }\n`;\n\nexport const StyledTimeInputsWrapperGrid = styled.div`\n  display: grid;\n  grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;\n  grid-template-rows: min-content;\n  padding: 6px 0;\n  gap: 0px 0px;\n  align-items: center;\n  input,\n  p {\n    margin: 0;\n  }\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid)<{ isControllerOnly: boolean; hasError: boolean }>`\n  position: relative;\n  ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 2rem;`)}\n  :before {\n    content: '';\n    position: absolute;\n    top: 0px;\n    left: -1px;\n    width: 100%;\n    height: 100%;\n    // this shoudnt be rounded as specified in the design\n    /* border-radius: 2px; */\n    ${({ theme, isControllerOnly, hasError }) =>\n      isControllerOnly\n        ? ``\n        : `\n    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[400]}\n    `}\n  }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n  position: relative;\n  &:focus-within {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: -5px;\n      left: -2px;\n      width: calc(100% + 4px);\n      height: calc(100% + 10px);\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})<{ shouldDisplay: boolean }>`\n  height: 26px;\n  position: relative;\n  visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n  &:focus {\n    &:after {\n      z-index: 1;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, th } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../constants/index.js';\n\nconst ResettedInput = styled('input')`\n  border: none;\n  box-shadow: none;\n  background: none;\n  text-align: center;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  :focus {\n    outline: none;\n  }\n  :disabled {\n    cursor: not-allowed;\n  }\n  padding-top: 2px;\n\n  color: ${th.color('neutral-700')};\n\n  ::placeholder {\n    font-weight: ${th.fontWeight('regular')};\n    color: ${th.color('neutral-500')};\n  }\n`;\n\nexport const StyledSeparator = styled(Grid)`\n  padding-top: 2px;\n  margin: auto;\n  color: neutral-500;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n  padding-bottom: 1px;\n  margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledDateInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.DAY,\n})``;\n\nexport const StyledMonthInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.MONTH,\n})``;\n\nexport const StyledYearInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.YEAR,\n})``;\n\nexport const StyledHourInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.HOUR,\n})``;\n\nexport const StyledMinuteInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MINUTE,\n})``;\n\nexport const StyledMeridiemInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM,\n})``;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTAINER,\n})<{\n  isControllerOnly: boolean;\n  onlyPicker: boolean;\n  hasError: boolean;\n  justPicker: boolean;\n  disabled: boolean;\n  $readOnlyStyles?: boolean;\n}>`\n  width: max-content;\n  align-items: center;\n  background-color: white;\n  ${({ isControllerOnly }) =>\n    isControllerOnly\n      ? ``\n      : `\n  height: 2.153rem;    \n  border-width: 1px;\n  border-style: solid;\n  `}\n\n  border-color: ${({ theme, hasError }) => {\n    if (hasError) return theme.colors.danger[900];\n    return theme.colors.neutral[400];\n  }};\n\n  border-radius: 2px;\n  padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n\n  position: relative;\n  ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n  ${({ $readOnlyStyles, hasError, onlyPicker, theme }) =>\n    $readOnlyStyles &&\n    !hasError &&\n    !onlyPicker &&\n    `\n    border-left: 1px solid ${theme.colors.neutral['080']};\n    border-top: 1px solid ${theme.colors.neutral['080']};\n    border-right: 1px solid ${theme.colors.neutral['080']};\n\n  `}\n   ${({ $readOnlyStyles, hasError, theme }) =>\n     $readOnlyStyles &&\n     !hasError &&\n     `\n    background-color: ${theme.colors.neutral['050']};\n  `}\n`;\n\nexport const StyledDateInputsWrapperGrid = styled.div`\n  display: grid;\n  grid-template-columns: 24px min-content 24px min-content 48px;\n  grid-template-rows: min-content;\n  padding: 6px 0;\n  gap: 0px 0px;\n  align-items: center;\n  input,\n  p {\n    margin: 0;\n  }\n`;\n\nexport const StyledTimeInputsWrapperGrid = styled.div`\n  display: grid;\n  grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;\n  grid-template-rows: min-content;\n  padding: 6px 0;\n  gap: 0px 0px;\n  align-items: center;\n  input,\n  p {\n    margin: 0;\n  }\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid)<{ isControllerOnly: boolean; hasError: boolean }>`\n  position: relative;\n  ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 2rem;`)}\n  :before {\n    content: '';\n    position: absolute;\n    top: 0px;\n    left: -1px;\n    width: 100%;\n    height: 100%;\n    // this shoudnt be rounded as specified in the design\n    /* border-radius: 2px; */\n    ${({ theme, isControllerOnly, hasError }) =>\n      isControllerOnly\n        ? ``\n        : `\n    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[400]}\n    `}\n  }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n  position: relative;\n  &:focus-within {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: -5px;\n      left: -2px;\n      width: calc(100% + 4px);\n      height: calc(100% + 10px);\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})<{ shouldDisplay: boolean }>`\n  height: 26px;\n  position: relative;\n  visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n  &:focus {\n    &:after {\n      z-index: 1;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAA2B;AAC3B,qBAAqB;AACrB,uBAA2B;AAC3B,uBAAgF;AAEhF,MAAM,oBAAgB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAgBzB,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,oBAAG,WAAW,SAAS,CAAC;AAAA,aAC9B,oBAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAI7B,MAAM,sBAAkB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,2BAAuB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,yBAAqB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAG9E,MAAM,sBAAkB,yBAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,uBAAmB,yBAAO,oBAAoB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,sBAAkB,yBAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,sBAAkB,yBAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,wBAAoB,yBAAO,oBAAoB;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,0BAAsB,yBAAO,oBAAoB;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,iDAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,4BAAwB,yBAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAG9E,MAAM,8BAA0B,yBAAO,qBAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,iDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA,GAIL;AAAA;AAAA,kBAEe,CAAC,EAAE,OAAO,SAAS,MAAM;AACvC,MAAI,SAAU,QAAO,MAAM,OAAO,OAAO,GAAG;AAC5C,SAAO,MAAM,OAAO,QAAQ,GAAG;AACjC,CAAC;AAAA;AAAA;AAAA,kBAGe,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM,KAAM;AAAA;AAAA;AAAA,IAG5D,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA,IAC5F,CAAC,EAAE,iBAAiB,UAAU,YAAY,MAAM,MAChD,mBACA,CAAC,YACD,CAAC,cACD;AAAA,6BACyB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,4BAC5B,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,8BACzB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,GAEtD;AAAA,KACE,CAAC,EAAE,iBAAiB,UAAU,MAAM,MACpC,mBACA,CAAC,YACD;AAAA,wBACmB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,GAChD;AAAA;AAGI,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,oCAAgC,yBAAO,mBAAI;AAAA;AAAA,IAEpD,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,KAAK,eAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUjE,CAAC,EAAE,OAAO,kBAAkB,SAAS,MACrC,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KACvF;AAAA;AAAA;AAIE,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWlB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzD,MAAM,wBAAoB,yBAAO,gCAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,iDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,cAAc,MAAO,gBAAgB,YAAY,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/TimeInputs/HHInput.js CHANGED Viewed

@@ -53,7 +53,6 @@ const HHInput = import_react.default.memo(
     disabled,
     applyAriaDisabled,
     placeholder,
-    ariaCurrentValueForInputs,
     contextRef,
     autoFocusHourInput,
     isFocused,
@@ -88,7 +87,7 @@ const HHInput = import_react.default.memo(
         tabIndex,
         placeholder,
         "data-testid": import_constants.ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
-        "aria-label": `hours input field ${ariaCurrentValueForInputs}`,
+        "aria-label": "hours",
         disabled,
         "aria-disabled": applyAriaDisabled,
         getOwnerProps: getProps,
@@ -96,7 +95,7 @@ const HHInput = import_react.default.memo(
         role: "spinbutton",
         "aria-valuemin": 1,
         "aria-valuemax": 12,
-        "aria-valuenow": hoursNum === -1 ? void 0 : hoursNum,
+        "aria-valuenow": hoursNum === -1 ? 1 : hoursNum,
         "aria-valuetext": hoursNum === -1 ? "empty" : hoursNum
       }
     );

package/dist/cjs/parts/TimeInputs/HHInput.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/TimeInputs/HHInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledHourInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidHour = (hours: string) => {\n  if (hours === '') return false;\n  const numberOnly = regExpNumbers.test(hours);\n  return hours.length > 2 || hours === '00' || !numberOnly || Number.parseInt(hours, 10) > 12;\n};\ninterface HHInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  applyAriaDisabled?: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  autoFocusHourInput: boolean;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n  readOnly: boolean;\n}\nexport const HHInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    applyAriaDisabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    autoFocusHourInput,\n    isFocused,\n    getProps,\n    tabIndex,\n    readOnly,\n  }: HHInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly || applyAriaDisabled || disabled || isInvalidHour(e.target.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [applyAriaDisabled, disabled, onChange, readOnly],\n    );\n    const hoursNum = convertToPositiveNumberIfPossible(value);\n    return (\n      <StyledHourInput\n        autoFocus={autoFocusHourInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        tabIndex={tabIndex}\n        placeholder={placeholder}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR}\n        aria-label={`hours input field ${ariaCurrentValueForInputs}`}\n        disabled={disabled}\n        aria-disabled={applyAriaDisabled}\n        getOwnerProps={getProps}\n        readOnly={readOnly}\n        role=\"spinbutton\"\n        aria-valuemin={1}\n        aria-valuemax={12}\n        aria-valuenow={hoursNum === -1 ? undefined : hoursNum}\n        aria-valuetext={hoursNum === -1 ? 'empty' : hoursNum}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DjB;AA3DN,mBAAmC;AAEnC,uBAAmD;AAEnD,qBAAgC;AAChC,2BAAkD;AAClD,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,UAAkB;AACvC,MAAI,UAAU,GAAI,QAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAkBO,MAAM,UAAU,aAAAA,QAAM;AAAA,EAC3B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmC;AACjC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,YAAY,qBAAqB,YAAY,cAAc,EAAE,OAAO,KAAK,GAAG;AAC9E,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,mBAAmB,UAAU,UAAU,QAAQ;AAAA,IAClD;AACA,UAAM,eAAW,wDAAkC,KAAK;AACxD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,YAA8B;AACvC,qBAAW,UAAU;AACrB,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,oDAAmC,YAAY;AAAA,QAC5D,cAAY,qBAAqB,yBAAyB;AAAA,QAC1D;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe,aAAa,KAAK,SAAY;AAAA,QAC7C,kBAAgB,aAAa,KAAK,UAAU;AAAA;AAAA,IAC9C;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useCallback } from 'react';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../constants/index.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport { StyledHourInput } from '../Styleds.js';\nimport { convertToPositiveNumberIfPossible } from '../../utils/numberHelpers.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidHour = (hours: string) => {\n  if (hours === '') return false;\n  const numberOnly = regExpNumbers.test(hours);\n  return hours.length > 2 || hours === '00' || !numberOnly || Number.parseInt(hours, 10) > 12;\n};\ninterface HHInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  applyAriaDisabled?: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  autoFocusHourInput: boolean;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n  tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n  readOnly: boolean;\n}\nexport const HHInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    applyAriaDisabled,\n    placeholder,\n    contextRef,\n    autoFocusHourInput,\n    isFocused,\n    getProps,\n    tabIndex,\n    readOnly,\n  }: HHInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly || applyAriaDisabled || disabled || isInvalidHour(e.target.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [applyAriaDisabled, disabled, onChange, readOnly],\n    );\n    const hoursNum = convertToPositiveNumberIfPossible(value);\n    return (\n      <StyledHourInput\n        autoFocus={autoFocusHourInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        innerRef={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        tabIndex={tabIndex}\n        placeholder={placeholder}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR}\n        aria-label=\"hours\"\n        disabled={disabled}\n        aria-disabled={applyAriaDisabled}\n        getOwnerProps={getProps}\n        readOnly={readOnly}\n        role=\"spinbutton\"\n        aria-valuemin={1}\n        aria-valuemax={12}\n        // when empty, valuenow falls back to the min (not omitted) so VoiceOver honors\n        // aria-valuetext=\"empty\" instead of announcing a computed position percentage\n        aria-valuenow={hoursNum === -1 ? 1 : hoursNum}\n        aria-valuetext={hoursNum === -1 ? 'empty' : hoursNum}\n      />\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0DjB;AAzDN,mBAAmC;AAEnC,uBAAmD;AAEnD,qBAAgC;AAChC,2BAAkD;AAClD,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,UAAkB;AACvC,MAAI,UAAU,GAAI,QAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAiBO,MAAM,UAAU,aAAAA,QAAM;AAAA,EAC3B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmC;AACjC,UAAM,uBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,YAAY,qBAAqB,YAAY,cAAc,EAAE,OAAO,KAAK,GAAG;AAC9E,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,mBAAmB,UAAU,UAAU,QAAQ;AAAA,IAClD;AACA,UAAM,eAAW,wDAAkC,KAAK;AACxD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,YAA8B;AACvC,qBAAW,UAAU;AACrB,cAAI,UAAW,UAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa,oDAAmC,YAAY;AAAA,QAC5D,cAAW;AAAA,QACX;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,iBAAe;AAAA,QAGf,iBAAe,aAAa,KAAK,IAAI;AAAA,QACrC,kBAAgB,aAAa,KAAK,UAAU;AAAA;AAAA,IAC9C;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }