@elliemae/ds-form-date-time-picker 3.46.0-rc.2 → 3.46.0-rc.4

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

@@ -89,8 +89,8 @@ const StyledIconTriggerButton = (0, import_ds_system.styled)(import_ds_button_v2
   slot: import_ControlledDateTimePickerDefinitions.DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR
 })`
   color: ${({ theme }) => theme.colors.brand["600"]};
-  width: 26px;
-  height: 26px;
+  width: 2rem;
+  height: 2rem;
 `;
 const StyledShadowWrapper = (0, import_ds_system.styled)("div", {
   name: import_ControlledDateTimePickerDefinitions.DSControlledDateTimePickerName,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/Calendar/Styleds.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\n\nconst diagonalLine = css`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nconst focusBorder = css`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n`;\n\nconst backgroundDateRange = {\n  inRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  startRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  endRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 0 50% 50% 0;\n  `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledShadowWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR,\n})``;\n\nexport const StyledCalendarWrapper = styled.div`\n  display: grid;\n  width: 260px;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled.section`\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  display: grid;\n  padding: ${({ theme }) => theme.space.xxxs};\n  grid-template-columns: min-content min-content 1fr min-content min-content;\n  grid-template-rows: 1fr;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledHeaderLabel = styled('h3', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL,\n})`\n  font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON,\n})`\n  position: relative;\n  width: 28px;\n  height: 28px;\n  &:focus {\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledBody = styled.section`\n  padding: ${({ theme }) => theme.space.xxxs};\n`;\n\nexport const StyledDayBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON,\n})`\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n  position: relative;\n  border-width: 2px;\n  border-style: solid;\n  border-color: transparent;\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  &:hover {\n    cursor: pointer;\n    color: ${({ theme }) => theme.colors.brand[700]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n  }\n  &:focus {\n    ${focusBorder}\n  }\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})<{ isHeader?: boolean }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n  ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n  .dayWrapper.selectedDay,\n  .dayWrapper.startRangeDay,\n  .dayWrapper.endRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n\n    &:not(.disabledDay),\n    &:not(.outOfRangeDay) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        border-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n\n    &.outOfRangeDay.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.disabledDay,\n  .dayWrapper.outOfRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n      ${diagonalLine}\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        &:after {\n          border: 2px solid ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.focusedDay {\n    ${StyledDayBtn} {\n      ${focusBorder}\n      color: ${({ theme }) => theme.colors.brand[600]};\n      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.selectedDay.disabledDay.focusedDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.notCurrentMonth {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n\n      &.disabledDay,\n      &.outOfRangeDay {\n        ${StyledDayBtn} {\n          color: ${({ theme }) => theme.colors.danger[900]};\n        }\n\n        &.inRangeDay,\n        &.startRangeDay,\n        &.endRangeDay {\n          ${StyledDayBtn} {\n            color: ${({ theme }) => theme.colors.neutral['000']};\n          }\n        }\n      }\n    }\n\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.inRangeDay {\n    ${backgroundDateRange.inRange}\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n      &.focusedDay {\n        ${StyledDayBtn} {\n          border-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.startRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.startRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.endRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay.startRangeDay {\n    background-color: transparent;\n    box-shadow: none;\n  }\n`;\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n`;\n\nexport const CalendarFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_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", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\n\nconst diagonalLine = css`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nconst focusBorder = css`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n`;\n\nconst backgroundDateRange = {\n  inRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  startRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  endRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 0 50% 50% 0;\n  `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledShadowWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR,\n})``;\n\nexport const StyledCalendarWrapper = styled.div`\n  display: grid;\n  width: 260px;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled.section`\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  display: grid;\n  padding: ${({ theme }) => theme.space.xxxs};\n  grid-template-columns: min-content min-content 1fr min-content min-content;\n  grid-template-rows: 1fr;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledHeaderLabel = styled('h3', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL,\n})`\n  font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON,\n})`\n  position: relative;\n  width: 28px;\n  height: 28px;\n  &:focus {\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledBody = styled.section`\n  padding: ${({ theme }) => theme.space.xxxs};\n`;\n\nexport const StyledDayBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON,\n})`\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n  position: relative;\n  border-width: 2px;\n  border-style: solid;\n  border-color: transparent;\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  &:hover {\n    cursor: pointer;\n    color: ${({ theme }) => theme.colors.brand[700]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n  }\n  &:focus {\n    ${focusBorder}\n  }\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})<{ isHeader?: boolean }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n  ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n  .dayWrapper.selectedDay,\n  .dayWrapper.startRangeDay,\n  .dayWrapper.endRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n\n    &:not(.disabledDay),\n    &:not(.outOfRangeDay) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        border-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n\n    &.outOfRangeDay.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.disabledDay,\n  .dayWrapper.outOfRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n      ${diagonalLine}\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        &:after {\n          border: 2px solid ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.focusedDay {\n    ${StyledDayBtn} {\n      ${focusBorder}\n      color: ${({ theme }) => theme.colors.brand[600]};\n      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.selectedDay.disabledDay.focusedDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.notCurrentMonth {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n\n      &.disabledDay,\n      &.outOfRangeDay {\n        ${StyledDayBtn} {\n          color: ${({ theme }) => theme.colors.danger[900]};\n        }\n\n        &.inRangeDay,\n        &.startRangeDay,\n        &.endRangeDay {\n          ${StyledDayBtn} {\n            color: ${({ theme }) => theme.colors.neutral['000']};\n          }\n        }\n      }\n    }\n\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.inRangeDay {\n    ${backgroundDateRange.inRange}\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n      &.focusedDay {\n        ${StyledDayBtn} {\n          border-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.startRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.startRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.endRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay.startRangeDay {\n    background-color: transparent;\n    box-shadow: none;\n  }\n`;\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n`;\n\nexport const CalendarFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_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", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -44,8 +44,8 @@ const StyledIconTriggerButton = (0, import_ds_system.styled)(import_ds_button_v2
   slot: import_ControlledDateTimePickerDefinitions.DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL
 })`
   color: ${({ theme }) => theme.colors.brand["600"]};
-  width: 26px;
-  height: 26px;
+  width: 2rem;
+  height: 2rem;
 `;
 const StyledCalendarWithTimeWheelWrapper = (0, import_ds_system.styled)("div", {
   name: import_ControlledDateTimePickerDefinitions.DSControlledDateTimePickerName,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/Pickers/CalendarWithTimeWheel/Styleds.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { CalendarContent } from '../Calendar/CalendarContent.js';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL,\n})`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  display: grid;\n  grid-template-columns: 260px 192px;\n  grid-template-rows: 1fr;\n  column-gap: 0;\n\n  & > div:last-of-type {\n    box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL,\n})`\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  grid-column: 1/3;\n  background-color: white;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { CalendarContent } from '../Calendar/CalendarContent.js';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL,\n})`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  display: grid;\n  grid-template-columns: 260px 192px;\n  grid-template-rows: 1fr;\n  column-gap: 0;\n\n  & > div:last-of-type {\n    box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL,\n})`\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  grid-column: 1/3;\n  background-color: white;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,0BAA2B;AAC3B,6BAAgC;AAChC,iDAGO;AAEA,MAAM,8BAA0B,yBAAO,gCAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,2EAAgC,aAAa;AACrD,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAK5C,MAAM,yCAAqC,yBAAO,OAAO;AAAA,EAC9D,MAAM;AAAA,EACN,MAAM,2EAAgC,qBAAqB;AAC7D,CAAC;AAAA,gBACe,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAO7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI9D,MAAM,qBAAiB,yBAAO,sCAAe;AAAA;AAAA;AAI7C,MAAM,yCAAqC,yBAAO,OAAO;AAAA,EAC9D,MAAM;AAAA,EACN,MAAM,2EAAgC,QAAQ;AAChD,CAAC;AAAA,0BACyB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,cACpD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,aAChC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA,iBAEjC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,IAAI;AAAA,eACvC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -94,8 +94,8 @@ const StyledIconTriggerButton = (0, import_ds_system.styled)(import_ds_button_v2
   slot: import_ControlledDateTimePickerDefinitions.DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL
 })`
   color: ${({ theme }) => theme.colors.brand["600"]};
-  width: 26px;
-  height: 26px;
+  width: 2rem;
+  height: 2rem;
 `;
 const StyledWheelList = import_ds_system.styled.div`
   width: 100%;

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

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

package/dist/cjs/parts/Styleds.js

@@ -120,7 +120,7 @@ const StyledInputsWrapperGrid = (0, import_ds_system.styled)(import_ds_grid.Grid
   align-items: center;
   background-color: white;
   ${({ isControllerOnly }) => isControllerOnly ? `` : `
-  height: 28px;    
+  height: 2.153rem;    
   border-width: 1px;
   border-style: solid;
   `}
@@ -162,7 +162,7 @@ const StyledTimeInputsWrapperGrid = import_ds_system.styled.div`
 `;
 const StyledPickersIconsWrapperGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)`
   position: relative;
-  ${({ isControllerOnly }) => isControllerOnly ? `` : `height: 26px;`}
+  ${({ isControllerOnly }) => isControllerOnly ? `` : `height: 2rem;`}
   :before {
     content: '';
     position: absolute;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Styleds.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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 {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../ControlledDateTimePickerDefinitions.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 }) => {\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`;\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[400]}\n    `}\n  }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n  position: relative;\n  &:focus-within {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: -5px;\n      left: -2px;\n      width: calc(100% + 4px);\n      height: calc(100% + 10px);\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})<{ shouldDisplay: boolean }>`\n  height: 26px;\n  position: relative;\n  visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n  &:focus {\n    &:after {\n      z-index: 1;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* 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 {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../ControlledDateTimePickerDefinitions.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: 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`;\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    border-radius: 2px;\n    ${({ theme, isControllerOnly, hasError }) =>\n      isControllerOnly\n        ? ``\n        : `\n    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[400]}\n    `}\n  }\n`;\n\nexport const StyledFocusWithIn = styled(Grid)`\n  position: relative;\n  &:focus-within {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: -5px;\n      left: -2px;\n      width: calc(100% + 4px);\n      height: calc(100% + 10px);\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CLEAR_BUTTON,\n})<{ shouldDisplay: boolean }>`\n  height: 26px;\n  position: relative;\n  visibility: ${({ shouldDisplay }) => (shouldDisplay ? 'visible' : 'hidden')};\n  &:focus {\n    &:after {\n      z-index: 1;\n    }\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -49,8 +49,8 @@ const StyledIconTriggerButton = styled(DSButtonV2, {
   slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR
 })`
   color: ${({ theme }) => theme.colors.brand["600"]};
-  width: 26px;
-  height: 26px;
+  width: 2rem;
+  height: 2rem;
 `;
 const StyledShadowWrapper = styled("div", {
   name: DSControlledDateTimePickerName,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/Calendar/Styleds.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\n\nconst diagonalLine = css`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nconst focusBorder = css`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n`;\n\nconst backgroundDateRange = {\n  inRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  startRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  endRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 0 50% 50% 0;\n  `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledShadowWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR,\n})``;\n\nexport const StyledCalendarWrapper = styled.div`\n  display: grid;\n  width: 260px;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled.section`\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  display: grid;\n  padding: ${({ theme }) => theme.space.xxxs};\n  grid-template-columns: min-content min-content 1fr min-content min-content;\n  grid-template-rows: 1fr;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledHeaderLabel = styled('h3', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL,\n})`\n  font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON,\n})`\n  position: relative;\n  width: 28px;\n  height: 28px;\n  &:focus {\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledBody = styled.section`\n  padding: ${({ theme }) => theme.space.xxxs};\n`;\n\nexport const StyledDayBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON,\n})`\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n  position: relative;\n  border-width: 2px;\n  border-style: solid;\n  border-color: transparent;\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  &:hover {\n    cursor: pointer;\n    color: ${({ theme }) => theme.colors.brand[700]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n  }\n  &:focus {\n    ${focusBorder}\n  }\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})<{ isHeader?: boolean }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n  ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n  .dayWrapper.selectedDay,\n  .dayWrapper.startRangeDay,\n  .dayWrapper.endRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n\n    &:not(.disabledDay),\n    &:not(.outOfRangeDay) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        border-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n\n    &.outOfRangeDay.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.disabledDay,\n  .dayWrapper.outOfRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n      ${diagonalLine}\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        &:after {\n          border: 2px solid ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.focusedDay {\n    ${StyledDayBtn} {\n      ${focusBorder}\n      color: ${({ theme }) => theme.colors.brand[600]};\n      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.selectedDay.disabledDay.focusedDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.notCurrentMonth {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n\n      &.disabledDay,\n      &.outOfRangeDay {\n        ${StyledDayBtn} {\n          color: ${({ theme }) => theme.colors.danger[900]};\n        }\n\n        &.inRangeDay,\n        &.startRangeDay,\n        &.endRangeDay {\n          ${StyledDayBtn} {\n            color: ${({ theme }) => theme.colors.neutral['000']};\n          }\n        }\n      }\n    }\n\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.inRangeDay {\n    ${backgroundDateRange.inRange}\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n      &.focusedDay {\n        ${StyledDayBtn} {\n          border-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.startRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.startRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.endRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay.startRangeDay {\n    background-color: transparent;\n    box-shadow: none;\n  }\n`;\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n`;\n\nexport const CalendarFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { css, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\n\nconst diagonalLine = css`\n  &:before {\n    position: absolute;\n    content: '';\n    top: 48%;\n    left: -2px;\n    height: 1px;\n    width: calc(100% + 4px);\n    transform: rotate(45deg);\n    background-color: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nconst focusBorder = css`\n  &:after {\n    position: absolute;\n    content: '';\n    top: -4px;\n    left: -4px;\n    width: calc(100% + 8px);\n    height: calc(100% + 8px);\n    border-radius: 50%;\n  }\n`;\n\nconst backgroundDateRange = {\n  inRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  startRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 50% 0 0 50%;\n    box-shadow: 4px 0 0 0 ${({ theme }) => theme.colors.brand[200]};\n  `,\n  endRange: css`\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    border-radius: 0 50% 50% 0;\n  `,\n};\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledShadowWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR,\n})``;\n\nexport const StyledCalendarWrapper = styled.div`\n  display: grid;\n  width: 260px;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  grid-template-rows: auto auto;\n`;\n\nexport const StyledHeader = styled.section`\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  display: grid;\n  padding: ${({ theme }) => theme.space.xxxs};\n  grid-template-columns: min-content min-content 1fr min-content min-content;\n  grid-template-rows: 1fr;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  background: ${({ theme }) => theme.colors.neutral['050']};\n`;\n\nexport const StyledHeaderLabel = styled('h3', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_LABEL,\n})`\n  font-size: 1rem;\n`;\n\nexport const StyledHeaderButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_BUTTON,\n})`\n  position: relative;\n  width: 28px;\n  height: 28px;\n  &:focus {\n    &:after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      border-radius: 2px;\n      pointer-events: none;\n    }\n  }\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n  }\n`;\n\nexport const StyledBody = styled.section`\n  padding: ${({ theme }) => theme.space.xxxs};\n`;\n\nexport const StyledDayBtn = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.DAY_BUTTON,\n})`\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n  position: relative;\n  border-width: 2px;\n  border-style: solid;\n  border-color: transparent;\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  &:hover {\n    cursor: pointer;\n    color: ${({ theme }) => theme.colors.brand[700]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n  }\n  &:focus {\n    ${focusBorder}\n  }\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const StyledWeekDaysListWrapper = styled(Grid, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CALENDAR.HEADER_WEEKLY_DAY_LIST,\n})<{ isHeader?: boolean }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[400]};\n  text-align: center;\n  ${({ isHeader, theme }) => (isHeader ? `background: ${theme.colors.neutral['050']}` : '')};\n  ${({ isHeader }) => (isHeader ? 'text-transform: capitalize' : '')};\n\n  .dayWrapper.selectedDay,\n  .dayWrapper.startRangeDay,\n  .dayWrapper.endRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      font-weight: ${({ theme }) => theme.fontWeights.semibold};\n    }\n\n    &:not(.disabledDay),\n    &:not(.outOfRangeDay) {\n      ${StyledDayBtn} {\n        background-color: ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        border-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n\n    &.outOfRangeDay.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.disabledDay,\n  .dayWrapper.outOfRangeDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n      ${diagonalLine}\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        &:after {\n          border: 2px solid ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.focusedDay {\n    ${StyledDayBtn} {\n      ${focusBorder}\n      color: ${({ theme }) => theme.colors.brand[600]};\n      &:after {\n        border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n      }\n    }\n\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.danger[900]};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.selectedDay.disabledDay.focusedDay {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral['000']};\n      &:before {\n        background-color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.notCurrentMonth {\n    ${StyledDayBtn} {\n      color: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.brand[600]};\n      }\n\n      &.disabledDay,\n      &.outOfRangeDay {\n        ${StyledDayBtn} {\n          color: ${({ theme }) => theme.colors.danger[900]};\n        }\n\n        &.inRangeDay,\n        &.startRangeDay,\n        &.endRangeDay {\n          ${StyledDayBtn} {\n            color: ${({ theme }) => theme.colors.neutral['000']};\n          }\n        }\n      }\n    }\n\n    &.selectedDay,\n    &.startRangeDay,\n    &.endRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n  }\n\n  .dayWrapper.inRangeDay {\n    ${backgroundDateRange.inRange}\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        background-color: ${({ theme }) => theme.colors.danger[900]};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n      &.focusedDay {\n        ${StyledDayBtn} {\n          border-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.startRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.startRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay {\n    &.inRangeImproperDay {\n      ${backgroundDateRange.endRange}\n    }\n    &.focusedDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n      }\n    }\n    &.disabledDay,\n    &.outOfRangeDay {\n      ${StyledDayBtn} {\n        color: ${({ theme }) => theme.colors.neutral['000']};\n        &:before {\n          background-color: ${({ theme }) => theme.colors.neutral['000']};\n        }\n      }\n    }\n  }\n\n  .dayWrapper.endRangeDay.startRangeDay {\n    background-color: transparent;\n    box-shadow: none;\n  }\n`;\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nexport const StyledWeekDaysHeaderItem = styled.div`\n  width: ${({ theme }) => theme.space.s};\n  min-width: ${({ theme }) => theme.space.s};\n`;\n\nexport const CalendarFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_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/CalendarWithTimeWheel/Styleds.js

@@ -11,8 +11,8 @@ const StyledIconTriggerButton = styled(DSButtonV2, {
   slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL
 })`
   color: ${({ theme }) => theme.colors.brand["600"]};
-  width: 26px;
-  height: 26px;
+  width: 2rem;
+  height: 2rem;
 `;
 const StyledCalendarWithTimeWheelWrapper = styled("div", {
   name: DSControlledDateTimePickerName,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/Pickers/CalendarWithTimeWheel/Styleds.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { CalendarContent } from '../Calendar/CalendarContent.js';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 26px;\n  height: 26px;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL,\n})`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  display: grid;\n  grid-template-columns: 260px 192px;\n  grid-template-rows: 1fr;\n  column-gap: 0;\n\n  & > div:last-of-type {\n    box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL,\n})`\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  grid-column: 1/3;\n  background-color: white;\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { CalendarContent } from '../Calendar/CalendarContent.js';\nimport {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../../../ControlledDateTimePickerDefinitions.js';\n\nexport const StyledIconTriggerButton = styled(DSButtonV2, {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.PICKER_ICONS.CALENDAR_TIMEWHEEL,\n})`\n  color: ${({ theme }) => theme.colors.brand['600']};\n  width: 2rem;\n  height: 2rem;\n`;\n\nexport const StyledCalendarWithTimeWheelWrapper = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.CONTROLLER_COMPONENT.CALENDAR_TIMEWHEEL,\n})`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  display: grid;\n  grid-template-columns: 260px 192px;\n  grid-template-rows: 1fr;\n  column-gap: 0;\n\n  & > div:last-of-type {\n    box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[200]};\n  }\n`;\n\nexport const StyledCalendar = styled(CalendarContent)`\n  box-shadow: none;\n`;\n\nexport const CalendarWithTimeWheelFooterMessage = styled('div', {\n  name: DSControlledDateTimePickerName,\n  slot: DSControlledDateTimePickerSlots.FOOTERS.CALENDAR_TIMEWHEEL,\n})`\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  grid-column: 1/3;\n  background-color: white;\n`;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,0BAA0B,OAAO,YAAY;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,gCAAgC,aAAa;AACrD,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAK5C,MAAM,qCAAqC,OAAO,OAAO;AAAA,EAC9D,MAAM;AAAA,EACN,MAAM,gCAAgC,qBAAqB;AAC7D,CAAC;AAAA,gBACe,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAO7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI9D,MAAM,iBAAiB,OAAO,eAAe;AAAA;AAAA;AAI7C,MAAM,qCAAqC,OAAO,OAAO;AAAA,EAC9D,MAAM;AAAA,EACN,MAAM,gCAAgC,QAAQ;AAChD,CAAC;AAAA,0BACyB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,cACpD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,aAChC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,WACjC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA,iBAEjC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,IAAI;AAAA,eACvC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -55,8 +55,8 @@ const StyledIconTriggerButton = styled(DSButtonV2, {
   slot: DSControlledDateTimePickerSlots.PICKER_ICONS.TIMEWHEEL
 })`
   color: ${({ theme }) => theme.colors.brand["600"]};
-  width: 26px;
-  height: 26px;
+  width: 2rem;
+  height: 2rem;
 `;
 const StyledWheelList = styled.div`
   width: 100%;

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

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

@@ -75,7 +75,7 @@ const StyledInputsWrapperGrid = styled(Grid, {
   align-items: center;
   background-color: white;
   ${({ isControllerOnly }) => isControllerOnly ? `` : `
-  height: 28px;    
+  height: 2.153rem;    
   border-width: 1px;
   border-style: solid;
   `}
@@ -117,7 +117,7 @@ const StyledTimeInputsWrapperGrid = styled.div`
 `;
 const StyledPickersIconsWrapperGrid = styled(Grid)`
   position: relative;
-  ${({ isControllerOnly }) => isControllerOnly ? `` : `height: 26px;`}
+  ${({ isControllerOnly }) => isControllerOnly ? `` : `height: 2rem;`}
   :before {
     content: '';
     position: absolute;

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

@@ -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 {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../ControlledDateTimePickerDefinitions.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 }) => {\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`;\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[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"],
+  "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 {\n  DSControlledDateTimePickerName,\n  DSControlledDateTimePickerSlots,\n} from '../ControlledDateTimePickerDefinitions.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: 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`;\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    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": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,UAAU;AAC3B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,MAAM,gBAAgB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAcjB,GAAG,WAAW,SAAS,CAAC;AAAA,aAC9B,GAAG,MAAM,aAAa,CAAC;AAAA;AAAA;AAI7B,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,EAAG;AAAA;AAGlD,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,wBAAwB,OAAO,aAAa;AAAA;AAAA;AAAA,IAGrD,CAAC,EAAE,SAAS,MAAO,WAAW,oBAAoB,EAAG;AAAA;AAGlD,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,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;AAGzF,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,eAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASjE,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,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWlB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzD,MAAM,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-date-time-picker",
-  "version": "3.46.0-rc.2",
+  "version": "3.46.0-rc.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Date Time Picker",
   "files": [
@@ -36,21 +36,21 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-accessibility": "3.46.0-rc.2",
-    "@elliemae/ds-button-v2": "3.46.0-rc.2",
-    "@elliemae/ds-grid": "3.46.0-rc.2",
-    "@elliemae/ds-icons": "3.46.0-rc.2",
-    "@elliemae/ds-popperjs": "3.46.0-rc.2",
-    "@elliemae/ds-props-helpers": "3.46.0-rc.2",
-    "@elliemae/ds-system": "3.46.0-rc.2",
-    "@elliemae/ds-typescript-helpers": "3.46.0-rc.2"
+    "@elliemae/ds-accessibility": "3.46.0-rc.4",
+    "@elliemae/ds-button-v2": "3.46.0-rc.4",
+    "@elliemae/ds-grid": "3.46.0-rc.4",
+    "@elliemae/ds-popperjs": "3.46.0-rc.4",
+    "@elliemae/ds-icons": "3.46.0-rc.4",
+    "@elliemae/ds-props-helpers": "3.46.0-rc.4",
+    "@elliemae/ds-system": "3.46.0-rc.4",
+    "@elliemae/ds-typescript-helpers": "3.46.0-rc.4"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
     "@elliemae/pui-theme": "~2.10.0",
     "styled-components": "~5.3.9",
     "styled-system": "~5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.46.0-rc.2"
+    "@elliemae/ds-monorepo-devops": "3.46.0-rc.4"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.10.0",