@jobber/components 6.112.2 → 6.113.0

package/dist/styles.css

@@ -46,6 +46,7 @@
   padding: 8px;
   padding: var(--space-small);
   border: none;
+  outline: none;
   background-color: transparent;
   cursor: pointer;
 }
@@ -85,6 +86,7 @@
   box-sizing: border-box;
   padding: 8px;
   padding: var(--space-small);
+  outline: none;
   cursor: pointer;
 }
 
@@ -137,6 +139,139 @@
   cursor: default;
 }
 
+/* Multiple mode: FormFieldWrapper-based container */
+
+.AWoK6-P8fFE- [data-testid="Form-Field-Wrapper"] > div:first-child {
+  height: auto;
+  min-height: var(--field--height);
+}
+
+.zJm0oR5x4qY- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-line-pack: start;
+      align-content: flex-start;
+  gap: 4px;
+  gap: var(--space-smaller);
+  padding: var(--field--padding-top) var(--field--padding-right)
+    var(--field--padding-bottom) var(--field--padding-left);
+  cursor: text;
+}
+
+.Oa26ZaVEi3g- {
+  min-width: 80px;
+  padding: 0;
+  border: none;
+  outline: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: var(--field--value-lineHeight);
+  background: transparent;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+}
+
+.Oa26ZaVEi3g-:focus {
+  outline: none;
+}
+
+.Oa26ZaVEi3g-:disabled {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.IarOrfyYExE- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding: 2px 8px;
+  padding: var(--space-smallest) var(--space-small);
+  border-radius: 16px;
+  border-radius: var(--radius-large);
+  outline: none;
+  overflow: hidden;
+  color: hsl(197, 90%, 12%);
+  color: var(--color-heading);
+  background-color: hsl(51, 17%, 85%);
+  background-color: var(--color-interactive--background);
+  cursor: default;
+  transition: 200ms;
+  transition: var(--timing-base);
+  -ms-flex-align: center;
+      align-items: center;
+  gap: 8px;
+  gap: var(--space-small);
+}
+
+.pmtAk9HEhF4- {
+  background-color: hsl(49, 7%, 70%);
+  background-color: var(--color-interactive--background--hover);
+}
+
+.nmXqlAV-DJo- {
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border);
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  background-color: hsl(0, 0%, 93%);
+  background-color: var(--color-disabled--secondary);
+  cursor: default;
+}
+
+.SmrmwoOlZDo- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+  z-index: 0;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.SmrmwoOlZDo-::before {
+  content: "";
+  position: absolute;
+  top: calc(-1 * 24px);
+  top: calc(-1 * var(--space-large));
+  right: calc(-1 * 8px);
+  right: calc(-1 * var(--space-small));
+  bottom: calc(-1 * 24px);
+  bottom: calc(-1 * var(--space-large));
+  left: calc(-1 * 4px);
+  left: calc(-1 * var(--space-smaller));
+  z-index: -1;
+}
+
+.SmrmwoOlZDo-:hover::before {
+  background-color: hsl(49, 7%, 70%);
+  background-color: var(--color-interactive--background--hover);
+}
+
+.pqwAJ8VczCU- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  padding: 2px 8px;
+  padding: var(--space-smallest) var(--space-small);
+  color: hsl(197, 15%, 43%);
+  color: var(--color-text--secondary);
+  cursor: default;
+  transition: all 200ms;
+  transition: all var(--timing-base);
+}
+
 .j4h-0Mxa5gk- {
   margin: 0;
   padding: 0;
@@ -624,25 +759,254 @@
   text-align: center;
 }
 
-.oOJPwUQFllQ- {
-  text-align: right;
+.oOJPwUQFllQ- {
+  text-align: right;
+}
+
+.V9SSKxs15xE- {
+  font-family: Inter, Helvetica, Arial, sans-serif;
+  font-family: var(--typography--fontFamily-normal);
+}
+
+.dvw7zxC9s9g- {
+  font-family: Jobber Pro, Poppins, Helvetica, Arial, sans-serif;
+  font-family: var(--typography--fontFamily-display);
+}
+
+.qp8E5e4q-so- {
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  text-underline-offset: var(--space-smaller);
+}
+
+.-lyJkOGbceo- {
+  --glimmer-background: var(--color-surface--reverse);
+  --glimmer-background-opacity: 7.5%;
+  --glimmer-shine-opacity: 75%;
+  --glimmer-shine: rgba(var(--color-white--rgb), var(--glimmer-shine-opacity));
+  --duration-base: calc(var(--timing-slowest) * 4); /* 2s */
+  --duration-fast: calc(var(--duration-base) / 2); /* 1s */
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  overflow: hidden;
+}
+
+.-lyJkOGbceo-::before,
+.-lyJkOGbceo-::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.-lyJkOGbceo-::before {
+  background-color: var(--glimmer-background);
+  opacity: var(--glimmer-background-opacity);
+}
+
+.-lyJkOGbceo-::after {
+  background-image: linear-gradient(
+    90deg,
+    transparent 0px,
+    var(--glimmer-shine) 32px,
+    transparent 64px
+  );
+  background-image: linear-gradient(
+    90deg,
+    transparent 0px,
+    var(--glimmer-shine) var(--space-larger),
+    transparent var(--space-extravagant)
+  );
+  background-repeat: no-repeat;
+  background-size: 64px 100%;
+  background-size: var(--space-extravagant) 100%;
+  -webkit-animation: -lyJkOGbceo- 2s infinite linear;
+          animation: -lyJkOGbceo- 2s infinite linear;
+}
+
+[data-theme="dark"] .-lyJkOGbceo-,
+.NH-8hViLjFA- {
+  --glimmer-shine-opacity: 20%;
+}
+
+.NH-8hViLjFA- {
+  --glimmer-background: var(--color-surface);
+}
+
+[data-theme="dark"] .NH-8hViLjFA- {
+  --glimmer-shine-opacity: 75%;
+  --glimmer-background-opacity: 7.5%;
+}
+
+@-webkit-keyframes -lyJkOGbceo- {
+  0%,
+  20% {
+    background-position-x: calc(64px * -1);
+    background-position-x: calc(var(--space-extravagant) * -1);
+  }
+
+  100% {
+    background-position-x: calc(100% + 64px);
+    background-position-x: calc(100% + var(--space-extravagant));
+  }
+}
+
+@keyframes -lyJkOGbceo- {
+  0%,
+  20% {
+    background-position-x: calc(64px * -1);
+    background-position-x: calc(var(--space-extravagant) * -1);
+  }
+
+  100% {
+    background-position-x: calc(100% + 64px);
+    background-position-x: calc(100% + var(--space-extravagant));
+  }
+}
+
+._6-ozsHDHcVI- {
+  width: 30%;
+  max-width: 180px;
+  min-width: 120px;
+}
+
+._7AvaYGpXkLU- {
+  display: inline-block;
+  width: 100px;
+  height: 36px;
+}
+
+.sm9yBV3e4Qg- {
+  display: block;
+  width: 100%;
+  min-width: 100px;
+}
+
+.bjemHBSLuQ0- {
+  height: 8px;
+  height: var(--space-small);
+}
+
+.MXFqgzJq5jw- {
+  height: 16px;
+  height: var(--space-base);
+}
+
+.B2DzIy8pibk- {
+  height: 24px;
+  height: var(--space-large);
+}
+
+.-ll1bKXJm9s- {
+  height: 32px;
+  height: var(--space-larger);
+}
+
+.jieKjQ6-Scs- {
+  height: 48px;
+  height: var(--space-largest);
+}
+
+._8qp0RoxJfHE- {
+  height: 100%;
+  min-width: 16px;
+  min-width: var(--space-base);
+  min-height: 16px;
+  min-height: var(--space-base);
+}
+
+.vAVS-6e-jJo- {
+  width: 100%;
+}
+
+.tZgae6SZ8WA- {
+  width: 85%;
+}
+
+.ec-sGgENoOw- {
+  width: 70%;
+}
+
+.ONvR3LocsA4-,
+.j-gTsb6UsQs- {
+  width: auto;
+  aspect-ratio: 1;
+}
+
+.j-gTsb6UsQs- {
+  border-radius: 100%;
+  border-radius: var(--radius-circle);
+}
+
+._6dlpcG-oxT4- {
+  -webkit-animation-duration: var(--duration-base);
+          animation-duration: var(--duration-base);
+}
+
+.NlRB1Xq-sFE- {
+  -webkit-animation-duration: calc(var(--duration-fast));
+          animation-duration: calc(var(--duration-fast));
+}
+
+.B1cBkstNQhM- > :not(:last-child) {
+  margin-bottom: 1px;
+  margin-bottom: var(--space-minuscule);
+}
+
+.rjAxJwaso0s- > :not(:last-child) {
+  margin-bottom: 2px;
+  margin-bottom: var(--space-smallest);
+}
+
+.Chezd5Sqtmk- > :not(:last-child) {
+  margin-bottom: 4px;
+  margin-bottom: var(--space-smaller);
+}
+
+.hzVGRy-KUeY- > :not(:last-child) {
+  margin-bottom: 8px;
+  margin-bottom: var(--space-small);
+}
+
+.B67dzZpuwr4- > :not(:last-child) {
+  margin-bottom: 12px;
+  margin-bottom: var(--space-slim);
+}
+
+.XFi-EWH3Rc0- > :not(:last-child) {
+  margin-bottom: 16px;
+  margin-bottom: var(--space-base);
+}
+
+.JTt98vS-CLk- > :not(:last-child) {
+  margin-bottom: 24px;
+  margin-bottom: var(--space-large);
+}
+
+.-h5Dm7qvnss- > :not(:last-child) {
+  margin-bottom: 32px;
+  margin-bottom: var(--space-larger);
 }
 
-.V9SSKxs15xE- {
-  font-family: Inter, Helvetica, Arial, sans-serif;
-  font-family: var(--typography--fontFamily-normal);
+.K7DP0lB9veI- > :not(:last-child) {
+  margin-bottom: 48px;
+  margin-bottom: var(--space-largest);
 }
 
-.dvw7zxC9s9g- {
-  font-family: Jobber Pro, Poppins, Helvetica, Arial, sans-serif;
-  font-family: var(--typography--fontFamily-display);
+.d8bHHzbOHk4- > :not(:last-child) {
+  margin-bottom: 64px;
+  margin-bottom: var(--space-extravagant);
 }
 
-.qp8E5e4q-so- {
-  text-decoration-line: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 4px;
-  text-underline-offset: var(--space-smaller);
+.cftWh-00zXM- {
+  padding: 0;
+  padding: var(--public-content--padding, 0);
 }
 
 :root {
@@ -1651,235 +2015,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   vertical-align: middle;
 }
 
-.-lyJkOGbceo- {
-  --glimmer-background: var(--color-surface--reverse);
-  --glimmer-background-opacity: 7.5%;
-  --glimmer-shine-opacity: 75%;
-  --glimmer-shine: rgba(var(--color-white--rgb), var(--glimmer-shine-opacity));
-  --duration-base: calc(var(--timing-slowest) * 4); /* 2s */
-  --duration-fast: calc(var(--duration-base) / 2); /* 1s */
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  border-radius: var(--radius-base);
-  overflow: hidden;
-}
-
-.-lyJkOGbceo-::before,
-.-lyJkOGbceo-::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.-lyJkOGbceo-::before {
-  background-color: var(--glimmer-background);
-  opacity: var(--glimmer-background-opacity);
-}
-
-.-lyJkOGbceo-::after {
-  background-image: linear-gradient(
-    90deg,
-    transparent 0px,
-    var(--glimmer-shine) 32px,
-    transparent 64px
-  );
-  background-image: linear-gradient(
-    90deg,
-    transparent 0px,
-    var(--glimmer-shine) var(--space-larger),
-    transparent var(--space-extravagant)
-  );
-  background-repeat: no-repeat;
-  background-size: 64px 100%;
-  background-size: var(--space-extravagant) 100%;
-  -webkit-animation: -lyJkOGbceo- 2s infinite linear;
-          animation: -lyJkOGbceo- 2s infinite linear;
-}
-
-[data-theme="dark"] .-lyJkOGbceo-,
-.NH-8hViLjFA- {
-  --glimmer-shine-opacity: 20%;
-}
-
-.NH-8hViLjFA- {
-  --glimmer-background: var(--color-surface);
-}
-
-[data-theme="dark"] .NH-8hViLjFA- {
-  --glimmer-shine-opacity: 75%;
-  --glimmer-background-opacity: 7.5%;
-}
-
-@-webkit-keyframes -lyJkOGbceo- {
-  0%,
-  20% {
-    background-position-x: calc(64px * -1);
-    background-position-x: calc(var(--space-extravagant) * -1);
-  }
-
-  100% {
-    background-position-x: calc(100% + 64px);
-    background-position-x: calc(100% + var(--space-extravagant));
-  }
-}
-
-@keyframes -lyJkOGbceo- {
-  0%,
-  20% {
-    background-position-x: calc(64px * -1);
-    background-position-x: calc(var(--space-extravagant) * -1);
-  }
-
-  100% {
-    background-position-x: calc(100% + 64px);
-    background-position-x: calc(100% + var(--space-extravagant));
-  }
-}
-
-._6-ozsHDHcVI- {
-  width: 30%;
-  max-width: 180px;
-  min-width: 120px;
-}
-
-._7AvaYGpXkLU- {
-  display: inline-block;
-  width: 100px;
-  height: 36px;
-}
-
-.sm9yBV3e4Qg- {
-  display: block;
-  width: 100%;
-  min-width: 100px;
-}
-
-.bjemHBSLuQ0- {
-  height: 8px;
-  height: var(--space-small);
-}
-
-.MXFqgzJq5jw- {
-  height: 16px;
-  height: var(--space-base);
-}
-
-.B2DzIy8pibk- {
-  height: 24px;
-  height: var(--space-large);
-}
-
-.-ll1bKXJm9s- {
-  height: 32px;
-  height: var(--space-larger);
-}
-
-.jieKjQ6-Scs- {
-  height: 48px;
-  height: var(--space-largest);
-}
-
-._8qp0RoxJfHE- {
-  height: 100%;
-  min-width: 16px;
-  min-width: var(--space-base);
-  min-height: 16px;
-  min-height: var(--space-base);
-}
-
-.vAVS-6e-jJo- {
-  width: 100%;
-}
-
-.tZgae6SZ8WA- {
-  width: 85%;
-}
-
-.ec-sGgENoOw- {
-  width: 70%;
-}
-
-.ONvR3LocsA4-,
-.j-gTsb6UsQs- {
-  width: auto;
-  aspect-ratio: 1;
-}
-
-.j-gTsb6UsQs- {
-  border-radius: 100%;
-  border-radius: var(--radius-circle);
-}
-
-._6dlpcG-oxT4- {
-  -webkit-animation-duration: var(--duration-base);
-          animation-duration: var(--duration-base);
-}
-
-.NlRB1Xq-sFE- {
-  -webkit-animation-duration: calc(var(--duration-fast));
-          animation-duration: calc(var(--duration-fast));
-}
-
-.B1cBkstNQhM- > :not(:last-child) {
-  margin-bottom: 1px;
-  margin-bottom: var(--space-minuscule);
-}
-
-.rjAxJwaso0s- > :not(:last-child) {
-  margin-bottom: 2px;
-  margin-bottom: var(--space-smallest);
-}
-
-.Chezd5Sqtmk- > :not(:last-child) {
-  margin-bottom: 4px;
-  margin-bottom: var(--space-smaller);
-}
-
-.hzVGRy-KUeY- > :not(:last-child) {
-  margin-bottom: 8px;
-  margin-bottom: var(--space-small);
-}
-
-.B67dzZpuwr4- > :not(:last-child) {
-  margin-bottom: 12px;
-  margin-bottom: var(--space-slim);
-}
-
-.XFi-EWH3Rc0- > :not(:last-child) {
-  margin-bottom: 16px;
-  margin-bottom: var(--space-base);
-}
-
-.JTt98vS-CLk- > :not(:last-child) {
-  margin-bottom: 24px;
-  margin-bottom: var(--space-large);
-}
-
-.-h5Dm7qvnss- > :not(:last-child) {
-  margin-bottom: 32px;
-  margin-bottom: var(--space-larger);
-}
-
-.K7DP0lB9veI- > :not(:last-child) {
-  margin-bottom: 48px;
-  margin-bottom: var(--space-largest);
-}
-
-.d8bHHzbOHk4- > :not(:last-child) {
-  margin-bottom: 64px;
-  margin-bottom: var(--space-extravagant);
-}
-
-.cftWh-00zXM- {
-  padding: 0;
-  padding: var(--public-content--padding, 0);
-}
-
 ._7mObJiwfPh4- {
   position: relative;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.112.2",
+  "version": "6.113.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "5c6d2a8ba2313768db2fd1147c74de0b4e8c3710"
+  "gitHead": "9639efb029df5399aac0b13382e2e89eac579b8a"
 }