@jobber/components 7.10.0 → 7.11.0

package/dist/styles.css

@@ -3865,6 +3865,505 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   line-height: 0;
 }
 
+._6HZLFIOZh4s- {
+  width: 100%;
+}
+
+._-6ndFYNKKaM- {
+  display: inline-block;
+  width: auto;
+}
+
+.c20czk-FSyY- {
+  --field--placeholder-color: var(--color-base-blue--600);
+  --field--value-color: var(--color-heading);
+  --field--border-color: var(--color-border--interactive);
+
+  --field--placeholder-offset: 50%;
+  --field--placeholder-transform: -50%;
+
+  --field--textAlign: left;
+
+  --field--height: var(--space-largest);
+
+  --field--padding-top: calc(var(--space-base) - var(--space-smallest));
+  --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));
+  --field--padding-left: var(--space-base);
+  --field--padding-right: var(--space-base);
+
+  --field--value-lineHeight: calc(var(--base-unit) * 1.25);
+
+  --field--background-color: var(--color-surface);
+
+  --field--base-elevation: var(--elevation-base);
+  --field--label-elevation: calc(var(--field--base-elevation) + 1);
+
+  --stepper--width: calc(var(--space-base) + var(--space-smaller));
+
+  display: -ms-flexbox;
+
+  display: flex;
+  position: relative;
+  -ms-flex-direction: row;
+      flex-direction: row;
+  -ms-flex-align: stretch;
+      align-items: stretch;
+  width: 100%;
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--field--border-color);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  /* Read radius vars via fallback so InputGroup's parent-level overrides
+   * still flatten inner corners; declaring them on `.wrapper` would
+   * shadow the inherited value. */
+  border-top-right-radius: 8px;
+  border-top-right-radius: var(
+    --public-field--top-right-radius,
+    var(--radius-base)
+  );
+  border-bottom-right-radius: 8px;
+  border-bottom-right-radius: var(
+    --public-field--bottom-right-radius,
+    var(--radius-base)
+  );
+  border-bottom-left-radius: 8px;
+  border-bottom-left-radius: var(
+    --public-field--bottom-left-radius,
+    var(--radius-base)
+  );
+  border-top-left-radius: 8px;
+  border-top-left-radius: var(
+    --public-field--top-left-radius,
+    var(--radius-base)
+  );
+  color: hsl(197, 90%, 12%);
+  color: var(--field--value-color);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--field--background-color);
+}
+
+.c20czk-FSyY- * {
+  box-sizing: border-box;
+}
+
+._-6ndFYNKKaM- .c20czk-FSyY- {
+  width: auto;
+}
+
+.c20czk-FSyY-:focus-within {
+  z-index: var(--field--base-elevation);
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+}
+
+/**
+ * Base UI's `Field.Root` sets `data-invalid` on the outer container when the
+ * field's invalid state is true. We read that attribute instead of toggling
+ * a local `.invalid` class so Base UI is the single source of truth.
+ */
+
+._6HZLFIOZh4s-[data-invalid] .c20czk-FSyY-,
+._6HZLFIOZh4s-[data-invalid] .c20czk-FSyY-:focus-within {
+  --field--border-color: var(--color-critical);
+}
+
+._-2INirAxaU4- {
+  --field--placeholder-color: var(--color-disabled);
+  --field--value-color: var(--color-disabled);
+  --field--background-color: var(--color-disabled--secondary);
+  --field--border-color: var(--color-border);
+}
+
+._-2INirAxaU4- :disabled {
+  -webkit-text-fill-color: var(--field--value-color);
+  opacity: 1;
+}
+
+.NsFBA5oqRAA- {
+  --field--padding-left: calc(var(--space-base) - var(--space-smaller));
+  --field--padding-right: calc(var(--space-base) - var(--space-smaller));
+  --field--padding-top: var(--space-small);
+  --field--padding-bottom: var(--space-small);
+  --field--height: calc(var(--space-larger) + var(--space-smaller));
+}
+
+.ExKqck-6xVs- {
+  --field--padding-left: var(--space-large);
+  --field--padding-right: var(--space-large);
+  --field--height: calc(var(--space-extravagant));
+}
+
+.UWiqNi57G8g- {
+  --field--textAlign: center;
+}
+
+.po25PZwJpe4- {
+  --field--textAlign: right;
+}
+
+.k9dAO6d010o- {
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  z-index: 0;
+  z-index: var(--elevation-default);
+  height: var(--field--height);
+  -ms-flex: 1;
+      flex: 1;
+}
+
+.D-PmE-l-hZU- {
+  position: relative;
+  z-index: var(--field--base-elevation);
+  width: 100%;
+  padding-top: var(--field--padding-top);
+  padding-bottom: var(--field--padding-bottom);
+  padding-left: var(--field--padding-left);
+  padding-right: var(--field--padding-right);
+  border: none;
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: var(--field--value-lineHeight);
+  text-align: var(--field--textAlign);
+  background: transparent;
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.D-PmE-l-hZU-:focus {
+  outline: none;
+}
+
+/**
+ * When the stepper is rendered as an in-flow flex sibling (default mode), it
+ * provides visual separation from the typed value. Tighten the input's
+ * own right padding so narrow consumers (~100px wrappers with a suffix) keep
+ * enough room for multi-digit values to display.
+ */
+
+.k9dAO6d010o-:has(> .t42w4ZDiDyI-) .D-PmE-l-hZU- {
+  padding-right: 2px;
+  padding-right: var(--space-smallest);
+}
+
+.Ggk3aaMcIJU- {
+  position: absolute;
+  top: var(--field--placeholder-offset);
+  left: 0;
+  z-index: var(--field--label-elevation);
+  width: 100%;
+  padding-left: var(--field--padding-left);
+  padding-right: var(--field--padding-right);
+  overflow: hidden;
+  color: var(--field--placeholder-color);
+  line-height: var(--field--value-lineHeight);
+  text-align: var(--field--textAlign);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  -webkit-transform: translateY(var(--field--placeholder-transform));
+          transform: translateY(var(--field--placeholder-transform));
+}
+
+.k9dAO6d010o-:not(.C7d6qmoZiKU-) .Ggk3aaMcIJU- {
+  transition: all 100ms;
+  transition: all var(--timing-quick);
+}
+
+/**
+ * Value-present mini-label state: when the input has a value (or focus),
+ * shrink and pin the placeholder label to the top-left and grow the input's
+ * vertical padding to make room.
+ *
+ * The variables are hoisted to `.wrapper` (not `.inputWrapper`) so that
+ * affix labels — which are flex siblings of `.inputWrapper` inside `.wrapper`
+ * in the default render — also inherit the new padding values and stay
+ * vertically aligned with the typed value.
+ */
+
+.c20czk-FSyY-:has(
+    .k9dAO6d010o-:not(.NsFBA5oqRAA-):not(.C7d6qmoZiKU-)
+      .D-PmE-l-hZU-:not(:-ms-input-placeholder)
+      + .Ggk3aaMcIJU-:not(:empty)
+  ) {
+  --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);
+}
+
+.wrapper:has(
+    .inputWrapper:not(.small, .hideLabel)
+      .input:not(:-ms-input-placeholder)
+      + .label:not(:empty)
+  ) {
+  --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);
+}
+
+.c20czk-FSyY-:has(
+    .k9dAO6d010o-:not(.NsFBA5oqRAA-):not(.C7d6qmoZiKU-)
+      .D-PmE-l-hZU-:not(:placeholder-shown)
+      + .Ggk3aaMcIJU-:not(:empty)
+  ) {
+  --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);
+}
+
+.k9dAO6d010o-._-2INirAxaU4- label {
+  --field--placeholder-color: var(--color-text-disabled);
+}
+
+.D-PmE-l-hZU-:not(:-ms-input-placeholder) + .Ggk3aaMcIJU-:not(:empty) {
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+}
+
+.input:not(:-ms-input-placeholder) + .label:not(:empty) {
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+}
+
+.D-PmE-l-hZU-:not(:placeholder-shown) + .Ggk3aaMcIJU-:not(:empty) {
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+}
+
+.C7d6qmoZiKU- .D-PmE-l-hZU-:not(:-ms-input-placeholder) + .Ggk3aaMcIJU-:not(:empty) {
+  visibility: hidden;
+}
+
+.hideLabel .input:not(:-ms-input-placeholder) + .label:not(:empty) {
+  visibility: hidden;
+}
+
+.C7d6qmoZiKU- .D-PmE-l-hZU-:not(:placeholder-shown) + .Ggk3aaMcIJU-:not(:empty) {
+  visibility: hidden;
+}
+
+.k9dAO6d010o-.NsFBA5oqRAA- .D-PmE-l-hZU-:not(:-ms-input-placeholder) + .Ggk3aaMcIJU-:not(:empty) {
+  display: none;
+}
+
+.inputWrapper.small .input:not(:-ms-input-placeholder) + .label:not(:empty) {
+  display: none;
+}
+
+.k9dAO6d010o-.NsFBA5oqRAA- .D-PmE-l-hZU-:not(:placeholder-shown) + .Ggk3aaMcIJU-:not(:empty) {
+  display: none;
+}
+
+/**
+ * Affix labels render as flex siblings of `.inputWrapper` inside `.wrapper`.
+ * The .prefix and .suffix modifiers carry variant-specific spacing so the
+ * label sits visually flush against the typed value (mirroring V1 visuals).
+ */
+
+._4u1JHjUYvkY- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  padding-top: var(--field--padding-top);
+  padding-bottom: var(--field--padding-bottom);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  line-height: var(--field--value-lineHeight);
+  white-space: nowrap;
+}
+
+/**
+ * Prefix label: negative right margin absorbs the input's left padding so the
+ * label sits flush against the typed value.
+ */
+
+._4u1JHjUYvkY-.rEWH41rUUEE- {
+  margin: 0 calc((var(--field--padding-left) - 2px) * -1) 0 0;
+  margin: 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1) 0 0;
+  padding-left: var(--field--padding-left);
+}
+
+/**
+ * Suffix label: no negative left margin (the stepper sits between the input
+ * value and this label, so we don't want to pull the label across it).
+ */
+
+._4u1JHjUYvkY-._4-iNl6jdfmM- {
+  padding-right: var(--field--padding-left);
+}
+
+/**
+ * Outer affix icon: rendered as a flex sibling of .inputWrapper inside the
+ * field group. The prefix variant uses a negative right margin to abut the
+ * input's left padding (V1 pattern); the suffix variant does NOT, because the
+ * stepper now sits between the input wrapper and the suffix icon, and a
+ * negative margin would pull the icon over the stepper.
+ */
+
+._5-Iw-2c-wXk- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  margin: 0 calc(var(--field--padding-left) * -1) 0 0;
+  padding: 0 var(--field--padding-right) 0 var(--field--padding-left);
+}
+
+._5-Iw-2c-wXk-._4-iNl6jdfmM- {
+  margin: 0;
+  padding: 0 var(--field--padding-right) 0 8px;
+  padding: 0 var(--field--padding-right) 0 var(--space-small);
+}
+
+/**
+ * Compound `<.Affix>`: a single flex sibling of .inputWrapper that bundles
+ * icon and/or label inline. Visually slightly less integrated than the default
+ * (split) layout but lets users compose freely.
+ */
+
+.tZjZRRcAShY- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: 4px;
+  gap: var(--space-smaller);
+  padding: 0 16px;
+  padding: 0 var(--space-base);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  white-space: nowrap;
+}
+
+.mbEcqyBQoEg- {
+  line-height: var(--field--value-lineHeight);
+}
+
+.t42w4ZDiDyI- {
+  display: -ms-flexbox;
+  display: flex;
+  z-index: calc(var(--field--base-elevation) + 1);
+  width: var(--stepper--width);
+  opacity: 0;
+  transition: opacity 100ms;
+  transition: opacity var(--timing-quick);
+  -ms-flex-direction: column;
+      flex-direction: column;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+
+/* Default mode: stepper lives inside .inputWrapper. Reveal on local hover/focus. */
+
+.k9dAO6d010o-:hover .t42w4ZDiDyI-,
+.k9dAO6d010o-:focus-within .t42w4ZDiDyI- {
+  opacity: 1;
+}
+
+/**
+ * Compound mode: the consumer composes <.Stepper> as a direct child of
+ * NumberField.Group (.wrapper). Reveal on the wider group hover/focus there.
+ * The `>` direct-child selector ensures this only matches the compound case;
+ * default-mode steppers are nested deeper inside .inputWrapper.
+ */
+
+.c20czk-FSyY-:hover > .t42w4ZDiDyI-,
+.c20czk-FSyY-:focus-within > .t42w4ZDiDyI- {
+  opacity: 1;
+}
+
+.zzrCzYF-8u0- {
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  border: none;
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 8px;
+  line-height: 1;
+  background: transparent;
+  cursor: pointer;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex: 1;
+      flex: 1;
+}
+
+.zzrCzYF-8u0-:hover {
+  color: hsl(197, 90%, 12%);
+  color: var(--color-heading);
+  background: hsl(43, 18%, 92%);
+  background: var(--color-surface--hover);
+}
+
+.zzrCzYF-8u0-:focus-visible {
+  outline: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  outline: var(--shadow-focus);
+  outline-offset: -2px;
+}
+
+.zzrCzYF-8u0-:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+._0mcAZAtwQ2o- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+
+/**
+ * `Field.Description` renders a `<p>`, which inherits the user-agent
+ * `margin-block` defaults. Reset margins so spacing comes only from our token.
+ */
+
+.xxp2uGc-B6o- {
+  margin: 4px 0 0 0;
+  margin: var(--space-smaller) 0 0 0;
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+}
+
+.q-WsOi6joGo- {
+  -ms-flex-align: center;
+      align-items: center;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 4px;
+  gap: var(--space-smaller);
+  padding: 4px;
+  padding: var(--space-smaller);
+  padding-left: 0;
+  color: hsl(6, 64%, 51%);
+  color: var(--color-critical);
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+}
+
 .kub1yKbFFN0- {
   display: -ms-flexbox;
   display: flex;