@spothero/ui 22.0.3 → 22.0.4

package/dist/components/RefreshedInput/Button/Button.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _FormControl = _interopRequireDefault(require("../FormControl"));
+var _react2 = require("@chakra-ui/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * A component used in the homepage/midfunnel refresh of 2024
+ * Initially built as purpose built as possible with hopes of extending it to other systems
+ * using `<RefreshedButton/>` will bring in the core of this.  
+ * The "value" will be the child of the button but must be passed through props like: `<RefreshedButton buttonValue="123"/>`.  This aids in the styling.
+ * Recommended to pass a title prop as that will aid in screen readers understanding this due to text not always being in the button
+ */
+const Button = /*#__PURE__*/(0, _react.forwardRef)(({
+  label,
+  helperText,
+  errorMessage,
+  isInvalid,
+  isDisabled,
+  isRequired,
+  rightElement,
+  leftElement,
+  rightElementStyles,
+  leftElementStyles,
+  buttonValue,
+  ...props
+}, ref) => {
+  const classes = (0, _classnames.default)({
+    'FormElement-contains-error': isInvalid
+  }); //Historic carry over
+
+  return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    errorMessage: errorMessage,
+    helperText: helperText,
+    label: label,
+    id: props.id,
+    rightElement: rightElement,
+    leftElement: leftElement,
+    rightElementStyles: rightElementStyles,
+    leftElementStyles: leftElementStyles,
+    variant: "refreshed"
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
+    ref: ref,
+    className: classes,
+    variant: "refreshed",
+    "data-value": buttonValue
+  }, props, {
+    isDisabled: isDisabled
+  }), buttonValue));
+});
+var _default = exports.default = Button;

package/dist/components/RefreshedInput/Button/Button.stories.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ButtonRefreshed = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("./Button"));
+var _storyAid = require("../storyAid");
+var _default = exports.default = {
+  title: 'v2/RefreshedInputs',
+  component: _Button.default,
+  parameters: {
+    importBy: 'RefreshedInput',
+    removeBaseHtmlClass: true,
+    chakraLink: 'https://chakra-ui.com/docs/components/input'
+  }
+};
+const ButtonRefreshedTemplate = ({
+  showLeftElement,
+  showRightElement,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, props, {
+  leftElement: showLeftElement && /*#__PURE__*/_react.default.createElement(_storyAid.LeftElement, null),
+  rightElement: showRightElement && /*#__PURE__*/_react.default.createElement(_storyAid.RightElement, null)
+}));
+const ButtonRefreshed = exports.ButtonRefreshed = ButtonRefreshedTemplate.bind({});
+ButtonRefreshed.argTypes = {
+  placeholder: {
+    control: {
+      type: 'text'
+    }
+  },
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  errorMessage: {
+    control: {
+      type: 'text'
+    }
+  },
+  buttonValue: {
+    control: 'select',
+    options: ['I\'m the button value', null]
+  },
+  showLeftElement: {
+    control: {
+      control: 'boolean'
+    }
+  },
+  showRightElement: {
+    control: {
+      control: 'boolean'
+    }
+  }
+};
+ButtonRefreshed.args = {
+  id: 'Button_id',
+  placeholder: 'Placeholder text',
+  label: 'Label',
+  helperText: 'Helper text',
+  errorMessage: 'Error message',
+  isInvalid: false,
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  buttonValue: null,
+  showLeftElement: false,
+  showRightElement: false
+};

package/dist/components/RefreshedInput/Button/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _Button.default;
+  }
+});
+var _Button = _interopRequireDefault(require("./Button"));

package/dist/components/RefreshedInput/Button/styles/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _Button = _interopRequireDefault(require("../../../Button/Button.styles"));
+var _styles = _interopRequireDefault(require("../../../Input/styles"));
+const variants = {
+  refreshed: {
+    // ...inputStyles.baseStyles.field,
+    ..._styles.default.variants.outline.field,
+    height: '62px',
+    width: "100%",
+    paddingTop: 6,
+    paddingBottom: 3,
+    borderRadius: 'md',
+    justifyContent: 'flex-start'
+  }
+};
+var _default = exports.default = (0, _merge.default)(_Button.default, {
+  variants
+});

package/dist/components/RefreshedInput/FormControl/index.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@chakra-ui/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// No clue how to move these into the style file so just co-located to keep from slowing down
+// Chakra V2 will heavily impact this component
+const labelStyle = {
+  color: "gray.600",
+  fontWeight: "semibold",
+  top: 3,
+  left: 0,
+  zIndex: 2,
+  position: "absolute",
+  pointerEvents: "none",
+  padding: 'inherit',
+  marginX: 3,
+  paddingX: 1,
+  marginY: 2,
+  transformOrigin: "left top",
+  // below is from chakra v2 that I'm pulling in
+  transitionProperty: 'scale translate',
+  transitionDuration: '200ms'
+};
+const activeLabelStyles = {
+  transform: "scale(0.85) translateY(-16px)",
+  _invalid: {
+    color: 'error',
+    '& .chakra-form__required-indicator': {
+      display: 'none'
+    }
+  }
+};
+const controlStyles = {
+  position: "relative",
+  borderWidth: "0",
+  sx: {
+    label: labelStyle,
+    input: {
+      '&::placeholder': {
+        // below is from chakra v2 that I'm pulling in
+        transitionProperty: 'opacity',
+        transitionDuration: '200ms',
+        opacity: 0
+      },
+      _invalid: {
+        '& + label .chakra-form__required-indicator': {
+          //Styling for asterisk always to be red if invalid
+          color: 'error'
+        }
+      }
+    },
+    // styles used for when we extend functionality - textarea:not(:placeholder-shown) ~ label
+    "input:not(:placeholder-shown) + label, .chakra-select__wrapper + label": {
+      ...activeLabelStyles
+    },
+    // should be a cleaner way of doing this
+    '.chakra-input__group > .chakra-input__left-element ~ span input': {
+      paddingLeft: 10,
+      paddingRight: 8 //This should be only when there is a right element - DOM order made this a headache
+    },
+    '.chakra-input__group > .chakra-input__left-element ~ span select': {
+      paddingLeft: 9,
+      paddingRight: 8 //This should be only when there is a right element - DOM order made this a headache
+    },
+    '.chakra-input__group > .chakra-input__left-element ~ span button': {
+      paddingLeft: 10,
+      paddingRight: 8 //This should be only when there is a right element - DOM order made this a headache
+    },
+    '.chakra-input__group > .chakra-input__left-element ~ span label': {
+      paddingLeft: 8
+    },
+    // Styling for select
+    ".chakra-select__wrapper + label": {
+      ...activeLabelStyles,
+      transform: "scale(0.85) translateY(-16px) translateX(-2px)" //X added to help align
+    },
+    'button[data-value] + label': {
+      ...activeLabelStyles
+    },
+    '.FormElement-contains-error': {
+      borderColor: 'error'
+    }
+  },
+  _focusWithin: {
+    label: {
+      ...activeLabelStyles
+    },
+    input: {
+      '&::placeholder': {
+        opacity: "1"
+      }
+    }
+  }
+};
+
+/**
+ * A component used in the homepage/midfunnel refresh of 2024
+ * This formControl allows us to standardize the label movement animation as well as the left/right icons
+ * Can be used solo but typically will be used by the Refreshed components themselves
+ */
+const FormControl = /*#__PURE__*/(0, _react.forwardRef)(({
+  label,
+  helperText,
+  errorMessage,
+  id = '',
+  children,
+  rightElement,
+  leftElement,
+  rightElementStyles,
+  leftElementStyles,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_react2.FormControl, (0, _extends2.default)({}, props, {
+    ref: ref
+  }, controlStyles), /*#__PURE__*/_react.default.createElement(_react2.InputGroup, null, leftElement && /*#__PURE__*/_react.default.createElement(_react2.InputLeftElement, (0, _extends2.default)({
+    pointerEvents: "none",
+    top: "52%",
+    left: "1.5rem",
+    transform: "translate(-50%,-50%)"
+  }, leftElementStyles), leftElement), /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    as: "span",
+    width: "100%",
+    position: "relative"
+  }, children, label && /*#__PURE__*/_react.default.createElement(_react2.FormLabel, {
+    htmlFor: id
+  }, label)), rightElement && /*#__PURE__*/_react.default.createElement(_react2.InputRightElement, (0, _extends2.default)({
+    top: "50%",
+    right: "-1rem",
+    transform: "translate(-50%,-50%)"
+  }, rightElementStyles), rightElement)), helperText && /*#__PURE__*/_react.default.createElement(_react2.FormHelperText, {
+    color: "gray.600",
+    marginTop: 1,
+    fontSize: "xs"
+  }, helperText), /*#__PURE__*/_react.default.createElement(_react2.FormErrorMessage, {
+    color: "error",
+    marginTop: 1,
+    fontSize: "xs"
+  }, errorMessage));
+});
+var _default = exports.default = FormControl;

package/dist/components/RefreshedInput/Input/Input.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _FormControl = _interopRequireDefault(require("../FormControl"));
+var _react2 = require("@chakra-ui/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * A component used in the homepage/midfunnel refresh of 2024
+ * Initially built as purpose built as possible with hopes of extending it to other systems
+ * using `<RefreshedInput/>` will bring in the core of this.  
+ */
+const Input = /*#__PURE__*/(0, _react.forwardRef)(({
+  label,
+  helperText,
+  errorMessage,
+  isInvalid,
+  isDisabled,
+  isRequired,
+  rightElement,
+  leftElement,
+  rightElementStyles,
+  leftElementStyles,
+  ...props
+}, ref) => {
+  const classes = (0, _classnames.default)({
+    'FormElement-contains-error': isInvalid
+  }); //Historic carry over
+
+  return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    errorMessage: errorMessage,
+    helperText: helperText,
+    label: label,
+    id: props.id,
+    rightElement: rightElement,
+    leftElement: leftElement,
+    rightElementStyles: rightElementStyles,
+    leftElementStyles: leftElementStyles,
+    variant: "refreshed"
+  }, /*#__PURE__*/_react.default.createElement(_react2.Input, (0, _extends2.default)({
+    ref: ref,
+    className: classes,
+    variant: "refreshed"
+  }, props)));
+});
+var _default = exports.default = Input;

package/dist/components/RefreshedInput/Input/Input.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InputRefreshed = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _Input = _interopRequireDefault(require("./Input"));
+var _storyAid = require("../storyAid");
+var _default = exports.default = {
+  title: 'v2/RefreshedInputs',
+  component: _Input.default,
+  parameters: {
+    importBy: 'RefreshedInput',
+    removeBaseHtmlClass: true,
+    chakraLink: 'https://chakra-ui.com/docs/components/input'
+  }
+};
+const InputRefreshedTemplate = ({
+  showLeftElement,
+  showRightElement,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, props, {
+  leftElement: showLeftElement && /*#__PURE__*/_react.default.createElement(_storyAid.LeftElement, null),
+  rightElement: showRightElement && /*#__PURE__*/_react.default.createElement(_storyAid.RightElement, null)
+}));
+const InputRefreshed = exports.InputRefreshed = InputRefreshedTemplate.bind({});
+InputRefreshed.argTypes = {
+  placeholder: {
+    control: {
+      type: 'text'
+    }
+  },
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  errorMessage: {
+    control: {
+      type: 'text'
+    }
+  },
+  showLeftElement: {
+    control: {
+      control: 'boolean'
+    }
+  },
+  showRightElement: {
+    control: {
+      control: 'boolean'
+    }
+  }
+};
+InputRefreshed.args = {
+  id: 'input_id',
+  placeholder: 'Placeholder text',
+  label: 'Label',
+  helperText: 'Helper text',
+  errorMessage: 'Error message',
+  isInvalid: false,
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  showLeftElement: false,
+  showRightElement: false
+};

package/dist/components/RefreshedInput/Input/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Input.default;
+  }
+});
+var _Input = _interopRequireDefault(require("./Input"));

package/dist/components/RefreshedInput/Input/styles/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _styles = _interopRequireDefault(require("../../../Input/styles"));
+const variants = {
+  refreshed: {
+    field: {
+      ..._styles.default.variants.outline.field,
+      height: 'auto',
+      paddingTop: 6,
+      paddingBottom: 3
+    }
+  }
+};
+var _default = exports.default = (0, _merge.default)(_styles.default, {
+  variants
+});

package/dist/components/RefreshedInput/Select/Select.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _chevronDown = _interopRequireDefault(require("@spothero/icons/chevron-down"));
+var _Icon = _interopRequireDefault(require("../../Icon/Icon"));
+var _FormControl = _interopRequireDefault(require("../FormControl"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+//For select left is static arrow, 
+/**
+ * A component used in the homepage/midfunnel refresh of 2024
+ * Initially built as purpose built as possible with hopes of extending it to other systems
+ * using `<RefreshedSelect><option value="1"/>/<RefreshedSelect>` will bring in the core of this.  
+ * Left arrow is static for this select.  You can pass a second left element in but it will not over write the down arrow currently
+ */
+const Select = /*#__PURE__*/(0, _react.forwardRef)(({
+  label,
+  helperText,
+  errorMessage,
+  isInvalid,
+  isDisabled,
+  isRequired,
+  isOptional,
+  rightElement,
+  leftElement,
+  rightElementStyles,
+  leftElementStyles,
+  ...props
+}, ref) => {
+  const classes = (0, _classnames.default)({
+    'FormElement-contains-error': isInvalid
+  });
+  return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    errorMessage: errorMessage,
+    helperText: helperText,
+    label: label,
+    inputId: props.id,
+    rightElement: rightElement,
+    leftElement: leftElement,
+    rightElementStyles: rightElementStyles,
+    leftElementStyles: leftElementStyles
+  }, /*#__PURE__*/_react.default.createElement(_react2.Select, (0, _extends2.default)({
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      as: _chevronDown.default
+    }),
+    iconSize: 20,
+    fontWeight: "regular",
+    fontSize: "sm",
+    ref: ref,
+    className: classes,
+    variant: "refreshed"
+  }, props)));
+});
+var _default = exports.default = Select;

package/dist/components/RefreshedInput/Select/Select.stories.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SelectRefreshed = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _storyAid = require("../storyAid");
+var _Select = _interopRequireDefault(require("./Select"));
+var _default = exports.default = {
+  title: 'v2/RefreshedInputs',
+  component: _Select.default,
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+const SelectTemplate = ({
+  showLeftElement,
+  showRightElement,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({}, props, {
+  leftElement: showLeftElement && /*#__PURE__*/_react.default.createElement(_storyAid.LeftElement, null),
+  rightElement: showRightElement && /*#__PURE__*/_react.default.createElement(_storyAid.RightElement, null)
+}), /*#__PURE__*/_react.default.createElement("option", {
+  value: "one"
+}, "One"), /*#__PURE__*/_react.default.createElement("option", {
+  value: "two"
+}, "Two"), /*#__PURE__*/_react.default.createElement("option", {
+  value: "three"
+}, "Three"), /*#__PURE__*/_react.default.createElement("option", {
+  value: "four"
+}, "Four"));
+const SelectRefreshed = exports.SelectRefreshed = SelectTemplate.bind({});
+SelectRefreshed.argTypes = {
+  placeholder: {
+    control: {
+      type: 'text'
+    }
+  },
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  errorMessage: {
+    control: {
+      type: 'text'
+    }
+  },
+  showLeftElement: {
+    control: {
+      control: 'boolean'
+    }
+  },
+  showRightElement: {
+    control: {
+      control: 'boolean'
+    }
+  }
+};
+SelectRefreshed.args = {
+  placeholder: 'Placeholder text',
+  label: 'Label',
+  helperText: 'Helper text',
+  errorMessage: 'Error message',
+  isInvalid: false,
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  isOptional: false,
+  showLeftElement: false,
+  showRightElement: false
+};

package/dist/components/RefreshedInput/Select/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Select.default;
+  }
+});
+var _Select = _interopRequireDefault(require("./Select"));

package/dist/components/RefreshedInput/Select/styles/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+var _styles = _interopRequireDefault(require("../../../Select/styles"));
+const variants = {
+  refreshed: {
+    field: {
+      ..._styles.default.variants.outline.field,
+      height: 'auto',
+      paddingTop: 6,
+      paddingBottom: 3
+    },
+    addon: {
+      ..._styles.default.variants.outline.field
+    }
+  }
+};
+var _default = exports.default = (0, _merge.default)(_theme.default.components.Select, {
+  variants
+});

package/dist/components/RefreshedInput/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RefreshedButtonInput", {
+  enumerable: true,
+  get: function () {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "RefreshedFormControl", {
+  enumerable: true,
+  get: function () {
+    return _FormControl.default;
+  }
+});
+Object.defineProperty(exports, "RefreshedInput", {
+  enumerable: true,
+  get: function () {
+    return _Input.default;
+  }
+});
+Object.defineProperty(exports, "RefreshedSelectInput", {
+  enumerable: true,
+  get: function () {
+    return _Select.default;
+  }
+});
+var _Input = _interopRequireDefault(require("./Input"));
+var _Select = _interopRequireDefault(require("./Select"));
+var _Button = _interopRequireDefault(require("./Button"));
+var _FormControl = _interopRequireDefault(require("./FormControl"));

package/dist/components/RefreshedInput/storyAid/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RightElement = exports.LeftElement = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _icons = require("@spothero/icons");
+const LeftElement = () => /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+  as: _icons.Search
+});
+exports.LeftElement = LeftElement;
+const RightElement = () => /*#__PURE__*/_react.default.createElement(_react2.Icon, {
+  as: _icons.X,
+  height: "18px"
+});
+exports.RightElement = RightElement;

package/dist/components/index.js

@@ -30,6 +30,10 @@ var _exportNames = {
   Progress: true,
   Checkbox: true,
   Input: true,
+  RefreshedFormControl: true,
+  RefreshedInput: true,
+  RefreshedButtonInput: true,
+  RefreshedSelectInput: true,
   SelectionCard: true,
   Divider: true,
   Textarea: true,
@@ -451,6 +455,30 @@ Object.defineProperty(exports, "RadioGroup", {
     return _Radio.RadioGroup;
   }
 });
+Object.defineProperty(exports, "RefreshedButtonInput", {
+  enumerable: true,
+  get: function () {
+    return _RefreshedInput.RefreshedButtonInput;
+  }
+});
+Object.defineProperty(exports, "RefreshedFormControl", {
+  enumerable: true,
+  get: function () {
+    return _RefreshedInput.RefreshedFormControl;
+  }
+});
+Object.defineProperty(exports, "RefreshedInput", {
+  enumerable: true,
+  get: function () {
+    return _RefreshedInput.RefreshedInput;
+  }
+});
+Object.defineProperty(exports, "RefreshedSelectInput", {
+  enumerable: true,
+  get: function () {
+    return _RefreshedInput.RefreshedSelectInput;
+  }
+});
 Object.defineProperty(exports, "ScaleFade", {
   enumerable: true,
   get: function () {
@@ -734,6 +762,7 @@ var _Loader = _interopRequireDefault(require("./Loader/Loader"));
 var _Progress = _interopRequireDefault(require("./Progress/Progress"));
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 var _Input = _interopRequireDefault(require("./Input"));
+var _RefreshedInput = require("./RefreshedInput");
 var _SelectionCard = require("./SelectionCard");
 var _Divider = _interopRequireDefault(require("./Divider/Divider"));
 var _Textarea = _interopRequireDefault(require("./Textarea"));

package/dist/components/styles.js

@@ -13,7 +13,7 @@ Object.defineProperty(exports, "Accordion", {
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
   get: function () {
-    return _styles11.default;
+    return _styles14.default;
   }
 });
 Object.defineProperty(exports, "Button", {
@@ -22,6 +22,12 @@ Object.defineProperty(exports, "Button", {
     return _Button.default;
   }
 });
+Object.defineProperty(exports, "ButtonRefreshed", {
+  enumerable: true,
+  get: function () {
+    return _styles11.default;
+  }
+});
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
@@ -37,7 +43,7 @@ Object.defineProperty(exports, "Divider", {
 Object.defineProperty(exports, "Drawer", {
   enumerable: true,
   get: function () {
-    return _styles12.default;
+    return _styles15.default;
   }
 });
 Object.defineProperty(exports, "GridItem", {
@@ -58,6 +64,12 @@ Object.defineProperty(exports, "Input", {
     return _styles8.default;
   }
 });
+Object.defineProperty(exports, "InputRefreshed", {
+  enumerable: true,
+  get: function () {
+    return _styles9.default;
+  }
+});
 Object.defineProperty(exports, "Link", {
   enumerable: true,
   get: function () {
@@ -79,7 +91,7 @@ Object.defineProperty(exports, "Menu", {
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
-    return _styles9.default;
+    return _styles12.default;
   }
 });
 Object.defineProperty(exports, "Popover", {
@@ -97,7 +109,7 @@ Object.defineProperty(exports, "Progress", {
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () {
-    return _styles10.default;
+    return _styles13.default;
   }
 });
 Object.defineProperty(exports, "Select", {
@@ -106,6 +118,12 @@ Object.defineProperty(exports, "Select", {
     return _styles4.default;
   }
 });
+Object.defineProperty(exports, "SelectRefreshed", {
+  enumerable: true,
+  get: function () {
+    return _styles10.default;
+  }
+});
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
   get: function () {
@@ -158,10 +176,13 @@ var _styles5 = _interopRequireDefault(require("./Checkbox/styles"));
 var _styles6 = _interopRequireDefault(require("./Switch/styles"));
 var _styles7 = _interopRequireDefault(require("./Popover/styles"));
 var _styles8 = _interopRequireDefault(require("./Input/styles"));
-var _styles9 = _interopRequireDefault(require("./Modal/styles"));
-var _styles10 = _interopRequireDefault(require("./Radio/styles"));
+var _styles9 = _interopRequireDefault(require("./RefreshedInput/Input/styles"));
+var _styles10 = _interopRequireDefault(require("./RefreshedInput/Select/styles"));
+var _styles11 = _interopRequireDefault(require("./RefreshedInput/Button/styles"));
+var _styles12 = _interopRequireDefault(require("./Modal/styles"));
+var _styles13 = _interopRequireDefault(require("./Radio/styles"));
 var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
-var _styles11 = _interopRequireDefault(require("./Badge/styles"));
-var _styles12 = _interopRequireDefault(require("./Drawer/styles"));
+var _styles14 = _interopRequireDefault(require("./Badge/styles"));
+var _styles15 = _interopRequireDefault(require("./Drawer/styles"));
 var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));
 var _Menu = _interopRequireDefault(require("./Menu/Menu.styles"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "22.0.3",
+  "version": "22.0.4",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -97,10 +97,10 @@
     "@spothero/babel-preset-spothero": "5.1.0",
     "@spothero/browserslist-config": "4.0.0",
     "@spothero/core": "7.0.1",
-    "@spothero/icons": "9.0.0",
     "@spothero/eslint-config": "6.1.0",
     "@spothero/npm-publisher": "7.0.0",
     "@spothero/prettier-config": "4.0.0",
+    "@spothero/icons": "9.0.0",
     "@spothero/stylelint-config": "6.0.0"
   },
   "dependencies": {