@elliemae/ds-mobile 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/MobileContextMenu/MobileContextMenuItem.js

@@ -1,125 +1,143 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-import { Grid } from "@elliemae/ds-grid";
-import styled from "styled-components";
-import { truncate } from "@elliemae/ds-system";
-import GroupItem from "@elliemae/ds-shared/GroupContext/GroupItem";
-import { DSCheckbox } from "@elliemae/ds-form";
-import { Checkmark } from "@elliemae/ds-icons";
-import { DSMobileTouchable } from "../MobileTouchable";
-const Wrap = styled((props2) => /* @__PURE__ */ React2.createElement(DSMobileTouchable, {
-  ...props2
-}))`
-  border-bottom: none;
-`;
-const PropWrap = styled((props2) => /* @__PURE__ */ React2.createElement(Grid, {
-  ...props2
-}))`
-  ${(props2) => {
-  if (!props2.isMulti) {
-    return `
-      & > span {
-        height: 18px;
-        width: 18px;
-      }
-
-      & > span > svg {
-        height: 18px;
-        width: 18px;
-      }
-      `;
+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 'react';
+import { PropTypes, describe } from 'react-desc';
+import { Grid } from '@elliemae/ds-grid';
+import styled from 'styled-components';
+import { truncate } from '@elliemae/ds-system';
+import GroupItem from '@elliemae/ds-shared/GroupContext/GroupItem';
+import { DSCheckbox } from '@elliemae/ds-form';
+import { Checkmark } from '@elliemae/ds-icons';
+import { DSMobileTouchable } from '../MobileTouchable/MobileTouchable.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _CheckMark;
+
+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 Wrap = /*#__PURE__*/styled(props => /*#__PURE__*/jsx(DSMobileTouchable, _objectSpread({}, props))).withConfig({
+  componentId: "sc-20od94-0"
+})(["border-bottom:none;"]);
+const PropWrap = /*#__PURE__*/styled(props => /*#__PURE__*/jsx(Grid, _objectSpread({}, props))).withConfig({
+  componentId: "sc-20od94-1"
+})(["", ""], props => {
+  if (!props.isMulti) {
+    return "\n      & > span {\n        height: 18px;\n        width: 18px;\n      }\n\n      & > span > svg {\n        height: 18px;\n        width: 18px;\n      }\n      ";
   }
-  return "";
-}}
-`;
-const Title = styled.span`
-  font-size: 16px;
-  color: ${(props2) => props2.theme.colors.brand["600"]};
-  ${truncate()}
-`;
-const Label = styled.span`
-  font-size: 13px;
-  color: ${(props2) => props2.theme.colors.neutral["600"]};
-`;
-const CheckMark = styled(Checkmark)`
-  fill: ${(props2) => props2.theme.colors.brand["600"]};
-`;
-const DSMobileContextMenuItem = ({
-  label,
-  title,
-  leftProp,
-  isGroup,
-  isMulti,
-  singleSelect,
-  isSelected,
-  onClick = () => {
-  },
-  value
-}) => /* @__PURE__ */ React2.createElement(GroupItem, {
-  render: (context) => {
-    const { activeValue } = context;
-    let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);
-    if (isGroup)
-      someItemSelected = typeof activeValue === "string";
-    let showLeftAddon = isSelected;
-    if (isMulti || !singleSelect)
-      showLeftAddon = true;
-    let leftAddon = leftProp || null;
-    if (isMulti)
-      leftAddon = /* @__PURE__ */ React2.createElement(DSCheckbox, {
+
+  return '';
+});
+const Title = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-20od94-2"
+})(["font-size:16px;color:", ";", ""], props => props.theme.colors.brand['600'], truncate());
+const Label = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-20od94-3"
+})(["font-size:13px;color:", ";"], props => props.theme.colors.neutral['600']);
+const CheckMark = /*#__PURE__*/styled(Checkmark).withConfig({
+  componentId: "sc-20od94-4"
+})(["fill:", ";"], props => props.theme.colors.brand['600']);
+
+const DSMobileContextMenuItem = _ref => {
+  var _DSCheckbox, _Grid, _Title;
+
+  let {
+    label,
+    title,
+    leftProp,
+    isGroup,
+    isMulti,
+    singleSelect,
+    isSelected,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onClick = () => {},
+    value
+  } = _ref;
+  return /*#__PURE__*/_jsx(GroupItem, {
+    render: context => {
+      const {
+        activeValue
+      } = context;
+      let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);
+      if (isGroup) someItemSelected = typeof activeValue === 'string';
+      let showLeftAddon = isSelected;
+      if (isMulti || !singleSelect) showLeftAddon = true;
+      let leftAddon = leftProp || null;
+      if (isMulti) leftAddon = _DSCheckbox || (_DSCheckbox = /*#__PURE__*/_jsx(DSCheckbox, {
         checked: isSelected,
         "data-testid": "leftAddon-checkbox"
-      });
-    if (singleSelect)
-      leftAddon = /* @__PURE__ */ React2.createElement(CheckMark, {
+      }));
+      if (singleSelect) leftAddon = _CheckMark || (_CheckMark = /*#__PURE__*/_jsx(CheckMark, {
         "data-testid": "leftAddon-checkmark"
-      });
-    return /* @__PURE__ */ React2.createElement(Wrap, {
-      "data-testid": "ds-contextmenu-item",
-      onClick: (e) => {
-        if (singleSelect || isMulti)
-          context.onChange(value, e, { value, label, title });
-        onClick(e);
-      },
-      cols: singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ["40px", "auto"] : ["auto"]
-    }, (singleSelect && someItemSelected || isMulti || leftAddon) && /* @__PURE__ */ React2.createElement(PropWrap, {
-      "data-testid": "left-addon",
-      isMulti,
-      alignItems: "center",
-      justifyContent: "center",
-      pl: "16px"
-    }, showLeftAddon && leftAddon), /* @__PURE__ */ React2.createElement(Grid, {
-      height: "44px",
-      pr: "xs",
-      pl: !leftAddon && isGroup ? "24px" : "xs"
-    }, label && /* @__PURE__ */ React2.createElement(Grid, {
-      alignItems: "center"
-    }, /* @__PURE__ */ React2.createElement(Label, {
-      "data-testid": "contextMenuItem-label"
-    }, label)), /* @__PURE__ */ React2.createElement(Grid, {
-      alignItems: !label ? "center" : void 0
-    }, /* @__PURE__ */ React2.createElement(Title, {
-      "data-testid": "contextMenuItem-title"
-    }, title))));
-  }
-});
+      }));
+      return /*#__PURE__*/_jsx(Wrap, {
+        "data-testid": "ds-contextmenu-item",
+        onClick: e => {
+          if (singleSelect || isMulti) context.onChange(value, e, {
+            value,
+            label,
+            title
+          });
+          onClick(e);
+        },
+        cols: singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ['40px', 'auto'] : ['auto']
+      }, void 0, (singleSelect && someItemSelected || isMulti || leftAddon) && /*#__PURE__*/_jsx(PropWrap, {
+        "data-testid": "left-addon",
+        isMulti: isMulti,
+        alignItems: "center",
+        justifyContent: "center",
+        pl: "16px"
+      }, void 0, showLeftAddon && leftAddon), /*#__PURE__*/_jsx(Grid, {
+        height: "44px",
+        pr: "xs",
+        pl: !leftAddon && isGroup ? '24px' : 'xs'
+      }, void 0, label && (_Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {
+        alignItems: "center"
+      }, void 0, /*#__PURE__*/_jsx(Label, {
+        "data-testid": "contextMenuItem-label"
+      }, void 0, label)))), /*#__PURE__*/_jsx(Grid, {
+        alignItems: !label ? 'center' : undefined
+      }, void 0, _Title || (_Title = /*#__PURE__*/_jsx(Title, {
+        "data-testid": "contextMenuItem-title"
+      }, void 0, title)))));
+    }
+  });
+};
+
 const props = {
-  label: PropTypes.string.description("label"),
-  title: PropTypes.string.isRequired.description("menu item title"),
-  leftProp: PropTypes.element.description(""),
-  isMulti: PropTypes.bool.description("multi select"),
-  singleSelect: PropTypes.bool.description(""),
-  isGroup: PropTypes.bool.description(""),
-  onClick: PropTypes.func.description("on click handler"),
-  value: PropTypes.number.description("value for select"),
-  isSelected: PropTypes.bool.description("selected value")
+  /** label */
+  label: PropTypes.string.description('label'),
+
+  /** menu item title */
+  title: PropTypes.string.isRequired.description('menu item title'),
+
+  /**  */
+  leftProp: PropTypes.element.description(''),
+
+  /** multi select */
+  isMulti: PropTypes.bool.description('multi select'),
+
+  /**  */
+  singleSelect: PropTypes.bool.description(''),
+
+  /**  */
+  isGroup: PropTypes.bool.description(''),
+
+  /** on click handler */
+  onClick: PropTypes.func.description('on click handler'),
+
+  /** value for select */
+  value: PropTypes.number.description('value for select'),
+
+  /** selected value */
+  isSelected: PropTypes.bool.description('selected value')
 };
-DSMobileContextMenuItem.propTypes = props;
 const DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);
 DSMobileContextMenuItemWithSchema.propTypes = props;
-export {
-  DSMobileContextMenuItem,
-  DSMobileContextMenuItemWithSchema
-};
-//# sourceMappingURL=MobileContextMenuItem.js.map
+
+export { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };

package/esm/MobileContextMenu/index.js

@@ -1,5 +1,3 @@
-import * as React from "react";
-export * from "./MobileContextMenu";
-export * from "./MobileContextMenuItem";
-export * from "./MobileContextMenuGroup";
-//# sourceMappingURL=index.js.map
+export { DSMobileContextMenu, DSMobileContextMenuWithSchema } from './MobileContextMenu.js';
+export { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema } from './MobileContextMenuItem.js';
+export { DSMobileContextMenuGroup, DSMobileContextMenuGroupWithSchema } from './MobileContextMenuGroup.js';

package/esm/MobileDatePicker/Input.js

@@ -1,49 +1,32 @@
-import * as React from "react";
-import React2 from "react";
-import styled from "styled-components";
-import { focus, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-const StyledInput = styled.input`
-  input[type=date]& {   
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -webkit-tap-highlight-color: transparent;
-    appearance: none;
-    color: transparent;
+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';
+import styled from 'styled-components';
+import { __UNSAFE_SPACE_TO_DIMSUM, focus } from '@elliemae/ds-system';
+import { jsx } from 'react/jsx-runtime';
 
-    white-space: nowrap;
-    position: relative;
-    height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l)};
-    width: 100%;
-    max-width: calc(100% - 32px);
-    outline: none;
-    box-sizing: border-box;
-    display: flex;
-    background: ${(props) => props.theme.colors.neutral["000"]};
-    padding: 0 ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};
-    z-index: 1;
-    border-radius: 2px;
-    border: solid 1px ${(props) => props.theme.colors.neutral[200]};
-  }
+const _excluded = ["innerRef"];
 
-  input[type=date]&:active, input[type=date]&:focus {
-    ${(props) => focus(props.theme.colors.brand[700])}
-  }
+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; }
 
-  &:before {
-    color: ${(props) => props.value === "" ? props.theme.colors.neutral["500"] : props.theme.colors.neutral["800"]};
-    content: '${(props) => props.value === "" ? props.placeholder : props["data-displayvalue"]}';
-  }
+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 StyledInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "sc-1djip5a-0"
+})(["input[type=date]&{-webkit-appearance:none;-moz-appearance:none;-webkit-tap-highlight-color:transparent;appearance:none;color:transparent;white-space:nowrap;position:relative;height:", ";width:100%;max-width:calc(100% - 32px);outline:none;box-sizing:border-box;display:flex;background:", ";padding:0 ", ";z-index:1;border-radius:2px;border:solid 1px ", ";}input[type=date]&:active,input[type=date]&:focus{", "}&:before{color:", ";content:'", "';}input[type=date]&::-webkit-datetime-edit,input[type=date]&::-webkit-inner-spin-button,input[type=date]&::-webkit-clear-button{-webkit-appearance:none;display:none;}"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l), props => props.theme.colors.neutral['000'], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), props => props.theme.colors.neutral[200], props => focus(props.theme.colors.brand[700]), props => props.value === '' ? props.theme.colors.neutral['500'] : props.theme.colors.neutral['800'], props => props.value === '' ? props.placeholder : props['data-displayvalue']);
+const Input = _ref => {
+  let {
+    innerRef
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  input[type=date]&::-webkit-datetime-edit, input[type=date]&::-webkit-inner-spin-button, input[type=date]&::-webkit-clear-button {
-    -webkit-appearance: none;
-    display: none;
-  }
-`;
-const Input = ({ innerRef, ...props }) => /* @__PURE__ */ React2.createElement(StyledInput, {
-  ref: innerRef,
-  ...props
-});
-export {
-  Input
+  return /*#__PURE__*/jsx(StyledInput, _objectSpread({
+    ref: innerRef
+  }, props));
 };
-//# sourceMappingURL=Input.js.map
+
+export { Input };

package/esm/MobileDatePicker/MobileDatePicker.js

@@ -1,26 +1,41 @@
-import * as React from "react";
-import React2, { useRef, useEffect } from "react";
-import { PropTypes, describe } from "react-desc";
-import { DSIconColors } from "@elliemae/ds-icon";
-import { DatePicker } from "@elliemae/ds-icons";
-import DSButton from "@elliemae/ds-button";
-import { DSInputGroup } from "@elliemae/ds-form";
-import { Input } from "./Input";
-const DSMobileDatePicker = ({ disabled, value, tabIndex, placeholder, onChange }) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef, useEffect } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { DatePicker } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { DSInputGroup } from '@elliemae/ds-form';
+import { Input } from './Input.js';
+
+var _DatePicker;
+
+const DSMobileDatePicker = _ref => {
+  let {
+    disabled,
+    value,
+    tabIndex,
+    placeholder,
+    onChange
+  } = _ref;
   const inputRef = useRef(null);
   useEffect(() => {
+    /*
+      necessary if value is being set in mount, 
+      otherwise the clear won't work on the first click
+      [SEE input onChange comment]
+    */
     if (inputRef.current) {
-      inputRef.current.defaultValue = "";
+      inputRef.current.defaultValue = '';
     }
   }, [inputRef.current]);
-  const valueArr = value.split("-");
-  const displayValue = value && `${valueArr[1]} / ${valueArr[2]} / ${valueArr[0]}`;
-  return /* @__PURE__ */ React2.createElement(DSInputGroup, {
-    rightAddon: /* @__PURE__ */ React2.createElement(DSButton, {
+  const valueArr = value.split('-');
+  const displayValue = value && "".concat(valueArr[1], " / ").concat(valueArr[2], " / ").concat(valueArr[0]);
+  return /*#__PURE__*/_jsx(DSInputGroup, {
+    rightAddon: /*#__PURE__*/_jsx(DSButton, {
       "aria-label": "Date Picker Button",
       color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
-      disabled,
-      icon: /* @__PURE__ */ React2.createElement(DatePicker, null),
+      disabled: disabled,
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker, {})),
       type: "button",
       buttonType: "secondary",
       onClick: () => {
@@ -28,44 +43,65 @@ const DSMobileDatePicker = ({ disabled, value, tabIndex, placeholder, onChange }
         inputRef.current.click();
       }
     })
-  }, /* @__PURE__ */ React2.createElement(Input, {
+  }, void 0, /*#__PURE__*/_jsx(Input, {
     "data-testid": "ds-mobile-date-picker",
     innerRef: inputRef,
     "aria-label": "Date Picker Input Mask",
-    disabled,
-    onKeyDown: (e) => e.preventDefault(),
+    disabled: disabled,
+    onKeyDown: e => e.preventDefault(),
     type: "date",
-    placeholder,
-    onChange: (e) => {
-      const { target } = e.nativeEvent;
+    placeholder: placeholder,
+    onChange: e => {
+      // https://github.com/facebook/react/issues/8938#issuecomment-360573204
+      const {
+        target
+      } = e.nativeEvent;
+
       function iosClearDefault() {
-        target.defaultValue = "";
+        target.defaultValue = '';
       }
+
       window.setTimeout(iosClearDefault, 0);
       onChange(e);
     },
-    tabIndex,
-    value,
+    tabIndex: tabIndex,
+    value: value,
     "data-displayvalue": displayValue
   }));
 };
+
 DSMobileDatePicker.defaultProps = {
   disabled: false,
   tabIndex: 0,
-  placeholder: "MM / DD / YYYY"
+  placeholder: 'MM / DD / YYYY'
 };
 const props = {
-  disabled: PropTypes.bool.description("defaults to false"),
-  tabIndex: PropTypes.number.description("0 as default"),
-  placeholder: PropTypes.string.description("MM / DD / YYYY as default"),
-  onChange: PropTypes.func.description("onChange handler, receives change event as first argument"),
-  value: PropTypes.string.description("ISO8601 string representing the date in format YYYY-MM-DD or empty string")
+  /**
+   * defaults to false
+   */
+  disabled: PropTypes.bool.description('defaults to false'),
+
+  /**
+   * 0 as default
+   */
+  tabIndex: PropTypes.number.description('0 as default'),
+
+  /**
+   * MM / DD / YYYY as default
+   */
+  placeholder: PropTypes.string.description('MM / DD / YYYY as default'),
+
+  /**
+   * onChange handler, receives change event as first argument
+   */
+  onChange: PropTypes.func.description('onChange handler, receives change event as first argument'),
+
+  /**
+   * ISO8601 string representing the date in format YYYY-MM-DD or empty string
+   */
+  value: PropTypes.string.description('ISO8601 string representing the date in format YYYY-MM-DD or empty string')
 };
-DSMobileDatePicker.propTypes = props;
 const DSMobileDatePickerWithSchema = describe(DSMobileDatePicker);
 DSMobileDatePickerWithSchema.propTypes = props;
-export {
-  DSMobileDatePicker,
-  DSMobileDatePickerWithSchema
-};
-//# sourceMappingURL=MobileDatePicker.js.map
+
+export { DSMobileDatePicker, DSMobileDatePickerWithSchema };

package/esm/MobileDatePicker/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "./MobileDatePicker";
-//# sourceMappingURL=index.js.map
+export { DSMobileDatePicker, DSMobileDatePickerWithSchema } from './MobileDatePicker.js';

package/esm/MobileDropdownMenu/MobileDropdownInput.js

@@ -1,67 +1,48 @@
-import * as React from "react";
-import React2 from "react";
-import styled from "styled-components";
-import PropTypes from "prop-types";
-import { focus } from "@elliemae/ds-system";
-import { ChevronDown } from "@elliemae/ds-icons";
-const MobileDropdownInput = styled.input`
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -webkit-tap-highlight-color: transparent;
-  caret-color: transparent;
-  padding-right: 32px;
-  padding-left: 10px;
-  border-radius: 2px;
-  width: 100%;
-  background: ${(props) => props.theme.colors.neutral["000"]};
-  height: 32px;
-  line-height: 32px;
-  border: solid 1px ${(props) => props.theme.colors.neutral[200]};
+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 { focus } from '@elliemae/ds-system';
+import { ChevronDown } from '@elliemae/ds-icons';
+import { jsx } from 'react/jsx-runtime';
 
-  &:active,
-  &:focus {
-    ${(props) => focus(props.theme.colors.brand[700])}
-  }
-`;
-const MobileDropdownInputWrap = styled.span`
-  position: relative;
-  width: 100%;
-  display: inline-block;
-  height: 32px;
-`;
-const CaretWrap = styled.span`
-  width: 32px;
-  height: 32px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-const Caret = ({ onClick }) => /* @__PURE__ */ React2.createElement(CaretWrap, {
-  onClick
-}, /* @__PURE__ */ React2.createElement(ChevronDown, {
-  color: ["brand-primary", "600"]
-}));
-Caret.propTypes = {
-  onClick: PropTypes.func.isRequired
+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 MobileDropdownInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "sc-1rsc1yn-0"
+})(["-webkit-appearance:none;-moz-appearance:none;-webkit-tap-highlight-color:transparent;caret-color:transparent;padding-right:32px;padding-left:10px;border-radius:2px;width:100%;background:", ";height:32px;line-height:32px;border:solid 1px ", ";&:active,&:focus{", "}"], props => props.theme.colors.neutral['000'], props => props.theme.colors.neutral[200], props => focus(props.theme.colors.brand[700]));
+const MobileDropdownInputWrap = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1rsc1yn-1"
+})(["position:relative;width:100%;display:inline-block;height:32px;"]);
+const CaretWrap = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1rsc1yn-2"
+})(["width:32px;height:32px;position:absolute;right:0;top:0;display:flex;justify-content:center;align-items:center;"]);
+const Caret = _ref => {
+  let {
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_jsx(CaretWrap, {
+    onClick: onClick
+  }, void 0, /*#__PURE__*/_jsx(ChevronDown, {
+    color: ['brand-primary', '600']
+  }));
 };
-const DSMobileDropdownTriggerInput = ({
-  inputProps,
-  caretProps
-}) => /* @__PURE__ */ React2.createElement(MobileDropdownInputWrap, {
-  "data-testid": "ds-mobile-ddwn-menu"
-}, /* @__PURE__ */ React2.createElement(MobileDropdownInput, {
-  ...inputProps,
-  readOnly: true
-}), /* @__PURE__ */ React2.createElement(Caret, {
-  ...caretProps
-}));
-export {
-  Caret,
-  DSMobileDropdownTriggerInput,
-  MobileDropdownInput,
-  MobileDropdownInputWrap
+const DSMobileDropdownTriggerInput = _ref2 => {
+  let {
+    inputProps,
+    caretProps
+  } = _ref2;
+  return /*#__PURE__*/_jsx(MobileDropdownInputWrap, {
+    "data-testid": "ds-mobile-ddwn-menu"
+  }, void 0, /*#__PURE__*/jsx(MobileDropdownInput, _objectSpread(_objectSpread({}, inputProps), {}, {
+    readOnly: true
+  })), /*#__PURE__*/jsx(Caret, _objectSpread({}, caretProps)));
 };
-//# sourceMappingURL=MobileDropdownInput.js.map
+
+export { Caret, DSMobileDropdownTriggerInput, MobileDropdownInput, MobileDropdownInputWrap };