@elliemae/ds-controlled-form 2.4.2-rc.11 → 2.4.2-rc.14

package/esm/autocomplete/parts/menu-list/styled.js

@@ -6,7 +6,7 @@ const StyledListWrapper = /*#__PURE__*/styled.div.withConfig({
   let {
     minWidth
   } = _ref;
-  return minWidth ? "".concat(minWidth, "px") : '100%';
+  return minWidth ? `${minWidth}px` : '100%';
 });
 const StyledList = /*#__PURE__*/styled.ul.withConfig({
   componentId: "sc-qt1kwv-1"
@@ -17,7 +17,7 @@ const StyledVirtualListWrapper = /*#__PURE__*/styled.div.withConfig({
   let {
     maxHeight
   } = _ref2;
-  return "".concat(!maxHeight ? '400' : maxHeight, "px");
+  return `${!maxHeight ? '400' : maxHeight}px`;
 });
 
 export { StyledList, StyledListWrapper, StyledVirtualListWrapper };

package/esm/autocomplete/parts/menu-list/useItemRenderer.js

@@ -43,7 +43,7 @@ const useItemRenderer = () => {
             left: 0,
             width: '100%'
           },
-          key: "".concat(option.dsId),
+          key: `${option.dsId}`,
           innerRef: vItem.measureRef
         };
 

package/esm/checkbox/config/useValidateProps.js

@@ -1,18 +1,21 @@
+import 'core-js/modules/es.error.cause.js';
 import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 
 const throwError = message => {
-  throw new Error("DSControlledCheckbox:: ".concat(message, "\n  "));
+  throw new Error(`DSControlledCheckbox:: ${message}
+  `);
 };
 
 const useValidateProps = (props, propTypes) => {
   useValidateTypescriptPropTypes(props, propTypes);
 
   if (typeof props.label === 'undefined' && typeof props['aria-label'] === 'undefined') {
-    throwError("Please provide a label or ariaLabel property to use this component.");
+    throwError(`Please provide a label or ariaLabel property to use this component.`);
   }
 
   if (props.checked === 'mixed' && typeof props['aria-controls'] === 'undefined') {
-    throwError("Please provide an ariaControls property to use a checkbox mixed state. \n      This property must be a string containing all the ids that this mixed checkbox is controlling.");
+    throwError(`Please provide an ariaControls property to use a checkbox mixed state. 
+      This property must be a string containing all the ids that this mixed checkbox is controlling.`);
   }
 };
 

package/esm/checkbox/styles.js

@@ -1,41 +1,51 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled, css } from '@elliemae/ds-system';
 import { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';
 import { DSCheckboxName, DSCheckboxSlots } from './exported-related/theming.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 const StyledContainer = styled('div', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.CONTAINER
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-grid;\n  grid-template-rows: min-content;\n  grid-template-columns: ", " auto;\n  align-items: center;\n"])), _ref => {
+})`
+  display: inline-grid;
+  grid-template-rows: min-content;
+  grid-template-columns: ${_ref => {
   let {
     theme
   } = _ref;
   return theme.space.xs;
-});
-const StyledCheckBox = styled('span')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  position: relative;\n  background: ", ";\n  ", "\n  &:focus-within {\n    ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    background: ", ";\n    ", ";\n  }\n"])), _ref2 => {
+}} auto;
+  align-items: center;
+`;
+const StyledCheckBox = styled('span')`
+  width: ${_ref2 => {
   let {
     theme
   } = _ref2;
   return theme.space.xs;
-}, _ref3 => {
+}};
+  height: ${_ref3 => {
   let {
     theme
   } = _ref3;
   return theme.space.xs;
-}, _ref4 => {
+}};
+  border: 1px solid ${_ref4 => {
   let {
     theme,
     hasError
   } = _ref4;
   return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
-}, _ref5 => {
+}};
+  border-radius: 2px;
+  position: relative;
+  background: ${_ref5 => {
   let {
     theme,
     disabled
   } = _ref5;
   return handleBackgroundColor(theme, disabled);
-}, _ref6 => {
+}};
+  ${_ref6 => {
   let {
     theme,
     checked,
@@ -44,14 +54,18 @@ const StyledCheckBox = styled('span')(_templateObject2 || (_templateObject2 = _t
     hasError
   } = _ref6;
   return handleCheckmark(theme, checked, disabled, readOnly, hasError);
-}, _ref7 => {
+}}
+  &:focus-within {
+    ${_ref7 => {
   let {
     theme,
     hasError,
     disabled
   } = _ref7;
-  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[700], "; outline : 1px solid ").concat(theme.colors.brand[700], " ") : undefined;
-}, _ref8 => {
+  return !disabled && !hasError ? `border: 1px solid ${theme.colors.brand[700]}; outline : 1px solid ${theme.colors.brand[700]} ` : undefined;
+}};
+    &:hover {
+      ${_ref8 => {
   let {
     theme,
     checked,
@@ -60,41 +74,71 @@ const StyledCheckBox = styled('span')(_templateObject2 || (_templateObject2 = _t
     hasError
   } = _ref8;
   return handleCheckmark(theme, checked, disabled, readOnly, hasError, true);
-}, _ref9 => {
+}}
+    }
+  }
+  &:hover {
+    background: ${_ref9 => {
   let {
     theme,
     checked,
     disabled
   } = _ref9;
   return !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined;
-}, _ref10 => {
+}};
+    ${_ref10 => {
   let {
     theme,
     hasError,
     disabled,
     readOnly
   } = _ref10;
-  return !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined;
-});
-const checkboxStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &:hover {\n    cursor: pointer;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n"])));
+  return !hasError && !disabled && !readOnly ? ` border: 1px solid  ${theme.colors.brand[600]}` : undefined;
+}};
+  }
+`;
+const checkboxStyles = css`
+  &:hover {
+    cursor: pointer;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+`;
 const StyledInput = styled('input', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.INPUT
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), checkboxStyles);
+})`
+  ${checkboxStyles}
+`;
 const StyledInputMixed = styled('div', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.INPUT
-})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), checkboxStyles);
+})`
+  ${checkboxStyles}
+`;
 const StyledLabel = styled('label', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.LABEL
-})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:hover {\n    cursor: pointer;\n  }\n  ", ";\n\n  color: ", ";\n  font-size: 13px;\n  line-height: 13px;\n  display: inherit;\n"])), _ref11 => {
+})`
+  &:hover {
+    cursor: pointer;
+  }
+  ${_ref11 => {
   let {
     wrapLabel,
     theme
   } = _ref11;
-  return wrapLabel ? 'padding: 8px 0px 8px 8px;' : "padding-left: ".concat(theme.space.xxs);
-}, _ref12 => {
+  return wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`;
+}};
+
+  color: ${_ref12 => {
   let {
     theme,
     disabled,
@@ -102,7 +146,11 @@ const StyledLabel = styled('label', {
     checked
   } = _ref12;
   return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
-});
-const StyledWrapLabel = styled('span')(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+}};
+  font-size: 13px;
+  line-height: 13px;
+  display: inherit;
+`;
+const StyledWrapLabel = styled('span')``;
 
 export { StyledCheckBox, StyledContainer, StyledInput, StyledInputMixed, StyledLabel, StyledWrapLabel };

package/esm/checkbox/utils/styleHelpers.js

@@ -22,11 +22,29 @@ const handleCheckmark = function (theme, checked, disabled, readOnly, hasError)
   let isHovering = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
 
   if (checked === 'mixed') {
-    return "&:before {\n      position: absolute;\n    content: '';\n    top: 6px;\n    left: 3px;\n    background: ".concat(handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError), ";\n    width: ").concat(theme.space.xxs, ";\n    height: 2px;\n    }");
+    return `&:before {
+      position: absolute;
+    content: '';
+    top: 6px;
+    left: 3px;
+    background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+    width: ${theme.space.xxs};
+    height: 2px;
+    }`;
   }
 
   if (checked) {
-    return "&:before {\n      position: absolute;\n      content: '';\n          top: 3px;\n          left: 2px;\n          border-left: 2px solid ".concat(handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError), ";\n          border-bottom: 2px solid ").concat(handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError), ";\n          height: 5px;\n          width: 10px;\n          transform: rotate(-45deg);\n    }");
+    return `&:before {
+      position: absolute;
+      content: '';
+          top: 3px;
+          left: 2px;
+          border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+          border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+          height: 5px;
+          width: 10px;
+          transform: rotate(-45deg);
+    }`;
   }
 
   return '';

package/esm/combobox/config/useComboBox.js

@@ -4,7 +4,6 @@ import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 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 { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { useVirtual } from 'react-virtual';
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';

package/esm/combobox/config/useCorrectOptions.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useMemo } from 'react';
 import { uid } from 'uid';
 import { MENU_OPTION_TYPES } from '../constants.js';
@@ -24,7 +23,7 @@ const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) =
     if (onCreate && inputValue && filteredOptions.findIndex(option => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
       const creatableUuid = uid();
       const creatableItem = {
-        dsId: "creatable-".concat(creatableUuid),
+        dsId: `creatable-${creatableUuid}`,
         label: inputValue,
         type: 'creatable'
       };

package/esm/combobox/parts/A11yFocusedOption.js

@@ -19,7 +19,7 @@ const A11yFocusedOption = () => {
   } = useContext(ComboBoxContext);
   const selectabledOptions = getSelectableOptions(filteredOptions);
   const focusOption = filteredOptions.find(option => option.dsId === focusOptionIdx);
-  const isFocusOptionSelected = (focusOption === null || focusOption === void 0 ? void 0 : focusOption.type) === 'option' && isSelected(selectedValues, focusOption);
+  const isFocusOptionSelected = focusOption?.type === 'option' && isSelected(selectedValues, focusOption);
   const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
   const navigationContext = 'Use up and down to choose options,press enter to choose focused option, press Escape to excuse dropdown menu';
   return useMemo(() => {
@@ -27,12 +27,12 @@ const A11yFocusedOption = () => {
       "aria-live": "polite",
       "aria-atomic": "false",
       "aria-relevant": "additions text"
-    }, menuState, "option ".concat(focusOption === null || focusOption === void 0 ? void 0 : focusOption.label, " ").concat(isFocusOptionSelected ? 'selected and ' : '', "focused .").concat(focusSelectableOptionIdx + 1, " of ").concat(selectabledOptions.length, ". ").concat(navigationContext, " "));
-    if ((focusOption === null || focusOption === void 0 ? void 0 : focusOption.type) === 'creatable') return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
+    }, menuState, `option ${focusOption?.label} ${isFocusOptionSelected ? 'selected and ' : ''}focused .${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}. ${navigationContext} `);
+    if (focusOption?.type === 'creatable') return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
       "aria-live": "assertive",
       "aria-atomic": "false",
       "aria-relevant": "additions text"
-    }, menuState, "Press enter to Add: ".concat(focusOption === null || focusOption === void 0 ? void 0 : focusOption.label, ". ").concat(navigationContext));
+    }, menuState, `Press enter to Add: ${focusOption?.label}. ${navigationContext}`);
     return null;
   }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);
 };

package/esm/combobox/parts/A11ySelectedValues.js

@@ -17,10 +17,10 @@ const A11ySelectedValues = () => {
 
     if (Array.isArray(selectedValues)) {
       if (selectedValues.length > 0) {
-        msg = "Options selected: ".concat(selectedValues.map(item => item.label).join(', '));
+        msg = `Options selected: ${selectedValues.map(item => item.label).join(', ')}`;
       }
     } else if (selectedValues) {
-      msg = "Option selected: ".concat(selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.label);
+      msg = `Option selected: ${selectedValues?.label}`;
     }
 
     return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {

package/esm/combobox/parts/DropdownIndicator.js

@@ -1,5 +1,4 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { useContext, useMemo, useCallback } from 'react';
 import { styled } from '@elliemae/ds-system';
 import { DSButtonV2 } from '@elliemae/ds-button';
@@ -7,14 +6,24 @@ import { ChevronSmallDown } from '@elliemae/ds-icons';
 import { ComboBoxContext } from '../ComboBoxCTX.js';
 import { ComboboxDataTestid } from '../ComboboxDataTestids.js';
 
-var _templateObject;
-const StyledDropDownButton = styled(DSButtonV2)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ", ";\n  }\n"])), _ref => {
+const StyledDropDownButton = styled(DSButtonV2)`
+  &:focus::after {
+    border: none;
+  }
+  &:hover:not(:disabled) {
+    background-color: transparent;
+  }
+
+  & svg {
+    fill: ${_ref => {
   let {
     theme,
     disabled
   } = _ref;
   return disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'];
-});
+}};
+  }
+`;
 const DropdownIndicator = () => {
   const {
     props: {

package/esm/combobox/parts/container/Container.js

@@ -51,7 +51,7 @@ const Container = () => {
   }, []);
   const handleCloseMenu = useCallback(() => {
     setMenuState(false, 'blur');
-    if (innerRef !== null && innerRef !== void 0 && innerRef.current) innerRef.current.blur();
+    if (innerRef?.current) innerRef.current.blur();
   }, [innerRef, setMenuState]);
   useEffect(() => {
     const closeMenuOnWindowBlur = () => {

package/esm/combobox/parts/container/styled.js

@@ -1,22 +1,27 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
 import { DSComboBoxName, DSComboboxSlots } from '../../theming.js';
 
-var _templateObject, _templateObject2;
 const StyledContainer = styled('div', {
   name: DSComboBoxName,
   slot: DSComboboxSlots.CONTAINER
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: ", ";\n"])), _ref => {
+})`
+  position: relative;
+  cursor: ${_ref => {
   let {
     disabled
   } = _ref;
   return disabled ? 'not-allowed' : 'default';
-});
-const StyledPopperWrapper = styled('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: ", ";\n  overflow: auto;\n"])), _ref2 => {
+}};
+`;
+const StyledPopperWrapper = styled('div')`
+  position: relative;
+  cursor: ${_ref2 => {
   let {
     disabled
   } = _ref2;
   return disabled ? 'not-allowed' : 'default';
-});
+}};
+  overflow: auto;
+`;
 
 export { StyledContainer, StyledPopperWrapper };

package/esm/combobox/parts/controls/Controls.js

@@ -34,20 +34,16 @@ const Controls = () => {
     controlsWrapperRef
   } = useContext(ComboBoxContext);
   const handleOnClick = useCallback(() => {
-    var _innerRef$current2;
-
     if (disabled) return;
 
     if (hasFocus && menuState && !inline) {
-      var _innerRef$current;
-
       setMenuState(false);
       setFocusOptionIdx('');
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.blur();
+      innerRef.current?.blur();
       return;
     }
 
-    (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
+    innerRef.current?.focus();
     setMenuState(true);
     window.requestAnimationFrame(() => {
       window.requestAnimationFrame(() => {
@@ -60,9 +56,7 @@ const Controls = () => {
     if (menuState || disabled) {
       e.stopPropagation();
     } else {
-      var _innerRef$current3;
-
-      (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.focus();
+      innerRef.current?.focus();
       setMenuState(true);
     }
   }, [menuState, innerRef, disabled, setMenuState]); // callback to prevent onBlur on the input when clicking in all the wrapper

package/esm/combobox/parts/controls/styled.js

@@ -1,58 +1,94 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { css, styled } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
 import { DSComboBoxName, DSComboboxSlots } from '../../theming.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-const normalBorder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), _ref => {
+const normalBorder = css`
+  border: 1px solid ${_ref => {
   let {
     hasError,
     theme
   } = _ref;
   return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
-});
-const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  outline: 2px solid ", ";\n  outline-offset: -2px;\n"])), _ref2 => {
+}};
+`;
+const focusBorder = css`
+  outline: 2px solid ${_ref2 => {
   let {
     theme
   } = _ref2;
   return theme.colors.brand[700];
-});
-const hoverBorder = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), _ref3 => {
+}};
+  outline-offset: -2px;
+`;
+const hoverBorder = css`
+  border: 1px solid ${_ref3 => {
   let {
     theme
   } = _ref3;
   return theme.colors.brand[700];
-});
+}};
+`;
 const StyledControlsWrapper = styled(Grid, {
   name: DSComboBoxName,
   slot: DSComboboxSlots.INPUT_WRAPPER
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  position: relative;\n  border-radius: 2px;\n  min-width: ", ";\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  padding-left: 8px;\n  margin: ", ";\n  ", "\n  &:hover {\n    ", "\n  }\n  &:focus-within {\n    ", "\n  }\n"])), _ref4 => {
+})`
+  background: ${_ref4 => {
   let {
     disabled,
     theme
   } = _ref4;
   return disabled ? theme.colors.neutral['080'] : '#ffffff';
-}, _ref5 => {
+}};
+  position: relative;
+  border-radius: 2px;
+  min-width: ${_ref5 => {
   let {
     minWidth,
     inline
   } = _ref5;
-  return inline || !minWidth ? '' : "".concat(minWidth, "px");
-}, _ref6 => {
+  return inline || !minWidth ? '' : `${minWidth}px`;
+}};
+  align-items: center;
+  align-content: center;
+  height: 28px;
+  padding-left: 8px;
+  margin: ${_ref6 => {
   let {
     inline
   } = _ref6;
   return inline ? '10px 16px' : '';
-}, normalBorder, hoverBorder, focusBorder);
-const StyledSelection = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 13px;\n  margin-right: 3px;\n  display: flex;\n"])));
-const StyledHeaderActionsWrapper = styled(Grid)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n"])));
-const StyleDropdownIndicator = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
-const StyleHeaderActionsSeparator = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  align-self: stretch;\n  margin: 4px 0px;\n  width: 1px;\n  background-color: ", ";\n"])), _ref7 => {
+}};
+  ${normalBorder}
+  &:hover {
+    ${hoverBorder}
+  }
+  &:focus-within {
+    ${focusBorder}
+  }
+`;
+const StyledSelection = styled.div`
+  font-size: 13px;
+  margin-right: 3px;
+  display: flex;
+`;
+const StyledHeaderActionsWrapper = styled(Grid)`
+  height: 100%;
+  .em-ds-button--text:focus::after {
+    border: none;
+  }
+`;
+const StyleDropdownIndicator = styled.div``;
+const StyleHeaderActionsSeparator = styled.span`
+  align-self: stretch;
+  margin: 4px 0px;
+  width: 1px;
+  background-color: ${_ref7 => {
   let {
     theme,
     disabled
   } = _ref7;
   return disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'];
-});
+}};
+`;
 
 export { StyleDropdownIndicator, StyleHeaderActionsSeparator, StyledControlsWrapper, StyledHeaderActionsWrapper, StyledSelection };

package/esm/combobox/parts/controls/useOnPillsNavigation.js

@@ -17,30 +17,22 @@ const useOnPillsNavigation = () => {
   const onKeyDownPills = useCallback(e => {
     if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') && inputValue === '') {
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        var _innerRef$current;
-
-        (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+        innerRef.current?.focus();
         setMenuState(true, 'open', e);
         return;
       }
 
       if (e.key === 'ArrowLeft') {
-        var _selectedOptionsRef$c;
-
-        const removablePills = (_selectedOptionsRef$c = selectedOptionsRef.current) === null || _selectedOptionsRef$c === void 0 ? void 0 : _selectedOptionsRef$c.querySelectorAll(REMOVABLE_PILL_SELECTOR);
+        const removablePills = selectedOptionsRef.current?.querySelectorAll(REMOVABLE_PILL_SELECTOR);
 
         if (hasFocus && removablePills) {
-          var _removablePills;
-
-          (_removablePills = removablePills[removablePills.length - 1]) === null || _removablePills === void 0 ? void 0 : _removablePills.focus();
+          removablePills[removablePills.length - 1]?.focus();
         }
       }
 
       if (e.key === 'ArrowRight') {
-        var _innerRef$current2;
-
         e.preventDefault();
-        (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
+        innerRef.current?.focus();
       }
     }
   }, [inputValue, innerRef, setMenuState, selectedOptionsRef, hasFocus]);

package/esm/combobox/parts/controls-input/styled.js

@@ -1,19 +1,53 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
 import { DSComboBoxName, DSComboboxSlots } from '../../theming.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 const StyledInput = styled('input', {
   name: DSComboBoxName,
   slot: DSComboboxSlots.INPUT
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  padding: 0;\n  outline: none;\n  color: ", ";\n  &:focus {\n    outline: none;\n  }\n  ", "\n  &::placeholder {\n    color: transparent;\n  }\n"])), props => props.theme.colors.neutral[700], _ref => {
+})`
+  font-size: 13px;
+  line-height: 13px;
+  border: none;
+  padding: 0;
+  outline: none;
+  color: ${props => props.theme.colors.neutral[700]};
+  &:focus {
+    outline: none;
+  }
+  ${_ref => {
   let {
     withoutCaret
   } = _ref;
   return withoutCaret && 'caret-color: transparent;';
-});
-const StyledInputPlaceHolder = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-style: italic;\n  color: ", ";\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n  height: 28px;\n  font-size: 13px;\n  & span::after {\n    content: '';\n    padding: 1px;\n  }\n"])), props => props.theme.colors.neutral[500]);
-const StyledInputWidthReference = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n"])));
-const StyledInputWrapper = styled('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  display: flex;\n"])));
+}}
+  &::placeholder {
+    color: transparent;
+  }
+`;
+const StyledInputPlaceHolder = styled.div`
+  font-style: italic;
+  color: ${props => props.theme.colors.neutral[500]};
+  position: absolute;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  user-select: none;
+  height: 28px;
+  font-size: 13px;
+  & span::after {
+    content: '';
+    padding: 1px;
+  }
+`;
+const StyledInputWidthReference = styled.span`
+  visibility: hidden;
+  position: absolute;
+  top: -9999px;
+`;
+const StyledInputWrapper = styled('div')`
+  position: relative;
+  align-items: center;
+  display: flex;
+`;
 
 export { StyledInput, StyledInputPlaceHolder, StyledInputWidthReference, StyledInputWrapper };