@elliemae/ds-form 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/ComboBox/v2/components/DropdownIndicator.js

@@ -1,66 +1,90 @@
-import * as React from "react";
-import React2, { useContext, useState } from "react";
-import { get } from "lodash";
-import { ChevronSmallDown } from "@elliemae/ds-icons";
-import { DSButton, BUTTON_VARIANT } from "@elliemae/ds-button";
-import { DropDownContext } from "../context";
-const DropdownIndicator = ({
-  innerRef,
-  onKeyDown,
-  options,
-  theme,
-  clearValue,
-  getStyles,
-  getValue,
-  setValue,
-  hasStyle,
-  hasValue,
-  isMulti,
-  isRtl,
-  isDisabled,
-  isFocused,
-  selectOption,
-  selectProps,
-  innerProps,
-  cx,
-  ...rest
-}) => {
-  const { changeHandleOpening, changeMenuOpen, inputInFocus, handleOpening, menuOpen, onClickDropdownIndicator } = useContext(DropDownContext);
+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 { useContext, useState } from 'react';
+import { get } from 'lodash';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
+import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-button';
+import { DropDownContext } from '../context.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _ChevronSmallDown;
+
+const _excluded = ["innerRef", "onKeyDown", "options", "theme", "clearValue", "getStyles", "getValue", "setValue", "hasStyle", "hasValue", "isMulti", "isRtl", "isDisabled", "isFocused", "selectOption", "selectProps", "innerProps", "cx"];
+
+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; }
+
+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 DropdownIndicator = _ref => {
+  let {
+    innerRef,
+    onKeyDown,
+    options,
+    theme,
+    clearValue,
+    getStyles,
+    getValue,
+    setValue,
+    hasStyle,
+    hasValue,
+    isMulti,
+    isRtl,
+    isDisabled,
+    isFocused,
+    selectOption,
+    selectProps,
+    innerProps,
+    cx
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    changeHandleOpening,
+    changeMenuOpen,
+    inputInFocus,
+    handleOpening,
+    menuOpen,
+    onClickDropdownIndicator
+  } = useContext(DropDownContext);
   const [touchClick, setTouchClick] = useState(false);
-  const handleOnClick = (e) => {
+
+  const handleOnClick = e => {
     onClickDropdownIndicator(e);
     changeMenuOpen(!menuOpen);
     changeHandleOpening(!handleOpening);
   };
-  const handleOnKeyDown = (e) => {
-    if (e.key === "Enter") {
+
+  const handleOnKeyDown = e => {
+    if (e.key === 'Enter') {
       changeMenuOpen(!menuOpen);
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */ React2.createElement(DSButton, {
+
+  return /*#__PURE__*/jsx(DSButton, _objectSpread({
     "data-testid": "combobox-dropdown-btn",
     "aria-label": "dropdown-indicator",
     buttonType: "text",
-    className: `dropdown-indicator ${get(selectProps, "menuIsOpen", false) && !inputInFocus ? "active" : ""}`,
-    icon: /* @__PURE__ */ React2.createElement(ChevronSmallDown, null),
-    innerRef,
+    className: "dropdown-indicator ".concat(get(selectProps, 'menuIsOpen', false) && !inputInFocus ? 'active' : ''),
+    icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+    innerRef: innerRef,
     onClick: handleOnClick,
     onKeyDown: handleOnKeyDown,
     onTouchStart: () => setTouchClick(true),
-    onTouchEnd: (e) => {
-      if (touchClick)
-        handleOnClick(e);
+    onTouchEnd: e => {
+      if (touchClick) handleOnClick(e);
       setTouchClick(false);
     },
     tabIndex: -1,
-    variant: get(selectProps, "menuIsOpen", false) && !inputInFocus ? BUTTON_VARIANT.ACTIVE : BUTTON_VARIANT.DEFAULT,
-    ...rest
-  });
-};
-var DropdownIndicator_default = DropdownIndicator;
-export {
-  DropdownIndicator,
-  DropdownIndicator_default as default
+    variant: get(selectProps, 'menuIsOpen', false) && !inputInFocus ? BUTTON_VARIANT.ACTIVE : BUTTON_VARIANT.DEFAULT
+  }, rest));
 };
-//# sourceMappingURL=DropdownIndicator.js.map
+
+export { DropdownIndicator as default };

package/esm/ComboBox/v2/components/GroupHeading.js

@@ -1,30 +1,38 @@
-import * as React from "react";
-import React2 from "react";
-import styled from "styled-components";
-import { components } from "react-select";
-import { DSSeparator } from "@elliemae/ds-separator";
-import { getGroupHeaderPosition } from "./utils";
-const GroupHeading = (props) => {
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { components } from 'react-select';
+import DSSeparator from '@elliemae/ds-separator';
+import { getGroupHeaderPosition } from './utils.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _StyledSeparator;
+
+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; }
+
+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 GroupHeading = props => {
   const headerPosition = getGroupHeaderPosition(props.id);
-  const { hasSeparator } = props.selectProps.options[headerPosition];
-  return /* @__PURE__ */ React2.createElement(Wrapper, null, hasSeparator && /* @__PURE__ */ React2.createElement(StyledSeparator, {
+  const {
+    hasSeparator
+  } = props.selectProps.options[headerPosition];
+  return /*#__PURE__*/_jsx(Wrapper, {}, void 0, hasSeparator && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
     type: "non-form"
-  }), /* @__PURE__ */ React2.createElement(components.GroupHeading, {
-    ...props
-  }));
+  }))), /*#__PURE__*/jsx(components.GroupHeading, _objectSpread({}, props)));
 };
-const StyledSeparator = styled(DSSeparator)`
-  width: auto;
-  margin: ${(props) => props.theme.space.xs};
-  margin-top: unset;
-`;
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-var GroupHeading_default = GroupHeading;
-export {
-  GroupHeading,
-  GroupHeading_default as default
-};
-//# sourceMappingURL=GroupHeading.js.map
+
+const StyledSeparator = /*#__PURE__*/styled(DSSeparator).withConfig({
+  componentId: "sc-1bw0sto-0"
+})(["width:auto;margin:", ";margin-top:unset;"], props => props.theme.space.xs);
+const Wrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1bw0sto-1"
+})(["display:flex;flex-direction:column;"]);
+
+export { GroupHeading as default };

package/esm/ComboBox/v2/components/IndicatorSeparator.js

@@ -1,11 +1,20 @@
-import * as React from "react";
-import React2 from "react";
-const IndicatorSeparator = ({ innerProps }) => /* @__PURE__ */ React2.createElement("span", {
-  ...innerProps
-});
-var IndicatorSeparator_default = IndicatorSeparator;
-export {
-  IndicatorSeparator,
-  IndicatorSeparator_default as default
+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 'react';
+import { jsx } from 'react/jsx-runtime';
+
+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; }
+
+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 IndicatorSeparator = _ref => {
+  let {
+    innerProps
+  } = _ref;
+  return /*#__PURE__*/jsx("span", _objectSpread({}, innerProps));
 };
-//# sourceMappingURL=IndicatorSeparator.js.map
+
+export { IndicatorSeparator, IndicatorSeparator as default };

package/esm/ComboBox/v2/components/LoadingIndicator.js

@@ -1,20 +1,17 @@
-import * as React from "react";
-import React2 from "react";
-import styled from "styled-components";
-import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indicator";
-const Wrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-top: 12px;
-`;
-const LoadingIndicator = () => /* @__PURE__ */ React2.createElement(Wrapper, {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';
+
+var _Wrapper;
+const Wrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-m7hflj-0"
+})(["display:flex;justify-content:center;margin-top:12px;"]);
+
+const LoadingIndicator = () => _Wrapper || (_Wrapper = /*#__PURE__*/_jsx(Wrapper, {
   "data-testid": "ds-combobox_loading-indicator"
-}, /* @__PURE__ */ React2.createElement(DSCircularProgressIndicator, {
+}, void 0, /*#__PURE__*/_jsx(DSCircularProgressIndicator, {
   size: "m"
-}));
-var LoadingIndicator_default = LoadingIndicator;
-export {
-  LoadingIndicator,
-  LoadingIndicator_default as default
-};
-//# sourceMappingURL=LoadingIndicator.js.map
+})));
+
+export { LoadingIndicator as default };

package/esm/ComboBox/v2/components/MenuList.js

@@ -1,98 +1,123 @@
-import * as React from "react";
-import React2, { useRef, useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { components } from "react-select";
-import { FixedSizeList as List } from "react-window";
-import memoize from "memoize-one";
-import { CustomOption } from "./CustomOption";
-import { CustomOptionMulti } from "./CustomOptionMulti";
-import { MultiSelectHeader } from "./MultiSelectHeader";
-import { useMenuListHeight } from "./useMenuListHeight";
+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/web.dom-collections.iterator.js';
+import React, { useRef, useState, useEffect } from 'react';
+import { components } from 'react-select';
+import { FixedSizeList } from 'react-window';
+import memoize from 'memoize-one';
+import CustomOption from './CustomOption.js';
+import CustomOptionMulti from './CustomOptionMulti.js';
+import MultiSelectHeader from './MultiSelectHeader.js';
+import { useMenuListHeight } from './useMenuListHeight.js';
+import { jsx } from 'react/jsx-runtime';
+
+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; }
+
+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 createItemData = memoize((items, options) => {
-  if (items?.findIndex) {
-    const index = items.findIndex((item) => item.props.isFocused);
-    if (index > -1)
-      return { items, options };
+  if (items !== null && items !== void 0 && items.findIndex) {
+    const index = items.findIndex(item => item.props.isFocused);
+    if (index > -1) return {
+      items,
+      options
+    };
     return {
-      items: [
-        { ...items[0], props: { ...items[0].props, isFocused: true } },
-        ...items.slice(1)
-      ],
+      items: [_objectSpread(_objectSpread({}, items[0]), {}, {
+        props: _objectSpread(_objectSpread({}, items[0].props), {}, {
+          isFocused: true
+        })
+      }), ...items.slice(1)],
       options
     };
   }
-  return { items, options };
+
+  return {
+    items,
+    options
+  };
 });
+
 const scrollTo = (listRef, type) => {
   if (listRef && listRef.current && listRef.current.props) {
-    const { items } = listRef.current.props.itemData;
-    const index = items.findIndex((item) => item.props.isFocused);
+    const {
+      items
+    } = listRef.current.props.itemData;
+    const index = items.findIndex(item => item.props.isFocused);
     listRef.current.scrollToItem(index !== -1 ? index : 0, type);
   }
 };
-const MenuList = React2.memo((props) => {
-  const { children: options, selectProps, isMulti, hasValue } = props;
+
+const MenuList = /*#__PURE__*/React.memo(props => {
+  const {
+    children: options,
+    selectProps,
+    isMulti,
+    hasValue
+  } = props;
   const {
     customMenuItemOptions,
     selectMeasure: {
-      bounds: { bottom }
+      bounds: {
+        bottom
+      }
     }
   } = selectProps;
   const listRef = useRef(null);
   const [inside, setInside] = useState(false);
   const remainingHeight = window.innerHeight - bottom - 10;
   useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
   }, []);
+
   const handleKeyDown = () => setInside(false);
-  const { itemSize = 35, maxOptions } = customMenuItemOptions;
+
+  const {
+    itemSize = 35,
+    maxOptions
+  } = customMenuItemOptions;
   const itemData = createItemData(options, customMenuItemOptions);
   const RenderOption = !isMulti ? CustomOption : CustomOptionMulti;
   const height = useMenuListHeight(options, maxOptions, itemSize, remainingHeight);
+
   if (listRef && listRef.current && !inside && hasValue) {
-    scrollTo(listRef);
+    scrollTo(listRef); // use autoScroll
   }
+
   useEffect(() => {
-    if (hasValue && !inside && listRef)
-      scrollTo(listRef);
+    // fix this that has a bug where the groups is being focused
+    if (hasValue && !inside && listRef) scrollTo(listRef);
   }, [options]);
+
   const setInsideFalseAtClosing = () => setInside(false);
+
   useEffect(() => setInsideFalseAtClosing, []);
-  if (!options.length)
-    return /* @__PURE__ */ React2.createElement(components.MenuList, {
-      ...props
-    });
-  return /* @__PURE__ */ React2.createElement("div", {
+  if (!options.length) return /*#__PURE__*/jsx(components.MenuList, _objectSpread({}, props));
+  return /*#__PURE__*/_jsx("div", {
     role: "list",
     "data-testid": "combobox-menu-list"
-  }, isMulti && /* @__PURE__ */ React2.createElement(MultiSelectHeader, {
-    ...props
-  }), /* @__PURE__ */ React2.createElement(List, {
-    ref: (r) => {
+  }, void 0, isMulti && /*#__PURE__*/jsx(MultiSelectHeader, _objectSpread({}, props)), /*#__PURE__*/jsx(FixedSizeList, {
+    ref: r => {
       listRef.current = r;
+
       if (!inside && listRef && hasValue) {
         scrollTo(listRef);
       }
     },
-    className: `combobox-menu-list ${isMulti && "combobox-menu-list-is-multi"}`,
-    height,
+    className: "combobox-menu-list ".concat(isMulti && 'combobox-menu-list-is-multi'),
+    height: height,
     itemCount: options.length,
-    itemData,
-    itemSize,
+    itemData: itemData,
+    itemSize: itemSize,
     onScroll: () => setInside(true),
-    useIsScrolling: true
-  }, RenderOption));
+    useIsScrolling: true,
+    children: RenderOption
+  }));
 });
-MenuList.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.element),
-  selectProps: PropTypes.object,
-  isMulti: PropTypes.bool,
-  hasValue: PropTypes.bool
-};
-var MenuList_default = MenuList;
-export {
-  MenuList,
-  MenuList_default as default
-};
-//# sourceMappingURL=MenuList.js.map
+
+export { MenuList as default };

package/esm/ComboBox/v2/components/MultiSelectHeader.js

@@ -1,82 +1,74 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-import { DSButton, BUTTON_VARIANT } from "@elliemae/ds-button";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { DSSeparator } from "@elliemae/ds-separator";
-import { DropDownContext } from "../context";
-const MultiSelectHeader = (props) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+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 { useContext } from 'react';
+import styled from 'styled-components';
+import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-button';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import DSSeparator from '@elliemae/ds-separator';
+import { DropDownContext } from '../context.js';
+
+var _StyledSeparator, _DSSeparator;
+
+const MultiSelectHeader = props => {
   const totalItems = props.children.length;
-  const selectedItems = props.children.filter((child) => child.props.isSelected).length;
-  const { onSelectAll, selectAllDisabled } = useContext(DropDownContext);
+  const selectedItems = props.children.filter(child => child.props.isSelected).length;
+  const {
+    onSelectAll,
+    selectAllDisabled
+  } = useContext(DropDownContext);
   const isClearButtonDisabled = selectedItems === 0;
   const isAllButtonDisabled = selectedItems === totalItems;
-  return /* @__PURE__ */ React2.createElement(HeaderWrapper, null, /* @__PURE__ */ React2.createElement(ContentWrapper, null, /* @__PURE__ */ React2.createElement(HeaderTitle, null, /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
-    value: `${selectedItems} selected`
-  })), !selectAllDisabled && /* @__PURE__ */ React2.createElement(ActionButtons, null, /* @__PURE__ */ React2.createElement(StyledButton, {
+  return /*#__PURE__*/_jsx(HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx(ContentWrapper, {}, void 0, /*#__PURE__*/_jsx(HeaderTitle, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    value: "".concat(selectedItems, " selected")
+  })), !selectAllDisabled && /*#__PURE__*/_jsx(ActionButtons, {}, void 0, /*#__PURE__*/_jsx(StyledButton, {
     "data-testid": "combobox-all-btn",
     buttonType: "text",
     labelText: "All",
     size: "s",
     onClick: () => onSelectAll(true),
     disabled: isAllButtonDisabled,
-    "aria-disabled": isAllButtonDisabled ? "true" : "false",
+    "aria-disabled": isAllButtonDisabled ? 'true' : 'false',
     variant: isAllButtonDisabled && BUTTON_VARIANT.DISABLED
-  }), /* @__PURE__ */ React2.createElement(StyledSeparator, {
+  }), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
     orientation: "vertical",
     position: "center",
     type: "group-level",
     margin: "none"
-  }), /* @__PURE__ */ React2.createElement(StyledButton, {
+  })), /*#__PURE__*/_jsx(StyledButton, {
     "data-testid": "combobox-clear-btn",
     buttonType: "text",
     labelText: "Clear",
     size: "s",
     onClick: () => onSelectAll(false),
     disabled: isClearButtonDisabled,
-    "aria-disabled": isClearButtonDisabled ? "true" : "false",
+    "aria-disabled": isClearButtonDisabled ? 'true' : 'false',
     variant: isClearButtonDisabled && BUTTON_VARIANT.DISABLED
-  }))), /* @__PURE__ */ React2.createElement(DSSeparator, {
+  }))), _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {
     position: "center",
     type: "non-form",
     margin: "none"
-  }));
+  })));
 };
-const HeaderWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0 ${(props) => props.theme.space.xs};
-`;
-const ContentWrapper = styled.div`
-  display: grid;
-  align-items: flex-end;
-  justify-content: space-between;
-  height: ${(props) => props.theme.space.s};
-  padding-bottom: 4px;
-  grid-template-columns: minmax(0, 1fr) 104px;
-`;
-const HeaderTitle = styled.span`
-  color: ${(props) => props.theme.colors.neutral[500]};
-  text-overflow: ellipsis;
-`;
-const ActionButtons = styled.div`
-  display: inline-flex;
-  color: ${(props) => props.theme.colors.neutral[500]};
-`;
-const StyledSeparator = styled(DSSeparator)`
-  height: auto;
-  width: auto;
-`;
-const StyledButton = styled(DSButton)`
-  padding: 0 ${(props) => props.theme.space.xxs};
-`;
-MultiSelectHeader.propTypes = {
-  children: PropTypes.array
-};
-var MultiSelectHeader_default = MultiSelectHeader;
-export {
-  MultiSelectHeader,
-  MultiSelectHeader_default as default
-};
-//# sourceMappingURL=MultiSelectHeader.js.map
+
+const HeaderWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-zjm4r5-0"
+})(["display:flex;flex-direction:column;padding:0 ", ";"], props => props.theme.space.xs);
+const ContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-zjm4r5-1"
+})(["display:grid;align-items:flex-end;justify-content:space-between;height:", ";padding-bottom:4px;grid-template-columns:minmax(0,1fr) 104px;"], props => props.theme.space.s);
+const HeaderTitle = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-zjm4r5-2"
+})(["color:", ";text-overflow:ellipsis;"], props => props.theme.colors.neutral[500]);
+const ActionButtons = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-zjm4r5-3"
+})(["display:inline-flex;color:", ";"], props => props.theme.colors.neutral[500]);
+const StyledSeparator = /*#__PURE__*/styled(DSSeparator).withConfig({
+  componentId: "sc-zjm4r5-4"
+})(["height:auto;width:auto;"]);
+const StyledButton = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-zjm4r5-5"
+})(["padding:0 ", ";"], props => props.theme.space.xxs);
+
+export { MultiSelectHeader as default };

package/esm/ComboBox/v2/components/MultiValueLabel.js

@@ -1,16 +1,16 @@
-import * as React from "react";
-import React2 from "react";
-import { PopperPositions as Positions } from "@elliemae/ds-popper";
-import { DSTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-function MultiValueLabel({ children }) {
-  return /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
-    tooltipPlacement: Positions.TOP,
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PopperPositions } from '@elliemae/ds-popper';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+
+function MultiValueLabel(_ref) {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+    tooltipPlacement: PopperPositions.TOP,
     value: children
   });
 }
-var MultiValueLabel_default = MultiValueLabel;
-export {
-  MultiValueLabel,
-  MultiValueLabel_default as default
-};
-//# sourceMappingURL=MultiValueLabel.js.map
+
+export { MultiValueLabel as default };