@jobber/components 9.10.1 → 9.10.2-JOB-176144-fb868a8.2

package/dist/Combobox/Combobox.d.ts

@@ -16,7 +16,7 @@ declare function ComboboxInput({ className, ...inputProps }: ComboboxInputProps)
 declare function ComboboxTrigger({ className, render, ...triggerProps }: ComboboxTriggerProps): React.JSX.Element;
 declare function ComboboxClear({ className, ...clearProps }: ComboboxClearProps): React.JSX.Element;
 declare function ComboboxTriggerInput({ className, clearLabel, showOptionsLabel, ...inputProps }: ComboboxTriggerInputProps): React.JSX.Element;
-declare function ComboboxTriggerValue({ children, className, placeholder, ...triggerProps }: ComboboxTriggerValueProps): React.JSX.Element;
+declare function ComboboxTriggerValue({ children, className, clearLabel, placeholder, ...triggerProps }: ComboboxTriggerValueProps): React.JSX.Element;
 declare function ComboboxTriggerMultipleWithInput<Value = unknown>({ className, getItemLabel, getRemoveLabel, renderItem, showOptionsLabel, ...inputProps }: ComboboxTriggerMultipleWithInputProps<Value>): React.JSX.Element;
 declare function ComboboxTriggerMultipleValue<Value = unknown>({ getItemLabel, getRemoveLabel, placeholder, renderItem, showOptionsLabel, ...chipsProps }: ComboboxTriggerMultipleValueProps<Value>): React.JSX.Element;
 declare function ComboboxContent({ ariaLabel, children, className, empty, style, }: ComboboxContentProps): React.JSX.Element;

package/dist/Combobox/Combobox.types.d.ts

@@ -132,6 +132,7 @@ export interface ComboboxTriggerInputProps extends Omit<ComboboxInputProps, "chi
 }
 export interface ComboboxTriggerValueProps extends Omit<ComboboxTriggerProps, "children"> {
     readonly children?: ComboboxValueProps["children"];
+    readonly clearLabel?: string;
     readonly placeholder?: ComboboxValueProps["placeholder"];
 }
 export interface ComboboxTriggerMultipleWithInputProps<Value> extends Omit<ComboboxInputProps, "children"> {

package/dist/Combobox-cjs.js

@@ -166,7 +166,7 @@ const comboboxContentSlotSystem = createComboboxSlotSystem("comboboxContentSlot"
 const assignComboboxContentSlot = comboboxContentSlotSystem.assignSlot;
 const isComboboxContentSlotElement = comboboxContentSlotSystem.isSlotElement;
 
-var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueIcon":"Glijnn9-fUw-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
+var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","triggerValueActions":"_8AEote8Zs9E-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueIcon":"Glijnn9-fUw-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
 
 const comboboxMessages = useAtlantisI18n.defineMessages({
     noResults: {
@@ -606,17 +606,21 @@ function ComboboxTriggerInput(_a) {
             React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxTriggerValue(_a) {
-    var { children, className, placeholder } = _a, triggerProps = tslib_es6.__rest(_a, ["children", "className", "placeholder"]);
+    var { children, className, clearLabel, placeholder } = _a, triggerProps = tslib_es6.__rest(_a, ["children", "className", "clearLabel", "placeholder"]);
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const showLabel = shouldRenderInnerLabel(context);
     const renderLabel = shouldRenderRecipeLabel(context);
-    return (React.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size)) },
+    return (React.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel) },
         renderLabel && (React.createElement(ComboboxRecipeLabel, { visuallyHidden: !showLabel }, context === null || context === void 0 ? void 0 : context.label)),
         React.createElement(ComboboxTrigger, Object.assign({}, triggerProps, { className: mergeClassName.mergeClassName(classnames(styles.triggerValue, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel), className) }),
             React.createElement("span", { className: styles.triggerValueText },
                 React.createElement(ComboboxPrimitive.ComboboxValue, { placeholder: placeholder }, children)),
-            React.createElement("span", { className: styles.triggerValueIcon },
-                React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size })))));
+            React.createElement("span", { className: styles.triggerValueActions },
+                !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && clearLabel && (React.createElement(ComboboxClear, { "aria-label": clearLabel !== null && clearLabel !== void 0 ? clearLabel : t("clearSelection") },
+                    React.createElement(DefaultClearIcon, null))),
+                React.createElement("span", { className: styles.triggerValueIcon },
+                    React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))))));
 }
 function getDefaultItemLabel(value) {
     return String(value);

package/dist/Combobox-es.js

@@ -164,7 +164,7 @@ const comboboxContentSlotSystem = createComboboxSlotSystem("comboboxContentSlot"
 const assignComboboxContentSlot = comboboxContentSlotSystem.assignSlot;
 const isComboboxContentSlotElement = comboboxContentSlotSystem.isSlotElement;
 
-var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueIcon":"Glijnn9-fUw-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
+var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","triggerValueActions":"_8AEote8Zs9E-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueIcon":"Glijnn9-fUw-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
 
 const comboboxMessages = defineMessages({
     noResults: {
@@ -604,17 +604,21 @@ function ComboboxTriggerInput(_a) {
             React__default.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxTriggerValue(_a) {
-    var { children, className, placeholder } = _a, triggerProps = __rest(_a, ["children", "className", "placeholder"]);
+    var { children, className, clearLabel, placeholder } = _a, triggerProps = __rest(_a, ["children", "className", "clearLabel", "placeholder"]);
+    const { t } = useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const showLabel = shouldRenderInnerLabel(context);
     const renderLabel = shouldRenderRecipeLabel(context);
-    return (React__default.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size)) },
+    return (React__default.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel) },
         renderLabel && (React__default.createElement(ComboboxRecipeLabel, { visuallyHidden: !showLabel }, context === null || context === void 0 ? void 0 : context.label)),
         React__default.createElement(ComboboxTrigger, Object.assign({}, triggerProps, { className: mergeClassName(classnames(styles.triggerValue, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel), className) }),
             React__default.createElement("span", { className: styles.triggerValueText },
                 React__default.createElement(ComboboxValue, { placeholder: placeholder }, children)),
-            React__default.createElement("span", { className: styles.triggerValueIcon },
-                React__default.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size })))));
+            React__default.createElement("span", { className: styles.triggerValueActions },
+                !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && clearLabel && (React__default.createElement(ComboboxClear, { "aria-label": clearLabel !== null && clearLabel !== void 0 ? clearLabel : t("clearSelection") },
+                    React__default.createElement(DefaultClearIcon, null))),
+                React__default.createElement("span", { className: styles.triggerValueIcon },
+                    React__default.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))))));
 }
 function getDefaultItemLabel(value) {
     return String(value);

package/dist/styles.css

@@ -4210,7 +4210,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .EySvIEsW9Q4-,
-:where(.F94vaco3HkM-),
+.F94vaco3HkM-,
 :where(.IYgNfHHPVFY-) {
   --comboboxPrimitive-field-height: calc(var(--base-unit) * 2.5);
   --comboboxPrimitive-control-height: calc(
@@ -4251,9 +4251,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   box-sizing: border-box;
 }
 
-.EySvIEsW9Q4-:has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible):not(
-    [data-popup-open]
-  ) {
+.EySvIEsW9Q4-:has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible),
+.EySvIEsW9Q4-[data-popup-open] {
   z-index: 1;
   z-index: var(--elevation-base);
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
@@ -4266,26 +4265,10 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border-color: var(--color-critical);
 }
 
-.EySvIEsW9Q4-:not([data-disabled]):not(
-    :has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible)
-  ):hover {
-  box-shadow: inset 0 0 0 1px hsl(200, 13%, 87%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-border--interactive);
-}
-
-.EySvIEsW9Q4-:not([data-disabled])[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(198, 35%, 21%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-interactive--subtle);
-  border-color: hsl(198, 35%, 21%);
-  border-color: var(--color-interactive--subtle);
-}
-
 .EySvIEsW9Q4-[data-invalid]:not([data-disabled]):not(
     :has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible)
   ):hover,
 .EySvIEsW9Q4-[data-invalid]:not([data-disabled])[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(6, 64%, 51%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-critical);
   border-color: hsl(6, 64%, 51%);
   border-color: var(--color-critical);
 }
@@ -4402,7 +4385,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-disabled);
 }
 
-:where(.F94vaco3HkM-) {
+.F94vaco3HkM- {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
@@ -4468,7 +4451,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   cursor: pointer;
 }
 
-.EySvIEsW9Q4- > :where(.F94vaco3HkM-) {
+.EySvIEsW9Q4- > .F94vaco3HkM- {
   -ms-flex: 0 0 auto;
       flex: 0 0 auto;
   -ms-flex-pack: center;
@@ -4493,14 +4476,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-heading);
 }
 
-.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):focus-visible:not(
-    [data-popup-open]
-  ) {
-  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
-  box-shadow: var(--shadow-focus);
-  outline: none;
-}
-
 :where(.IYgNfHHPVFY-:focus-visible) {
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
@@ -4509,10 +4484,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   outline: none;
 }
 
-:where(.EySvIEsW9Q4- > .F94vaco3HkM-:focus-visible) {
-  outline: none;
-}
-
 :where(.IYgNfHHPVFY-:has(+ .F94vaco3HkM-)) {
   min-width: 24px;
   min-width: var(--space-large);
@@ -4523,20 +4494,17 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-icon--secondary);
 }
 
-/* Standalone triggers own field border/shadow states; InputGroup owns them when the trigger is embedded. */
+/* Standalone triggers own field focus states; InputGroup owns them when the trigger is embedded. */
 
+.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):focus-visible,
 .F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-))[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(198, 35%, 21%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-interactive--subtle);
-  border-color: hsl(198, 35%, 21%);
-  border-color: var(--color-interactive--subtle);
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+  outline: none;
 }
 
-.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not([data-disabled]):not(
-    :focus-visible
-  ):hover {
-  box-shadow: inset 0 0 0 1px hsl(200, 13%, 87%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-border--interactive);
+.EySvIEsW9Q4- > .F94vaco3HkM-:focus-visible {
+  outline: none;
 }
 
 .F94vaco3HkM-[data-invalid]:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not(
@@ -4545,17 +4513,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .F94vaco3HkM-[data-invalid]:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not(
     [data-disabled]
   )[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(6, 64%, 51%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-critical);
   border-color: hsl(6, 64%, 51%);
   border-color: var(--color-critical);
 }
 
 .F94vaco3HkM-[data-disabled] {
-  --comboboxPrimitive-field-border-width: var(--border-base);
-
   border-color: hsl(200, 13%, 87%);
-
   border-color: var(--color-border);
   color: hsl(0, 0%, 58%);
   color: var(--color-disabled);
@@ -5726,6 +5689,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   background-color: transparent;
 }
 
+._8AEote8Zs9E- .wOdZIAytarU- {
+  margin-right: 4px;
+  margin-right: var(--space-smaller);
+}
+
 .wOdZIAytarU-:not([data-disabled]):hover,
 .wOdZIAytarU-:not([data-disabled]):focus-visible {
   color: hsl(198, 35%, 21%);
@@ -5761,24 +5729,36 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   width: 100%;
 }
 
-.LyrziI4LY5w- {
+.mKKJ60Qxxmw-.LyrziI4LY5w- {
   padding: 0;
 }
 
 .ayWSHF3Mwfc- {
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  display: block;
   -ms-flex: 1 1 auto;
       flex: 1 1 auto;
-  -ms-flex-align: center;
-      align-items: center;
+  -ms-flex-item-align: stretch;
+      align-self: stretch;
   min-width: 0;
+  box-sizing: border-box;
   padding: var(--comboboxPrimitive-field-padding-block) 8px
     var(--comboboxPrimitive-field-padding-block)
-    var(--comboboxPrimitive-field-padding-inline);
+    calc(var(--comboboxPrimitive-field-padding-inline) + 1px);
   padding: var(--comboboxPrimitive-field-padding-block) var(--space-small)
     var(--comboboxPrimitive-field-padding-block)
-    var(--comboboxPrimitive-field-padding-inline);
+    calc(var(--comboboxPrimitive-field-padding-inline) + var(--border-base));
+  line-height: var(--comboboxPrimitive-field-line-height);
+}
+
+._8AEote8Zs9E- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-item-align: stretch;
+      align-self: stretch;
+  -ms-flex-align: center;
+      align-items: center;
 }
 
 .Glijnn9-fUw- {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.10.1",
+  "version": "9.10.2-JOB-176144-fb868a8.2+fb868a84",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -549,5 +549,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "38a60df24c3bb3e4f07239d8199eafb46b5a6c82"
+  "gitHead": "fb868a8468b6ce191722b2292c60fe60001b9351"
 }