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

package/esm/MobileSelectList/MobileSelectList.js

@@ -1,128 +1,135 @@
-import * as React from "react";
-import React2, { useState, useEffect } from "react";
-import { noop } from "lodash";
-import PropTypes from "prop-types";
-import { Grid } from "@elliemae/ds-grid";
-import { DSTextBox } from "@elliemae/ds-form";
-import { op, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import { DSMobileTouchable } from "../MobileTouchable";
-import { StyledContainer, HeaderContainer, Footer, ListContainer, checkbox, checked, selectedMark } from "./styled";
-const MobileSelectList = ({
-  open = false,
-  header = null,
-  multiple = false,
-  onChange = noop,
-  children,
-  theme,
-  zIndex = 1,
-  useSearch,
-  onSearch = noop,
-  dataTestid = "mobile-select-list",
-  buttonFooter = null,
-  onApply = noop,
-  selecteds: initSelecteds = []
-}) => {
-  const rows = ["auto", 1];
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+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.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import React, { useState, useEffect } from 'react';
+import { noop } from 'lodash';
+import { Grid } from '@elliemae/ds-grid';
+import { DSTextBox } from '@elliemae/ds-form';
+import { withTheme, op, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import { DSMobileTouchable } from '../MobileTouchable/MobileTouchable.js';
+import { StyledContainer, HeaderContainer, ListContainer, Footer, checked, checkbox, selectedMark } from './styled.js';
+import { jsx, Fragment } 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 MobileSelectList = _ref => {
+  let {
+    open = false,
+    header = null,
+    multiple = false,
+    onChange = noop,
+    children,
+    theme,
+    zIndex = 1,
+    useSearch,
+    onSearch = noop,
+    dataTestid = 'mobile-select-list',
+    buttonFooter = null,
+    onApply = noop,
+    selecteds: initSelecteds = []
+  } = _ref;
+  const rows = ['auto', 1];
   const [selecteds, setSelected] = useState(initSelecteds);
-  const [filter, setFilter] = useState("");
+  const [filter, setFilter] = useState('');
   useEffect(() => {
     setSelected(initSelecteds);
   }, [initSelecteds]);
-  const handleSelection = (value) => {
+
+  const handleSelection = value => {
     if (multiple) {
-      const index = selecteds.findIndex((s) => s === value);
-      if (index > -1)
-        setSelected(selecteds.filter((s) => s !== value));
-      else
-        setSelected([...selecteds, value]);
-    } else
-      setSelected([value]);
+      const index = selecteds.findIndex(s => s === value);
+      if (index > -1) setSelected(selecteds.filter(s => s !== value));else setSelected([...selecteds, value]);
+    } else setSelected([value]);
   };
-  const handleChange = function(event) {
+
+  const handleChange = function (event) {
     onChange(event, this);
     handleSelection(this.value);
   };
-  const handleOnSearch = (e) => {
+
+  const handleOnSearch = e => {
     setFilter(e.target.value);
     onSearch(e);
   };
-  const handleApply = function(e) {
-    if (this.onClick)
-      this.onClick(e);
+
+  const handleApply = function (e) {
+    if (this.onClick) this.onClick(e);
     onApply(e, selecteds);
   };
-  if (buttonFooter)
-    rows.push(op("*", __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.16666));
-  if (!open)
-    return null;
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledContainer, {
-    "data-testid": dataTestid,
-    rows,
-    zIndex
-  }, /* @__PURE__ */ React2.createElement(HeaderContainer, null, header, useSearch && /* @__PURE__ */ React2.createElement(Grid, {
-    alignItems: "center",
-    height: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl),
-    pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
-    pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
-  }, /* @__PURE__ */ React2.createElement(DSTextBox, {
-    onChange: handleOnSearch,
-    placeholder: "Filter by name",
-    value: filter
-  }))), /* @__PURE__ */ React2.createElement(Grid, {
-    style: { overflow: "hidden" }
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    style: { overflow: "auto" }
-  }, /* @__PURE__ */ React2.createElement(ListContainer, {
-    "data-testid": `${dataTestid}--list-container`
-  }, React2.Children.map(children, (child) => {
-    let leftAddon = null;
-    let rightAddon = null;
-    const { value, title } = child.props;
-    const found = selecteds.findIndex((s) => String(s) === String(value));
-    if (filter && !String(value).toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && !String(title).toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
-      return null;
-    if (multiple) {
-      if (found > -1)
-        leftAddon = checked;
-      else
-        leftAddon = checkbox;
-    } else if (found > -1) {
-      rightAddon = selectedMark;
-    }
-    return /* @__PURE__ */ React2.createElement(DSMobileTouchable, {
-      onClick: handleChange.bind(child.props)
-    }, React2.cloneElement(child, { leftAddon, rightAddon }));
-  })))), buttonFooter && /* @__PURE__ */ React2.createElement(Footer, {
-    alignItems: "center",
-    pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
-    pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
-  }, React2.cloneElement(buttonFooter, {
-    ...buttonFooter.props,
-    containerProps: {
-      "data-testid": `${dataTestid}--btn`
-    },
-    buttonType: "primary",
-    size: "l",
-    onClick: handleApply.bind(buttonFooter.props)
-  }))));
+
+  if (buttonFooter) rows.push(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.16666));
+  if (!open) return null;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx(StyledContainer, {
+      "data-testid": dataTestid,
+      rows: rows,
+      zIndex: zIndex
+    }, void 0, /*#__PURE__*/_jsx(HeaderContainer, {}, void 0, header, useSearch && /*#__PURE__*/_jsx(Grid, {
+      alignItems: "center",
+      height: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl),
+      pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+      pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+    }, void 0, /*#__PURE__*/_jsx(DSTextBox, {
+      onChange: handleOnSearch,
+      placeholder: "Filter by name",
+      value: filter
+    }))), /*#__PURE__*/_jsx(Grid, {
+      style: {
+        overflow: 'hidden'
+      }
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      style: {
+        overflow: 'auto'
+      }
+    }, void 0, /*#__PURE__*/_jsx(ListContainer, {
+      "data-testid": "".concat(dataTestid, "--list-container")
+    }, void 0, React.Children.map(children, child => {
+      let leftAddon = null;
+      let rightAddon = null;
+      const {
+        value,
+        title
+      } = child.props;
+      const found = selecteds.findIndex(s => String(s) === String(value));
+      if (filter && !String(value).toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && !String(title).toLocaleLowerCase().includes(filter.toLocaleLowerCase())) return null;
+
+      if (multiple) {
+        if (found > -1) leftAddon = checked;else leftAddon = checkbox;
+      } else if (found > -1) {
+        rightAddon = selectedMark;
+      }
+
+      return /*#__PURE__*/_jsx(DSMobileTouchable, {
+        onClick: handleChange.bind(child.props)
+      }, void 0, /*#__PURE__*/React.cloneElement(child, {
+        leftAddon,
+        rightAddon
+      }));
+    })))), buttonFooter && /*#__PURE__*/_jsx(Footer, {
+      alignItems: "center" // eslint-disable-next-line max-lines
+      ,
+      pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+      pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+    }, void 0, /*#__PURE__*/React.cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
+      containerProps: {
+        'data-testid': "".concat(dataTestid, "--btn")
+      },
+      buttonType: 'primary',
+      size: 'l',
+      onClick: handleApply.bind(buttonFooter.props)
+    }))))
+  });
 };
+
 const DSMobileSelectList = withTheme(MobileSelectList);
-MobileSelectList.propTypes = {
-  open: PropTypes.bool,
-  header: PropTypes.element,
-  onChange: PropTypes.func,
-  multiple: PropTypes.bool,
-  children: PropTypes.arrayOf(PropTypes.element),
-  dataTestid: PropTypes.string,
-  buttonFooter: PropTypes.element,
-  onApply: PropTypes.func,
-  zIndex: PropTypes.number,
-  selecteds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-  theme: PropTypes.object.isRequired,
-  useSearch: PropTypes.bool,
-  onSearch: PropTypes.func
-};
-export {
-  DSMobileSelectList
-};
-//# sourceMappingURL=MobileSelectList.js.map
+
+export { DSMobileSelectList };

package/esm/MobileSelectList/index.js

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

package/esm/MobileSelectList/styled.js

@@ -1,54 +1,42 @@
-import * as React from "react";
-import React2 from "react";
-import { noop } from "lodash";
-import styled from "styled-components";
-import { Grid } from "@elliemae/ds-grid";
-import { DSCheckbox } from "@elliemae/ds-form";
-import { Checkmark } from "@elliemae/ds-icons";
-import { border } from "@elliemae/ds-system";
-import { DSMobileTouchable } from "../MobileTouchable";
-import { DSMobileListItem } from "../MobileListItem";
-const StyledContainer = styled(Grid)`
-  background: ${(props) => props.theme.colors.neutral["000"]};
-  z-index: ${(props) => props.zIndex};
-  position: fixed;
-  width: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-`;
-const HeaderContainer = styled(Grid)`
-  border-bottom: ${(props) => border(props.theme.colors.neutral["300"])};
-`;
-const Footer = styled(Grid)`
-  border-top: ${(props) => border(props.theme.colors.neutral["300"])};
-`;
-const ListContainer = styled.div`
-  & ${DSMobileTouchable}:last-child ${DSMobileListItem} {
-    border: none;
-  }
-`;
-const checkbox = /* @__PURE__ */ React2.createElement(DSCheckbox, {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { noop } from 'lodash';
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+import { DSCheckbox } from '@elliemae/ds-form';
+import { Checkmark } from '@elliemae/ds-icons';
+import { border } from '@elliemae/ds-system';
+import { DSMobileTouchable } from '../MobileTouchable/MobileTouchable.js';
+import { DSMobileListItem } from '../MobileListItem/MobileListItem.js';
+
+const StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1dckxve-0"
+})(["background:", ";z-index:", ";position:fixed;width:100%;top:0;left:0;right:0;height:100%;"], props => props.theme.colors.neutral['000'], props => props.zIndex);
+const HeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1dckxve-1"
+})(["border-bottom:", ";"], props => border(props.theme.colors.neutral['300']));
+const Footer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1dckxve-2"
+})(["border-top:", ";"], props => border(props.theme.colors.neutral['300']));
+const ListContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1dckxve-3"
+})(["& ", ":last-child ", "{border:none;}"], DSMobileTouchable, DSMobileListItem);
+const checkbox = /*#__PURE__*/_jsx(DSCheckbox, {
   checked: false,
   onChange: noop,
-  style: { pointerEvents: "none" }
+  style: {
+    pointerEvents: 'none'
+  }
 });
-const checked = /* @__PURE__ */ React2.createElement(DSCheckbox, {
+const checked = /*#__PURE__*/_jsx(DSCheckbox, {
   checked: true,
   onChange: noop,
-  style: { pointerEvents: "none" }
+  style: {
+    pointerEvents: 'none'
+  }
 });
-const selectedMark = /* @__PURE__ */ React2.createElement(Checkmark, {
-  color: ["brand-primary", 600]
+const selectedMark = /*#__PURE__*/_jsx(Checkmark, {
+  color: ['brand-primary', 600]
 });
-export {
-  Footer,
-  HeaderContainer,
-  ListContainer,
-  StyledContainer,
-  checkbox,
-  checked,
-  selectedMark
-};
-//# sourceMappingURL=styled.js.map
+
+export { Footer, HeaderContainer, ListContainer, StyledContainer, checkbox, checked, selectedMark };

package/esm/MobileSeparator/Separator.js

@@ -1,39 +1,63 @@
-import * as React from "react";
-import React2 from "react";
-import { describe, PropTypes } from "react-desc";
-import styled from "styled-components";
-import { Grid } from "@elliemae/ds-grid";
-const Separator = styled(Grid)`
-  border-top: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};
-  border-left: ${({ theme, color, borderType }) => `${theme.colors[color[0]][color[1]]} 1px ${borderType}`};
-`;
-const MobileSeparator = ({ color = ["neutral", "800"], direction = "horizontal", type = "solid", margin = "xs" }) => {
-  const orientation = direction === "vertical" ? "height" : "width";
-  const xORy = direction === "vertical" ? "mx" : "my";
+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 { PropTypes, describe } from 'react-desc';
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+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 Separator = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-lje3kq-0"
+})(["border-top:", ";border-left:", ";"], _ref => {
+  let {
+    theme,
+    color,
+    borderType
+  } = _ref;
+  return "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType);
+}, _ref2 => {
+  let {
+    theme,
+    color,
+    borderType
+  } = _ref2;
+  return "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType);
+});
+
+const MobileSeparator = _ref3 => {
+  let {
+    color = ['neutral', '800'],
+    direction = 'horizontal',
+    type = 'solid',
+    margin = 'xs'
+  } = _ref3;
+  const orientation = direction === 'vertical' ? 'height' : 'width';
+  const xORy = direction === 'vertical' ? 'mx' : 'my';
   const styles = {
     width: 0,
     height: 0,
-    [orientation]: "100%",
+    [orientation]: '100%',
     [xORy]: margin,
     borderType: type,
     color
   };
-  return /* @__PURE__ */ React2.createElement(Separator, {
-    ...styles
-  });
+  return /*#__PURE__*/jsx(Separator, _objectSpread({}, styles));
 };
+
 const mobileSeparatorProps = {
-  type: PropTypes.oneOf(["solid", "dashed"]).description("Style type of separator").defaultValue("solid"),
-  direction: PropTypes.oneOf(["vertical", "horizontal"]).description("Direction of the separator").defaultValue("horizontal"),
-  color: PropTypes.array.description("Color of the separator").defaultValue(["neutral", "800"]),
-  margin: PropTypes.oneOf(["xxs", "xs", "s", "m", "l", "xl", "xxl"]).description("Margin of the separator").defaultValue("xs")
+  type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),
+  direction: PropTypes.oneOf(['vertical', 'horizontal']).description('Direction of the separator').defaultValue('horizontal'),
+  color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),
+  margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl']).description('Margin of the separator').defaultValue('xs')
 };
-MobileSeparator.propTypes = mobileSeparatorProps;
 const MobileSeparatorWithSchema = describe(MobileSeparator);
 MobileSeparatorWithSchema.propTypes = mobileSeparatorProps;
-var Separator_default = MobileSeparator;
-export {
-  MobileSeparatorWithSchema,
-  Separator_default as default
-};
-//# sourceMappingURL=Separator.js.map
+
+export { MobileSeparatorWithSchema, MobileSeparator as default };

package/esm/MobileSeparator/index.js

@@ -1,8 +1,2 @@
-import * as React from "react";
-import DSMobileSeparator, { MobileSeparatorWithSchema } from "./Separator";
-var MobileSeparator_default = DSMobileSeparator;
-export {
-  MobileSeparatorWithSchema,
-  MobileSeparator_default as default
-};
-//# sourceMappingURL=index.js.map
+import MobileSeparator from './Separator.js';
+export { MobileSeparatorWithSchema, default } from './Separator.js';

package/esm/MobileTimePicker/Input.js

@@ -1,49 +1,32 @@
-import * as React from "react";
-import React2 from "react";
-import { focus, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import styled from "styled-components";
-const StyledInput = styled.input`
-  input[type=time]& {   
-    -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 { __UNSAFE_SPACE_TO_DIMSUM, focus } from '@elliemae/ds-system';
+import styled from 'styled-components';
+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=time]&:active, input[type=time]&: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-ra7fth-0"
+})(["input[type=time]&{-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=time]&:active,input[type=time]&:focus{", "}&:before{color:", ";content:'", "';}input[type=time]&::-webkit-datetime-edit,input[type=time]&::-webkit-inner-spin-button,input[type=time]&::-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=time]&::-webkit-datetime-edit, input[type=time]&::-webkit-inner-spin-button, input[type=time]&::-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 };