@jobber/components 6.106.2 → 6.106.4-CLEANUPre-396e26e.1

package/dist/InputDate/index.cjs

@@ -158,7 +158,7 @@ const InputDateRebuilt = React.forwardRef((props, forwardedRef) => {
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React.createElement("div", { onClick: onClick },
-            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);

package/dist/InputDate/index.mjs

@@ -156,7 +156,7 @@ const InputDateRebuilt = forwardRef((props, forwardedRef) => {
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React__default.createElement("div", { onClick: onClick },
-            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);

package/dist/styles.css

@@ -939,6 +939,22 @@
   -webkit-text-fill-color: var(--field--value-color);
 }
 
+/* Apply miniLabel styles when input has autofill (CSS-only solution) */
+
+/* Supports both -webkit-autofill (Chrome/Safari) and :autofill (Firefox) */
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill):not(._0pmqVa2zSE4-) {
+  --field--placeholder-color: var(--color-text--secondary);
+  --field--placeholder-offset: var(--space-smallest);
+  --field--placeholder-transform: 0;
+  --field--padding-top: calc(var(--space-base) + var(--space-smaller));
+  --field--padding-bottom: var(--space-small);
+}
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill)._9tjyT9QUtP8-:not(._0pmqVa2zSE4-) {
+  --field--padding-top: calc(var(--space-large) + var(--space-smaller));
+}
+
 .hGr6YW4AeLM-:not(:has(.Dgk00tzlODA-)) .vtSDcuzNr9Q- {
     padding-top: var(--field--padding-top);
   }
@@ -1026,6 +1042,28 @@
   font-size: var(--typography--fontSize-small);
 }
 
+/* Apply miniLabel label styles when input has autofill */
+
+/* Supports both -webkit-autofill (Chrome/Safari) and :autofill (Firefox) */
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill) .Dgk00tzlODA- {
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+}
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill).Sw5O4I0lMJg- .Dgk00tzlODA- {
+  display: none;
+}
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill).QmMiyoAWp-g- .Dgk00tzlODA- {
+  padding-top: 2px;
+  padding-top: var(--space-smallest);
+}
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill).hGr6YW4AeLM- .Dgk00tzlODA- {
+  background-color: var(--field--background-color);
+}
+
 ._0pmqVa2zSE4-.Sw5O4I0lMJg-.F1t76G6bDKo-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
   display: none;
 }
@@ -1099,6 +1137,15 @@
   padding-bottom: var(--field--padding-bottom);
 }
 
+/* Apply affix label styles when input has autofill */
+
+/* Supports both -webkit-autofill (Chrome/Safari) and :autofill (Firefox) */
+
+._8lhbGTQ-hhg-:has(.vtSDcuzNr9Q-:-webkit-autofill):not(.Sw5O4I0lMJg-) .-Wzcb0pBh5I- {
+  padding-top: var(--field--padding-top);
+  padding-bottom: var(--field--padding-bottom);
+}
+
 .DHX5ijY3xIw- {
   margin-top: 4px;
   margin-top: var(--space-smaller);
@@ -6672,7 +6719,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   padding: var(--space-small) var(--space-base);
 }
 
-@charset "UTF-8";
  {
   /* sr-only utility class for accessibility */
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.106.2",
+  "version": "6.106.4-CLEANUPre-396e26e.1+396e26e23",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "574461e3ae58ac360f42cc04994a9b4a12ec588f"
+  "gitHead": "396e26e232b4b137526f428f34094f6b0eaf2c65"
 }

package/rollup.config.mjs

@@ -21,6 +21,23 @@ import nodePolyfills from "rollup-plugin-polyfill-node";
  */
 const PREBUILD_CSS = process.env.PREBUILD_CSS === "true";
 
+/**
+ * PostCSS plugin to remove @charset declarations.
+ *
+ * The @charset rule (from react-datepicker) ends up in the middle of
+ * the bundled CSS when imported via postcss-import. Since @charset must be
+ * the first line of a CSS file to be valid, and it's unnecessary for
+ * HTTP-served content (Content-Type header takes precedence), we remove it.
+ */
+const removeCharset = {
+  postcssPlugin: "remove-charset",
+  AtRule: {
+    charset: atRule => {
+      atRule.remove();
+    },
+  },
+};
+
 export default {
   input: PREBUILD_CSS ? "src/index.ts" : `src/**/index.{ts,tsx}`,
   plugins: [
@@ -42,6 +59,7 @@ export default {
       autoModules: false,
       plugins: [
         postcssimport,
+        removeCharset,
         autoprefixer,
         tools({
           files: ["../design/dist/foundation.css"],