@elliemae/ds-controlled-form 2.3.1 → 2.3.2-next.0

package/esm/{controlled-date-range-picker → date-range-picker}/config/useRangePickerLogic.js

@@ -6,11 +6,11 @@ import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import '../../controlled-date-time-picker/ControlledDateTimePicker.js';
+import '../../date-time-picker/ControlledDateTimePicker.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/es.string.replace.js';
-import { getDayFromDateString } from '../../controlled-date-time-picker/utils/dateHelpers.js';
+import { getDayFromDateString } from '../../date-time-picker/utils/dateHelpers.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 

package/esm/{controlled-date-range-picker → date-range-picker}/parts/ControlledDateRangeCalendar.js

@@ -1,7 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
-import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
-import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDateTimePicker.js';
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/web.dom-collections.iterator.js';

package/esm/{controlled-date-range-picker → date-range-picker}/parts/ControlledDateRangeContent.js

@@ -20,7 +20,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const StyledWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-e4pfvj-0"
+  componentId: "sc-1mar2a9-0"
 })(["display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;", " grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"], _ref => {
   let {
     isControllerOnly

package/esm/{controlled-date-range-picker → date-range-picker}/parts/ControlledDateRangeFromDate.js

@@ -1,8 +1,8 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
 import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';
-import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
-import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDateTimePicker.js';
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/web.dom-collections.iterator.js';

package/esm/{controlled-date-range-picker → date-range-picker}/parts/ControlledDateRangeToDate.js

@@ -1,8 +1,8 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
 import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';
-import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
-import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDateTimePicker.js';
+import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/web.dom-collections.iterator.js';

package/esm/{controlled-date-time-picker → date-time-picker}/parts/Pickers/Calendar/Styleds.js

@@ -43,7 +43,7 @@ const backgroundDateRange = {
   })
 };
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-18gg4kd-0"
+  componentId: "sc-1vlmm1g-0"
 })(["color:", ";width:26px;height:26px;"], _ref7 => {
   let {
     theme
@@ -51,7 +51,7 @@ const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.colors.brand['600'];
 });
 const StyledShadowWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-18gg4kd-1"
+  componentId: "sc-1vlmm1g-1"
 })(["", ""], _ref8 => {
   let {
     isControllerOnly
@@ -59,7 +59,7 @@ const StyledShadowWrapper = /*#__PURE__*/styled.div.withConfig({
   return isControllerOnly ? undefined : 'box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);';
 });
 const StyledCalendarWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-18gg4kd-2"
+  componentId: "sc-1vlmm1g-2"
 })(["display:grid;width:260px;background-color:", ";grid-template-rows:auto auto;"], _ref9 => {
   let {
     theme
@@ -67,7 +67,7 @@ const StyledCalendarWrapper = /*#__PURE__*/styled.div.withConfig({
   return theme.colors.neutral['000'];
 });
 const StyledHeader = /*#__PURE__*/styled.section.withConfig({
-  componentId: "sc-18gg4kd-3"
+  componentId: "sc-1vlmm1g-3"
 })(["*{margin:0;padding:0;box-sizing:border-box;}display:grid;padding:", ";grid-template-columns:min-content min-content 1fr min-content min-content;grid-template-rows:1fr;align-items:center;justify-content:center;text-align:center;background:", ";h3{font-size:1rem;}"], _ref10 => {
   let {
     theme
@@ -80,7 +80,7 @@ const StyledHeader = /*#__PURE__*/styled.section.withConfig({
   return theme.colors.neutral['050'];
 });
 const StyledHeaderButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-18gg4kd-4"
+  componentId: "sc-1vlmm1g-4"
 })(["position:relative;width:28px;height:28px;&:focus{&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}&:hover{background:", ";}"], _ref12 => {
   let {
     theme
@@ -93,7 +93,7 @@ const StyledHeaderButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.colors.brand[200];
 });
 const StyledBody = /*#__PURE__*/styled.section.withConfig({
-  componentId: "sc-18gg4kd-5"
+  componentId: "sc-1vlmm1g-5"
 })(["padding:", ";"], _ref14 => {
   let {
     theme
@@ -101,7 +101,7 @@ const StyledBody = /*#__PURE__*/styled.section.withConfig({
   return theme.space.xxxs;
 });
 const StyledDayBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-18gg4kd-6"
+  componentId: "sc-1vlmm1g-6"
 })(["height:32px;width:32px;border-radius:50%;position:relative;border-width:2px;border-style:solid;border-color:transparent;line-height:1;color:", ";&:hover{cursor:pointer;color:", ";background-color:", ";}&:focus{", "}"], _ref15 => {
   let {
     theme
@@ -119,7 +119,7 @@ const StyledDayBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.colors.brand[200];
 }, focusBorder);
 const StyledWeekDaysListWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-18gg4kd-7"
+  componentId: "sc-1vlmm1g-7"
 })(["font-size:", ";text-align:center;", ";", ";.dayWrapper.selectedDay,.dayWrapper.startRangeDay,.dayWrapper.endRangeDay{", "{color:", ";font-weight:", ";}&:not(.disabledDay),&:not(.outOfRangeDay){", "{background-color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}}&.focusedDay{", "{color:", ";border-color:", ";}}&.outOfRangeDay.focusedDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.disabledDay,.dayWrapper.outOfRangeDay{", "{color:", ";", " &:before{background-color:", ";}}&.focusedDay{", "{&:after{border:2px solid ", ";}}}}.dayWrapper.focusedDay{", "{", " color:", ";&:after{border:2px solid ", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.notCurrentMonth{", "{color:", ";}&.focusedDay{", "{color:", ";}&.disabledDay,&.outOfRangeDay{", "{color:", ";}&.inRangeDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}}&.selectedDay,&.startRangeDay,&.endRangeDay{", "{color:", ";}}}.dayWrapper.inRangeDay{", " &.disabledDay,&.outOfRangeDay{", "{color:", ";background-color:", ";&:before{background-color:", ";}}&.focusedDay{", "{border-color:", ";}}}}.dayWrapper.startRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay{", " &.focusedDay{", "{color:", ";}}&.disabledDay,&.outOfRangeDay{", "{color:", ";&:before{background-color:", ";}}}}.dayWrapper.endRangeDay.startRangeDay{background-color:transparent;box-shadow:none;}"], _ref18 => {
   let {
     theme
@@ -298,7 +298,7 @@ const StyledWeekDaysListWrapper = /*#__PURE__*/styled(Grid).withConfig({
   return theme.colors.neutral['000'];
 });
 const StyledWeekDaysHeaderItem = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-18gg4kd-8"
+  componentId: "sc-1vlmm1g-8"
 })(["width:", ";min-width:", ";"], _ref53 => {
   let {
     theme
@@ -311,7 +311,7 @@ const StyledWeekDaysHeaderItem = /*#__PURE__*/styled.div.withConfig({
   return theme.space.s;
 });
 const CalendarFooterMessage = /*#__PURE__*/styled.footer.withConfig({
-  componentId: "sc-18gg4kd-9"
+  componentId: "sc-1vlmm1g-9"
 })(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], _ref55 => {
   let {
     theme

package/esm/{controlled-date-time-picker → date-time-picker}/parts/Pickers/CalendarWithTimeWheel/Styleds.js

@@ -3,7 +3,7 @@ import { DSButtonV2 } from '@elliemae/ds-button';
 import { CalendarContent } from '../Calendar/CalendarContent.js';
 
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-h2xj8r-0"
+  componentId: "sc-eqspen-0"
 })(["color:", ";width:26px;height:26px;"], _ref => {
   let {
     theme
@@ -11,7 +11,7 @@ const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.colors.brand['600'];
 });
 const StyledCalendarWithTimeWheelWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-h2xj8r-1"
+  componentId: "sc-eqspen-1"
 })(["background:", ";", " display:grid;grid-template-columns:260px 192px;grid-template-rows:1fr;column-gap:0;& > div:last-of-type{box-shadow:-1px 0 0 0 ", ";margin-left:1px;}"], _ref2 => {
   let {
     theme
@@ -29,10 +29,10 @@ const StyledCalendarWithTimeWheelWrapper = /*#__PURE__*/styled.div.withConfig({
   return theme.colors.neutral[200];
 });
 const StyledCalendar = /*#__PURE__*/styled(CalendarContent).withConfig({
-  componentId: "sc-h2xj8r-2"
+  componentId: "sc-eqspen-2"
 })(["box-shadow:none;"]);
 const CalendarWithTimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
-  componentId: "sc-h2xj8r-3"
+  componentId: "sc-eqspen-3"
 })(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;grid-column:1/3;"], _ref5 => {
   let {
     theme

package/esm/{controlled-date-time-picker → date-time-picker}/parts/Pickers/TimeWheel/Styleds.js

@@ -46,7 +46,7 @@ const hoverBgPerStatus = css(_templateObject4 || (_templateObject4 = _taggedTemp
   return theme.colors.neutral['000'];
 });
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-1nsw31l-0"
+  componentId: "sc-u44anw-0"
 })(["color:", ";width:26px;height:26px;"], _ref5 => {
   let {
     theme
@@ -54,7 +54,7 @@ const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.colors.brand['600'];
 });
 const StyledWheelList = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-1"
+  componentId: "sc-u44anw-1"
 })(["width:100%;height:100%;margin:auto;padding:0;position:relative;display:flex;flex-direction:column;align-items:center;&:focus-within{&:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";box-shadow:0 0 2px ", ";}}"], _ref6 => {
   let {
     theme
@@ -67,7 +67,7 @@ const StyledWheelList = /*#__PURE__*/styled.div.withConfig({
   return theme.colors.brand[700];
 });
 const StyledTimePickerContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-2"
+  componentId: "sc-u44anw-2"
 })(["display:grid;position:relative;grid-template-columns:192px;grid-template-rows:36px 30px auto;grid-template-areas:'TimePickerHead' 'TimePickerWheelsLegend' 'VerticalWheelWrapper';", ""], _ref8 => {
   let {
     showShadow,
@@ -76,7 +76,7 @@ const StyledTimePickerContainer = /*#__PURE__*/styled.div.withConfig({
   return showShadow && !isControllerOnly ? "\n  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);\n  " : '';
 });
 const StyledTimePickerHead = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1nsw31l-3"
+  componentId: "sc-u44anw-3"
 })(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], _ref9 => {
   let {
     theme
@@ -84,7 +84,7 @@ const StyledTimePickerHead = /*#__PURE__*/styled(Grid).withConfig({
   return theme.colors.neutral['050'];
 });
 const StyledTimePickerWheelsLegend = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-4"
+  componentId: "sc-u44anw-4"
 })(["width:100%;height:100;grid-area:TimePickerWheelsLegend;display:grid;grid-template-columns:", " ", " ", ";align-items:center;justify-content:center;text-align:center;background:", ";"], _ref10 => {
   let {
     theme
@@ -107,7 +107,7 @@ const StyledTimePickerWheelsLegend = /*#__PURE__*/styled.div.withConfig({
   return theme.colors.neutral['050'];
 });
 const StyledTimePickerWheelWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-5"
+  componentId: "sc-u44anw-5"
 })(["width:100%;background:", ";grid-area:VerticalWheelWrapper;display:grid;grid-template-columns:", " ", " ", ";grid-template-rows:100%;& ul:not(:last-child){position:relative;&:after{content:'';position:absolute;left:100%;top:5%;height:90%;width:1px;background:", ";}}"], _ref14 => {
   let {
     theme
@@ -135,7 +135,7 @@ const StyledTimePickerWheelWrapper = /*#__PURE__*/styled.div.withConfig({
   return theme.colors.neutral[200];
 });
 const StyledTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-1nsw31l-6"
+  componentId: "sc-u44anw-6"
 })(["position:relative;height:", ";width:", ";border-radius:50%;&:hover{background-color:", ";}color:", ";", " ", " ", ";"], _ref19 => {
   let {
     theme
@@ -166,10 +166,10 @@ const StyledTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return selected ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-weight: ", ";\n    background-color ", ";\n    "])), theme.fontWeights.semibold, isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]) : "";
 });
 const StyledWheelListItem = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-7"
+  componentId: "sc-u44anw-7"
 })(["margin:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;"]);
 const StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-1nsw31l-8"
+  componentId: "sc-u44anw-8"
 })(["height:", ";width:", ";min-width:", ";border-radius:50%;"], _ref24 => {
   let {
     theme
@@ -187,7 +187,7 @@ const StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.space.s;
 });
 const TimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
-  componentId: "sc-1nsw31l-9"
+  componentId: "sc-u44anw-9"
 })(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], _ref27 => {
   let {
     theme

package/esm/{controlled-date-time-picker → date-time-picker}/parts/Styleds.js

@@ -4,16 +4,16 @@ import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
 const ResettedInput = /*#__PURE__*/styled.input.withConfig({
-  componentId: "sc-1t4k08s-0"
+  componentId: "sc-2wbvze-0"
 })(["border:none;box-shadow:none;background:none;text-align:center;height:100%;display:flex;align-items:center;:focus{outline:none;}padding-top:2px;"]);
 const StyledSeparator = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1t4k08s-1"
+  componentId: "sc-2wbvze-1"
 })(["padding-top:2px;margin:auto;"]);
 const StyledColonSeparator = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1t4k08s-2"
+  componentId: "sc-2wbvze-2"
 })(["padding-bottom:1px;margin:auto;"]);
 const Styled2DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
-  componentId: "sc-1t4k08s-3"
+  componentId: "sc-2wbvze-3"
 })(["width:100%;height:100%;", ""], _ref => {
   let {
     disabled
@@ -21,7 +21,7 @@ const Styled2DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   return disabled ? "color: #616b7f;" : "";
 });
 const StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
-  componentId: "sc-1t4k08s-4"
+  componentId: "sc-2wbvze-4"
 })(["width:100%;height:100%;", ""], _ref2 => {
   let {
     disabled
@@ -29,7 +29,7 @@ const StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   return disabled ? "color: #616b7f;" : "";
 });
 const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1t4k08s-5"
+  componentId: "sc-2wbvze-5"
 })(["width:max-content;align-items:center;", " border-color:", ";border-radius:2px;padding-left:", ";padding-right:", ";position:relative;", ""], _ref3 => {
   let {
     isControllerOnly
@@ -62,13 +62,13 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   return disabled ? "background-color: ".concat(theme.colors.neutral[100], ";") : "";
 });
 const StyledDateInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1t4k08s-6"
+  componentId: "sc-2wbvze-6"
 })(["display:grid;grid-template-columns:24px min-content 24px min-content 48px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
 const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1t4k08s-7"
+  componentId: "sc-2wbvze-7"
 })(["display:grid;grid-template-columns:24px min-content 24px min-content 24px min-content 24px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
 const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1t4k08s-8"
+  componentId: "sc-2wbvze-8"
 })(["position:relative;", ":before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], _ref8 => {
   let {
     isControllerOnly
@@ -83,7 +83,7 @@ const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   return isControllerOnly ? "" : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    ");
 });
 const StyledFocusWithIn = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1t4k08s-9"
+  componentId: "sc-2wbvze-9"
 })(["position:relative;&:focus-within{&:after{display:block;content:' ';position:absolute;top:-5px;left:-2px;width:calc(100% + 4px);height:calc(100% + 10px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref10 => {
   let {
     theme
@@ -91,7 +91,7 @@ const StyledFocusWithIn = /*#__PURE__*/styled(Grid).withConfig({
   return theme.colors.brand[700];
 });
 const StyledClearButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-1t4k08s-10"
+  componentId: "sc-2wbvze-10"
 })(["height:26px;position:relative;visibility:", ";"], _ref11 => {
   let {
     shouldDisplay

package/esm/index.js

@@ -1,14 +1,21 @@
-export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './controlled-checkbox/ControlledCheckbox.js';
-export { DSControlledDateRangePicker, DSControlledDateRangePickerWithSchema } from './controlled-date-range-picker/ControlledDateRangePicker.js';
-export { ControlledDateRangePickerDatatestid } from './controlled-date-range-picker/ControlledDateRangePickerDatatestid.js';
-export { CONTROLLED_DATE_RANGE_PICKER_TYPES } from './controlled-date-range-picker/ControlledDateRangePickerTypes.js';
-export { DSControlledDateTimePicker, DSControlledDateTimePickerWithSchema } from './controlled-date-time-picker/ControlledDateTimePicker.js';
-export { ControlledDateTimePickerDatatestid } from './controlled-date-time-picker/ControlledDateTimePickerDatatestid.js';
-export { CONTROLLED_DATE_TIME_PICKER_TYPES } from './controlled-date-time-picker/ControlledDateTimePickerTypes.js';
-export { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './controlled-date-time-picker/utils/stringHelpers.js';
-export { getValidationDateTimeStringMetaInfo } from './controlled-date-time-picker/utils/dateTimeHelpers.js';
-export { getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getValidationDateStringMetaInfo } from './controlled-date-time-picker/utils/dateHelpers.js';
-export { getValidationTimeStringMetaInfo } from './controlled-date-time-picker/utils/timeHelpers.js';
-export { DSControlledToggle, DSControlledToggleWithSchema } from './controlled-toggle/ControlledToggle.js';
-export { DSAutocomplete, DSAutocompleteWithSchema } from './controlled-autocomplete/Autocomplete.js';
-export { DSComboBox, DSComboBoxWithSchema } from './controlled-combobox/ComboBox.js';
+export { DSAutocomplete, DSAutocompleteWithSchema } from './autocomplete/Autocomplete.js';
+export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './checkbox/ControlledCheckbox.js';
+export { DSComboBox, DSComboBoxWithSchema } from './combobox/ComboBox.js';
+export { DSControlledDateRangePicker, DSControlledDateRangePickerWithSchema } from './date-range-picker/ControlledDateRangePicker.js';
+export { ControlledDateRangePickerDatatestid } from './date-range-picker/ControlledDateRangePickerDatatestid.js';
+export { CONTROLLED_DATE_RANGE_PICKER_TYPES } from './date-range-picker/ControlledDateRangePickerTypes.js';
+export { DSControlledDateTimePicker, DSControlledDateTimePickerWithSchema } from './date-time-picker/ControlledDateTimePicker.js';
+export { ControlledDateTimePickerDatatestid } from './date-time-picker/ControlledDateTimePickerDatatestid.js';
+export { CONTROLLED_DATE_TIME_PICKER_TYPES } from './date-time-picker/ControlledDateTimePickerTypes.js';
+export { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './date-time-picker/utils/stringHelpers.js';
+export { getValidationDateTimeStringMetaInfo } from './date-time-picker/utils/dateTimeHelpers.js';
+export { getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getValidationDateStringMetaInfo } from './date-time-picker/utils/dateHelpers.js';
+export { getValidationTimeStringMetaInfo } from './date-time-picker/utils/timeHelpers.js';
+export { UsePhoneMaskWithSchema, usePhoneMask } from './mask-hook/hooks/usePhoneMask.js';
+export { UseNumberMaskWithSchema, useNumberMask } from './mask-hook/hooks/useNumberMask.js';
+export { UseSSNMaskWithSchema, useSSNMask } from './mask-hook/hooks/useSSNMask.js';
+export { UseZipCodeMaskWithSchema, useZipCode } from './mask-hook/hooks/useZipCode.js';
+export { DSInputText, DSInputTextWithSchema } from './text-input/DSInputText.js';
+export { DSInputTextDataTestIds } from './text-input/exported-related/data-test-ids.js';
+export { DSInputTextName, DSInputTextSlots } from './text-input/exported-related/theming.js';
+export { DSControlledToggle, DSControlledToggleWithSchema } from './toggle/ControlledToggle.js';