npm - @viasat/beam-styles - Versions diffs - 2.37.0 → 2.38.1 - Mend

@viasat/beam-styles 2.37.0 → 2.38.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/components/checkbox.module.scss +1 -1
package/components/combobox.module.scss +33 -19
package/components/dateField.module.scss +5 -5
package/components/input.vars.scss +66 -0
package/components/nativeSelect.module.scss +11 -7
package/components/panel.module.scss +61 -16
package/components/radioButton.module.scss +1 -1
package/components/search.module.scss +24 -13
package/components/slider.module.scss +1 -1
package/components/switch.module.scss +1 -1
package/components/textArea.module.scss +2 -2
package/components/textField.module.scss +12 -6
package/package.json +1 -1
package/styles.css +613 -159
package/styles.css.map +1 -1
package/styles.min.css +13 -11
package/styles.min.css.map +1 -1

package/styles.css CHANGED Viewed

@@ -3921,7 +3921,15 @@
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -3933,8 +3941,12 @@
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -3943,9 +3955,13 @@
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -4090,7 +4106,15 @@
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -4102,8 +4126,12 @@
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -4112,9 +4140,13 @@
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -4762,7 +4794,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -4774,8 +4814,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -4784,9 +4828,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -4931,7 +4979,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -4943,8 +4999,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -4953,9 +5013,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -5025,7 +5089,7 @@ textarea:focus-visible,
   display: inherit;
   word-break: break-word;
   color: var(--bm-comp-input-color-text);
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-comp-input-typo-md);
   gap: var(--bm-comp-input-space-choice-gap-inside);
   cursor: var(--bm-input-choice-label-cursor, pointer);
 }
@@ -5689,7 +5753,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -5701,8 +5773,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -5711,9 +5787,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -5858,7 +5938,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -5870,8 +5958,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -5880,9 +5972,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -5949,6 +6045,27 @@ textarea:focus-visible,
   --bm-text-field-cursor: not-allowed;
   --bm-text-field-input-cursor: not-allowed;
 }
+.bm-combobox--sm .bm-combobox__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-sm);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-sm);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-sm);
+  --bm-input-field-font: var(--bm-comp-input-typo-sm);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-sm);
+}
+.bm-combobox--md .bm-combobox__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-md);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-md);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-md);
+  --bm-input-field-font: var(--bm-comp-input-typo-md);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-md);
+}
+.bm-combobox--lg .bm-combobox__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-lg);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-lg);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-lg);
+  --bm-input-field-font: var(--bm-comp-input-typo-lg);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-lg);
+}
 .bm-combobox--fluid {
   max-width: 100%;
 }
@@ -5972,11 +6089,11 @@ textarea:focus-visible,
   position: relative;
   cursor: var(--bm-text-field-cursor, pointer);
   user-select: none;
-  font: var(--bm-comp-input-typo-default);
-  min-height: var(--bm-comp-input-size-field-md-height);
+  font: var(--bm-input-field-font);
+  min-height: var(--bm-input-field-height);
   gap: var(--bm-comp-input-space-field-gap);
   --bm-comp-icon-color: var(--bm-comp-input-color-icon);
-  --bm-comp-icon-size: var(--bm-comp-input-size-field-icon);
+  --bm-comp-icon-size: var(--bm-input-field-icon-size);
 }
 .bm-combobox__field__chevron {
   position: absolute;
@@ -5992,8 +6109,8 @@ textarea:focus-visible,
   mask-position: center;
   mask-repeat: no-repeat;
   background-color: var(--bm-comp-input-color-icon);
-  inset-inline-end: calc(var(--bm-comp-input-space-field-x) - (var(--bm-comp-icon-size) - 0.625rem) / 2);
-  inset-block-start: calc(var(--bm-comp-input-size-field-md-height) / 2 - var(--bm-comp-icon-size) / 2);
+  inset-inline-end: calc(var(--bm-input-field-padding-x) - (var(--bm-comp-icon-size) - 0.625rem) / 2);
+  inset-block-start: calc(var(--bm-input-field-height) / 2 - var(--bm-comp-icon-size) / 2);
   transition: transform 0.2s ease;
 }
 .bm-combobox--dropdown-open .bm-combobox__field__chevron {
@@ -6004,13 +6121,13 @@ textarea:focus-visible,
   align-items: center;
   flex: 0 0 auto;
   gap: var(--bm-comp-input-space-field-gap);
-  min-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-border-width-field-default) - 2 * var(--bm-comp-input-space-field-y));
-  line-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-border-width-field-default) - 2 * var(--bm-comp-input-space-field-y));
+  min-height: calc(var(--bm-input-field-height) - 2 * var(--bm-comp-input-border-width-field-default) - 2 * var(--bm-input-field-padding-y));
+  line-height: calc(var(--bm-input-field-height) - 2 * var(--bm-comp-input-border-width-field-default) - 2 * var(--bm-input-field-padding-y));
 }
 .bm-combobox__field__input {
   background: transparent;
-  min-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-space-field-y));
-  line-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-space-field-y));
+  min-height: calc(var(--bm-input-field-height) - 2 * var(--bm-input-field-padding-y));
+  line-height: calc(var(--bm-input-field-height) - 2 * var(--bm-input-field-padding-y));
 }
 .bm-combobox__field__input::placeholder {
   color: var(--bm-comp-input-color-text-placeholder);
@@ -6035,6 +6152,16 @@ textarea:focus-visible,
   flex-wrap: wrap;
   margin-block: calc(-1 * var(--bm-comp-input-border-width-field-default));
 }
+.bm-combobox__field__content-before svg,
+.bm-combobox__field__content-before ::slotted([slot*=content]), .bm-combobox__field__content-after svg,
+.bm-combobox__field__content-after ::slotted([slot*=content]) {
+  color: var(--bm-comp-input-color-icon);
+  height: var(--bm-primitive-dimension-100);
+}
+.bm-combobox__field__content-before .bm-icon, .bm-combobox__field__content-after .bm-icon {
+  width: var(--bm-input-field-icon-size);
+  height: var(--bm-input-field-icon-size);
+}
 .bm-combobox__field__input {
   flex: 1;
   cursor: var(--bm-text-field-input-cursor, pointer);
@@ -6043,7 +6170,7 @@ textarea:focus-visible,
   outline: 0;
   margin: 0;
   padding: 0;
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-input-field-font);
   width: 100%;
   min-width: 3rem;
 }
@@ -6086,11 +6213,12 @@ textarea:focus-visible,
   box-shadow: var(--bm-comp-input-shadow-field);
   background-color: var(--bm-comp-input-color-bg);
   transform: translate3d(var(--bm-sem-space-0), var(--bm-sem-space-0), var(--bm-sem-space-0));
-  padding-block: var(--bm-comp-input-space-field-y);
-  padding-inline: var(--bm-comp-input-space-field-x) calc(
-        0.625rem + var(--bm-comp-input-space-field-gap) + var(--bm-comp-input-space-field-x)
+  padding-block: var(--bm-input-field-padding-y);
+  padding-inline: var(--bm-input-field-padding-x) calc(
+        0.625rem + var(--bm-comp-input-space-field-gap) +
+          var(--bm-input-field-padding-x)
       );
-  min-height: var(--bm-comp-input-size-field-md-height);
+  min-height: var(--bm-input-field-height);
 }
 .bm-combobox__field:focus-within {
   outline-offset: calc(0px - var(--bm-sem-size-focus-offset));
@@ -6197,7 +6325,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -6209,8 +6345,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -6219,9 +6359,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -6366,7 +6510,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -6378,8 +6530,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -6388,9 +6544,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -6504,9 +6664,9 @@ textarea:focus-visible,
   gap: var(--bm-comp-input-space-field-gap);
   box-shadow: var(--bm-comp-input-shadow-field);
   background-color: var(--bm-comp-input-color-bg);
-  height: var(--bm-comp-input-size-field-md-height);
-  padding-block: var(--bm-comp-input-space-field-y);
-  padding-inline: var(--bm-comp-input-space-field-x);
+  height: var(--bm-comp-input-size-field-height-md);
+  padding-block: var(--bm-comp-input-space-field-y-md);
+  padding-inline: var(--bm-comp-input-space-field-x-md);
 }
 .bm-date-field__field:focus-within {
   outline-offset: calc(0px - var(--bm-sem-size-focus-offset));
@@ -6516,7 +6676,7 @@ textarea:focus-visible,
   display: inline-flex;
   align-items: baseline;
   color: var(--bm-comp-input-color-text);
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-comp-input-typo-md);
   font-variant-numeric: tabular-nums;
   gap: var(--bm-sem-space-12);
 }
@@ -6542,7 +6702,7 @@ textarea:focus-visible,
 }
 .bm-date-field__field .bm-date-field__separator {
   color: var(--bm-comp-input-color-text);
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-comp-input-typo-md);
   user-select: none;
 }
@@ -8298,7 +8458,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -8310,8 +8478,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -8320,9 +8492,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -8467,7 +8643,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -8479,8 +8663,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -8489,9 +8677,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -9360,7 +9552,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -9372,8 +9572,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -9382,9 +9586,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -9529,7 +9737,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -9541,8 +9757,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -9551,9 +9771,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -9619,6 +9843,27 @@ textarea:focus-visible,
   --bm-text-field-cursor: not-allowed;
   --bm-text-field-input-cursor: not-allowed;
 }
+.bm-native-select--sm .bm-native-select__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-sm);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-sm);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-sm);
+  --bm-input-field-font: var(--bm-comp-input-typo-sm);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-sm);
+}
+.bm-native-select--md .bm-native-select__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-md);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-md);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-md);
+  --bm-input-field-font: var(--bm-comp-input-typo-md);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-md);
+}
+.bm-native-select--lg .bm-native-select__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-lg);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-lg);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-lg);
+  --bm-input-field-font: var(--bm-comp-input-typo-lg);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-lg);
+}
 .bm-native-select--fluid {
   max-width: 100%;
 }
@@ -9646,9 +9891,9 @@ textarea:focus-visible,
   mask-position: center;
   mask-repeat: no-repeat;
   background-color: var(--bm-comp-input-color-icon);
-  inset-inline-end: var(--bm-comp-input-space-field-x);
+  inset-inline-end: var(--bm-input-field-padding-x);
   inset-block-start: calc(
-        var(--bm-comp-input-space-field-x) + 0.3125rem / 2
+        var(--bm-input-field-padding-x) + 0.3125rem / 2
       );
 }
 .bm-native-select--error .bm-native-select__field:after {
@@ -9688,15 +9933,16 @@ textarea:focus-visible,
   border-radius: var(--bm-comp-input-radius-field);
   border-width: var(--bm-comp-input-border-width-field-default);
   color: var(--bm-comp-input-color-text);
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-input-field-font);
   cursor: var(--bm-text-field-input-cursor, pointer);
   box-shadow: var(--bm-comp-input-shadow-field);
   background-color: var(--bm-comp-input-color-bg);
-  height: var(--bm-comp-input-size-field-md-height);
+  height: var(--bm-input-field-height);
   transform: translate3d(var(--bm-sem-space-0), var(--bm-sem-space-0), var(--bm-sem-space-0));
-  padding-block: var(--bm-comp-input-space-field-y);
-  padding-inline: var(--bm-comp-input-space-field-x) calc(
-        0.625rem + var(--bm-comp-input-space-field-gap) + var(--bm-comp-input-space-field-x)
+  padding-block: var(--bm-input-field-padding-y);
+  padding-inline: var(--bm-input-field-padding-x) calc(
+        0.625rem + var(--bm-comp-input-space-field-gap) +
+          var(--bm-input-field-padding-x)
       );
 }
 .bm-native-select__field .bm-native-select__input:focus {
@@ -10414,7 +10660,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -10426,8 +10680,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -10436,9 +10694,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -10583,7 +10845,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -10595,8 +10865,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -10605,9 +10879,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -10677,7 +10955,7 @@ textarea:focus-visible,
   display: inherit;
   word-break: break-word;
   color: var(--bm-comp-input-color-text);
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-comp-input-typo-md);
   gap: var(--bm-comp-input-space-choice-gap-inside);
   cursor: var(--bm-input-choice-label-cursor, pointer);
   pointer-events: var(--bm-input-choice-label-pointer-events, auto);
@@ -10845,7 +11123,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -10857,8 +11143,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -10867,9 +11157,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -11014,7 +11308,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -11026,8 +11328,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -11036,9 +11342,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -11104,6 +11414,27 @@ textarea:focus-visible,
   --bm-text-field-cursor: not-allowed;
   --bm-text-field-input-cursor: not-allowed;
 }
+.bm-search--sm .bm-search__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-sm);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-sm);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-sm);
+  --bm-input-field-font: var(--bm-comp-input-typo-sm);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-sm);
+}
+.bm-search--md .bm-search__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-md);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-md);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-md);
+  --bm-input-field-font: var(--bm-comp-input-typo-md);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-md);
+}
+.bm-search--lg .bm-search__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-lg);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-lg);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-lg);
+  --bm-input-field-font: var(--bm-comp-input-typo-lg);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-lg);
+}
 .bm-search--fluid {
   max-width: 100%;
 }
@@ -11115,11 +11446,11 @@ textarea:focus-visible,
   position: relative;
   cursor: var(--bm-text-field-cursor, pointer);
   user-select: none;
-  font: var(--bm-comp-input-typo-default);
-  min-height: var(--bm-comp-input-size-field-md-height);
+  font: var(--bm-input-field-font);
+  min-height: var(--bm-input-field-height);
   gap: var(--bm-comp-input-space-field-gap);
   --bm-comp-icon-color: var(--bm-comp-input-color-icon);
-  --bm-comp-icon-size: var(--bm-comp-input-size-field-icon);
+  --bm-comp-icon-size: var(--bm-input-field-icon-size);
 }
 .bm-search__field__input {
   display: flex;
@@ -11127,8 +11458,8 @@ textarea:focus-visible,
   flex: 0 0 auto;
   gap: var(--bm-comp-input-space-field-gap);
   background: transparent;
-  min-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-space-field-y));
-  line-height: calc(var(--bm-comp-input-size-field-md-height) - 2 * var(--bm-comp-input-space-field-y));
+  min-height: calc(var(--bm-input-field-height) - 2 * var(--bm-input-field-padding-y));
+  line-height: calc(var(--bm-input-field-height) - 2 * var(--bm-input-field-padding-y));
   flex: 1;
   cursor: var(--bm-text-field-input-cursor, pointer);
   text-overflow: ellipsis;
@@ -11136,7 +11467,7 @@ textarea:focus-visible,
   outline: 0;
   margin: 0;
   padding: 0;
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-input-field-font);
   width: 100%;
   min-width: 3rem;
 }
@@ -11192,9 +11523,9 @@ textarea:focus-visible,
   box-shadow: var(--bm-comp-input-shadow-field);
   background-color: var(--bm-comp-input-color-bg);
   transform: translate3d(var(--bm-sem-space-0), var(--bm-sem-space-0), var(--bm-sem-space-0));
-  padding-block: var(--bm-comp-input-space-field-y);
-  padding-inline: var(--bm-comp-input-space-field-x);
-  min-height: var(--bm-comp-input-size-field-md-height);
+  padding-block: var(--bm-input-field-padding-y);
+  padding-inline: var(--bm-input-field-padding-x);
+  min-height: var(--bm-input-field-height);
 }
 .bm-search__field:focus-within {
   outline-offset: calc(0px - var(--bm-sem-size-focus-offset));
@@ -11211,8 +11542,11 @@ textarea:focus-visible,
 .bm-search__field .bm-search__content svg,
 .bm-search__field .bm-search__content ::slotted([slot*=content]) {
   color: var(--bm-comp-input-color-icon);
-  width: var(--bm-comp-input-size-field-icon);
-  height: var(--bm-comp-input-size-field-icon);
+  height: var(--bm-primitive-dimension-100);
+}
+.bm-search__field .bm-search__content .bm-icon {
+  width: var(--bm-input-field-icon-size);
+  height: var(--bm-input-field-icon-size);
 }
 .bm-search__dropdown {
   padding-block: var(--bm-sem-space-50);
@@ -12392,7 +12726,7 @@ textarea:focus-visible,
   --bm-slider-thumb-cursor: pointer;
   --bm-comp-slider-min-percentage: 0cqw;
   --bm-comp-slider-max-percentage: 0cqw;
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-comp-input-typo-md);
 }
 .bm-slider--disabled {
   --bm-label-cursor: not-allowed;
@@ -13291,7 +13625,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -13303,8 +13645,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -13313,9 +13659,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -13460,7 +13810,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -13472,8 +13830,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -13482,9 +13844,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -13555,7 +13921,7 @@ textarea:focus-visible,
   gap: var(--bm-comp-input-space-choice-gap-inside);
   min-width: var(--bm-comp-input-size-choice-switch-width);
   min-height: var(--bm-comp-input-size-choice-switch-height);
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-comp-input-typo-md);
   color: var(--bm-comp-input-color-text);
   cursor: var(--bm-input-choice-label-cursor, pointer);
   pointer-events: var(--bm-input-choice-label-pointer-events, auto);
@@ -14646,7 +15012,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -14658,8 +15032,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -14668,9 +15046,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -14815,7 +15197,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -14827,8 +15217,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -14837,9 +15231,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -15007,12 +15405,12 @@ textarea:focus-visible,
   border-radius: var(--bm-comp-input-radius-field);
   border-width: var(--bm-comp-input-border-width-field-default);
   color: var(--bm-comp-input-color-text);
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-comp-input-typo-md);
   cursor: var(--bm-text-field-input-cursor, text);
   box-shadow: var(--bm-comp-input-shadow-field);
   background-color: var(--bm-comp-input-color-bg);
   min-height: var(--bm-comp-input-size-field-text-area-height);
-  padding: var(--bm-comp-input-space-field-y) var(--bm-comp-input-space-field-x);
+  padding: var(--bm-comp-input-space-field-y-md) var(--bm-comp-input-space-field-x-md);
   transform: translate3d(var(--bm-sem-space-0), var(--bm-sem-space-0), var(--bm-sem-space-0));
 }
 .bm-text-area__field .bm-text-area__input::-webkit-resizer {
@@ -15118,7 +15516,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #cc2429
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -15130,8 +15536,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -15140,9 +15550,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -15287,7 +15701,15 @@ textarea:focus-visible,
     --bm-sem-color-surface-negative-strong,
     #f67378
   );
-  --bm-comp-input-typo-default: var(
+  --bm-comp-input-typo-sm: var(
+    --bm-sem-typo-compact-body-sm,
+    400 0.875rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-md: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-input-typo-lg: var(
     --bm-sem-typo-compact-body-md,
     400 1rem/1.25rem "Source Sans Pro"
   );
@@ -15299,8 +15721,12 @@ textarea:focus-visible,
     --bm-sem-typo-body-md,
     400 1rem/1.5rem "Source Sans Pro"
   );
-  --bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);
-  --bm-comp-input-space-field-y: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-x-sm: var(--bm-sem-space-75, 0.75rem);
+  --bm-comp-input-space-field-x-md: var(--bm-sem-space-100, 1rem);
+  --bm-comp-input-space-field-x-lg: var(--bm-sem-space-125, 1.25rem);
+  --bm-comp-input-space-field-y-sm: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-input-space-field-y-md: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-input-space-field-y-lg: var(--bm-sem-space-75, 0.75rem);
   --bm-comp-input-space-field-gap: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, 0.5rem);
   --bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, 0.5rem);
@@ -15309,9 +15735,13 @@ textarea:focus-visible,
     --bm-primitive-dimension-12,
     0.125rem
   );
-  --bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-sm: var(--bm-sem-size-height-sm, 2rem);
+  --bm-comp-input-size-field-height-md: var(--bm-sem-size-height-md, 2.5rem);
+  --bm-comp-input-size-field-height-lg: var(--bm-sem-size-height-lg, 3rem);
   --bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);
-  --bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-sm: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-input-size-field-icon-md: var(--bm-sem-size-icon-md, 1.25rem);
+  --bm-comp-input-size-field-icon-lg: var(--bm-sem-size-icon-md, 1.25rem);
   --bm-comp-input-size-field-text-area-height: var(
     --bm-primitive-dimension-475,
     4.75rem
@@ -15377,6 +15807,27 @@ textarea:focus-visible,
   --bm-text-field-cursor: not-allowed;
   --bm-text-field-input-cursor: not-allowed;
 }
+.bm-text-field--sm .bm-text-field__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-sm);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-sm);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-sm);
+  --bm-input-field-font: var(--bm-comp-input-typo-sm);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-sm);
+}
+.bm-text-field--md .bm-text-field__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-md);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-md);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-md);
+  --bm-input-field-font: var(--bm-comp-input-typo-md);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-md);
+}
+.bm-text-field--lg .bm-text-field__field {
+  --bm-input-field-height: var(--bm-comp-input-size-field-height-lg);
+  --bm-input-field-padding-y: var(--bm-comp-input-space-field-y-lg);
+  --bm-input-field-padding-x: var(--bm-comp-input-space-field-x-lg);
+  --bm-input-field-font: var(--bm-comp-input-typo-lg);
+  --bm-input-field-icon-size: var(--bm-comp-input-size-field-icon-lg);
+}
 .bm-text-field--error .bm-text-field__field {
   border-color: var(--bm-comp-input-color-border-error);
   background-color: var(--bm-comp-input-color-bg);
@@ -15442,8 +15893,8 @@ textarea:focus-visible,
   gap: var(--bm-comp-input-space-field-gap);
   box-shadow: var(--bm-comp-input-shadow-field);
   background-color: var(--bm-comp-input-color-bg);
-  height: var(--bm-comp-input-size-field-md-height);
-  padding: var(--bm-comp-input-space-field-y) var(--bm-comp-input-space-field-x);
+  height: var(--bm-input-field-height);
+  padding: var(--bm-input-field-padding-y) var(--bm-input-field-padding-x);
 }
 .bm-text-field__field:focus-within {
   outline-offset: calc(0px - var(--bm-sem-size-focus-offset));
@@ -15456,13 +15907,13 @@ textarea:focus-visible,
   width: 100%;
   padding: var(--bm-sem-space-0);
   color: var(--bm-comp-input-color-text);
-  font: var(--bm-comp-input-typo-default);
+  font: var(--bm-input-field-font);
   cursor: var(--bm-text-field-input-cursor, text);
 }
 .bm-text-field__field .bm-text-field__input:-webkit-autofill {
   caret-color: var(--bm-comp-input-color-text);
   -webkit-text-fill-color: var(--bm-comp-input-color-text);
-  box-shadow: 0 0 0 var(--bm-comp-input-size-field-md-height) var(--bm-comp-input-color-bg) inset;
+  box-shadow: 0 0 0 var(--bm-input-field-height) var(--bm-comp-input-color-bg) inset;
 }
 .bm-text-field__field .bm-text-field__input::placeholder {
   color: var(--bm-comp-input-color-text-placeholder);
@@ -15474,8 +15925,11 @@ textarea:focus-visible,
 .bm-text-field__field .bm-text-field__content svg,
 .bm-text-field__field .bm-text-field__content ::slotted([slot*=content]) {
   color: var(--bm-comp-input-color-icon);
-  width: var(--bm-comp-input-size-field-icon);
-  height: var(--bm-comp-input-size-field-icon);
+  height: var(--bm-primitive-dimension-100);
+}
+.bm-text-field__field .bm-text-field__content .bm-icon {
+  width: var(--bm-input-field-icon-size);
+  height: var(--bm-input-field-icon-size);
 }
 :root,