npm - @elliemae/ds-form-date-time-picker - Versions diffs - 3.22.0-next.2 → 3.22.0-next.21 - Mend

@elliemae/ds-form-date-time-picker 3.22.0-next.2 → 3.22.0-next.21

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 (157) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/Styleds.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/indent */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming.js';\n\ninterface StyledWheelListItemPropsT {\n  isCurrentListItem?: boolean;\n  selected?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n  showShadow?: boolean;\n  isControllerOnly: boolean;\n}\n\nconst focusBorder = css<{ isDisabled: boolean }>`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n    border-radius: 50%;\n    border: 2px solid ${({ theme, isDisabled }) => (isDisabled ? theme.colors.danger[900] : theme.colors.brand[700])};\n  }\n`;\n\nconst diagonalLine = css<{ isCurrentListItem: boolean; selected: boolean }>`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -1px;\n    height: 1px;\n    width: calc(100% + 2px);\n    transform: rotate(45deg);\n    background-color: ${({ theme, isCurrentListItem, selected }) => {\n      if (selected) return theme.colors.neutral['000'];\n      if (isCurrentListItem) return theme.colors.danger[900];\n      return theme.colors.neutral[500];\n    }};\n  }\n`;\n\nconst fontColorPerStatus = css<{ isCurrentListItem: boolean; selected: boolean; isDisabled: boolean }>`\n  ${({ theme, isDisabled, isCurrentListItem, selected }) => {\n    if (selected) return theme.colors.neutral['000'];\n    if (isDisabled && isCurrentListItem) return theme.colors.danger[900];\n    if (isDisabled) return theme.colors.neutral[500];\n    if (isCurrentListItem) return theme.colors.brand[600];\n    return theme.colors.neutral[800];\n  }};\n`;\n\nconst hoverBgPerStatus = css<{ isDisabled: boolean; selected: boolean }>`\n  ${({ theme, selected, isDisabled }) => {\n    if (isDisabled && selected) return theme.colors.danger[900];\n    if (selected) return theme.colors.brand[700];\n    return theme.colors.neutral['000'];\n  }}\n`;\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\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<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`\n  width: 100%;\n  background: ${({ theme }) => theme.colors.neutral['000']};\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[200]};\n    }\n  }\n`;\n\nexport const StyledTimeBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})`\n  position: relative;\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n\n  &:hover {\n    background-color: ${hoverBgPerStatus};\n  }\n\n  color: ${fontColorPerStatus};\n\n  ${({ selected, isCurrentListItem }) => (isCurrentListItem && !selected ? focusBorder : ``)}\n\n  ${({ isDisabled }) =>\n    isDisabled\n      ? css`\n          cursor: not-allowed;\n          ${diagonalLine};\n        `\n      : ``}\n\n  ${({ theme, selected, isDisabled }) =>\n    selected\n      ? css`\n    font-weight: ${theme.fontWeights.semibold};\n    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};\n    `\n      : ``};\n`;\n\nexport const StyledWheelListItem = styled.div<StyledWheelListItemPropsT>`\n  margin: auto;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('footer', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: white;\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/indent */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming.js';\n\ninterface StyledWheelListItemPropsT {\n  isCurrentListItem?: boolean;\n  selected?: boolean;\n}\n\ninterface StyledTimePickerContainerT {\n  showShadow?: boolean;\n  isControllerOnly: boolean;\n}\n\nconst focusBorder = css<{ isDisabled: boolean }>`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n    border-radius: 50%;\n    border: 2px solid ${({ theme, isDisabled }) => (isDisabled ? theme.colors.danger[900] : theme.colors.brand[700])};\n  }\n`;\n\nconst diagonalLine = css<{ isCurrentListItem: boolean; selected: boolean }>`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -1px;\n    height: 1px;\n    width: calc(100% + 2px);\n    transform: rotate(45deg);\n    background-color: ${({ theme, isCurrentListItem, selected }) => {\n      if (selected) return theme.colors.neutral['000'];\n      if (isCurrentListItem) return theme.colors.danger[900];\n      return theme.colors.neutral[500];\n    }};\n  }\n`;\n\nconst fontColorPerStatus = css<{ isCurrentListItem: boolean; selected: boolean; isDisabled: boolean }>`\n  ${({ theme, isDisabled, isCurrentListItem, selected }) => {\n    if (selected) return theme.colors.neutral['000'];\n    if (isDisabled && isCurrentListItem) return theme.colors.danger[900];\n    if (isDisabled) return theme.colors.neutral[500];\n    if (isCurrentListItem) return theme.colors.brand[600];\n    return theme.colors.neutral[800];\n  }};\n`;\n\nconst hoverBgPerStatus = css<{ isDisabled: boolean; selected: boolean }>`\n  ${({ theme, selected, isDisabled }) => {\n    if (isDisabled && selected) return theme.colors.danger[900];\n    if (selected) return theme.colors.brand[700];\n    return theme.colors.neutral['000'];\n  }}\n`;\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\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`\n  width: 100%;\n  background: ${({ theme }) => theme.colors.neutral['000']};\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[200]};\n    }\n  }\n`;\n\nexport const StyledTimeBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_BUTTON,\n})`\n  position: relative;\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n\n  &:hover {\n    background-color: ${hoverBgPerStatus};\n  }\n\n  color: ${fontColorPerStatus};\n\n  ${({ selected, isCurrentListItem }) => (isCurrentListItem && !selected ? focusBorder : ``)}\n\n  ${({ isDisabled }) =>\n    isDisabled\n      ? css`\n          cursor: not-allowed;\n          ${diagonalLine};\n        `\n      : ``}\n\n  ${({ theme, selected, isDisabled }) =>\n    selected\n      ? css`\n    font-weight: ${theme.fontWeights.semibold};\n    background-color ${isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]};\n    `\n      : ``};\n`;\n\nexport const StyledWheelListItem = styled.div<StyledWheelListItemPropsT>`\n  margin: auto;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nexport const StyledWheelChangeTimeBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIMEWHEEL.TIME_CHANGE_BUTTON,\n})`\n  height: ${({ theme }) => theme.space.s};\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n  border-radius: 50%;\n`;\n\nexport const TimeWheelFooterMessage = styled('footer', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.TIMEWHEEL,\n})`\n  border-top: solid 1px ${({ theme }) => theme.colors.neutral[300]};\n  margin: 0 ${({ theme }) => theme.space.xxs2};\n  padding: ${({ theme }) => theme.space.xxs2} 0;\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-style: italic;\n  font-weight: ${({ theme }) => theme.fontWeights.thin};\n  font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n  text-align: right;\n  background-color: white;\n`;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -7,12 +7,18 @@ import { ControlledDateTimePickerContext } from "../../../ControlledDateTimePick
 import { TimeWheelContent } from "./TimeWheelContent.js";
 import { TimeWheelContext } from "./TimeWheelContext.js";
 import { styled } from "@elliemae/ds-system";
-const StyledPopper = styled(DSPopperJS)``;
+import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../../../exported-related/theming.js";
+const StyledPopper = styled(DSPopperJS, {
+  name: DSControlledDateTimePickerName,
+  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL
+})``;
 const TimeWheelWrapper = () => {
   const { referenceElement, closeTimePicker } = useContext(TimeWheelContext);
   const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);
   if (isControllerOnly)
     return /* @__PURE__ */ jsx(TimeWheelContent, {});
+  if (!referenceElement)
+    return null;
   return /* @__PURE__ */ jsx(
     StyledPopper,
     {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/TimeWheelWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { TimeWheelContent } from './TimeWheelContent.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\nimport { styled } from '@elliemae/ds-system';\n\nconst StyledPopper = styled(DSPopperJS)``;\n\nexport const TimeWheelWrapper = (): JSX.Element => {\n  const { referenceElement, closeTimePicker } = useContext(TimeWheelContext);\n  const { isControllerOnly, getProps } = useContext(ControlledDateTimePickerContext);\n  if (isControllerOnly) return <TimeWheelContent />;\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    >\n      <TimeWheelContent />\n    </StyledPopper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACaQ;AAb/B,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAEvB,MAAM,eAAe,OAAO,UAAU;AAE/B,MAAM,mBAAmB,MAAmB;AACjD,QAAM,EAAE,kBAAkB,gBAAgB,IAAI,WAAW,gBAAgB;AACzE,QAAM,EAAE,kBAAkB,SAAS,IAAI,WAAW,+BAA+B;AACjF,MAAI;AAAkB,WAAO,oBAAC,oBAAiB;AAC/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MAEf,8BAAC,oBAAiB;AAAA;AAAA,EACpB;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ControlledDateTimePickerDatatestid } from '../../../ControlledDateTimePickerDatatestid.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport { TimeWheelContent } from './TimeWheelContent.js';\nimport { TimeWheelContext } from './TimeWheelContext.js';\nimport { styled } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../../../exported-related/theming.js';\n\nconst StyledPopper = styled(DSPopperJS, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTEXTUAL_MENU.TIMEWHEEL,\n})``;\n\nexport const TimeWheelWrapper = () => {\n  const { referenceElement, closeTimePicker } = useContext(TimeWheelContext);\n  const { isControllerOnly, getProps } = 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    >\n      <TimeWheelContent />\n    </StyledPopper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiBQ;AAjB/B,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,0CAA0C;AACnD,SAAS,uCAAuC;AAChD,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,gCAAgC,uCAAuC;AAEhF,MAAM,eAAe,OAAO,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,gCAAgC,gBAAgB;AACxD,CAAC;AAEM,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,kBAAkB,gBAAgB,IAAI,WAAW,gBAAgB;AACzE,QAAM,EAAE,kBAAkB,SAAS,IAAI,WAAW,+BAA+B;AACjF,MAAI;AAAkB,WAAO,oBAAC,oBAAiB;AAC/C,MAAI,CAAC;AAAkB,WAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,mCAAmC,gBAAgB;AAAA,MAChE;AAAA,MACA,cAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MAEf,8BAAC,oBAAiB;AAAA;AAAA,EACpB;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pickers/TimeWheel/useCurrentDisplayedWheelsLogic.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/TimeWheel/useCurrentDisplayedWheelsLogic.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useContext } from 'react';\nimport { useTimeInputs } from '../../TimeInputs/useTimeInputs.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { prependStringWithPlaceHolders, deconstructValuesFromTimeString } from '../../../utils/stringHelpers.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { DSControlledDateTimePickerT } from '../../../propTypes.js';\n\nconst totalHoursList = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];\nconst hoursInterval = 1; // using this just to unify the logic between how hours and minutes are handled\nconst hoursStartPositionOffset = 1; // if array start from 01, this is 1, if start from 02, it's 2 ...\n\nconst getTotalMinuteListWithStep = (step = 1) => {\n  const length = Math.ceil(60 / step);\n  return new Array(length).fill('_').map((_v, i) => prependStringWithPlaceHolders(`${i * step}`, 2));\n};\ninterface UseCurrentDisplayedWheelsLogic {\n  currHourNum: number;\n  visibleHours: (string | null)[];\n  handlePrevHour: (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  handleNextHour: (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  handleTimeWheelBtnChangeHours: (newVal: string, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  currMinuteNum: number;\n  visibleMinutes: (string | null)[];\n  handlePrevMinute: (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  handleNextMinute: (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  handleTimeWheelBtnChangeMinutes: (newVal: string, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  handleTimeWheelBtnChangeMeridiem: (\n    newMeridiem: string,\n    e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent,\n  ) => void;\n  currMeridiem: string;\n}\nexport const useCurrentDisplayedWheelsLogic = (): UseCurrentDisplayedWheelsLogic => {\n  const { minutesInterval, onTimeWheelOpenStartingTime, hours, minutes, meridiem } = useContext(\n    ControlledDateTimePickerContext,\n  );\n  const { handleChangeHours, handleChangeMinutes, handleChangeMeridiem } = useTimeInputs();\n  const { startingHours, startingMinutes, startingMeridiem } = useMemo(() => {\n    const startingVals = deconstructValuesFromTimeString(onTimeWheelOpenStartingTime);\n    return {\n      startingHours: startingVals.hours,\n      startingMinutes: startingVals.minutes,\n      startingMeridiem: startingVals.meridiem,\n    };\n  }, [onTimeWheelOpenStartingTime]);\n\n  const currHourNum = useMemo(() => {\n    const hoursAsNum = convertToPositiveNumberIfPossible(hours);\n    if (hours && hoursAsNum !== -1) {\n      return hoursAsNum;\n    }\n    const startingHoursAsNum = convertToPositiveNumberIfPossible(startingHours);\n    if (startingHoursAsNum === -1) return 1;\n    return startingHoursAsNum;\n  }, [hours, startingHours]);\n\n  const currMinuteNum = useMemo(() => {\n    const minutesAsNum = convertToPositiveNumberIfPossible(minutes);\n    if (minutes && minutesAsNum !== -1) {\n      return minutesAsNum;\n    }\n    const startingMinutesAsNum = convertToPositiveNumberIfPossible(startingMinutes);\n    if (startingMinutesAsNum === -1) return 0;\n    return startingMinutesAsNum;\n  }, [minutes, startingMinutes]);\n\n  const currMeridiem = useMemo(() => {\n    if (meridiem !== '') return meridiem;\n    if (startingMeridiem !== '') return startingMeridiem;\n    return 'AM';\n  }, [meridiem, startingMeridiem]);\n\n  const totalMinutesList = useMemo(() => getTotalMinuteListWithStep(minutesInterval), [minutesInterval]);\n  const currMinuteIndex = useMemo(() => Math.floor(currMinuteNum / minutesInterval), [currMinuteNum, minutesInterval]);\n  const currHoursIndex = useMemo(\n    () => Math.floor(currHourNum / hoursInterval) - hoursStartPositionOffset,\n    [currHourNum],\n  );\n\n  const visibleHours = useMemo(() => {\n    const newHours = [];\n    if (currHoursIndex >= 1) newHours.push(totalHoursList[currHoursIndex - 1]);\n    else newHours.push(null);\n    newHours.push(totalHoursList[currHoursIndex]);\n    if (currHoursIndex <= 11) newHours.push(totalHoursList[currHoursIndex + 1]);\n    else newHours.push(null);\n\n    return newHours;\n  }, [currHoursIndex]);\n  const visibleMinutes = useMemo(() => {\n    const newMinutes = [];\n\n    if (currMinuteIndex >= 1) newMinutes.push(totalMinutesList[currMinuteIndex - 1]);\n    else newMinutes.push(null);\n    newMinutes.push(totalMinutesList[currMinuteIndex]);\n    if (currMinuteIndex < totalMinutesList.length) newMinutes.push(totalMinutesList[currMinuteIndex + 1]);\n    else newMinutes.push(null);\n    return newMinutes;\n  }, [currMinuteIndex, totalMinutesList]);\n\n  const handleTimeWheelBtnChangeHours = useCallback(\n    (newHours: string, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeHours(newHours, e);\n    },\n    [handleChangeHours],\n  );\n  const handleChangeCurrHour = useCallback(\n    (offset: number, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      const newH = currHourNum + offset;\n      if (newH > 0 && newH <= 12) handleChangeHours(prependStringWithPlaceHolders(`${newH}`, 2), e);\n    },\n    [currHourNum, handleChangeHours],\n  );\n  const handlePrevHour = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeCurrHour(-1, e);\n    },\n    [handleChangeCurrHour],\n  );\n  const handleNextHour = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeCurrHour(1, e);\n    },\n    [handleChangeCurrHour],\n  );\n\n  const handleTimeWheelBtnChangeMinutes = useCallback(\n    (newMinutes: string, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeMinutes(newMinutes, e);\n    },\n    [handleChangeMinutes],\n  );\n  const handleChangeCurrMinute = useCallback(\n    (offset: number, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      const newM = currMinuteNum + offset;\n      if (newM >= 0 && newM <= 59) handleChangeMinutes(prependStringWithPlaceHolders(`${newM}`, 2), e);\n    },\n    [currMinuteNum, handleChangeMinutes],\n  );\n  const handlePrevMinute = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeCurrMinute(-minutesInterval, e);\n    },\n    [handleChangeCurrMinute, minutesInterval],\n  );\n  const handleNextMinute = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeCurrMinute(minutesInterval, e);\n    },\n    [handleChangeCurrMinute, minutesInterval],\n  );\n\n  const handleTimeWheelBtnChangeMeridiem = useCallback(\n    (newMeridiem: string, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeMeridiem(newMeridiem, e);\n    },\n    [handleChangeMeridiem],\n  );\n\n  return useMemo(\n    () => ({\n      currHourNum,\n      visibleHours,\n      handlePrevHour,\n      handleNextHour,\n      handleTimeWheelBtnChangeHours,\n      currMinuteNum,\n      visibleMinutes,\n      handlePrevMinute,\n      handleNextMinute,\n      handleTimeWheelBtnChangeMinutes,\n      handleTimeWheelBtnChangeMeridiem,\n      currMeridiem,\n    }),\n    [\n      currHourNum,\n      currMinuteNum,\n      currMeridiem,\n      handleNextHour,\n      handleNextMinute,\n      handlePrevHour,\n      handlePrevMinute,\n      handleTimeWheelBtnChangeHours,\n      handleTimeWheelBtnChangeMeridiem,\n      handleTimeWheelBtnChangeMinutes,\n      visibleHours,\n      visibleMinutes,\n    ],\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useMemo, useCallback, useContext } from 'react';\nimport { useTimeInputs } from '../../TimeInputs/useTimeInputs.js';\nimport { convertToPositiveNumberIfPossible } from '../../../utils/numberHelpers.js';\nimport { prependStringWithPlaceHolders, deconstructValuesFromTimeString } from '../../../utils/stringHelpers.js';\nimport { ControlledDateTimePickerContext } from '../../../ControlledDateTimePickerCTX.js';\nimport type { DSControlledDateTimePickerT } from '../../../react-desc-prop-types.js';\n\nconst totalHoursList = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];\nconst hoursInterval = 1; // using this just to unify the logic between how hours and minutes are handled\nconst hoursStartPositionOffset = 1; // if array start from 01, this is 1, if start from 02, it's 2 ...\n\nconst getTotalMinuteListWithStep = (step = 1) => {\n  const length = Math.ceil(60 / step);\n  return new Array(length).fill('_').map((_v, i) => prependStringWithPlaceHolders(`${i * step}`, 2));\n};\ninterface UseCurrentDisplayedWheelsLogic {\n  currHourNum: number;\n  visibleHours: (string | null)[];\n  handlePrevHour: (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  handleNextHour: (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  handleTimeWheelBtnChangeHours: (newVal: string, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  currMinuteNum: number;\n  visibleMinutes: (string | null)[];\n  handlePrevMinute: (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  handleNextMinute: (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  handleTimeWheelBtnChangeMinutes: (newVal: string, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => void;\n  handleTimeWheelBtnChangeMeridiem: (\n    newMeridiem: string,\n    e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent,\n  ) => void;\n  currMeridiem: string;\n}\nexport const useCurrentDisplayedWheelsLogic = (): UseCurrentDisplayedWheelsLogic => {\n  const { minutesInterval, onTimeWheelOpenStartingTime, hours, minutes, meridiem } = useContext(\n    ControlledDateTimePickerContext,\n  );\n  const { handleChangeHours, handleChangeMinutes, handleChangeMeridiem } = useTimeInputs();\n  const { startingHours, startingMinutes, startingMeridiem } = useMemo(() => {\n    const startingVals = deconstructValuesFromTimeString(onTimeWheelOpenStartingTime);\n    return {\n      startingHours: startingVals.hours,\n      startingMinutes: startingVals.minutes,\n      startingMeridiem: startingVals.meridiem,\n    };\n  }, [onTimeWheelOpenStartingTime]);\n\n  const currHourNum = useMemo(() => {\n    const hoursAsNum = convertToPositiveNumberIfPossible(hours);\n    if (hours && hoursAsNum !== -1) {\n      return hoursAsNum;\n    }\n    const startingHoursAsNum = convertToPositiveNumberIfPossible(startingHours);\n    if (startingHoursAsNum === -1) return 1;\n    return startingHoursAsNum;\n  }, [hours, startingHours]);\n\n  const currMinuteNum = useMemo(() => {\n    const minutesAsNum = convertToPositiveNumberIfPossible(minutes);\n    if (minutes && minutesAsNum !== -1) {\n      return minutesAsNum;\n    }\n    const startingMinutesAsNum = convertToPositiveNumberIfPossible(startingMinutes);\n    if (startingMinutesAsNum === -1) return 0;\n    return startingMinutesAsNum;\n  }, [minutes, startingMinutes]);\n\n  const currMeridiem = useMemo(() => {\n    if (meridiem !== '') return meridiem;\n    if (startingMeridiem !== '') return startingMeridiem;\n    return 'AM';\n  }, [meridiem, startingMeridiem]);\n\n  const totalMinutesList = useMemo(() => getTotalMinuteListWithStep(minutesInterval), [minutesInterval]);\n  const currMinuteIndex = useMemo(() => Math.floor(currMinuteNum / minutesInterval), [currMinuteNum, minutesInterval]);\n  const currHoursIndex = useMemo(\n    () => Math.floor(currHourNum / hoursInterval) - hoursStartPositionOffset,\n    [currHourNum],\n  );\n\n  const visibleHours = useMemo(() => {\n    const newHours = [];\n    if (currHoursIndex >= 1) newHours.push(totalHoursList[currHoursIndex - 1]);\n    else newHours.push(null);\n    newHours.push(totalHoursList[currHoursIndex]);\n    if (currHoursIndex <= 11) newHours.push(totalHoursList[currHoursIndex + 1]);\n    else newHours.push(null);\n\n    return newHours;\n  }, [currHoursIndex]);\n  const visibleMinutes = useMemo(() => {\n    const newMinutes = [];\n\n    if (currMinuteIndex >= 1) newMinutes.push(totalMinutesList[currMinuteIndex - 1]);\n    else newMinutes.push(null);\n    newMinutes.push(totalMinutesList[currMinuteIndex]);\n    if (currMinuteIndex < totalMinutesList.length) newMinutes.push(totalMinutesList[currMinuteIndex + 1]);\n    else newMinutes.push(null);\n    return newMinutes;\n  }, [currMinuteIndex, totalMinutesList]);\n\n  const handleTimeWheelBtnChangeHours = useCallback(\n    (newHours: string, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeHours(newHours, e);\n    },\n    [handleChangeHours],\n  );\n  const handleChangeCurrHour = useCallback(\n    (offset: number, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      const newH = currHourNum + offset;\n      if (newH > 0 && newH <= 12) handleChangeHours(prependStringWithPlaceHolders(`${newH}`, 2), e);\n    },\n    [currHourNum, handleChangeHours],\n  );\n  const handlePrevHour = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeCurrHour(-1, e);\n    },\n    [handleChangeCurrHour],\n  );\n  const handleNextHour = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeCurrHour(1, e);\n    },\n    [handleChangeCurrHour],\n  );\n\n  const handleTimeWheelBtnChangeMinutes = useCallback(\n    (newMinutes: string, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeMinutes(newMinutes, e);\n    },\n    [handleChangeMinutes],\n  );\n  const handleChangeCurrMinute = useCallback(\n    (offset: number, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      const newM = currMinuteNum + offset;\n      if (newM >= 0 && newM <= 59) handleChangeMinutes(prependStringWithPlaceHolders(`${newM}`, 2), e);\n    },\n    [currMinuteNum, handleChangeMinutes],\n  );\n  const handlePrevMinute = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeCurrMinute(-minutesInterval, e);\n    },\n    [handleChangeCurrMinute, minutesInterval],\n  );\n  const handleNextMinute = useCallback(\n    (e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeCurrMinute(minutesInterval, e);\n    },\n    [handleChangeCurrMinute, minutesInterval],\n  );\n\n  const handleTimeWheelBtnChangeMeridiem = useCallback(\n    (newMeridiem: string, e: DSControlledDateTimePickerT.OnInternalValuesChangeEvent) => {\n      handleChangeMeridiem(newMeridiem, e);\n    },\n    [handleChangeMeridiem],\n  );\n\n  return useMemo(\n    () => ({\n      currHourNum,\n      visibleHours,\n      handlePrevHour,\n      handleNextHour,\n      handleTimeWheelBtnChangeHours,\n      currMinuteNum,\n      visibleMinutes,\n      handlePrevMinute,\n      handleNextMinute,\n      handleTimeWheelBtnChangeMinutes,\n      handleTimeWheelBtnChangeMeridiem,\n      currMeridiem,\n    }),\n    [\n      currHourNum,\n      currMinuteNum,\n      currMeridiem,\n      handleNextHour,\n      handleNextMinute,\n      handlePrevHour,\n      handlePrevMinute,\n      handleTimeWheelBtnChangeHours,\n      handleTimeWheelBtnChangeMeridiem,\n      handleTimeWheelBtnChangeMinutes,\n      visibleHours,\n      visibleMinutes,\n    ],\n  );\n};\n"],
   "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Styleds.js CHANGED Viewed

@@ -3,10 +3,7 @@ import { styled, th } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../exported-related/theming.js";
-const ResettedInput = styled("input", {
-  name: DSControlledDateTimePickerName,
-  slot: DSControlledDateTimePickerSlots.INPUT
-})`
+const ResettedInput = styled("input")`
   border: none;
   box-shadow: none;
   background: none;
@@ -38,6 +35,30 @@ const Styled2DigitsInput = styled(ResettedInput)`
   height: 100%;
   ${({ disabled }) => disabled ? `color: #616b7f;` : ``}
 `;
+const StyledDateInput = styled(Styled2DigitsInput, {
+  name: DSControlledDateTimePickerName,
+  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.DAY
+})``;
+const StyledMonthInput = styled(Styled2DigitsInput, {
+  name: DSControlledDateTimePickerName,
+  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.MONTH
+})``;
+const StyledYearInput = styled(Styled2DigitsInput, {
+  name: DSControlledDateTimePickerName,
+  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.YEAR
+})``;
+const StyledHourInput = styled(Styled2DigitsInput, {
+  name: DSControlledDateTimePickerName,
+  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.HOUR
+})``;
+const StyledMinuteInput = styled(Styled2DigitsInput, {
+  name: DSControlledDateTimePickerName,
+  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MINUTE
+})``;
+const StyledMeridiemInput = styled(Styled2DigitsInput, {
+  name: DSControlledDateTimePickerName,
+  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM
+})``;
 const StyledMin4DigitsInput = styled(ResettedInput)`
   width: 100%;
   height: 100%;
@@ -144,12 +165,18 @@ export {
   Styled2DigitsInput,
   StyledClearButton,
   StyledColonSeparator,
+  StyledDateInput,
   StyledDateInputsWrapperGrid,
   StyledFocusWithIn,
+  StyledHourInput,
   StyledInputsWrapperGrid,
+  StyledMeridiemInput,
   StyledMin4DigitsInput,
+  StyledMinuteInput,
+  StyledMonthInput,
   StyledPickersIconsWrapperGrid,
   StyledSeparator,
-  StyledTimeInputsWrapperGrid
+  StyledTimeInputsWrapperGrid,
+  StyledYearInput
 };
 //# sourceMappingURL=Styleds.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Styleds.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming.js';\n\nconst ResettedInput = styled('input', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.INPUT,\n})`\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  padding-top: 2px;\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 }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTAINER,\n})<{ isControllerOnly: boolean; hasError: boolean; justPicker: boolean }>`\n  width: max-content;\n  align-items: center;\n  background-color: white;\n  ${({ isControllerOnly }) =>\n    isControllerOnly\n      ? ``\n      : `\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  `}\n\n  border-color: ${({ theme, hasError, disabled }) => {\n    if (hasError) return theme.colors.danger[900];\n    if (disabled) return theme.colors.neutral[400];\n    return theme.colors.neutral[200];\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`;\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: 26px;`)}\n  :before {\n    content: '';\n    position: absolute;\n    top: 0px;\n    left: -1px;\n    width: 100%;\n    height: 100%;\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[200]}\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,UAAU;AAC3B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC,uCAAuC;AAEhF,MAAM,gBAAgB,OAAO,SAAS;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAckB,GAAG,WAAW,SAAS;AAAA,aAC7B,GAAG,MAAM,aAAa;AAAA;AAAA;AAI5B,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,uBAAuB,OAAO,IAAI;AAAA;AAAA;AAAA;AAKxC,MAAM,qBAAqB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,wBAAwB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB;AAAA;AAG/C,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMU,CAAC,EAAE,OAAO,UAAU,SAAS,MAAM;AACjD,MAAI;AAAU,WAAO,MAAM,OAAO,OAAO,GAAG;AAC5C,MAAI;AAAU,WAAO,MAAM,OAAO,QAAQ,GAAG;AAC7C,SAAO,MAAM,OAAO,QAAQ,GAAG;AACjC;AAAA;AAAA;AAAA,kBAGgB,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM;AAAA;AAAA;AAAA,IAGtD,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,GAAG,OAAO;AAAA;AAGtF,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3C,MAAM,gCAAgC,OAAO,IAAI;AAAA;AAAA,IAEpD,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASjD,CAAC,EAAE,OAAO,kBAAkB,SAAS,MACrC,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAKpF,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWlB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,cAAc,MAAO,gBAAgB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../exported-related/theming.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  padding-top: 2px;\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 }) => (disabled ? `color: #616b7f;` : ``)}\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 }) => (disabled ? `color: #616b7f;` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTAINER,\n})<{ isControllerOnly: boolean; hasError: boolean; justPicker: boolean; disabled: boolean }>`\n  width: max-content;\n  align-items: center;\n  background-color: white;\n  ${({ isControllerOnly }) =>\n    isControllerOnly\n      ? ``\n      : `\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  `}\n\n  border-color: ${({ theme, hasError, disabled }) => {\n    if (hasError) return theme.colors.danger[900];\n    if (disabled) return theme.colors.neutral[400];\n    return theme.colors.neutral[200];\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`;\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: 26px;`)}\n  :before {\n    content: '';\n    position: absolute;\n    top: 0px;\n    left: -1px;\n    width: 100%;\n    height: 100%;\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[200]}\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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2, { useCallback } from "react";
-import { Styled2DigitsInput } from "../Styleds.js";
+import { StyledHourInput } from "../Styleds.js";
 import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid.js";
 const regExpNumbers = /^[0-9]+$/;
 const isInvalidHour = (hours) => {
@@ -36,7 +36,7 @@ const HHInput = React2.memo(
       [onChange]
     );
     return /* @__PURE__ */ jsx(
-      Styled2DigitsInput,
+      StyledHourInput,
       {
         autoFocus: autoFocusHourInput,
         onChange: validateOnChange,
@@ -50,8 +50,8 @@ const HHInput = React2.memo(
             DomElem?.focus?.();
         },
         placeholder,
-        "aria-label": `hours input field ${ariaCurrentValueForInputs}`,
         "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
+        "aria-label": `hours input field ${ariaCurrentValueForInputs}`,
         disabled,
         "aria-disabled": disabled,
         getOwnerProps: getProps

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/TimeInputs/HHInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { Styled2DigitsInput } from '../Styleds.js';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\n\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  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  autoFocusHourInput: boolean;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n}\nexport const HHInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    autoFocusHourInput,\n    isFocused,\n    getProps,\n  }: HHInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidHour(e.target.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <Styled2DigitsInput\n        autoFocus={autoFocusHourInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        aria-label={`hours input field ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoDjB;AApDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0BAA0B;AACnC,SAAS,0CAA0C;AAInD,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,UAAkB;AACvC,MAAI,UAAU;AAAI,WAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAeO,MAAM,UAAUA,OAAM;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,EACF,MAAmC;AACjC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,cAAc,EAAE,OAAO,KAAK,GAAG;AACjC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK,CAAC,YAA8B;AAClC,qBAAW,UAAU;AACrB,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,cAAY,qBAAqB;AAAA,QACjC,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { StyledHourInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.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  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  autoFocusHourInput: boolean;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n}\nexport const HHInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    autoFocusHourInput,\n    isFocused,\n    getProps,\n  }: HHInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidHour(e.target.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledHourInput\n        autoFocus={autoFocusHourInput}\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR}\n        aria-label={`hours input field ${ariaCurrentValueForInputs}`}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmDjB;AAnDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,uBAAuB;AAGhC,SAAS,0CAA0C;AACnD,MAAM,gBAAgB;AACtB,MAAM,gBAAgB,CAAC,UAAkB;AACvC,MAAI,UAAU;AAAI,WAAO;AACzB,QAAM,aAAa,cAAc,KAAK,KAAK;AAC3C,SAAO,MAAM,SAAS,KAAK,UAAU,QAAQ,CAAC,cAAc,OAAO,SAAS,OAAO,EAAE,IAAI;AAC3F;AAeO,MAAM,UAAUA,OAAM;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,EACF,MAAmC;AACjC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,cAAc,EAAE,OAAO,KAAK,GAAG;AACjC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK,CAAC,YAA8B;AAClC,qBAAW,UAAU;AACrB,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,eAAa,mCAAmC,YAAY;AAAA,QAC5D,cAAY,qBAAqB;AAAA,QACjC;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/TimeInputs/MeridiemInput.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2, { useCallback } from "react";
-import { Styled2DigitsInput } from "../Styleds.js";
+import { StyledMeridiemInput } from "../Styleds.js";
 import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid.js";
 const validFirstDigits = ["a", "A", "p", "P"];
 const validSecondDigits = ["m", "M"];
@@ -38,7 +38,7 @@ const MeridiemInput = React2.memo(
       [onChange]
     );
     return /* @__PURE__ */ jsx(
-      Styled2DigitsInput,
+      StyledMeridiemInput,
       {
         onChange: validateOnChange,
         onBlur,
@@ -50,9 +50,9 @@ const MeridiemInput = React2.memo(
           if (isFocused)
             DomElem?.focus?.();
         },
+        "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
         placeholder,
         "aria-label": `meridiem input field ${ariaCurrentValueForInputs}`,
-        "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
         disabled,
         "aria-disabled": disabled,
         getOwnerProps: getProps

package/dist/esm/parts/TimeInputs/MeridiemInput.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/TimeInputs/MeridiemInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { Styled2DigitsInput } from '../Styleds.js';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\n\nconst validFirstDigits = ['a', 'A', 'p', 'P'];\nconst validSecondDigits = ['m', 'M'];\nconst isInvalidMeridiem = (meridiem: string) => {\n  if (meridiem === '') return false;\n  const [firstDigit, secondDigit] = meridiem.split('');\n  const isValidFirstDigit = (meridiem.length < 1 && !firstDigit) || validFirstDigits.includes(firstDigit);\n  const isValidSecondDigit = !secondDigit || validSecondDigits.includes(secondDigit);\n  return meridiem.length > 2 || !isValidFirstDigit || !isValidSecondDigit;\n};\n\ninterface MeridiemInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n}\nexport const MeridiemInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    isFocused,\n    getProps,\n  }: MeridiemInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMeridiem(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <Styled2DigitsInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        aria-label={`meridiem input field ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsDjB;AAtDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0BAA0B;AACnC,SAAS,0CAA0C;AAInD,MAAM,mBAAmB,CAAC,KAAK,KAAK,KAAK,GAAG;AAC5C,MAAM,oBAAoB,CAAC,KAAK,GAAG;AACnC,MAAM,oBAAoB,CAAC,aAAqB;AAC9C,MAAI,aAAa;AAAI,WAAO;AAC5B,QAAM,CAAC,YAAY,WAAW,IAAI,SAAS,MAAM,EAAE;AACnD,QAAM,oBAAqB,SAAS,SAAS,KAAK,CAAC,cAAe,iBAAiB,SAAS,UAAU;AACtG,QAAM,qBAAqB,CAAC,eAAe,kBAAkB,SAAS,WAAW;AACjF,SAAO,SAAS,SAAS,KAAK,CAAC,qBAAqB,CAAC;AACvD;AAeO,MAAM,gBAAgBA,OAAM;AAAA,EACjC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAyC;AACvC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,kBAAkB,GAAG,QAAQ,KAAK,GAAG;AACvC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK,CAAC,YAA8B;AAClC,qBAAW,UAAU;AACrB,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,cAAY,wBAAwB;AAAA,QACpC,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { StyledMeridiemInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\n\nconst validFirstDigits = ['a', 'A', 'p', 'P'];\nconst validSecondDigits = ['m', 'M'];\nconst isInvalidMeridiem = (meridiem: string) => {\n  if (meridiem === '') return false;\n  const [firstDigit, secondDigit] = meridiem.split('');\n  const isValidFirstDigit = (meridiem.length < 1 && !firstDigit) || validFirstDigits.includes(firstDigit);\n  const isValidSecondDigit = !secondDigit || validSecondDigits.includes(secondDigit);\n  return meridiem.length > 2 || !isValidFirstDigit || !isValidSecondDigit;\n};\n\ninterface MeridiemInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n}\nexport const MeridiemInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    isFocused,\n    getProps,\n  }: MeridiemInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMeridiem(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledMeridiemInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM}\n        placeholder={placeholder}\n        aria-label={`meridiem input field ${ariaCurrentValueForInputs}`}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsDjB;AAtDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,2BAA2B;AAGpC,SAAS,0CAA0C;AAEnD,MAAM,mBAAmB,CAAC,KAAK,KAAK,KAAK,GAAG;AAC5C,MAAM,oBAAoB,CAAC,KAAK,GAAG;AACnC,MAAM,oBAAoB,CAAC,aAAqB;AAC9C,MAAI,aAAa;AAAI,WAAO;AAC5B,QAAM,CAAC,YAAY,WAAW,IAAI,SAAS,MAAM,EAAE;AACnD,QAAM,oBAAqB,SAAS,SAAS,KAAK,CAAC,cAAe,iBAAiB,SAAS,UAAU;AACtG,QAAM,qBAAqB,CAAC,eAAe,kBAAkB,SAAS,WAAW;AACjF,SAAO,SAAS,SAAS,KAAK,CAAC,qBAAqB,CAAC;AACvD;AAeO,MAAM,gBAAgBA,OAAM;AAAA,EACjC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAyC;AACvC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,kBAAkB,GAAG,QAAQ,KAAK,GAAG;AACvC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK,CAAC,YAA8B;AAClC,qBAAW,UAAU;AACrB,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAY,wBAAwB;AAAA,QACpC;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/TimeInputs/MinutesInput.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2, { useCallback } from "react";
+import { StyledMinuteInput } from "../Styleds.js";
 import { ControlledDateTimePickerDatatestid } from "../../ControlledDateTimePickerDatatestid.js";
-import { Styled2DigitsInput } from "../Styleds.js";
 const regExpNumbers = /^[0-9]+$/;
 const isInvalidMinute = (minutes) => {
   if (minutes === "")
@@ -35,7 +35,7 @@ const MinutesInput = React2.memo(
       [onChange]
     );
     return /* @__PURE__ */ jsx(
-      Styled2DigitsInput,
+      StyledMinuteInput,
       {
         onChange: validateOnChange,
         onBlur,
@@ -47,9 +47,9 @@ const MinutesInput = React2.memo(
           if (isFocused)
             DomElem?.focus?.();
         },
+        "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE,
         placeholder,
         "aria-label": `minutes input field ${ariaCurrentValueForInputs}`,
-        "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE,
         disabled,
         "aria-disabled": disabled,
         getOwnerProps: getProps

package/dist/esm/parts/TimeInputs/MinutesInput.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/TimeInputs/MinutesInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nimport { Styled2DigitsInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\n\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMinute = (minutes: string) => {\n  if (minutes === '') return false;\n  const numberOnly = regExpNumbers.test(minutes);\n  return minutes.length > 2 || !numberOnly || Number.parseInt(minutes, 10) > 60;\n};\ninterface MinutesInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n}\nexport const MinutesInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    isFocused,\n    getProps,\n  }: MinutesInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMinute(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <Styled2DigitsInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        placeholder={placeholder}\n        aria-label={`minutes input field ${ariaCurrentValueForInputs}`}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkDjB;AAlDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,0CAA0C;AACnD,SAAS,0BAA0B;AAInC,MAAM,gBAAgB;AACtB,MAAM,kBAAkB,CAAC,YAAoB;AAC3C,MAAI,YAAY;AAAI,WAAO;AAC3B,QAAM,aAAa,cAAc,KAAK,OAAO;AAC7C,SAAO,QAAQ,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,SAAS,EAAE,IAAI;AAC7E;AAcO,MAAM,eAAeA,OAAM;AAAA,EAChC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAwC;AACtC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,gBAAgB,GAAG,QAAQ,KAAK,GAAG;AACrC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK,CAAC,YAA8B;AAClC,qBAAW,UAAU;AACrB,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA;AAAA,QACA,cAAY,uBAAuB;AAAA,QACnC,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { StyledMinuteInput } from '../Styleds.js';\nimport type { DSControlledDateTimePickerInternalsT } from '../../sharedTypes.js';\nimport type { ControlledDateTimePickerContextT } from '../../config/useControlledDateTimePicker.js';\nimport { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';\nconst regExpNumbers = /^[0-9]+$/;\nconst isInvalidMinute = (minutes: string) => {\n  if (minutes === '') return false;\n  const numberOnly = regExpNumbers.test(minutes);\n  return minutes.length > 2 || !numberOnly || Number.parseInt(minutes, 10) > 60;\n};\ninterface MinutesInputsPropsT {\n  onChange: DSControlledDateTimePickerInternalsT.OnChangeFunc;\n  onBlur: DSControlledDateTimePickerInternalsT.OnBlurFunc;\n  onFocus: DSControlledDateTimePickerInternalsT.OnFocusFunc;\n  onKeyDown: DSControlledDateTimePickerInternalsT.OnKeyDown;\n  value: string;\n  disabled: boolean;\n  contextRef: React.MutableRefObject<HTMLInputElement | null>;\n  placeholder: string;\n  ariaCurrentValueForInputs: string;\n  isFocused: boolean;\n  getProps: ControlledDateTimePickerContextT['getProps'];\n}\nexport const MinutesInput = React.memo(\n  ({\n    onChange,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    value,\n    disabled,\n    placeholder,\n    ariaCurrentValueForInputs,\n    contextRef,\n    isFocused,\n    getProps,\n  }: MinutesInputsPropsT): JSX.Element => {\n    const validateOnChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInvalidMinute(e?.target?.value)) {\n          e.preventDefault();\n          return;\n        }\n        onChange(e);\n      },\n      [onChange],\n    );\n    return (\n      <StyledMinuteInput\n        onChange={validateOnChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        value={value}\n        ref={(DomElem: HTMLInputElement) => {\n          contextRef.current = DomElem;\n          if (isFocused) DomElem?.focus?.();\n        }}\n        data-testid={ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE}\n        placeholder={placeholder}\n        aria-label={`minutes input field ${ariaCurrentValueForInputs}`}\n        disabled={disabled}\n        aria-disabled={disabled}\n        getOwnerProps={getProps}\n      />\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiDjB;AAjDN,OAAOA,UAAS,mBAAmB;AACnC,SAAS,yBAAyB;AAGlC,SAAS,0CAA0C;AACnD,MAAM,gBAAgB;AACtB,MAAM,kBAAkB,CAAC,YAAoB;AAC3C,MAAI,YAAY;AAAI,WAAO;AAC3B,QAAM,aAAa,cAAc,KAAK,OAAO;AAC7C,SAAO,QAAQ,SAAS,KAAK,CAAC,cAAc,OAAO,SAAS,SAAS,EAAE,IAAI;AAC7E;AAcO,MAAM,eAAeA,OAAM;AAAA,EAChC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAwC;AACtC,UAAM,mBAAmB;AAAA,MACvB,CAAC,MAA2C;AAC1C,YAAI,gBAAgB,GAAG,QAAQ,KAAK,GAAG;AACrC,YAAE,eAAe;AACjB;AAAA,QACF;AACA,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK,CAAC,YAA8B;AAClC,qBAAW,UAAU;AACrB,cAAI;AAAW,qBAAS,QAAQ;AAAA,QAClC;AAAA,QACA,eAAa,mCAAmC,YAAY;AAAA,QAC5D;AAAA,QACA,cAAY,uBAAuB;AAAA,QACnC;AAAA,QACA,iBAAe;AAAA,QACf,eAAe;AAAA;AAAA,IACjB;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/esm/{propTypes.js → react-desc-prop-types.js} RENAMED Viewed

@@ -89,4 +89,4 @@ export {
   defaultProps,
   propTypes
 };
-//# sourceMappingURL=propTypes.js.map
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/{propTypes.js.map → react-desc-prop-types.js.map} RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerDatatestIdPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { ControlledDateTimePickerDatatestid } from './ControlledDateTimePickerDatatestid.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\nexport declare namespace DSControlledDateTimePickerT {\n  type DataTestIdType = typeof ControlledDateTimePickerDatatestid;\n  // typescript type that rapresents the union of all the values for ControlledDateTimePickerDatatestid\n  export type FlatDataTestIdValues = {\n    [K in keyof DataTestIdType]: DataTestIdType[K] extends Record<string, unknown>\n      ? DataTestIdType[K][keyof DataTestIdType[K]] // this is only 1 level deep, but it's enough for our needs right now\n      : // can be extended to more levels if needed as follows:\n        // ? DataTestIdType[K][keyof DataTestIdType[K]] extends Record<string, unknown>\n        //   ? DataTestIdType[K][keyof DataTestIdType[K]][keyof DataTestIdType[K][keyof DataTestIdType[K]]]\n        //   : DataTestIdType[K][keyof DataTestIdType[K]]\n        DataTestIdType[K];\n  }[keyof DataTestIdType];\n\n  export type AriaAndDataPropsPerDataTestId = {\n    [key in FlatDataTestIdValues]?: AriaAndDataPropsOrPropsGetter;\n  };\n\n  export type OnInternalValuesChangeEvent =\n    | React.ChangeEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLInputElement>\n    | React.KeyboardEvent<HTMLButtonElement>\n    | React.KeyboardEvent\n    | React.MouseEvent<HTMLInputElement>\n    | React.MouseEvent<HTMLButtonElement>;\n  export type ControlTypes =\n    | 'full-date-time'\n    | 'date-time-inputs'\n    | 'date-time-picker'\n    | 'date-time-picker-controller-only'\n    | 'full-date'\n    | 'date-inputs'\n    | 'date-picker'\n    | 'date-picker-controller-only'\n    | 'full-time'\n    | 'time-inputs'\n    | 'time-picker'\n    | 'time-picker-controller-only';\n  export interface InternalInputsChangeMetaInfo {\n    isAutomaticFillTrigger?: boolean;\n    isDayPresentInMonth?: boolean;\n    isOutOfRangeDay?: boolean;\n    isDisabledDay?: boolean;\n    isDisabledTime?: boolean;\n    suggestedErrorMsg?: string;\n    newDateTimeString?: string;\n    newDateString?: string;\n    newTimeString?: string;\n  }\n\n  export type OnDateChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n  export type OnTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n  export type OnDateTimeChange = (val: string, metaInfo: InternalInputsChangeMetaInfo) => void;\n  export type OnInternalInputsChange = (\n    val: string,\n    e: OnInternalValuesChangeEvent,\n    metaInfo?: InternalInputsChangeMetaInfo,\n  ) => void;\n  export type AppOnInputChange = (\n    val: string,\n    e: OnInternalValuesChangeEvent,\n    metaInfo: InternalInputsChangeMetaInfo,\n  ) => void;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ DATE CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n  export interface DefaultDateProps {\n    onMonthChange: AppOnInputChange;\n    onDayChange: AppOnInputChange;\n    onYearChange: AppOnInputChange;\n    onPickerOpen: NoopishFunc;\n    onPickerClose: NoopishFunc;\n    getIsDisabledDay: BooleanGetter<string>;\n    getIsOutOfRangeDay: BooleanGetter<string>;\n    getIsStartRangeDay: BooleanGetter<string>;\n    getIsDayInRange: BooleanGetter<string>;\n    getIsEndRangeDay: BooleanGetter<string>;\n    isClearable: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalDatePickerProps extends AriaAndDataPropsPerDataTestId {\n    emptyPickerStartingMonth?: string;\n    onCalendarOpenFocusedDay?: string;\n    pickerFooterMsg?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n  }\n  export interface RequiredDatePickerProps {\n    type: 'full-date' | 'date-inputs' | 'date-picker' | 'date-picker-controller-only';\n    date: string;\n    onDateChange: OnDateChange;\n  }\n  export type DatePickerProps = OptionalDatePickerProps & Partial<DefaultDateProps> & RequiredDatePickerProps;\n  export type InternalDatePickerProps = OptionalDatePickerProps & DefaultDateProps & RequiredDatePickerProps;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ TIME CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n\n  export interface DefaultTimeProps {\n    onHourChange: AppOnInputChange;\n    onMinuteChange: AppOnInputChange;\n    onMeridiemChange: AppOnInputChange;\n    onPickerOpen: NoopishFunc;\n    onPickerClose: NoopishFunc;\n    getIsDisabledTime: BooleanGetter<string>;\n    minutesInterval: number;\n    isClearable: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalTimePickerProps extends AriaAndDataPropsPerDataTestId {\n    pickerFooterMsg?: string;\n    onTimeWheelOpenStartingTime?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n  }\n  export interface RequiredTimePickerProps {\n    type: 'full-time' | 'time-inputs' | 'time-picker' | 'time-picker-controller-only';\n    time: string;\n    onTimeChange: OnTimeChange;\n  }\n  export type TimePickerProps = OptionalTimePickerProps & Partial<DefaultTimeProps> & RequiredTimePickerProps;\n  export type InternalTimePickerProps = OptionalTimePickerProps & DefaultTimeProps & RequiredTimePickerProps;\n\n  /* -------------------- ---------------------- ------------------------*/\n  /* -------------------- DATETIME CONFIGURATION ------------------------*/\n  /* -------------------- ---------------------- ------------------------*/\n\n  export type DefaultDateTimeProps = DefaultTimeProps &\n    DefaultDateProps & {\n      onDateChange: OnDateChange;\n      onTimeChange: OnTimeChange;\n    };\n  export type OptionalDateTimeProps = AriaAndDataPropsPerDataTestId & OptionalTimePickerProps & OptionalDatePickerProps;\n  export interface RequiredDateTimeProps {\n    type: 'full-date-time' | 'date-time-inputs' | 'date-time-picker' | 'date-time-picker-controller-only';\n    dateTime: string;\n    onDateTimeChange: OnDateTimeChange;\n  }\n\n  export type DateTimePickerProps = Partial<DefaultDateTimeProps> & OptionalDateTimeProps & RequiredDateTimeProps;\n  export type InternalDateTimePickerProps = DefaultDateTimeProps & OptionalDateTimeProps & RequiredDateTimeProps;\n\n  /* ---------------------- ------------------- -------------------------*/\n  /* ---------------------- FINAL CONFIGURATION -------------------------*/\n  /* ---------------------- ------------------- -------------------------*/\n  export type DefaultProps = DefaultDateTimeProps & { type: 'full-date-time' };\n  export type Props = DateTimePickerProps | DatePickerProps | TimePickerProps;\n  export type InternalProps = InternalDateTimePickerProps | InternalDatePickerProps | InternalTimePickerProps;\n}\n\nexport const defaultProps: DSControlledDateTimePickerT.DefaultProps = {\n  type: 'full-date-time',\n  onDateChange: noop,\n  onMonthChange: noop,\n  onDayChange: noop,\n  onYearChange: noop,\n  onTimeChange: noop,\n  onHourChange: noop,\n  onMinuteChange: noop,\n  onMeridiemChange: noop,\n  onPickerOpen: noop,\n  onPickerClose: noop,\n  getIsDisabledDay: defaultReturnFalse,\n  getIsOutOfRangeDay: defaultReturnFalse,\n  getIsStartRangeDay: defaultReturnFalse,\n  getIsDayInRange: defaultReturnFalse,\n  getIsEndRangeDay: defaultReturnFalse,\n  getIsDisabledTime: defaultReturnFalse,\n  minutesInterval: 1,\n  isClearable: false,\n  disabled: false,\n  hasError: false,\n  autoFocus: false,\n  preventCloseOnSelection: false,\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  type: PropTypes.oneOf([\n    'full-date-time',\n    'date-time-inputs',\n    'date-time-picker',\n    'date-time-picker-controller-only',\n    'full-date',\n    'date-inputs',\n    'date-picker',\n    'date-picker-controller-only',\n    'full-time',\n    'time-inputs',\n    'time-picker',\n    'time-picker-controller-only',\n  ])\n    .description('Type of time form control to use')\n    .defaultValue('full-date-time'),\n  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue(false),\n  isClearable: PropTypes.bool.description('with or without clearable button').defaultValue(false),\n  dateTime: PropTypes.string.description('when using date-time types, this is the value of the controller'),\n  date: PropTypes.string.description('when using date types, this is the value of the controller'),\n  time: PropTypes.string.description('when using time types, this is the value of the controller'),\n  onDateChange: PropTypes.func.description('(newDateString, metaInformations) => void'),\n  onTimeChange: PropTypes.func.description('(newTimeString, metaInformations) => void'),\n  onDateTimeChange: PropTypes.func.description('(newDateTimeString, metaInformations) => void'),\n  onMonthChange: PropTypes.func.description('(newMonthString, event, metaInformations) => void'),\n  onDayChange: PropTypes.func.description('(newDayString, event, metaInformations) => void'),\n  onYearChange: PropTypes.func.description('(newYearString, event, metaInformations) => void'),\n  onHourChange: PropTypes.func.description('(newHourString, event, metaInformations) => void'),\n  onMinuteChange: PropTypes.func.description('(newMinuteString, event, metaInformations) => void'),\n  onMeridiemChange: PropTypes.func.description('(newMeridiemString, event, metaInformations) => void'),\n  getIsDisabledDay: PropTypes.func.description(\n    '(dayAsString) => true for marking as disabled, false for marking as valid',\n  ),\n  getIsOutOfRangeDay: PropTypes.func.description(\n    '(dayAsString) => true for marking as disabled, false for marking as valid',\n  ),\n  getIsDisabledTime: PropTypes.func.description(\n    '(timeAsString) => true for marking as disabled, false for marking as valid',\n  ),\n  emptyPickerStartingMonth: PropTypes.string.description(\n    'which month to start the calendar on open, when value is empty, string following the \"MM/__/YYYY\" pattern',\n  ),\n  onCalendarOpenFocusedDay: PropTypes.string\n    .description('which day to focus on calendar open when value is empty, string following the \"MM/DD/YYYY\" pattern')\n    .defaultValue('if value is empty current month, else current month'),\n  onTimeWheelOpenStartingTime: PropTypes.string\n    .description(\n      'which day to start the timewheel on picker open when value is empty, string following the HH:MM AA\" pattern',\n    )\n    .defaultValue('01:00 AM'),\n  minutesInterval: PropTypes.number\n    .description('increments/decrements of minutes in time related controllers interactions')\n    .defaultValue('1'),\n  'data-testid': PropTypes.string.description('Unique id for tests.').defaultValue(''),\n  ...getPropsPerDatatestIdPropTypes(ControlledDateTimePickerDatatestid),\n} as WeakValidationMap<unknown>;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0CAA0C;AAGnD,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAa;AAgKjC,MAAM,eAAyD;AAAA,EACpE,MAAM;AAAA,EACN,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,yBAAyB;AAC3B;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,MAAM;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,kCAAkC,EAC9C,aAAa,gBAAgB;AAAA,EAChC,UAAU,UAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,KAAK;AAAA,EAC9F,aAAa,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AAAA,EAC9F,UAAU,UAAU,OAAO,YAAY,iEAAiE;AAAA,EACxG,MAAM,UAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,MAAM,UAAU,OAAO,YAAY,4DAA4D;AAAA,EAC/F,cAAc,UAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,cAAc,UAAU,KAAK,YAAY,2CAA2C;AAAA,EACpF,kBAAkB,UAAU,KAAK,YAAY,+CAA+C;AAAA,EAC5F,eAAe,UAAU,KAAK,YAAY,mDAAmD;AAAA,EAC7F,aAAa,UAAU,KAAK,YAAY,iDAAiD;AAAA,EACzF,cAAc,UAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,cAAc,UAAU,KAAK,YAAY,kDAAkD;AAAA,EAC3F,gBAAgB,UAAU,KAAK,YAAY,oDAAoD;AAAA,EAC/F,kBAAkB,UAAU,KAAK,YAAY,sDAAsD;AAAA,EACnG,kBAAkB,UAAU,KAAK;AAAA,IAC/B;AAAA,EACF;AAAA,EACA,oBAAoB,UAAU,KAAK;AAAA,IACjC;AAAA,EACF;AAAA,EACA,mBAAmB,UAAU,KAAK;AAAA,IAChC;AAAA,EACF;AAAA,EACA,0BAA0B,UAAU,OAAO;AAAA,IACzC;AAAA,EACF;AAAA,EACA,0BAA0B,UAAU,OACjC,YAAY,oGAAoG,EAChH,aAAa,qDAAqD;AAAA,EACrE,6BAA6B,UAAU,OACpC;AAAA,IACC;AAAA,EACF,EACC,aAAa,UAAU;AAAA,EAC1B,iBAAiB,UAAU,OACxB,YAAY,2EAA2E,EACvF,aAAa,GAAG;AAAA,EACnB,eAAe,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,EAAE;AAAA,EACnF,GAAG,+BAA+B,kCAAkC;AACtE;",
   "names": []

package/dist/esm/typescript-testing/typescript-system-message-valid.js ADDED Viewed

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DSControlledDateTimePicker } from "../index.js";
+const testRequiredProps = {
+  dateTime: "10/07/2023",
+  onDateTimeChange: (dateTime) => {
+  },
+  type: "full-date-time"
+};
+const testOptionalProps = {};
+const testPartialDefaults = {};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  autoFocus: false,
+  disabled: false,
+  getIsDayInRange: (day) => true,
+  getIsDisabledDay: (day) => false,
+  getIsDisabledTime: (time) => false,
+  getIsEndRangeDay: (day) => false,
+  getIsStartRangeDay: (day) => false,
+  getIsOutOfRangeDay: (day) => false,
+  hasError: false,
+  isClearable: false,
+  minutesInterval: 1,
+  onDateChange: (date) => {
+  },
+  onTimeChange: (time) => {
+  },
+  onDayChange: (day) => {
+  },
+  onMonthChange: (month) => {
+  },
+  onYearChange: (year) => {
+  },
+  onHourChange: (hour) => {
+  },
+  onMinuteChange: (minute) => {
+  },
+  onMeridiemChange: (meridiem) => {
+  },
+  onPickerClose: () => {
+  },
+  onPickerOpen: () => {
+  },
+  preventCloseOnSelection: false
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  dateTime: "10/07/2023",
+  onDateTimeChange: (dateTime) => {
+  },
+  type: "full-date-time"
+};
+const testInferedTypeCompatibility = {
+  dateTime: "10/07/2023",
+  onDateTimeChange: (dateTime) => {
+  },
+  type: "full-date-time"
+};
+const testDefinitionAsConst = {
+  dateTime: "10/07/2023",
+  onDateTimeChange: (dateTime) => {
+  },
+  type: "full-date-time"
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DSControlledDateTimePicker, { ...testExplicitDefinition }),
+  /* @__PURE__ */ jsx(DSControlledDateTimePicker, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ jsx(DSControlledDateTimePicker, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ jsx(
+    DSControlledDateTimePicker,
+    {
+      dateTime: "10/07/2023",
+      onDateTimeChange: (dateTime) => {
+      },
+      type: "full-date-time"
+    }
+  )
+] });
+//# sourceMappingURL=typescript-system-message-valid.js.map

package/dist/esm/typescript-testing/typescript-system-message-valid.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-system-message-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n// eslint-disable-line no-console\nimport { DSControlledDateTimePicker } from '../index.js';\nimport type { DSControlledDateTimePickerT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSControlledDateTimePickerT.DateTimePickerProps;\ntype ComponentPropsInternals = DSControlledDateTimePickerT.InternalDateTimePickerProps;\ntype ComponentPropsDefaultProps = DSControlledDateTimePickerT.DefaultDateTimeProps;\ntype ComponentPropsOptionalProps = DSControlledDateTimePickerT.OptionalDateTimeProps;\ntype ComponentPropsRequiredProps = DSControlledDateTimePickerT.RequiredDateTimeProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n};\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  autoFocus: false,\n  disabled: false,\n  getIsDayInRange: (day: string) => true,\n  getIsDisabledDay: (day: string) => false,\n  getIsDisabledTime: (time: string) => false,\n  getIsEndRangeDay: (day: string) => false,\n  getIsStartRangeDay: (day: string) => false,\n  getIsOutOfRangeDay: (day: string) => false,\n  hasError: false,\n  isClearable: false,\n  minutesInterval: 1,\n  onDateChange: (date: string) => {},\n  onTimeChange: (time: string) => {},\n  onDayChange: (day: string) => {},\n  onMonthChange: (month: string) => {},\n  onYearChange: (year: string) => {},\n  onHourChange: (hour: string) => {},\n  onMinuteChange: (minute: string) => {},\n  onMeridiemChange: (meridiem: string) => {},\n  onPickerClose: () => {},\n  onPickerOpen: () => {},\n  preventCloseOnSelection: false,\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  dateTime: '10/07/2023',\n  onDateTimeChange: (dateTime: string) => {},\n  type: 'full-date-time',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSControlledDateTimePicker {...testExplicitDefinition} />\n    <DSControlledDateTimePicker {...testInferedTypeCompatibility} />\n    <DSControlledDateTimePicker {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSControlledDateTimePicker\n      dateTime=\"10/07/2023\"\n      onDateTimeChange={(dateTime: string) => {}}\n      type=\"full-date-time\"\n    />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyFrB,mBAEE,KAFF;AAvFF,SAAS,kCAAkC;AAU3C,MAAM,oBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AACA,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D,CAAC;AAClE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AAAA,EACX,UAAU;AAAA,EACV,iBAAiB,CAAC,QAAgB;AAAA,EAClC,kBAAkB,CAAC,QAAgB;AAAA,EACnC,mBAAmB,CAAC,SAAiB;AAAA,EACrC,kBAAkB,CAAC,QAAgB;AAAA,EACnC,oBAAoB,CAAC,QAAgB;AAAA,EACrC,oBAAoB,CAAC,QAAgB;AAAA,EACrC,UAAU;AAAA,EACV,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,aAAa,CAAC,QAAgB;AAAA,EAAC;AAAA,EAC/B,eAAe,CAAC,UAAkB;AAAA,EAAC;AAAA,EACnC,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,cAAc,CAAC,SAAiB;AAAA,EAAC;AAAA,EACjC,gBAAgB,CAAC,WAAmB;AAAA,EAAC;AAAA,EACrC,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,yBAAyB;AAC3B;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU;AAAA,EACV,kBAAkB,CAAC,aAAqB;AAAA,EAAC;AAAA,EACzC,MAAM;AACR;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,8BAA4B,GAAG,wBAAwB;AAAA,EACxD,oBAAC,8BAA4B,GAAG,8BAA8B;AAAA,EAC9D,oBAAC,8BAA4B,GAAG,uBAAuB;AAAA,EAEvD;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,kBAAkB,CAAC,aAAqB;AAAA,MAAC;AAAA,MACzC,MAAK;AAAA;AAAA,EACP;AAAA,GACF;",
+  "names": []
+}