@spothero/ui 22.2.0 → 22.3.0

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

@@ -15,7 +15,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /**
  * 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.  
+ * 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
  */
@@ -54,9 +54,15 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)(({
     ref: ref,
     className: classes,
     variant: "refreshed",
-    "data-value": buttonValue
+    "data-value": buttonValue,
+    paddingBottom: "2"
   }, props, {
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    sx: {
+      '&.FormElement-contains-error': {
+        paddingTop: 2
+      }
+    }
   }), buttonValue));
 });
 var _default = exports.default = Button;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Button", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
     return _Button.default;

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

@@ -15,13 +15,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const labelStyle = {
   color: 'gray.600',
   fontWeight: 'normal',
-  top: 3,
+  top: 2,
   left: 0,
   position: 'absolute',
   pointerEvents: 'none',
   padding: 'inherit',
-  marginX: 3,
-  paddingX: 1,
+  paddingLeft: 3,
   marginY: 2,
   transformOrigin: 'left top',
   // below is from chakra v2 that I'm pulling in
@@ -29,9 +28,8 @@ const labelStyle = {
   transitionDuration: '200ms'
 };
 const activeLabelStyles = {
-  transform: 'scale(0.85) translateY(-16px)',
+  transform: 'scale(0.85) translateY(-.75rem) translateX(.2rem)',
   _invalid: {
-    transform: 'scale(1) translateY(0)',
     '& .chakra-form__required-indicator': {
       display: 'none'
     }
@@ -50,9 +48,23 @@ const controlStyles = {
         opacity: 0
       },
       _invalid: {
+        '&:focus': {
+          borderBottomRadius: 0,
+          borderColor: 'primary.default'
+        },
+        '&:focus + label': {
+          color: 'gray.600'
+        },
+        '& + label': {
+          color: 'error',
+          transform: 'scale(0.85) translateY(-16px)'
+        },
         '& + label .chakra-form__required-indicator': {
           //Styling for asterisk always to be red if invalid
           color: 'error'
+        },
+        '&::placeholder': {
+          opacity: 1
         }
       }
     },
@@ -66,7 +78,7 @@ const controlStyles = {
       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,
+      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 button': {
@@ -74,18 +86,26 @@ const controlStyles = {
       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
+      // transform: 'scale(0.85) translateY(-1rem) translateX(.5rem)',
+      paddingLeft: '2.75rem'
     },
     // Styling for select
     '.chakra-select__wrapper + label': {
       ...activeLabelStyles,
-      transform: 'scale(0.85) translateY(-16px) translateX(-2px)' //X added to help align
+      transform: 'scale(0.85) translateY(-.75rem) translateX(.25rem)'
     },
     'button[data-value] + label': {
       ...activeLabelStyles
     },
     '.FormElement-contains-error': {
       borderColor: 'error'
+    },
+    '.chakra-button + label': {
+      display: 'flex',
+      alignItems: 'center',
+      height: '100%',
+      top: 0,
+      margin: 0
     }
   },
   _focusWithin: {
@@ -122,7 +142,7 @@ const FormControl = /*#__PURE__*/(0, _react.forwardRef)(({
   }, 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",
+    left: "1.3rem",
     transform: "translate(-50%,-50%)"
   }, leftElementStyles), leftElement), /*#__PURE__*/_react.default.createElement(_react2.Box, {
     as: "span",

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

@@ -15,7 +15,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /**
  * 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.  
+ * using `<RefreshedInput/>` will bring in the core of this.
  */
 const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   label,
@@ -28,6 +28,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   leftElement,
   rightElementStyles,
   leftElementStyles,
+  placeholder = '',
   ...props
 }, ref) => {
   const classes = (0, _classnames.default)({
@@ -48,8 +49,12 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     leftElementStyles: leftElementStyles,
     variant: "refreshed"
   }, /*#__PURE__*/_react.default.createElement(_react2.Input, (0, _extends2.default)({
+    placeholder: placeholder,
     ref: ref,
     className: classes,
+    paddingTop: 'var(--chakra-sizes-5-5)' // Design requires 5.5
+    ,
+    paddingBottom: "2",
     variant: "refreshed"
   }, props)));
 });

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

@@ -7,13 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _merge = _interopRequireDefault(require("lodash/merge"));
 var _styles = _interopRequireDefault(require("../../../Input/styles"));
+//Below isn't being used in build for some reason
 const variants = {
   refreshed: {
     field: {
       ..._styles.default.variants.outline.field,
       height: 'auto',
-      paddingTop: 6,
-      paddingBottom: 3
+      paddingTop: 8,
+      paddingBottom: 2
     }
   }
 };

package/dist/components/index.js

@@ -96,6 +96,7 @@ var _exportNames = {
   useControllableProp: true,
   BasicInput: true,
   useControllableState: true,
+  usePopper: true,
   usePrefersReducedMotion: true,
   keyframes: true,
   BoxProps: true,
@@ -641,6 +642,12 @@ Object.defineProperty(exports, "useMediaQuery", {
     return _react.useMediaQuery;
   }
 });
+Object.defineProperty(exports, "usePopper", {
+  enumerable: true,
+  get: function () {
+    return _react.usePopper;
+  }
+});
 Object.defineProperty(exports, "usePrefersReducedMotion", {
   enumerable: true,
   get: function () {

package/dist/theme/base/sizes.js

@@ -32,6 +32,8 @@ const sizes = {
   // 16px
   5: '1.25rem',
   // 20px
+  5.5: '1.375rem',
+  // 22px
   6: '1.5rem',
   // 24px
   7: '1.75rem',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "22.2.0",
+  "version": "22.3.0",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -94,11 +94,11 @@
     "webpack-merge": "5.1.4",
     "css-loader": "5.1.3",
     "sass-loader": "10.2.1",
+    "@spothero/browserslist-config": "4.0.0",
     "@spothero/babel-preset-spothero": "5.1.0",
     "@spothero/core": "7.0.1",
     "@spothero/eslint-config": "6.1.0",
     "@spothero/icons": "9.0.1",
-    "@spothero/browserslist-config": "4.0.0",
     "@spothero/npm-publisher": "7.0.0",
     "@spothero/stylelint-config": "6.0.0",
     "@spothero/prettier-config": "4.0.0"