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

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

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

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

@@ -2,7 +2,11 @@ import * as React from "react";
 import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { Grid } from "@elliemae/ds-grid";
 import { styled, th } from "@elliemae/ds-system";
-import { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from "../constants/index.js";
+import {
+  DSControlledDateTimePickerName,
+  DSControlledDateTimePickerSlots,
+  FORM_DATE_TIME_PICKER_SLOTS
+} from "../constants/index.js";
 const ResettedInput = styled("input")`
   border: none;
   box-shadow: none;
@@ -26,12 +30,18 @@ const ResettedInput = styled("input")`
     color: ${th.color("neutral-500")};
   }
 `;
-const StyledSeparator = styled(Grid)`
+const StyledSeparator = styled(Grid, {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.INPUTS_SEPARATOR
+})`
   padding-top: 2px;
   margin: auto;
   color: neutral-500;
 `;
-const StyledColonSeparator = styled(Grid)`
+const StyledColonSeparator = styled(Grid, {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.TIME_INPUTS_COLON_SEPARATOR
+})`
   padding-bottom: 1px;
   margin: auto;
 `;
@@ -64,11 +74,6 @@ const StyledMeridiemInput = styled(Styled2DigitsInput, {
   name: DSControlledDateTimePickerName,
   slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM
 })``;
-const StyledMin4DigitsInput = styled(ResettedInput)`
-  width: 100%;
-  height: 100%;
-  ${({ disabled, theme }) => disabled ? `color: ${theme.colors.neutral[500]};` : ``}
-`;
 const StyledInputsWrapperGrid = styled(Grid, {
   name: DSControlledDateTimePickerName,
   slot: DSControlledDateTimePickerSlots.CONTAINER
@@ -102,31 +107,10 @@ const StyledInputsWrapperGrid = styled(Grid, {
     background-color: ${theme.colors.neutral["050"]};
   `}
 `;
-const StyledDateInputsWrapperGrid = styled.div`
-  display: grid;
-  grid-template-columns: 24px min-content 24px min-content 48px;
-  grid-template-rows: min-content;
-  padding: 6px 0;
-  gap: 0px 0px;
-  align-items: center;
-  input,
-  p {
-    margin: 0;
-  }
-`;
-const StyledTimeInputsWrapperGrid = styled.div`
-  display: grid;
-  grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;
-  grid-template-rows: min-content;
-  padding: 6px 0;
-  gap: 0px 0px;
-  align-items: center;
-  input,
-  p {
-    margin: 0;
-  }
-`;
-const StyledPickersIconsWrapperGrid = styled(Grid)`
+const StyledPickersIconsWrapperGrid = styled(Grid, {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.PICKER_ICONS_WRAPPER
+})`
   position: relative;
   ${({ isControllerOnly }) => isControllerOnly ? `` : `height: 2rem;`}
   :before {
@@ -143,7 +127,10 @@ const StyledPickersIconsWrapperGrid = styled(Grid)`
     `}
   }
 `;
-const StyledFocusWithIn = styled(Grid)`
+const StyledFocusWithIn = styled(Grid, {
+  name: DSControlledDateTimePickerName,
+  slot: FORM_DATE_TIME_PICKER_SLOTS.INPUTS_FOCUS_WITHIN
+})`
   position: relative;
   &:focus-within {
     &:after {
@@ -178,17 +165,14 @@ export {
   StyledClearButton,
   StyledColonSeparator,
   StyledDateInput,
-  StyledDateInputsWrapperGrid,
   StyledFocusWithIn,
   StyledHourInput,
   StyledInputsWrapperGrid,
   StyledMeridiemInput,
-  StyledMin4DigitsInput,
   StyledMinuteInput,
   StyledMonthInput,
   StyledPickersIconsWrapperGrid,
   StyledSeparator,
-  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 { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, th } from '@elliemae/ds-system';\nimport { DSControlledDateTimePickerName, DSControlledDateTimePickerSlots } from '../constants/index.js';\n\nconst ResettedInput = styled('input')`\n  border: none;\n  box-shadow: none;\n  background: none;\n  text-align: center;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  :focus {\n    outline: none;\n  }\n  :disabled {\n    cursor: not-allowed;\n  }\n  padding-top: 2px;\n\n  color: ${th.color('neutral-700')};\n\n  ::placeholder {\n    font-weight: ${th.fontWeight('regular')};\n    color: ${th.color('neutral-500')};\n  }\n`;\n\nexport const StyledSeparator = styled(Grid)`\n  padding-top: 2px;\n  margin: auto;\n  color: neutral-500;\n`;\n\nexport const StyledColonSeparator = styled(Grid)`\n  padding-bottom: 1px;\n  margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledDateInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.DAY,\n})``;\n\nexport const StyledMonthInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.MONTH,\n})``;\n\nexport const StyledYearInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.YEAR,\n})``;\n\nexport const StyledHourInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.HOUR,\n})``;\n\nexport const StyledMinuteInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MINUTE,\n})``;\n\nexport const StyledMeridiemInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM,\n})``;\n\nexport const StyledMin4DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTAINER,\n})<{\n  isControllerOnly: boolean;\n  onlyPicker: boolean;\n  hasError: boolean;\n  justPicker: boolean;\n  disabled: boolean;\n  $readOnlyStyles?: boolean;\n}>`\n  width: max-content;\n  align-items: center;\n  background-color: white;\n  ${({ isControllerOnly }) =>\n    isControllerOnly\n      ? ``\n      : `\n  height: 2.153rem;    \n  border-width: 1px;\n  border-style: solid;\n  `}\n\n  border-color: ${({ theme, hasError }) => {\n    if (hasError) return theme.colors.danger[900];\n    return theme.colors.neutral[400];\n  }};\n\n  border-radius: 2px;\n  padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n\n  position: relative;\n  ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n  ${({ $readOnlyStyles, hasError, onlyPicker, theme }) =>\n    $readOnlyStyles &&\n    !hasError &&\n    !onlyPicker &&\n    `\n    border-left: 1px solid ${theme.colors.neutral['080']};\n    border-top: 1px solid ${theme.colors.neutral['080']};\n    border-right: 1px solid ${theme.colors.neutral['080']};\n\n  `}\n   ${({ $readOnlyStyles, hasError, theme }) =>\n     $readOnlyStyles &&\n     !hasError &&\n     `\n    background-color: ${theme.colors.neutral['050']};\n  `}\n`;\n\nexport const StyledDateInputsWrapperGrid = styled.div`\n  display: grid;\n  grid-template-columns: 24px min-content 24px min-content 48px;\n  grid-template-rows: min-content;\n  padding: 6px 0;\n  gap: 0px 0px;\n  align-items: center;\n  input,\n  p {\n    margin: 0;\n  }\n`;\n\nexport const StyledTimeInputsWrapperGrid = styled.div`\n  display: grid;\n  grid-template-columns: 24px min-content 24px min-content 24px min-content 24px;\n  grid-template-rows: min-content;\n  padding: 6px 0;\n  gap: 0px 0px;\n  align-items: center;\n  input,\n  p {\n    margin: 0;\n  }\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid)<{ isControllerOnly: boolean; hasError: boolean }>`\n  position: relative;\n  ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 2rem;`)}\n  :before {\n    content: '';\n    position: absolute;\n    top: 0px;\n    left: -1px;\n    width: 100%;\n    height: 100%;\n    // this shoudnt be rounded as specified in the design\n    /* border-radius: 2px; */\n    ${({ theme, isControllerOnly, hasError }) =>\n      isControllerOnly\n        ? ``\n        : `\n    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[400]}\n    `}\n  }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n  position: relative;\n  &:focus-within {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: -5px;\n      left: -2px;\n      width: calc(100% + 4px);\n      height: calc(100% + 10px);\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})<{ shouldDisplay: boolean }>`\n  height: 26px;\n  position: relative;\n  visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n  &:focus {\n    &:after {\n      z-index: 1;\n    }\n  }\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, th } from '@elliemae/ds-system';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n  FORM_DATE_TIME_PICKER_SLOTS,\n} from '../constants/index.js';\n\nconst ResettedInput = styled('input')`\n  border: none;\n  box-shadow: none;\n  background: none;\n  text-align: center;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  :focus {\n    outline: none;\n  }\n  :disabled {\n    cursor: not-allowed;\n  }\n  padding-top: 2px;\n\n  color: ${th.color('neutral-700')};\n\n  ::placeholder {\n    font-weight: ${th.fontWeight('regular')};\n    color: ${th.color('neutral-500')};\n  }\n`;\n\nexport const StyledSeparator = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.INPUTS_SEPARATOR,\n})`\n  padding-top: 2px;\n  margin: auto;\n  color: neutral-500;\n`;\n\nexport const StyledColonSeparator = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.TIME_INPUTS_COLON_SEPARATOR,\n})`\n  padding-bottom: 1px;\n  margin: auto;\n`;\n\nexport const Styled2DigitsInput = styled(ResettedInput)`\n  width: 100%;\n  height: 100%;\n  ${({ disabled, theme }) => (disabled ? `color: ${theme.colors.neutral[500]};` : ``)}\n`;\n\nexport const StyledDateInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.DAY,\n})``;\n\nexport const StyledMonthInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.MONTH,\n})``;\n\nexport const StyledYearInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.DATE_INPUTS.YEAR,\n})``;\n\nexport const StyledHourInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.HOUR,\n})``;\n\nexport const StyledMinuteInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MINUTE,\n})``;\n\nexport const StyledMeridiemInput = styled(Styled2DigitsInput, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.TIME_INPUTS.MERIDIEM,\n})``;\n\nexport const StyledInputsWrapperGrid = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTAINER,\n})<{\n  isControllerOnly: boolean;\n  onlyPicker: boolean;\n  hasError: boolean;\n  justPicker: boolean;\n  disabled: boolean;\n  $readOnlyStyles?: boolean;\n}>`\n  width: max-content;\n  align-items: center;\n  background-color: white;\n  ${({ isControllerOnly }) =>\n    isControllerOnly\n      ? ``\n      : `\n  height: 2.153rem;    \n  border-width: 1px;\n  border-style: solid;\n  `}\n\n  border-color: ${({ theme, hasError }) => {\n    if (hasError) return theme.colors.danger[900];\n    return theme.colors.neutral[400];\n  }};\n\n  border-radius: 2px;\n  padding-left: ${({ justPicker }) => (justPicker ? '0' : '2px')};\n\n  position: relative;\n  ${({ theme, disabled }) => (disabled ? `background-color: ${theme.colors.neutral[100]};` : ``)}\n  ${({ $readOnlyStyles, hasError, onlyPicker, theme }) =>\n    $readOnlyStyles &&\n    !hasError &&\n    !onlyPicker &&\n    `\n    border-left: 1px solid ${theme.colors.neutral['080']};\n    border-top: 1px solid ${theme.colors.neutral['080']};\n    border-right: 1px solid ${theme.colors.neutral['080']};\n\n  `}\n   ${({ $readOnlyStyles, hasError, theme }) =>\n     $readOnlyStyles &&\n     !hasError &&\n     `\n    background-color: ${theme.colors.neutral['050']};\n  `}\n`;\n\nexport const StyledPickersIconsWrapperGrid = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.PICKER_ICONS_WRAPPER,\n})<{ isControllerOnly: boolean; hasError: boolean }>`\n  position: relative;\n  ${({ isControllerOnly }) => (isControllerOnly ? `` : `height: 2rem;`)}\n  :before {\n    content: '';\n    position: absolute;\n    top: 0px;\n    left: -1px;\n    width: 100%;\n    height: 100%;\n    // this shoudnt be rounded as specified in the design\n    /* border-radius: 2px; */\n    ${({ theme, isControllerOnly, hasError }) =>\n      isControllerOnly\n        ? ``\n        : `\n    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[400]}\n    `}\n  }\n`;\n\nexport const StyledFocusWithIn = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: FORM_DATE_TIME_PICKER_SLOTS.INPUTS_FOCUS_WITHIN,\n})`\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,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,QAAQ,UAAU;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,gBAAgB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAgBzB,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA,mBAGf,GAAG,WAAW,SAAS,CAAC;AAAA,aAC9B,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAI7B,MAAM,kBAAkB,OAAO,MAAM;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,4BAA4B;AACpC,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,4BAA4B;AACpC,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,qBAAqB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGlD,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA;AAG9E,MAAM,kBAAkB,OAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,mBAAmB,OAAO,oBAAoB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,kBAAkB,OAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,kBAAkB,OAAO,oBAAoB;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,oBAAoB,OAAO,oBAAoB;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,sBAAsB,OAAO,oBAAoB;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,gCAAgC,YAAY;AACpD,CAAC;AAEM,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAWG,CAAC,EAAE,iBAAiB,MACpB,mBACI,KACA;AAAA;AAAA;AAAA;AAAA,GAIL;AAAA;AAAA,kBAEe,CAAC,EAAE,OAAO,SAAS,MAAM;AACvC,MAAI,SAAU,QAAO,MAAM,OAAO,OAAO,GAAG;AAC5C,SAAO,MAAM,OAAO,QAAQ,GAAG;AACjC,CAAC;AAAA;AAAA;AAAA,kBAGe,CAAC,EAAE,WAAW,MAAO,aAAa,MAAM,KAAM;AAAA;AAAA;AAAA,IAG5D,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,qBAAqB,MAAM,OAAO,QAAQ,GAAG,CAAC,MAAM,EAAG;AAAA,IAC5F,CAAC,EAAE,iBAAiB,UAAU,YAAY,MAAM,MAChD,mBACA,CAAC,YACD,CAAC,cACD;AAAA,6BACyB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,4BAC5B,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,8BACzB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,GAEtD;AAAA,KACE,CAAC,EAAE,iBAAiB,UAAU,MAAM,MACpC,mBACA,CAAC,YACD;AAAA,wBACmB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,GAChD;AAAA;AAGI,MAAM,gCAAgC,OAAO,MAAM;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,4BAA4B;AACpC,CAAC;AAAA;AAAA,IAEG,CAAC,EAAE,iBAAiB,MAAO,mBAAmB,KAAK,eAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUjE,CAAC,EAAE,OAAO,kBAAkB,SAAS,MACrC,mBACI,KACA;AAAA,6BACmB,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,KACvF;AAAA;AAAA;AAIE,MAAM,oBAAoB,OAAO,MAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,4BAA4B;AACpC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWyB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzD,MAAM,oBAAoB,OAAO,YAAY;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA,gBAGe,CAAC,EAAE,cAAc,MAAO,gBAAgB,YAAY,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -50,7 +50,7 @@ const TimeInputs = () => {
         fixedValues.smallInputWidth
       ],
       children: [
-        /* @__PURE__ */ jsx(StyledFocusWithIn, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(StyledFocusWithIn, { getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
           HHInput,
           {
             value: hours,
@@ -70,8 +70,8 @@ const TimeInputs = () => {
             readOnly
           }
         ) }),
-        /* @__PURE__ */ jsx(StyledColonSeparator, { alignItems: "center", children: ":" }),
-        /* @__PURE__ */ jsx(StyledFocusWithIn, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(StyledColonSeparator, { alignItems: "center", getOwnerProps: getProps, children: ":" }),
+        /* @__PURE__ */ jsx(StyledFocusWithIn, { getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
           MinutesInput,
           {
             value: minutes,
@@ -90,8 +90,8 @@ const TimeInputs = () => {
             readOnly
           }
         ) }),
-        /* @__PURE__ */ jsx(StyledSeparator, { children: " " }),
-        /* @__PURE__ */ jsx(StyledFocusWithIn, { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(StyledSeparator, { getOwnerProps: getProps, children: " " }),
+        /* @__PURE__ */ jsx(StyledFocusWithIn, { getOwnerProps: getProps, children: /* @__PURE__ */ jsx(
           MeridiemInput,
           {
             value: meridiem,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/TimeInputs/TimeInputs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { HHInput } from './HHInput.js';\nimport { MinutesInput } from './MinutesInput.js';\nimport { MeridiemInput } from './MeridiemInput.js';\nimport { useTimeInputs } from './useTimeInputs.js';\nimport { fixedValues } from '../config.js';\nimport { StyledColonSeparator, StyledSeparator, StyledFocusWithIn } from '../Styleds.js';\n\nexport const TimeInputs = (): JSX.Element => {\n  const {\n    autoFocusHourInput,\n    disabled,\n    applyAriaDisabled,\n    onHoursChange,\n    onMinutesChange,\n    onMeridiemChange,\n    onHoursBlur,\n    onMinutesBlur,\n    onMeridiemBlur,\n    onHoursFocus,\n    onMeridiemFocus,\n    onMinutesFocus,\n    onHoursKeyDown,\n    onMinutesKeyDown,\n    onMeridiemKeyDown,\n  } = useTimeInputs();\n\n  // we do this here so HHInput,MinutesInput, MeridiemInput can be pure components memoized via React.memo\n  const {\n    hours,\n    minutes,\n    meridiem,\n    hourInputRef,\n    minutesInputRef,\n    meridiemInputRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n    props: { tabIndex, readOnly },\n  } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <Grid\n      cols={[\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n      ]}\n    >\n      <StyledFocusWithIn>\n        <HHInput\n          value={hours}\n          onChange={onHoursChange}\n          onBlur={onHoursBlur}\n          onFocus={onHoursFocus}\n          onKeyDown={onHoursKeyDown}\n          contextRef={hourInputRef}\n          tabIndex={tabIndex}\n          placeholder=\"HH\"\n          autoFocusHourInput={autoFocusHourInput}\n          disabled={disabled}\n          aria-disabled={applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'hour-input'}\n          getProps={getProps}\n          readOnly={readOnly}\n        />\n      </StyledFocusWithIn>\n      <StyledColonSeparator alignItems=\"center\">:</StyledColonSeparator>\n      <StyledFocusWithIn>\n        <MinutesInput\n          value={minutes}\n          onChange={onMinutesChange}\n          onBlur={onMinutesBlur}\n          onFocus={onMinutesFocus}\n          onKeyDown={onMinutesKeyDown}\n          contextRef={minutesInputRef}\n          tabIndex={tabIndex}\n          placeholder=\"MM\"\n          disabled={disabled}\n          aria-disabled={applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'minute-input'}\n          getProps={getProps}\n          readOnly={readOnly}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator> </StyledSeparator>\n      <StyledFocusWithIn>\n        <MeridiemInput\n          value={meridiem}\n          onChange={onMeridiemChange}\n          onBlur={onMeridiemBlur}\n          onFocus={onMeridiemFocus}\n          onKeyDown={onMeridiemKeyDown}\n          contextRef={meridiemInputRef}\n          tabIndex={tabIndex}\n          placeholder=\"AM\"\n          disabled={disabled}\n          aria-disabled={applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'meridiem-input'}\n          getProps={getProps}\n          readOnly={readOnly}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC4CnB,SAUI,KAVJ;AA5CJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,uCAAuC;AAChD,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB,iBAAiB,yBAAyB;AAElE,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc;AAGlB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,SAAS;AAAA,EAC9B,IAAI,WAAW,+BAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,MAEA;AAAA,4BAAC,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,iBAAe;AAAA,YACf;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA,QACA,oBAAC,wBAAqB,YAAW,UAAS,eAAC;AAAA,QAC3C,oBAAC,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA,iBAAe;AAAA,YACf;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA,QACA,oBAAC,mBAAgB,eAAC;AAAA,QAClB,oBAAC,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA,iBAAe;AAAA,YACf;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';\nimport { HHInput } from './HHInput.js';\nimport { MinutesInput } from './MinutesInput.js';\nimport { MeridiemInput } from './MeridiemInput.js';\nimport { useTimeInputs } from './useTimeInputs.js';\nimport { fixedValues } from '../config.js';\nimport { StyledColonSeparator, StyledSeparator, StyledFocusWithIn } from '../Styleds.js';\n\nexport const TimeInputs = (): JSX.Element => {\n  const {\n    autoFocusHourInput,\n    disabled,\n    applyAriaDisabled,\n    onHoursChange,\n    onMinutesChange,\n    onMeridiemChange,\n    onHoursBlur,\n    onMinutesBlur,\n    onMeridiemBlur,\n    onHoursFocus,\n    onMeridiemFocus,\n    onMinutesFocus,\n    onHoursKeyDown,\n    onMinutesKeyDown,\n    onMeridiemKeyDown,\n  } = useTimeInputs();\n\n  // we do this here so HHInput,MinutesInput, MeridiemInput can be pure components memoized via React.memo\n  const {\n    hours,\n    minutes,\n    meridiem,\n    hourInputRef,\n    minutesInputRef,\n    meridiemInputRef,\n    latestInteractionRegion,\n    currFocusDescriber,\n    getProps,\n    props: { tabIndex, readOnly },\n  } = useContext(ControlledDateTimePickerContext);\n\n  return (\n    <Grid\n      cols={[\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n        fixedValues.separatorWidth,\n        fixedValues.smallInputWidth,\n      ]}\n    >\n      <StyledFocusWithIn getOwnerProps={getProps}>\n        <HHInput\n          value={hours}\n          onChange={onHoursChange}\n          onBlur={onHoursBlur}\n          onFocus={onHoursFocus}\n          onKeyDown={onHoursKeyDown}\n          contextRef={hourInputRef}\n          tabIndex={tabIndex}\n          placeholder=\"HH\"\n          autoFocusHourInput={autoFocusHourInput}\n          disabled={disabled}\n          aria-disabled={applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'hour-input'}\n          getProps={getProps}\n          readOnly={readOnly}\n        />\n      </StyledFocusWithIn>\n      <StyledColonSeparator alignItems=\"center\" getOwnerProps={getProps}>\n        :\n      </StyledColonSeparator>\n      <StyledFocusWithIn getOwnerProps={getProps}>\n        <MinutesInput\n          value={minutes}\n          onChange={onMinutesChange}\n          onBlur={onMinutesBlur}\n          onFocus={onMinutesFocus}\n          onKeyDown={onMinutesKeyDown}\n          contextRef={minutesInputRef}\n          tabIndex={tabIndex}\n          placeholder=\"MM\"\n          disabled={disabled}\n          aria-disabled={applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'minute-input'}\n          getProps={getProps}\n          readOnly={readOnly}\n        />\n      </StyledFocusWithIn>\n      <StyledSeparator getOwnerProps={getProps}> </StyledSeparator>\n      <StyledFocusWithIn getOwnerProps={getProps}>\n        <MeridiemInput\n          value={meridiem}\n          onChange={onMeridiemChange}\n          onBlur={onMeridiemBlur}\n          onFocus={onMeridiemFocus}\n          onKeyDown={onMeridiemKeyDown}\n          contextRef={meridiemInputRef}\n          tabIndex={tabIndex}\n          placeholder=\"AM\"\n          disabled={disabled}\n          aria-disabled={applyAriaDisabled}\n          applyAriaDisabled={applyAriaDisabled}\n          isFocused={latestInteractionRegion === 'time-inputs' && currFocusDescriber === 'meridiem-input'}\n          getProps={getProps}\n          readOnly={readOnly}\n        />\n      </StyledFocusWithIn>\n    </Grid>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4CnB,SAUI,KAVJ;AA5CJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,uCAAuC;AAChD,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB,iBAAiB,yBAAyB;AAElE,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc;AAGlB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,UAAU,SAAS;AAAA,EAC9B,IAAI,WAAW,+BAA+B;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,MAEA;AAAA,4BAAC,qBAAkB,eAAe,UAChC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,iBAAe;AAAA,YACf;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA,QACA,oBAAC,wBAAqB,YAAW,UAAS,eAAe,UAAU,eAEnE;AAAA,QACA,oBAAC,qBAAkB,eAAe,UAChC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA,iBAAe;AAAA,YACf;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA,QACA,oBAAC,mBAAgB,eAAe,UAAU,eAAC;AAAA,QAC3C,oBAAC,qBAAkB,eAAe,UAChC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,WAAW;AAAA,YACX,YAAY;AAAA,YACZ;AAAA,YACA,aAAY;AAAA,YACZ;AAAA,YACA,iBAAe;AAAA,YACf;AAAA,YACA,WAAW,4BAA4B,iBAAiB,uBAAuB;AAAA,YAC/E;AAAA,YACA;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js CHANGED Viewed

@@ -76,6 +76,8 @@ const propTypes = {
   onHourChange: PropTypes.func.description("(newHourString, event, metaInformations) => void"),
   onMinuteChange: PropTypes.func.description("(newMinuteString, event, metaInformations) => void"),
   onMeridiemChange: PropTypes.func.description("(newMeridiemString, event, metaInformations) => void"),
+  onPickerOpen: PropTypes.func.description("() => void, called when the picker context menu is opened"),
+  onPickerClose: PropTypes.func.description("() => void, called when the picker context menu is closed"),
   getIsDisabledDay: PropTypes.func.description(
     "(dayAsString) => true for marking as disabled, false for marking as valid"
   ),

package/dist/esm/react-desc-prop-types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport {\n  PropTypes,\n  getPropsPerDatatestIdPropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  type GlobalAttributesT,\n  type ValidationMap,\n  type XstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport type { ControlledDateTimePickerSlotEngine } from './slot-arguments-polymorphic-typescript.js';\nimport {\n  ControlledDateTimePickerDatatestid,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlotsFlatten,\n} from './constants/index.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\n\nexport declare namespace DSControlledDateTimePickerT {\n  export interface MetaMonthDay {\n    day: Date;\n    dayAsString: string;\n    isPrevMonthDay: boolean;\n    isNextMonthDay: boolean;\n    isCurrMonthDay: boolean;\n    isHidden: boolean;\n    dayBtnRef: React.MutableRefObject<HTMLButtonElement>;\n  }\n\n  /**\n   * Arguments passed to the function form of the `dsControlleddatetimepickerCalendarDay` slot.\n   * The function receives these at render time via `getOwnerPropsArguments` \u2014 use them to\n   * compute state-aware aria attributes (e.g. range-specific labels in ds-form-date-range-picker).\n   */\n  export type CalendarDaySlotArguments = {\n    isSelected: boolean;\n    isFocused: boolean;\n    isDisabled: boolean;\n    isOutOfRange: boolean;\n    isStartRangeDay: boolean;\n    isEndRangeDay: boolean;\n    /** True for all days inside the range, including start and end. */\n    isDayInRangeImproper: boolean;\n    /** True only for days strictly between start and end (excludes start/end). */\n    isDayInRange: boolean;\n    metaDay: MetaMonthDay;\n  };\n\n  /**\n   * Slot function signatures for a given type, with CalendarDaySlotArguments\n   * applied as the typed override for dsControlleddatetimepickerCalendarDay.\n   * Only slots that exist in the DOM for T are present \u2014 passing a slot prop\n   * for a non-existent slot is a compile-time error.\n   */\n  export type Slots<T extends ControlledDateTimePickerSlotEngine.ControlTypes> =\n    ControlledDateTimePickerSlotEngine.SlotFunctionArguments<\n      T,\n      {\n        dsControlleddatetimepickerCalendarDay: (args: CalendarDaySlotArguments) => object;\n      }\n    >;\n\n  /**\n   * Prop-facing slot type for a given type: each slot accepts either a plain\n   * object (static form) or the typed function (dynamic form). All slots optional.\n   */\n  export type PolymorphicSlots<T extends ControlledDateTimePickerSlotEngine.ControlTypes> =\n    ControlledDateTimePickerSlotEngine.PolymorphicSlotFunctionArguments<\n      T,\n      {\n        dsControlleddatetimepickerCalendarDay: (args: CalendarDaySlotArguments) => object;\n      }\n    >;\n\n  type PropsT<Default, Required, Optional, SpecificHTMLElement> = Partial<Default> &\n    Required &\n    Optional &\n    Omit<GlobalAttributesT<SpecificHTMLElement>, keyof Default | keyof Required | keyof Optional> &\n    Omit<XstyledProps, keyof Default | keyof Required | keyof Optional>;\n\n  type InternalPropsT<Default, Required, Optional, SpecificHTMLElement> = Default &\n    Required &\n    Optional &\n    Omit<GlobalAttributesT<SpecificHTMLElement>, keyof Default | keyof Required | keyof Optional> &\n    Omit<XstyledProps, keyof Default | keyof Required | keyof Optional>;\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 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    | React.MouseEvent<HTMLDivElement>;\n\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: TypescriptHelpersT.VoidGenericFunc;\n    onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n    getIsDisabledDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsOutOfRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsStartRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsDayInRange: TypescriptHelpersT.BooleanGetter<string>;\n    getIsEndRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    isClearable: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalDatePickerProps extends PolymorphicSlots<'full-date'> {\n    applyAriaDisabled?: boolean;\n    emptyPickerStartingMonth?: string;\n    onCalendarOpenFocusedDay?: string;\n    pickerFooterMsg?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n    lastElementRef?: React.MutableRefObject<HTMLElement | null>;\n    tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n    fromDate?: string;\n    toDate?: string;\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 = PropsT<\n    Partial<DefaultDateProps>,\n    RequiredDatePickerProps,\n    OptionalDatePickerProps,\n    HTMLDivElement\n  >;\n\n  export type InternalDatePickerProps = InternalPropsT<\n    DefaultDateProps,\n    RequiredDatePickerProps,\n    OptionalDatePickerProps,\n    HTMLDivElement\n  >;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ TIME CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n\n  export interface DefaultTimeProps {\n    onHourChange: AppOnInputChange;\n    onMinuteChange: AppOnInputChange;\n    onMeridiemChange: AppOnInputChange;\n    onPickerOpen: TypescriptHelpersT.VoidGenericFunc;\n    onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n    getIsDisabledTime: TypescriptHelpersT.BooleanGetter<string>;\n    minutesInterval: number;\n    isClearable: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalTimePickerProps extends PolymorphicSlots<'full-time'> {\n    applyAriaDisabled?: boolean;\n    pickerFooterMsg?: string;\n    onTimeWheelOpenStartingTime?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n    lastElementRef?: React.MutableRefObject<HTMLElement | null>;\n    tabIndex?: TypescriptHelpersT.WCAGTabIndex;\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 = PropsT<\n    Partial<DefaultTimeProps>,\n    RequiredTimePickerProps,\n    OptionalTimePickerProps,\n    HTMLDivElement\n  >;\n\n  export type InternalTimePickerProps = InternalPropsT<\n    DefaultTimeProps,\n    RequiredTimePickerProps,\n    OptionalTimePickerProps,\n    HTMLDivElement\n  >;\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 = OptionalTimePickerProps &\n    OptionalDatePickerProps &\n    PolymorphicSlots<'full-date-time'>;\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 = PropsT<\n    Partial<DefaultDateTimeProps>,\n    RequiredDateTimeProps,\n    OptionalDateTimeProps,\n    HTMLDivElement\n  >;\n  export type InternalDateTimePickerProps = InternalPropsT<\n    DefaultDateTimeProps,\n    RequiredDateTimeProps,\n    OptionalDateTimeProps,\n    HTMLDivElement\n  >;\n\n  /* ---------------------- ------------------- -------------------------*/\n  /* ---------------------- FINAL CONFIGURATION -------------------------*/\n  /* ---------------------- ------------------- -------------------------*/\n  export type DefaultProps = DefaultDateTimeProps & { type: 'full-date-time' };\n\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  readOnly: false,\n  hasError: false,\n  autoFocus: false,\n  preventCloseOnSelection: false,\n};\n\nexport const propTypes = {\n  ...getPropsPerSlotPropTypes(DSControlledDateTimePickerName, DSControlledDateTimePickerSlotsFlatten),\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  applyAriaDisabled: PropTypes.bool.description(\n    'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n  ),\n  readOnly: PropTypes.bool\n    .description('Makes the component non-editable while remaining accessible')\n    .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  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('inner ref for the month input'),\n  lastElementRef: PropTypes.oneOfType([PropTypes.object]).description(\n    'ref for the last focusable element in the component based on its configuration, used for focus management in focus trap logic',\n  ),\n  fromDate: PropTypes.string.description(\n    `Strictly formatted string representing user's selected \"from\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n  ),\n  toDate: PropTypes.string.description(\n    `Strictly formatted string representing user's selected \"to\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n  ),\n  hasError: PropTypes.bool.description('whether the input has error or not').defaultValue(false),\n} as unknown as ValidationMap<DSControlledDateTimePickerT.Props>;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport {\n  PropTypes,\n  getPropsPerDatatestIdPropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  type GlobalAttributesT,\n  type ValidationMap,\n  type XstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport type { ControlledDateTimePickerSlotEngine } from './slot-arguments-polymorphic-typescript.js';\nimport {\n  ControlledDateTimePickerDatatestid,\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlotsFlatten,\n} from './constants/index.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = (): void => {};\nconst defaultReturnFalse = (): false => false;\n\nexport declare namespace DSControlledDateTimePickerT {\n  export interface MetaMonthDay {\n    day: Date;\n    dayAsString: string;\n    isPrevMonthDay: boolean;\n    isNextMonthDay: boolean;\n    isCurrMonthDay: boolean;\n    isHidden: boolean;\n    dayBtnRef: React.MutableRefObject<HTMLButtonElement>;\n  }\n\n  /**\n   * Arguments passed to the function form of the `dsControlleddatetimepickerCalendarDay` slot.\n   * The function receives these at render time via `getOwnerPropsArguments` \u2014 use them to\n   * compute state-aware aria attributes (e.g. range-specific labels in ds-form-date-range-picker).\n   */\n  export type CalendarDaySlotArguments = {\n    isSelected: boolean;\n    isFocused: boolean;\n    isDisabled: boolean;\n    isOutOfRange: boolean;\n    isStartRangeDay: boolean;\n    isEndRangeDay: boolean;\n    /** True for all days inside the range, including start and end. */\n    isDayInRangeImproper: boolean;\n    /** True only for days strictly between start and end (excludes start/end). */\n    isDayInRange: boolean;\n    metaDay: MetaMonthDay;\n  };\n\n  /**\n   * Slot function signatures for a given type, with CalendarDaySlotArguments\n   * applied as the typed override for dsControlleddatetimepickerCalendarDay.\n   * Only slots that exist in the DOM for T are present \u2014 passing a slot prop\n   * for a non-existent slot is a compile-time error.\n   */\n  export type Slots<T extends ControlledDateTimePickerSlotEngine.ControlTypes> =\n    ControlledDateTimePickerSlotEngine.SlotFunctionArguments<\n      T,\n      {\n        dsControlleddatetimepickerCalendarDay: (args: CalendarDaySlotArguments) => object;\n      }\n    >;\n\n  /**\n   * Prop-facing slot type for a given type: each slot accepts either a plain\n   * object (static form) or the typed function (dynamic form). All slots optional.\n   */\n  export type PolymorphicSlots<T extends ControlledDateTimePickerSlotEngine.ControlTypes> =\n    ControlledDateTimePickerSlotEngine.PolymorphicSlotFunctionArguments<\n      T,\n      {\n        dsControlleddatetimepickerCalendarDay: (args: CalendarDaySlotArguments) => object;\n      }\n    >;\n\n  type PropsT<Default, Required, Optional, SpecificHTMLElement> = Partial<Default> &\n    Required &\n    Optional &\n    Omit<GlobalAttributesT<SpecificHTMLElement>, keyof Default | keyof Required | keyof Optional> &\n    Omit<XstyledProps, keyof Default | keyof Required | keyof Optional>;\n\n  type InternalPropsT<Default, Required, Optional, SpecificHTMLElement> = Default &\n    Required &\n    Optional &\n    Omit<GlobalAttributesT<SpecificHTMLElement>, keyof Default | keyof Required | keyof Optional> &\n    Omit<XstyledProps, keyof Default | keyof Required | keyof Optional>;\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 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    | React.MouseEvent<HTMLDivElement>;\n\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: TypescriptHelpersT.VoidGenericFunc;\n    onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n    getIsDisabledDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsOutOfRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsStartRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    getIsDayInRange: TypescriptHelpersT.BooleanGetter<string>;\n    getIsEndRangeDay: TypescriptHelpersT.BooleanGetter<string>;\n    isClearable: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalDatePickerProps extends PolymorphicSlots<'full-date'> {\n    applyAriaDisabled?: boolean;\n    emptyPickerStartingMonth?: string;\n    onCalendarOpenFocusedDay?: string;\n    pickerFooterMsg?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n    lastElementRef?: React.MutableRefObject<HTMLElement | null>;\n    tabIndex?: TypescriptHelpersT.WCAGTabIndex;\n    fromDate?: string;\n    toDate?: string;\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 = PropsT<\n    Partial<DefaultDateProps>,\n    RequiredDatePickerProps,\n    OptionalDatePickerProps,\n    HTMLDivElement\n  >;\n\n  export type InternalDatePickerProps = InternalPropsT<\n    DefaultDateProps,\n    RequiredDatePickerProps,\n    OptionalDatePickerProps,\n    HTMLDivElement\n  >;\n\n  /* ------------------------ ------------------ ------------------------*/\n  /* ------------------------ TIME CONFIGURATION ------------------------*/\n  /* ------------------------ ------------------ ------------------------*/\n\n  export interface DefaultTimeProps {\n    onHourChange: AppOnInputChange;\n    onMinuteChange: AppOnInputChange;\n    onMeridiemChange: AppOnInputChange;\n    onPickerOpen: TypescriptHelpersT.VoidGenericFunc;\n    onPickerClose: TypescriptHelpersT.VoidGenericFunc;\n    getIsDisabledTime: TypescriptHelpersT.BooleanGetter<string>;\n    minutesInterval: number;\n    isClearable: boolean;\n    disabled: boolean;\n    readOnly: boolean;\n    hasError: boolean;\n    autoFocus: boolean;\n    preventCloseOnSelection: boolean;\n  }\n  export interface OptionalTimePickerProps extends PolymorphicSlots<'full-time'> {\n    applyAriaDisabled?: boolean;\n    pickerFooterMsg?: string;\n    onTimeWheelOpenStartingTime?: string;\n    innerRef?:\n      | React.MutableRefObject<HTMLInputElement | HTMLButtonElement | null>\n      | ((ref: HTMLInputElement | HTMLButtonElement | null) => void);\n    lastElementRef?: React.MutableRefObject<HTMLElement | null>;\n    tabIndex?: TypescriptHelpersT.WCAGTabIndex;\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 = PropsT<\n    Partial<DefaultTimeProps>,\n    RequiredTimePickerProps,\n    OptionalTimePickerProps,\n    HTMLDivElement\n  >;\n\n  export type InternalTimePickerProps = InternalPropsT<\n    DefaultTimeProps,\n    RequiredTimePickerProps,\n    OptionalTimePickerProps,\n    HTMLDivElement\n  >;\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 = OptionalTimePickerProps &\n    OptionalDatePickerProps &\n    PolymorphicSlots<'full-date-time'>;\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 = PropsT<\n    Partial<DefaultDateTimeProps>,\n    RequiredDateTimeProps,\n    OptionalDateTimeProps,\n    HTMLDivElement\n  >;\n  export type InternalDateTimePickerProps = InternalPropsT<\n    DefaultDateTimeProps,\n    RequiredDateTimeProps,\n    OptionalDateTimeProps,\n    HTMLDivElement\n  >;\n\n  /* ---------------------- ------------------- -------------------------*/\n  /* ---------------------- FINAL CONFIGURATION -------------------------*/\n  /* ---------------------- ------------------- -------------------------*/\n  export type DefaultProps = DefaultDateTimeProps & { type: 'full-date-time' };\n\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  readOnly: false,\n  hasError: false,\n  autoFocus: false,\n  preventCloseOnSelection: false,\n};\n\nexport const propTypes = {\n  ...getPropsPerSlotPropTypes(DSControlledDateTimePickerName, DSControlledDateTimePickerSlotsFlatten),\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  applyAriaDisabled: PropTypes.bool.description(\n    'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n  ),\n  readOnly: PropTypes.bool\n    .description('Makes the component non-editable while remaining accessible')\n    .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  onPickerOpen: PropTypes.func.description('() => void, called when the picker context menu is opened'),\n  onPickerClose: PropTypes.func.description('() => void, called when the picker context menu is closed'),\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  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('inner ref for the month input'),\n  lastElementRef: PropTypes.oneOfType([PropTypes.object]).description(\n    'ref for the last focusable element in the component based on its configuration, used for focus management in focus trap logic',\n  ),\n  fromDate: PropTypes.string.description(\n    `Strictly formatted string representing user's selected \"from\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n  ),\n  toDate: PropTypes.string.description(\n    `Strictly formatted string representing user's selected \"to\" date, this prop comes from the DateRangePicker and it's used internally for the range selection announcement`,\n  ),\n  hasError: PropTypes.bool.description('whether the input has error or not').defaultValue(false),\n} as unknown as ValidationMap<DSControlledDateTimePickerT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,OAAO,MAAY;AAAC;AAC1B,MAAM,qBAAqB,MAAa;AA8QjC,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,UAAU;AAAA,EACV,WAAW;AAAA,EACX,yBAAyB;AAC3B;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG,yBAAyB,gCAAgC,sCAAsC;AAAA,EAClG,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,mBAAmB,UAAU,KAAK;AAAA,IAChC;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KACjB,YAAY,6DAA6D,EACzE,aAAa,KAAK;AAAA,EACrB,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,cAAc,UAAU,KAAK,YAAY,2DAA2D;AAAA,EACpG,eAAe,UAAU,KAAK,YAAY,2DAA2D;AAAA,EACrG,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;AAAA,EACpE,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,+BAA+B;AAAA,EAC7G,gBAAgB,UAAU,UAAU,CAAC,UAAU,MAAM,CAAC,EAAE;AAAA,IACtD;AAAA,EACF;AAAA,EACA,UAAU,UAAU,OAAO;AAAA,IACzB;AAAA,EACF;AAAA,EACA,QAAQ,UAAU,OAAO;AAAA,IACvB;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAC/F;",
   "names": []
 }

package/dist/esm/typescript-testing/slot-props.js CHANGED Viewed

@@ -19,16 +19,28 @@ const slotsFullDateTime = {
   dsControlleddatetimepickerTimePickerHourInput: fn,
   dsControlleddatetimepickerTimePickerMinuteInput: fn,
   dsControlleddatetimepickerTimePickerMeridiemInput: fn,
+  dsControlleddatetimepickerTimeInputsColonSeparator: fn,
+  dsControlleddatetimepickerInputsSeparator: fn,
+  dsControlleddatetimepickerInputsFocusWithin: fn,
   dsControlleddatetimepickerClearBtn: fn,
+  dsControlleddatetimepickerPickerIconsWrapper: fn,
   dsControlleddatetimepickerCalendarDay: calendarDayFn,
   dsControlleddatetimepickerCalendarHeaderLabel: fn,
   dsControlleddatetimepickerCalendarHeaderButtons: fn,
   dsControlleddatetimepickerCalendarHeaderWeeklyDayList: fn,
+  dsControlleddatetimepickerCalendarHeaderWeeklyDayItem: fn,
   dsControlleddatetimepickerCalendarControllerWrapper: fn,
+  dsControlleddatetimepickerCalendarWrapper: fn,
+  dsControlleddatetimepickerCalendarHeader: fn,
+  dsControlleddatetimepickerCalendarBody: fn,
   dsControlleddatetimepickerTimewheelTimeButton: fn,
   dsControlleddatetimepickerTimewheelTimeChangeButton: fn,
   dsControlleddatetimepickerTimewheelHeaderLabel: fn,
   dsControlleddatetimepickerTimewheelControllerWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelsLegend: fn,
+  dsControlleddatetimepickerTimewheelWheelList: fn,
+  dsControlleddatetimepickerTimewheelWheelListItem: fn,
   dsControlleddatetimepickerCalendarTimewheelControllerWrapper: fn,
   dsControlleddatetimepickerCalendarTimewheelContextFooter: fn,
   dsControlleddatetimepickerCalendarTimewheelTriggerIcon: fn,
@@ -42,19 +54,31 @@ const slotsDateTimeInputs = {
   dsControlleddatetimepickerTimePickerHourInput: fn,
   dsControlleddatetimepickerTimePickerMinuteInput: fn,
   dsControlleddatetimepickerTimePickerMeridiemInput: fn,
+  dsControlleddatetimepickerTimeInputsColonSeparator: fn,
+  dsControlleddatetimepickerInputsSeparator: fn,
+  dsControlleddatetimepickerInputsFocusWithin: fn,
   dsControlleddatetimepickerClearBtn: fn
 };
 const slotsDateTimePicker = {
   dsControlleddatetimepickerRoot: fn,
+  dsControlleddatetimepickerPickerIconsWrapper: fn,
   dsControlleddatetimepickerCalendarDay: calendarDayFn,
   dsControlleddatetimepickerCalendarHeaderLabel: fn,
   dsControlleddatetimepickerCalendarHeaderButtons: fn,
   dsControlleddatetimepickerCalendarHeaderWeeklyDayList: fn,
+  dsControlleddatetimepickerCalendarHeaderWeeklyDayItem: fn,
   dsControlleddatetimepickerCalendarControllerWrapper: fn,
+  dsControlleddatetimepickerCalendarWrapper: fn,
+  dsControlleddatetimepickerCalendarHeader: fn,
+  dsControlleddatetimepickerCalendarBody: fn,
   dsControlleddatetimepickerTimewheelTimeButton: fn,
   dsControlleddatetimepickerTimewheelTimeChangeButton: fn,
   dsControlleddatetimepickerTimewheelHeaderLabel: fn,
   dsControlleddatetimepickerTimewheelControllerWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelsLegend: fn,
+  dsControlleddatetimepickerTimewheelWheelList: fn,
+  dsControlleddatetimepickerTimewheelWheelListItem: fn,
   dsControlleddatetimepickerCalendarTimewheelControllerWrapper: fn,
   dsControlleddatetimepickerCalendarTimewheelContextFooter: fn,
   dsControlleddatetimepickerCalendarTimewheelTriggerIcon: fn,
@@ -62,15 +86,24 @@ const slotsDateTimePicker = {
 };
 const slotsDateTimePickerControllerOnly = {
   dsControlleddatetimepickerRoot: fn,
+  dsControlleddatetimepickerPickerIconsWrapper: fn,
   dsControlleddatetimepickerCalendarDay: calendarDayFn,
   dsControlleddatetimepickerCalendarHeaderLabel: fn,
   dsControlleddatetimepickerCalendarHeaderButtons: fn,
   dsControlleddatetimepickerCalendarHeaderWeeklyDayList: fn,
+  dsControlleddatetimepickerCalendarHeaderWeeklyDayItem: fn,
   dsControlleddatetimepickerCalendarControllerWrapper: fn,
+  dsControlleddatetimepickerCalendarWrapper: fn,
+  dsControlleddatetimepickerCalendarHeader: fn,
+  dsControlleddatetimepickerCalendarBody: fn,
   dsControlleddatetimepickerTimewheelTimeButton: fn,
   dsControlleddatetimepickerTimewheelTimeChangeButton: fn,
   dsControlleddatetimepickerTimewheelHeaderLabel: fn,
   dsControlleddatetimepickerTimewheelControllerWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelsLegend: fn,
+  dsControlleddatetimepickerTimewheelWheelList: fn,
+  dsControlleddatetimepickerTimewheelWheelListItem: fn,
   dsControlleddatetimepickerCalendarTimewheelControllerWrapper: fn,
   dsControlleddatetimepickerCalendarTimewheelContextFooter: fn
 };
@@ -79,12 +112,19 @@ const slotsFullDate = {
   dsControlleddatetimepickerTimePickerMonthInput: fn,
   dsControlleddatetimepickerTimePickerDayInput: fn,
   dsControlleddatetimepickerTimePickerYearInput: fn,
+  dsControlleddatetimepickerInputsSeparator: fn,
+  dsControlleddatetimepickerInputsFocusWithin: fn,
   dsControlleddatetimepickerClearBtn: fn,
+  dsControlleddatetimepickerPickerIconsWrapper: fn,
   dsControlleddatetimepickerCalendarDay: calendarDayFn,
   dsControlleddatetimepickerCalendarHeaderLabel: fn,
   dsControlleddatetimepickerCalendarHeaderButtons: fn,
   dsControlleddatetimepickerCalendarHeaderWeeklyDayList: fn,
+  dsControlleddatetimepickerCalendarHeaderWeeklyDayItem: fn,
   dsControlleddatetimepickerCalendarControllerWrapper: fn,
+  dsControlleddatetimepickerCalendarWrapper: fn,
+  dsControlleddatetimepickerCalendarHeader: fn,
+  dsControlleddatetimepickerCalendarBody: fn,
   dsControlleddatetimepickerCalendarContextFooter: fn,
   dsControlleddatetimepickerCalendarTriggerIcon: fn,
   dsControlleddatetimepickerCalendarContextContentWrapper: fn
@@ -94,26 +134,38 @@ const slotsDateInputs = {
   dsControlleddatetimepickerTimePickerMonthInput: fn,
   dsControlleddatetimepickerTimePickerDayInput: fn,
   dsControlleddatetimepickerTimePickerYearInput: fn,
+  dsControlleddatetimepickerInputsSeparator: fn,
+  dsControlleddatetimepickerInputsFocusWithin: fn,
   dsControlleddatetimepickerClearBtn: fn
 };
 const slotsDatePicker = {
   dsControlleddatetimepickerRoot: fn,
+  dsControlleddatetimepickerPickerIconsWrapper: fn,
   dsControlleddatetimepickerCalendarDay: calendarDayFn,
   dsControlleddatetimepickerCalendarHeaderLabel: fn,
   dsControlleddatetimepickerCalendarHeaderButtons: fn,
   dsControlleddatetimepickerCalendarHeaderWeeklyDayList: fn,
+  dsControlleddatetimepickerCalendarHeaderWeeklyDayItem: fn,
   dsControlleddatetimepickerCalendarControllerWrapper: fn,
+  dsControlleddatetimepickerCalendarWrapper: fn,
+  dsControlleddatetimepickerCalendarHeader: fn,
+  dsControlleddatetimepickerCalendarBody: fn,
   dsControlleddatetimepickerCalendarContextFooter: fn,
   dsControlleddatetimepickerCalendarTriggerIcon: fn,
   dsControlleddatetimepickerCalendarContextContentWrapper: fn
 };
 const slotsDatePickerControllerOnly = {
   dsControlleddatetimepickerRoot: fn,
+  dsControlleddatetimepickerPickerIconsWrapper: fn,
   dsControlleddatetimepickerCalendarDay: calendarDayFn,
   dsControlleddatetimepickerCalendarHeaderLabel: fn,
   dsControlleddatetimepickerCalendarHeaderButtons: fn,
   dsControlleddatetimepickerCalendarHeaderWeeklyDayList: fn,
+  dsControlleddatetimepickerCalendarHeaderWeeklyDayItem: fn,
   dsControlleddatetimepickerCalendarControllerWrapper: fn,
+  dsControlleddatetimepickerCalendarWrapper: fn,
+  dsControlleddatetimepickerCalendarHeader: fn,
+  dsControlleddatetimepickerCalendarBody: fn,
   dsControlleddatetimepickerCalendarContextFooter: fn
 };
 const slotsFullTime = {
@@ -121,11 +173,19 @@ const slotsFullTime = {
   dsControlleddatetimepickerTimePickerHourInput: fn,
   dsControlleddatetimepickerTimePickerMinuteInput: fn,
   dsControlleddatetimepickerTimePickerMeridiemInput: fn,
+  dsControlleddatetimepickerTimeInputsColonSeparator: fn,
+  dsControlleddatetimepickerInputsSeparator: fn,
+  dsControlleddatetimepickerInputsFocusWithin: fn,
   dsControlleddatetimepickerClearBtn: fn,
+  dsControlleddatetimepickerPickerIconsWrapper: fn,
   dsControlleddatetimepickerTimewheelTimeButton: fn,
   dsControlleddatetimepickerTimewheelTimeChangeButton: fn,
   dsControlleddatetimepickerTimewheelHeaderLabel: fn,
   dsControlleddatetimepickerTimewheelControllerWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelsLegend: fn,
+  dsControlleddatetimepickerTimewheelWheelList: fn,
+  dsControlleddatetimepickerTimewheelWheelListItem: fn,
   dsControlleddatetimepickerTimewheelContextFooter: fn,
   dsControlleddatetimepickerTimewheelTriggerIcon: fn,
   dsControlleddatetimepickerTimewheelContextContentWrapper: fn
@@ -135,24 +195,37 @@ const slotsTimeInputs = {
   dsControlleddatetimepickerTimePickerHourInput: fn,
   dsControlleddatetimepickerTimePickerMinuteInput: fn,
   dsControlleddatetimepickerTimePickerMeridiemInput: fn,
+  dsControlleddatetimepickerTimeInputsColonSeparator: fn,
+  dsControlleddatetimepickerInputsSeparator: fn,
+  dsControlleddatetimepickerInputsFocusWithin: fn,
   dsControlleddatetimepickerClearBtn: fn
 };
 const slotsTimePicker = {
   dsControlleddatetimepickerRoot: fn,
+  dsControlleddatetimepickerPickerIconsWrapper: fn,
   dsControlleddatetimepickerTimewheelTimeButton: fn,
   dsControlleddatetimepickerTimewheelTimeChangeButton: fn,
   dsControlleddatetimepickerTimewheelHeaderLabel: fn,
   dsControlleddatetimepickerTimewheelControllerWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelsLegend: fn,
+  dsControlleddatetimepickerTimewheelWheelList: fn,
+  dsControlleddatetimepickerTimewheelWheelListItem: fn,
   dsControlleddatetimepickerTimewheelContextFooter: fn,
   dsControlleddatetimepickerTimewheelTriggerIcon: fn,
   dsControlleddatetimepickerTimewheelContextContentWrapper: fn
 };
 const slotsTimePickerControllerOnly = {
   dsControlleddatetimepickerRoot: fn,
+  dsControlleddatetimepickerPickerIconsWrapper: fn,
   dsControlleddatetimepickerTimewheelTimeButton: fn,
   dsControlleddatetimepickerTimewheelTimeChangeButton: fn,
   dsControlleddatetimepickerTimewheelHeaderLabel: fn,
   dsControlleddatetimepickerTimewheelControllerWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelWrapper: fn,
+  dsControlleddatetimepickerTimewheelWheelsLegend: fn,
+  dsControlleddatetimepickerTimewheelWheelList: fn,
+  dsControlleddatetimepickerTimewheelWheelListItem: fn,
   dsControlleddatetimepickerTimewheelContextFooter: fn
 };
 const polyDatePicker = {