@elliemae/ds-form 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/RadioGroup/DSRadioGroup.js

@@ -1,5 +1,12 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React from 'react';
 import { describe } from 'react-desc';
 import GroupItem from '@elliemae/ds-shared/GroupContext/GroupItem';
@@ -15,7 +22,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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const emClassPrefix = 'em-ds';
-const baseClass = `${emClassPrefix}-radio-group`;
+const baseClass = "".concat(emClassPrefix, "-radio-group");
 
 const RadioItem = props => /*#__PURE__*/_jsx(GroupItem, {
   render: context => /*#__PURE__*/jsx(DSRadio, _objectSpread(_objectSpread({}, props), {}, {
@@ -25,16 +32,17 @@ const RadioItem = props => /*#__PURE__*/_jsx(GroupItem, {
   }))
 });
 
-const DSRadioGroup = ({
-  containerProps,
-  onChange,
-  activeValue,
-  children,
-  orientation,
-  disabled,
-  truncateText,
-  labelProps
-}) => {
+const DSRadioGroup = _ref => {
+  let {
+    containerProps,
+    onChange,
+    activeValue,
+    children,
+    orientation,
+    disabled,
+    truncateText,
+    labelProps
+  } = _ref;
   const checkRefs = [];
   const count = React.Children.count(children);
 
@@ -55,7 +63,7 @@ const DSRadioGroup = ({
   }, void 0, /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     "data-testid": "ds-radiogroup"
   }, labelProps && labelProps.labelText ? {} : containerProps), {}, {
-    className: `${baseClass} ${baseClass}--${orientation}`,
+    className: "".concat(baseClass, " ").concat(baseClass, "--").concat(orientation),
     role: "group",
     children: React.Children.map(children, (child, index) => /*#__PURE__*/jsx(RadioItem, _objectSpread(_objectSpread({}, child.props), {}, {
       innerRef: t => {
@@ -67,7 +75,7 @@ const DSRadioGroup = ({
 
   if (labelProps && labelProps.labelText) {
     return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-      className: `${baseClass}-form-item-layout-wrapper`
+      className: "".concat(baseClass, "-form-item-layout-wrapper")
     }, containerProps), {}, {
       role: "group",
       children: /*#__PURE__*/jsx(DSFormItemLayout, _objectSpread(_objectSpread({}, labelProps), {}, {

package/esm/RequiredMark/RequiredMark.js

@@ -6,20 +6,21 @@ const {
   cssClassName
 } = convertPropToCssClassName('form-required-mark');
 
-const RequiredMark = ({
-  required = false,
-  optional = false
-}) => {
+const RequiredMark = _ref => {
+  let {
+    required = false,
+    optional = false
+  } = _ref;
   if (!required && !optional) return null;
 
   if (required) {
     return /*#__PURE__*/_jsx("span", {
-      className: `${cssClassName}`
+      className: "".concat(cssClassName)
     }, void 0, "\u25CF");
   }
 
   return /*#__PURE__*/_jsx("span", {
-    className: `${cssClassName} optional-mark`
+    className: "".concat(cssClassName, " optional-mark")
   }, void 0, "\u26AC");
 };
 

package/esm/SearchBox/DSSearchBox.js

@@ -1,9 +1,8 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
 import { describe } from 'react-desc';
-import SearchIcon from '@elliemae/ds-icons/Search';
+import { CloseXsmall, Search } from '@elliemae/ds-icons';
 import { DSIconColors } from '@elliemae/ds-icon';
-import CloseXsmall from '@elliemae/ds-icons/CloseXsmall';
 import { SearchBoxTextBox } from './styled.js';
 import { SButton } from './SButton.js';
 import { useSearch } from './useSearch.js';
@@ -12,27 +11,28 @@ import { defaultProps } from './defaultProps.js';
 
 var _Search;
 
-const DSSearchBox = ({
-  className,
-  clearable,
-  containerProps,
-  disableButton,
-  disabled,
-  innerRef,
-  onBlur,
-  onChange,
-  onKeyUp,
-  onSearch,
-  onClearButtonClick,
-  placeholder,
-  property,
-  readOnly,
-  searchOnEnter,
-  onSearchButtonClick,
-  showIcon,
-  style,
-  value
-}) => {
+const DSSearchBox = _ref => {
+  let {
+    className,
+    clearable,
+    containerProps,
+    disableButton,
+    disabled,
+    innerRef,
+    onBlur,
+    onChange,
+    onKeyUp,
+    onSearch,
+    onClearButtonClick,
+    placeholder,
+    property,
+    readOnly,
+    searchOnEnter,
+    onSearchButtonClick,
+    showIcon,
+    style,
+    value
+  } = _ref;
   const {
     searchValue,
     handleChange,
@@ -53,7 +53,9 @@ const DSSearchBox = ({
   const shouldShowSearchIcon = !shouldShowClearIcon && showIcon;
   const shouldShowAnyIcon = shouldShowClearIcon || shouldShowSearchIcon;
   const PureSearchboxIcon = React.useMemo(() => {
-    let Icon = _Search || (_Search = /*#__PURE__*/_jsx(SearchIcon, {}));
+    let Icon = _Search || (_Search = /*#__PURE__*/_jsx(Search, {
+      "aria-label": "Search"
+    }));
 
     let handleOnClick = () => handleSearch(true);
 
@@ -61,7 +63,8 @@ const DSSearchBox = ({
 
     if (shouldShowClearIcon) {
       Icon = /*#__PURE__*/_jsx(CloseXsmall, {
-        color: DSIconColors.PRIMARY
+        color: DSIconColors.PRIMARY,
+        "aria-label": "Clear input"
       });
       handleOnClick = handleClear;
     }

package/esm/SearchBox/NavSearchBox.js

@@ -2,12 +2,9 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import styled from 'styled-components';
 import { describe } from 'react-desc';
-import ChevronDown from '@elliemae/ds-icons/ChevronDown';
-import SearchIcon from '@elliemae/ds-icons/Search';
-import ChevronUp from '@elliemae/ds-icons/ChevronUp';
+import { ChevronDown, ChevronUp, CloseXsmall, Search } from '@elliemae/ds-icons';
 import DSButton from '@elliemae/ds-button';
 import DSTextBox from '../TextBox/DSTextBox.js';
-import CloseXsmall from '@elliemae/ds-icons/CloseXsmall';
 import { navSearchBoxProps } from './props.js';
 import { navSearchBoxDefaultProps } from './defaultProps.js';
 import { jsxs, Fragment } from 'react/jsx-runtime';
@@ -24,9 +21,12 @@ const StyledToolbarRightAddonsWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;align-items:center;justify-content:flex-end;"]);
 const NavBtn = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-sbwvud-3"
-})(["height:calc(100% - 2px);border:none;border-radius:", ";"], ({
-  last
-}) => last ? '2px  2px 0px 0px' : '0px');
+})(["height:calc(100% - 2px);border:none;border-radius:", ";"], _ref => {
+  let {
+    last
+  } = _ref;
+  return last ? '2px  2px 0px 0px' : '0px';
+});
 
 const RightButtonsGroup = props => {
   const {
@@ -72,7 +72,7 @@ const RightButtonsGroup = props => {
         'data-testid': 'ds-navsearchbox-clear'
       },
       buttonType: "text",
-      icon: /*#__PURE__*/_jsx(SearchIcon, {
+      icon: /*#__PURE__*/_jsx(Search, {
         color: ['brand-primary', '800']
       }),
       last: true
@@ -87,7 +87,7 @@ const ResultTracker = props => {
   } = props;
   if (currentResultIndex === -1 && !totalResults) return null;
   if (currentResultIndex === -1 && totalResults) return /*#__PURE__*/_jsx(StyledResultTracker, {}, void 0, totalResults);
-  return /*#__PURE__*/_jsx(StyledResultTracker, {}, void 0, `${currentResultIndex + 1} / ${totalResults}`);
+  return /*#__PURE__*/_jsx(StyledResultTracker, {}, void 0, "".concat(currentResultIndex + 1, " / ").concat(totalResults));
 };
 
 const VerticalSeparator = () => _StyledVerticalSepara || (_StyledVerticalSepara = /*#__PURE__*/_jsx(StyledVerticalSeparator, {}));

package/esm/SearchBox/SButton.js

@@ -7,16 +7,19 @@ const Button = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-15udc15-0"
 })(["all:unset;position:absolute;height:calc(100% - 2px);width:28px;top:1px;right:1px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;cursor:pointer;z-index:1;svg{fill:", ";}&:disabled{color:#5d6775;cursor:not-allowed;svg{fill:#5d6775;}}&:focus{", "}"], props => props.theme.colors.brand['600'], focus());
 
-const SButton = ({
-  icon,
-  disabled,
-  onClick,
-  dataTestid = "ds-searchbox-button"
-}) => /*#__PURE__*/_jsx(Button, {
-  "data-testid": dataTestid,
-  onClick: onClick,
-  disabled: disabled,
-  type: "button"
-}, void 0, icon);
+const SButton = _ref => {
+  let {
+    icon,
+    disabled,
+    onClick,
+    dataTestid = "ds-searchbox-button"
+  } = _ref;
+  return /*#__PURE__*/_jsx(Button, {
+    "data-testid": dataTestid,
+    onClick: onClick,
+    disabled: disabled,
+    type: "button"
+  }, void 0, icon);
+};
 
 export { SButton };

package/esm/SearchBox/SearchBoxToggle.js

@@ -1,14 +1,20 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+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 { useState } from 'react';
 import styled from 'styled-components';
-import SearchIcon from '@elliemae/ds-icons/Search';
+import { Search } from '@elliemae/ds-icons';
 import DSButton from '@elliemae/ds-button';
 import DSSearchBox from './DSSearchBox.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _SearchIcon;
+var _Search;
 
 const _excluded = ["onSearchButtonClick", "width"];
 
@@ -18,15 +24,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const SEARCH_BUTTON_WIDTH = 26;
 const SearchWrap = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-xt33wm-0"
-})(["transition:width 200ms ease;width:", "px;height:0;", " ", ""], SEARCH_BUTTON_WIDTH, props => !props.show ? `
-        opacity:0;
-
-        & * {
-          width: ${SEARCH_BUTTON_WIDTH}px;
-          height: 0;
-          border: 0;
-        }
-      ` : '', props => props.isOpen ? `width: ${props.width};opacity: 1;height: auto;` : ''); // eslint-disable-next-line react/prop-types
+})(["transition:width 200ms ease;width:", "px;height:0;", " ", ""], SEARCH_BUTTON_WIDTH, props => !props.show ? "\n        opacity:0;\n\n        & * {\n          width: ".concat(SEARCH_BUTTON_WIDTH, "px;\n          height: 0;\n          border: 0;\n        }\n      ") : '', props => props.isOpen ? "width: ".concat(props.width, ";opacity: 1;height: auto;") : ''); // eslint-disable-next-line react/prop-types
 
 const SearchBoxToggle = _ref => {
   let {
@@ -37,14 +35,14 @@ const SearchBoxToggle = _ref => {
 
   const [isOpen, setOpen] = useState(false);
   const [show, setShow] = useState(true);
-  const computedWidth = typeof width === 'number' ? `${width}px` : width;
+  const computedWidth = typeof width === 'number' ? "".concat(width, "px") : width;
 
   const button = /*#__PURE__*/_jsx(DSButton, {
     onClick: () => {
       setOpen(true);
     },
     buttonType: "text",
-    icon: _SearchIcon || (_SearchIcon = /*#__PURE__*/_jsx(SearchIcon, {}))
+    icon: _Search || (_Search = /*#__PURE__*/_jsx(Search, {}))
   });
 
   return /*#__PURE__*/_jsx("div", {}, void 0, show && !isOpen && button, /*#__PURE__*/_jsx(SearchWrap, {

package/esm/SearchBox/useSearch.js

@@ -1,5 +1,6 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useCallback, useEffect } from 'react';
-import { debounce } from '@elliemae/ds-utilities/utils';
+import { debounce } from '@elliemae/ds-utilities';
 
 function handleSearch(clearOnSearch, setValue, searchOnEnter, value, onSearch, property, clickTrigger, onSearchButtonClick) {
   if (clickTrigger) {
@@ -17,7 +18,8 @@ function handleSearch(clearOnSearch, setValue, searchOnEnter, value, onSearch, p
   });
 }
 
-function useSearch(params = {}) {
+function useSearch() {
+  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     onKeyUp,
     onSearch,
@@ -37,11 +39,15 @@ function useSearch(params = {}) {
     }
   }, [params.value]);
 
-  const searchWithParams = (clickedSearchButton = false) => handleSearch(clearOnSearch, setValue, searchOnEnter, value, onSearch, property, clickedSearchButton, onSearchButtonClick);
+  const searchWithParams = function () {
+    let clickedSearchButton = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    return handleSearch(clearOnSearch, setValue, searchOnEnter, value, onSearch, property, clickedSearchButton, onSearchButtonClick);
+  };
 
-  const handleChange = ({
-    target
-  }) => {
+  const handleChange = _ref => {
+    let {
+      target
+    } = _ref;
     onChange(target.value);
     setValue(target.value);
 

package/esm/SearchBox/withSearchable.js

@@ -1,7 +1,12 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import React, { Component } from 'react';
-import { debounce } from '@elliemae/ds-utilities/utils';
+import { debounce } from '@elliemae/ds-utilities';
 import { jsx } from 'react/jsx-runtime';
 
 const _excluded = ["containerProps"];
@@ -14,9 +19,7 @@ const withSearchable = WrappedComponent => {
   class Searchable extends Component {
     constructor(props) {
       super(props);
-
-      _defineProperty(this, "debouncedSearch", debounce(this.handleSearch, 200));
-
+      this.debouncedSearch = debounce(this.handleSearch, 200);
       this.state = {
         value: props.value
       };
@@ -29,9 +32,11 @@ const withSearchable = WrappedComponent => {
       this.handleSearch = this.handleSearch.bind(this);
     }
 
-    static getDerivedStateFromProps(nextProps, {
-      prevPropValue
-    }) {
+    static getDerivedStateFromProps(nextProps, _ref) {
+      let {
+        prevPropValue
+      } = _ref;
+
       if (nextProps.value !== prevPropValue) {
         return {
           value: nextProps.value,
@@ -81,9 +86,10 @@ const withSearchable = WrappedComponent => {
       });
     }
 
-    handleChange({
-      target
-    }) {
+    handleChange(_ref2) {
+      let {
+        target
+      } = _ref2;
       const {
         value
       } = target;

package/esm/TextBox/DSTextBox.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
@@ -5,7 +10,7 @@ import { PropTypes, describe } from 'react-desc';
 import DSInput from '../Input/DSInput.js';
 import { jsx } from 'react/jsx-runtime';
 
-const _excluded = ["containerProps", "autoFocus", "disabled", "maxLength", "minLength", "fluidWidth", "placeholder", "value", "hasError", "readOnly", "innerRef", "type", "min", "max", "clearable", "leftComponent", "rightComponent", "required", "variant", "disableTooltip"];
+const _excluded = ["containerProps", "autoFocus", "disabled", "maxLength", "minLength", "fluidWidth", "placeholder", "value", "hasError", "readOnly", "innerRef", "type", "min", "max", "clearable", "leftComponent", "rightComponent", "required", "variant", "disableTooltip", "id"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -32,12 +37,14 @@ const DSTextBox = _ref => {
     rightComponent = null,
     required = false,
     variant,
-    disableTooltip
+    disableTooltip,
+    id
   } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/jsx(DSInput, _objectSpread(_objectSpread({}, otherProps), {}, {
-    "aria-label": otherProps['aria-label'] || 'Text Box',
+    "aria-label": !id ? otherProps['aria-label'] || 'Text Box' : undefined,
+    "aria-describedby": otherProps['aria-describedby'] || "".concat(id, "_feedback_message"),
     autoFocus: autoFocus,
     clearable: clearable,
     containerProps: containerProps,
@@ -58,7 +65,8 @@ const DSTextBox = _ref => {
     type: type,
     value: value,
     variant: variant,
-    disableTooltip: disableTooltip
+    disableTooltip: disableTooltip,
+    id: id
   }));
 };
 

package/esm/TimeInput/DSTimeInput.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -14,43 +19,46 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const DSTimeInput = ({
-  containerProps = {},
-  innerRef,
-  className = '',
-  style = {},
-  onChange = () => null,
-  format,
-  value = '',
-  clearable = false,
-  disabled = false,
-  ariaLabel = 'Time input'
-}) => /*#__PURE__*/_jsx(DSInput, {
-  className: className,
-  clearable: clearable,
-  containerProps: containerProps,
-  customInputType: _ref => {
-    let {
-      onChange: inputOnChange
-    } = _ref,
-        restInputProps = _objectWithoutProperties(_ref, _excluded);
-
-    return /*#__PURE__*/jsx(TimeInputImpl, _objectSpread(_objectSpread({
-      "aria-label": ariaLabel,
-      disabled: disabled,
-      format: format,
-      onChange: time => inputOnChange(time)
-    }, restInputProps), {}, {
-      style: style
-    }));
-  },
-  disabled: disabled,
-  innerRef: innerRef,
-  isShowElipsisActive: false,
-  onChange: onChange,
-  onClear: () => onChange(null),
-  value: value
-});
+const DSTimeInput = _ref => {
+  let {
+    containerProps = {},
+    innerRef,
+    className = '',
+    style = {},
+    onChange = () => null,
+    format,
+    value = '',
+    clearable = false,
+    disabled = false,
+    ariaLabel = 'Time input'
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSInput, {
+    className: className,
+    clearable: clearable,
+    containerProps: containerProps,
+    customInputType: _ref2 => {
+      let {
+        onChange: inputOnChange
+      } = _ref2,
+          restInputProps = _objectWithoutProperties(_ref2, _excluded);
+
+      return /*#__PURE__*/jsx(TimeInputImpl, _objectSpread(_objectSpread({
+        "aria-label": ariaLabel,
+        disabled: disabled,
+        format: format,
+        onChange: time => inputOnChange(time)
+      }, restInputProps), {}, {
+        style: style
+      }));
+    },
+    disabled: disabled,
+    innerRef: innerRef,
+    isShowElipsisActive: false,
+    onChange: onChange,
+    onClear: () => onChange(null),
+    value: value
+  });
+};
 
 DSTimeInput.defaultProps = {
   format: 'hh:mm:ss',

package/esm/TimeInput/TimeInputImpl.js

@@ -1,7 +1,12 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { useRef, useMemo } from 'react';
-import { getVisibleTimeByFormat } from '@elliemae/ds-utilities/timeUtils';
+import { getVisibleTimeByFormat } from '@elliemae/ds-utilities';
 import memoize from 'memoize-one';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import TimeInputs from './TimeInputs.js';
@@ -13,16 +18,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const blockName = 'input-time';
 const InputTimeContainer = aggregatedClasses('div')(blockName);
 
-const TimeInputImpl = ({
-  format,
-  innerRef,
-  onChange,
-  className,
-  value,
-  disabled,
-  clearable,
-  'arial-label': ariaLabel
-}) => {
+const TimeInputImpl = _ref => {
+  let {
+    format,
+    innerRef,
+    onChange,
+    className,
+    value,
+    disabled,
+    clearable,
+    'arial-label': ariaLabel
+  } = _ref;
   const getVisibleTimeInputs = memoize(formatValue => getVisibleTimeByFormat(formatValue));
   let inputsContainer = useRef();