From 6b502bc8f8d43393135d15718ac3b0e82680b4d9 Mon Sep 17 00:00:00 2001
From: lerte smith <lerte@qq.com>
Date: Sat, 12 Oct 2024 10:28:08 +0800
Subject: [PATCH] fix outlined field hover border color

---
 .../actify/src/components/Field/Field.tsx     |    2 +-
 .../src/components/Field/FilledField.tsx      |    2 +-
 .../src/components/Field/OutlinedField.tsx    |    2 +-
 .../{actify.module.css => field.module.css}   | 2247 +++++++++--------
 4 files changed, 1127 insertions(+), 1126 deletions(-)
 rename packages/actify/src/components/Field/styles/{actify.module.css => field.module.css} (96%)

diff --git a/packages/actify/src/components/Field/Field.tsx b/packages/actify/src/components/Field/Field.tsx
index 23e55f8..2ac7312 100644
--- a/packages/actify/src/components/Field/Field.tsx
+++ b/packages/actify/src/components/Field/Field.tsx
@@ -3,7 +3,7 @@ import { cubicBezier, motion } from 'framer-motion'
 
 import React from 'react'
 import clsx from 'clsx'
-import styles from './styles/actify.module.css'
+import styles from './styles/field.module.css'
 
 export interface FieldProps extends SupportingTextProps {
   label?: string
diff --git a/packages/actify/src/components/Field/FilledField.tsx b/packages/actify/src/components/Field/FilledField.tsx
index bda1d7c..ec7d6ff 100644
--- a/packages/actify/src/components/Field/FilledField.tsx
+++ b/packages/actify/src/components/Field/FilledField.tsx
@@ -1,7 +1,7 @@
 import { Field, FieldProps } from './Field'
 
 import React from 'react'
-import styles from './styles/actify.module.css'
+import styles from './styles/field.module.css'
 
 interface FilledFieldProps extends FieldProps, React.ComponentProps<'div'> {}
 
diff --git a/packages/actify/src/components/Field/OutlinedField.tsx b/packages/actify/src/components/Field/OutlinedField.tsx
index 3c04858..d0ab6ed 100644
--- a/packages/actify/src/components/Field/OutlinedField.tsx
+++ b/packages/actify/src/components/Field/OutlinedField.tsx
@@ -1,6 +1,6 @@
 import { Field, FieldProps } from './Field'
 
-import styles from './styles/actify.module.css'
+import styles from './styles/field.module.css'
 
 export interface OutlinedFieldProps
   extends FieldProps,
diff --git a/packages/actify/src/components/Field/styles/actify.module.css b/packages/actify/src/components/Field/styles/field.module.css
similarity index 96%
rename from packages/actify/src/components/Field/styles/actify.module.css
rename to packages/actify/src/components/Field/styles/field.module.css
index 60d4ed9..b801440 100644
--- a/packages/actify/src/components/Field/styles/actify.module.css
+++ b/packages/actify/src/components/Field/styles/field.module.css
@@ -1,1123 +1,1124 @@
-.filled {
-  --_active-indicator-color: var(
-    --md-filled-field-active-indicator-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_active-indicator-height: var(
-    --md-filled-field-active-indicator-height,
-    1px
-  );
-  --_bottom-space: var(--md-filled-field-bottom-space, 16px);
-  --_container-color: var(
-    --md-filled-field-container-color,
-    var(--md-sys-color-surface-container-highest, #e6e0e9)
-  );
-  --_container-shape-start-start: var(
-    --md-filled-field-container-shape-start-start,
-    var(--md-filled-field-container-shape, 4px)
-  );
-  --_container-shape-start-end: var(
-    --md-filled-field-container-shape-start-end,
-    var(--md-filled-field-container-shape, 4px)
-  );
-  --_container-shape-end-end: var(
-    --md-filled-field-container-shape-end-end,
-    var(--md-filled-field-container-shape, 0px)
-  );
-  --_container-shape-end-start: var(
-    --md-filled-field-container-shape-end-start,
-    var(--md-filled-field-container-shape, 0px)
-  );
-  --_content-color: var(
-    --md-filled-field-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_content-font: var(
-    --md-filled-field-content-font,
-    var(
-      --md-sys-typescale-body-large-font,
-      var(--md-ref-typeface-plain, Roboto)
-    )
-  );
-  --_content-line-height: var(
-    --md-filled-field-content-line-height,
-    var(--md-sys-typescale-body-large-line-height, 1.5rem)
-  );
-  --_content-size: var(
-    --md-filled-field-content-size,
-    var(--md-sys-typescale-body-large-size, 1rem)
-  );
-  --_content-weight: var(
-    --md-filled-field-content-weight,
-    var(
-      --md-sys-typescale-body-large-weight,
-      var(--md-ref-typeface-weight-regular, 400)
-    )
-  );
-  --_disabled-active-indicator-color: var(
-    --md-filled-field-disabled-active-indicator-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-active-indicator-height: var(
-    --md-filled-field-disabled-active-indicator-height,
-    1px
-  );
-  --_disabled-active-indicator-opacity: var(
-    --md-filled-field-disabled-active-indicator-opacity,
-    0.38
-  );
-  --_disabled-container-color: var(
-    --md-filled-field-disabled-container-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-container-opacity: var(
-    --md-filled-field-disabled-container-opacity,
-    0.04
-  );
-  --_disabled-content-color: var(
-    --md-filled-field-disabled-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-content-opacity: var(
-    --md-filled-field-disabled-content-opacity,
-    0.38
-  );
-  --_disabled-label-text-color: var(
-    --md-filled-field-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-label-text-opacity: var(
-    --md-filled-field-disabled-label-text-opacity,
-    0.38
-  );
-  --_disabled-leading-content-color: var(
-    --md-filled-field-disabled-leading-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-leading-content-opacity: var(
-    --md-filled-field-disabled-leading-content-opacity,
-    0.38
-  );
-  --_disabled-supporting-text-color: var(
-    --md-filled-field-disabled-supporting-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-supporting-text-opacity: var(
-    --md-filled-field-disabled-supporting-text-opacity,
-    0.38
-  );
-  --_disabled-trailing-content-color: var(
-    --md-filled-field-disabled-trailing-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-trailing-content-opacity: var(
-    --md-filled-field-disabled-trailing-content-opacity,
-    0.38
-  );
-  --_error-active-indicator-color: var(
-    --md-filled-field-error-active-indicator-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-content-color: var(
-    --md-filled-field-error-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_error-focus-active-indicator-color: var(
-    --md-filled-field-error-focus-active-indicator-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-focus-content-color: var(
-    --md-filled-field-error-focus-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_error-focus-label-text-color: var(
-    --md-filled-field-error-focus-label-text-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-focus-leading-content-color: var(
-    --md-filled-field-error-focus-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_error-focus-supporting-text-color: var(
-    --md-filled-field-error-focus-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-focus-trailing-content-color: var(
-    --md-filled-field-error-focus-trailing-content-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-hover-active-indicator-color: var(
-    --md-filled-field-error-hover-active-indicator-color,
-    var(--md-sys-color-on-error-container, #410e0b)
-  );
-  --_error-hover-content-color: var(
-    --md-filled-field-error-hover-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_error-hover-label-text-color: var(
-    --md-filled-field-error-hover-label-text-color,
-    var(--md-sys-color-on-error-container, #410e0b)
-  );
-  --_error-hover-leading-content-color: var(
-    --md-filled-field-error-hover-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_error-hover-state-layer-color: var(
-    --md-filled-field-error-hover-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_error-hover-state-layer-opacity: var(
-    --md-filled-field-error-hover-state-layer-opacity,
-    0.08
-  );
-  --_error-hover-supporting-text-color: var(
-    --md-filled-field-error-hover-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-hover-trailing-content-color: var(
-    --md-filled-field-error-hover-trailing-content-color,
-    var(--md-sys-color-on-error-container, #410e0b)
-  );
-  --_error-label-text-color: var(
-    --md-filled-field-error-label-text-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-leading-content-color: var(
-    --md-filled-field-error-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_error-supporting-text-color: var(
-    --md-filled-field-error-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-trailing-content-color: var(
-    --md-filled-field-error-trailing-content-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_focus-active-indicator-color: var(
-    --md-filled-field-focus-active-indicator-color,
-    var(--md-sys-color-primary, #6750a4)
-  );
-  --_focus-active-indicator-height: var(
-    --md-filled-field-focus-active-indicator-height,
-    3px
-  );
-  --_focus-content-color: var(
-    --md-filled-field-focus-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_focus-label-text-color: var(
-    --md-filled-field-focus-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
-  );
-  --_focus-leading-content-color: var(
-    --md-filled-field-focus-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_focus-supporting-text-color: var(
-    --md-filled-field-focus-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_focus-trailing-content-color: var(
-    --md-filled-field-focus-trailing-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_hover-active-indicator-color: var(
-    --md-filled-field-hover-active-indicator-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_hover-active-indicator-height: var(
-    --md-filled-field-hover-active-indicator-height,
-    1px
-  );
-  --_hover-content-color: var(
-    --md-filled-field-hover-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_hover-label-text-color: var(
-    --md-filled-field-hover-label-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_hover-leading-content-color: var(
-    --md-filled-field-hover-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_hover-state-layer-color: var(
-    --md-filled-field-hover-state-layer-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_hover-state-layer-opacity: var(
-    --md-filled-field-hover-state-layer-opacity,
-    0.08
-  );
-  --_hover-supporting-text-color: var(
-    --md-filled-field-hover-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_hover-trailing-content-color: var(
-    --md-filled-field-hover-trailing-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_label-text-color: var(
-    --md-filled-field-label-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_label-text-font: var(
-    --md-filled-field-label-text-font,
-    var(
-      --md-sys-typescale-body-large-font,
-      var(--md-ref-typeface-plain, Roboto)
-    )
-  );
-  --_label-text-line-height: var(
-    --md-filled-field-label-text-line-height,
-    var(--md-sys-typescale-body-large-line-height, 1.5rem)
-  );
-  --_label-text-populated-line-height: var(
-    --md-filled-field-label-text-populated-line-height,
-    var(--md-sys-typescale-body-small-line-height, 1rem)
-  );
-  --_label-text-populated-size: var(
-    --md-filled-field-label-text-populated-size,
-    var(--md-sys-typescale-body-small-size, 0.75rem)
-  );
-  --_label-text-size: var(
-    --md-filled-field-label-text-size,
-    var(--md-sys-typescale-body-large-size, 1rem)
-  );
-  --_label-text-weight: var(
-    --md-filled-field-label-text-weight,
-    var(
-      --md-sys-typescale-body-large-weight,
-      var(--md-ref-typeface-weight-regular, 400)
-    )
-  );
-  --_leading-content-color: var(
-    --md-filled-field-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_leading-space: var(--md-filled-field-leading-space, 16px);
-  --_supporting-text-color: var(
-    --md-filled-field-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_supporting-text-font: var(
-    --md-filled-field-supporting-text-font,
-    var(
-      --md-sys-typescale-body-small-font,
-      var(--md-ref-typeface-plain, Roboto)
-    )
-  );
-  --_supporting-text-leading-space: var(
-    --md-filled-field-supporting-text-leading-space,
-    16px
-  );
-  --_supporting-text-line-height: var(
-    --md-filled-field-supporting-text-line-height,
-    var(--md-sys-typescale-body-small-line-height, 1rem)
-  );
-  --_supporting-text-size: var(
-    --md-filled-field-supporting-text-size,
-    var(--md-sys-typescale-body-small-size, 0.75rem)
-  );
-  --_supporting-text-top-space: var(
-    --md-filled-field-supporting-text-top-space,
-    4px
-  );
-  --_supporting-text-trailing-space: var(
-    --md-filled-field-supporting-text-trailing-space,
-    16px
-  );
-  --_supporting-text-weight: var(
-    --md-filled-field-supporting-text-weight,
-    var(
-      --md-sys-typescale-body-small-weight,
-      var(--md-ref-typeface-weight-regular, 400)
-    )
-  );
-  --_top-space: var(--md-filled-field-top-space, 16px);
-  --_trailing-content-color: var(
-    --md-filled-field-trailing-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_trailing-space: var(--md-filled-field-trailing-space, 16px);
-  --_with-label-bottom-space: var(
-    --md-filled-field-with-label-bottom-space,
-    8px
-  );
-  --_with-label-top-space: var(--md-filled-field-with-label-top-space, 8px);
-}
-
-.outlined {
-  --_bottom-space: var(--md-outlined-field-bottom-space, 16px);
-  --_container-shape: var(--md-outlined-field-container-shape, 4px);
-  --_content-color: var(
-    --md-outlined-field-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_content-font: var(
-    --md-outlined-field-content-font,
-    var(
-      --md-sys-typescale-body-large-font,
-      var(--md-ref-typeface-plain, Roboto)
-    )
-  );
-  --_content-line-height: var(
-    --md-outlined-field-content-line-height,
-    var(--md-sys-typescale-body-large-line-height, 1.5rem)
-  );
-  --_content-size: var(
-    --md-outlined-field-content-size,
-    var(--md-sys-typescale-body-large-size, 1rem)
-  );
-  --_content-weight: var(
-    --md-outlined-field-content-weight,
-    var(
-      --md-sys-typescale-body-large-weight,
-      var(--md-ref-typeface-weight-regular, 400)
-    )
-  );
-  --_disabled-content-color: var(
-    --md-outlined-field-disabled-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-content-opacity: var(
-    --md-outlined-field-disabled-content-opacity,
-    0.38
-  );
-  --_disabled-label-text-color: var(
-    --md-outlined-field-disabled-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-label-text-opacity: var(
-    --md-outlined-field-disabled-label-text-opacity,
-    0.38
-  );
-  --_disabled-leading-content-color: var(
-    --md-outlined-field-disabled-leading-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-leading-content-opacity: var(
-    --md-outlined-field-disabled-leading-content-opacity,
-    0.38
-  );
-  --_disabled-outline-color: var(
-    --md-outlined-field-disabled-outline-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-outline-opacity: var(
-    --md-outlined-field-disabled-outline-opacity,
-    0.12
-  );
-  --_disabled-outline-width: var(
-    --md-outlined-field-disabled-outline-width,
-    1px
-  );
-  --_disabled-supporting-text-color: var(
-    --md-outlined-field-disabled-supporting-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-supporting-text-opacity: var(
-    --md-outlined-field-disabled-supporting-text-opacity,
-    0.38
-  );
-  --_disabled-trailing-content-color: var(
-    --md-outlined-field-disabled-trailing-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_disabled-trailing-content-opacity: var(
-    --md-outlined-field-disabled-trailing-content-opacity,
-    0.38
-  );
-  --_error-content-color: var(
-    --md-outlined-field-error-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_error-focus-content-color: var(
-    --md-outlined-field-error-focus-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_error-focus-label-text-color: var(
-    --md-outlined-field-error-focus-label-text-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-focus-leading-content-color: var(
-    --md-outlined-field-error-focus-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_error-focus-outline-color: var(
-    --md-outlined-field-error-focus-outline-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-focus-supporting-text-color: var(
-    --md-outlined-field-error-focus-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-focus-trailing-content-color: var(
-    --md-outlined-field-error-focus-trailing-content-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-hover-content-color: var(
-    --md-outlined-field-error-hover-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_error-hover-label-text-color: var(
-    --md-outlined-field-error-hover-label-text-color,
-    var(--md-sys-color-on-error-container, #410e0b)
-  );
-  --_error-hover-leading-content-color: var(
-    --md-outlined-field-error-hover-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_error-hover-outline-color: var(
-    --md-outlined-field-error-hover-outline-color,
-    var(--md-sys-color-on-error-container, #410e0b)
-  );
-  --_error-hover-supporting-text-color: var(
-    --md-outlined-field-error-hover-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-hover-trailing-content-color: var(
-    --md-outlined-field-error-hover-trailing-content-color,
-    var(--md-sys-color-on-error-container, #410e0b)
-  );
-  --_error-label-text-color: var(
-    --md-outlined-field-error-label-text-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-leading-content-color: var(
-    --md-outlined-field-error-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_error-outline-color: var(
-    --md-outlined-field-error-outline-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-supporting-text-color: var(
-    --md-outlined-field-error-supporting-text-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_error-trailing-content-color: var(
-    --md-outlined-field-error-trailing-content-color,
-    var(--md-sys-color-error, #b3261e)
-  );
-  --_focus-content-color: var(
-    --md-outlined-field-focus-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_focus-label-text-color: var(
-    --md-outlined-field-focus-label-text-color,
-    var(--md-sys-color-primary, #6750a4)
-  );
-  --_focus-leading-content-color: var(
-    --md-outlined-field-focus-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_focus-outline-color: var(
-    --md-outlined-field-focus-outline-color,
-    var(--md-sys-color-primary, #6750a4)
-  );
-  --_focus-outline-width: var(--md-outlined-field-focus-outline-width, 3px);
-  --_focus-supporting-text-color: var(
-    --md-outlined-field-focus-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_focus-trailing-content-color: var(
-    --md-outlined-field-focus-trailing-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_hover-content-color: var(
-    --md-outlined-field-hover-content-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_hover-label-text-color: var(
-    --md-outlined-field-hover-label-text-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_hover-leading-content-color: var(
-    --md-outlined-field-hover-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_hover-outline-color: var(
-    --md-outlined-field-hover-outline-color,
-    var(--md-sys-color-on-surface, #1d1b20)
-  );
-  --_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);
-  --_hover-supporting-text-color: var(
-    --md-outlined-field-hover-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_hover-trailing-content-color: var(
-    --md-outlined-field-hover-trailing-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_label-text-color: var(
-    --md-outlined-field-label-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_label-text-font: var(
-    --md-outlined-field-label-text-font,
-    var(
-      --md-sys-typescale-body-large-font,
-      var(--md-ref-typeface-plain, Roboto)
-    )
-  );
-  --_label-text-line-height: var(
-    --md-outlined-field-label-text-line-height,
-    var(--md-sys-typescale-body-large-line-height, 1.5rem)
-  );
-  --_label-text-padding-bottom: var(
-    --md-outlined-field-label-text-padding-bottom,
-    8px
-  );
-  --_label-text-populated-line-height: var(
-    --md-outlined-field-label-text-populated-line-height,
-    var(--md-sys-typescale-body-small-line-height, 1rem)
-  );
-  --_label-text-populated-size: var(
-    --md-outlined-field-label-text-populated-size,
-    var(--md-sys-typescale-body-small-size, 0.75rem)
-  );
-  --_label-text-size: var(
-    --md-outlined-field-label-text-size,
-    var(--md-sys-typescale-body-large-size, 1rem)
-  );
-  --_label-text-weight: var(
-    --md-outlined-field-label-text-weight,
-    var(
-      --md-sys-typescale-body-large-weight,
-      var(--md-ref-typeface-weight-regular, 400)
-    )
-  );
-  --_leading-content-color: var(
-    --md-outlined-field-leading-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_leading-space: var(--md-outlined-field-leading-space, 16px);
-  --_outline-color: var(
-    --md-outlined-field-outline-color,
-    var(--md-sys-color-outline, #79747e)
-  );
-  --_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);
-  --_outline-width: var(--md-outlined-field-outline-width, 1px);
-  --_supporting-text-color: var(
-    --md-outlined-field-supporting-text-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_supporting-text-font: var(
-    --md-outlined-field-supporting-text-font,
-    var(
-      --md-sys-typescale-body-small-font,
-      var(--md-ref-typeface-plain, Roboto)
-    )
-  );
-  --_supporting-text-leading-space: var(
-    --md-outlined-field-supporting-text-leading-space,
-    16px
-  );
-  --_supporting-text-line-height: var(
-    --md-outlined-field-supporting-text-line-height,
-    var(--md-sys-typescale-body-small-line-height, 1rem)
-  );
-  --_supporting-text-size: var(
-    --md-outlined-field-supporting-text-size,
-    var(--md-sys-typescale-body-small-size, 0.75rem)
-  );
-  --_supporting-text-top-space: var(
-    --md-outlined-field-supporting-text-top-space,
-    4px
-  );
-  --_supporting-text-trailing-space: var(
-    --md-outlined-field-supporting-text-trailing-space,
-    16px
-  );
-  --_supporting-text-weight: var(
-    --md-outlined-field-supporting-text-weight,
-    var(
-      --md-sys-typescale-body-small-weight,
-      var(--md-ref-typeface-weight-regular, 400)
-    )
-  );
-  --_top-space: var(--md-outlined-field-top-space, 16px);
-  --_trailing-content-color: var(
-    --md-outlined-field-trailing-content-color,
-    var(--md-sys-color-on-surface-variant, #49454f)
-  );
-  --_trailing-space: var(--md-outlined-field-trailing-space, 16px);
-  --_container-shape-start-start: var(
-    --md-outlined-field-container-shape-start-start,
-    var(--_container-shape)
-  );
-  --_container-shape-start-end: var(
-    --md-outlined-field-container-shape-start-end,
-    var(--_container-shape)
-  );
-  --_container-shape-end-end: var(
-    --md-outlined-field-container-shape-end-end,
-    var(--_container-shape)
-  );
-  --_container-shape-end-start: var(
-    --md-outlined-field-container-shape-end-start,
-    var(--_container-shape)
-  );
-}
-
-.field {
-  width: 100%;
-  cursor: text;
-  display: flex;
-  resize: inherit;
-  flex: 1;
-  outline: none;
-  flex-direction: column;
-  writing-mode: horizontal-tb;
-  max-width: 100%;
-}
-
-.container-overflow {
-  resize: inherit;
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-end-radius: var(--_container-shape-end-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  display: flex;
-  height: 100%;
-  position: relative;
-}
-
-.container {
-  align-items: center;
-  border-radius: inherit;
-  display: flex;
-  flex: 1;
-  max-height: 100%;
-  min-height: 100%;
-  min-width: min-content;
-  position: relative;
-}
-
-.start {
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  box-sizing: border-box;
-  height: 100%;
-  position: relative;
-}
-
-.middle {
-  display: flex;
-  box-sizing: border-box;
-  height: 100%;
-  position: relative;
-  align-items: stretch;
-  align-self: baseline;
-  flex: 1;
-}
-
-.end {
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  box-sizing: border-box;
-  height: 100%;
-  position: relative;
-  color: var(--_trailing-content-color);
-}
-.focused .end {
-  color: var(--_focus-trailing-content-color);
-}
-
-.content {
-  color: var(--_content-color);
-  display: flex;
-  flex: 1 1 0%;
-  opacity: 0;
-  transition: opacity 83ms cubic-bezier(0.2, 0, 0, 1) 0s;
-}
-.focused .content,
-.populated .content {
-  opacity: 1;
-  transition-delay: 67ms;
-}
-
-.input {
-  caret-color: var(--_caret-color);
-  overflow-x: hidden;
-  text-align: inherit;
-}
-
-.label {
-  box-sizing: border-box;
-  color: var(--_label-text-color);
-  overflow: hidden;
-  max-width: 100%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  z-index: 1;
-  font-family: var(--_label-text-font);
-  font-size: var(--_label-text-size);
-  line-height: var(--_label-text-line-height);
-  font-weight: var(--_label-text-weight);
-  width: min-content;
-  &.resting {
-    position: absolute;
-    top: var(--_top-space);
-  }
-  &.floating {
-    font-size: var(--_label-text-populated-size);
-    line-height: var(--_label-text-populated-line-height);
-    transform-origin: top left;
-  }
-  &.visible {
-    opacity: 0;
-  }
-}
-.error .label {
-  color: var(--_error-label-text-color);
-}
-
-.input-wrapper {
-  all: unset;
-  color: currentColor;
-  font-family: var(--_content-font);
-  font-size: var(--_content-size);
-  line-height: var(--_content-line-height);
-  font-weight: var(--_content-weight);
-  width: 100%;
-  overflow-wrap: revert;
-  white-space: revert;
-  display: flex;
-  padding-top: var(--_top-space);
-  padding-bottom: var(--_bottom-space);
-  & > * {
-    all: inherit;
-    padding: 0;
-  }
-}
-.field:not(.no-label) .filled .input-wrapper {
-  padding-bottom: var(--_with-label-bottom-space);
-  padding-top: calc(
-    var(--_with-label-top-space) + var(--_label-text-populated-line-height)
-  );
-}
-.field:not(.with-start) .filled .input-wrapper {
-  padding-inline-start: var(--_leading-space);
-}
-.field:not(.with-end) .filled .input-wrapper {
-  padding-inline-end: var(--_trailing-space);
-}
-
-.field:not(.no-label) .outlined .input-wrapper {
-  padding-top: var(--_top-space);
-  padding-bottom: var(--_bottom-space);
-}
-
-.field:not(.with-start) .outlined .input-wrapper {
-  padding-inline-start: max(
-    var(--_leading-space),
-    max(var(--_container-shape-start-start), var(--_container-shape-end-start)) +
-      var(--_outline-label-padding)
-  );
-}
-.field:not(.with-end) .outlined .input-wrapper {
-  padding-inline-end: max(
-    var(--_trailing-space),
-    max(var(--_container-shape-start-end), var(--_container-shape-end-end))
-  );
-}
-
-.background {
-  background-color: var(--_container-color);
-  border-radius: inherit;
-  inset: 0;
-  position: absolute;
-}
-
-.state-layer {
-  border-radius: inherit;
-  inset: 0;
-  pointer-events: none;
-  position: absolute;
-  visibility: hidden;
-}
-:hover .state-layer {
-  background: var(--_hover-state-layer-color);
-  opacity: var(--_hover-state-layer-opacity);
-}
-.field:not(.disabled):hover .state-layer {
-  visibility: visible;
-}
-
-.active-indicator {
-  inset: auto 0 0 0;
-  pointer-events: none;
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  &:before {
-    border-bottom: var(--_active-indicator-height) solid
-      var(--_active-indicator-color);
-    inset: auto 0 0 0;
-    content: '';
-    position: absolute;
-    width: 100%;
-    border-bottom-color: var(--_hover-active-indicator-color);
-    border-bottom-width: var(--_hover-active-indicator-height);
-  }
-  &:after {
-    border-bottom: var(--_active-indicator-height) solid
-      var(--_active-indicator-color);
-    inset: auto 0 0 0;
-    content: '';
-    position: absolute;
-    width: 100%;
-    opacity: 0;
-    transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
-    border-bottom-color: var(--_focus-active-indicator-color);
-    border-bottom-width: var(--_focus-active-indicator-height);
-  }
-}
-.focused .active-indicator:after {
-  opacity: 1;
-}
-
-.label-wrapper {
-  inset: 0;
-  pointer-events: none;
-  position: absolute;
-  text-align: initial;
-}
-
-.field:not(.with-start) .filled .label-wrapper {
-  margin-inline-start: var(--_leading-space);
-}
-.field:not(.with-end) .filled .label-wrapper {
-  margin-inline-end: var(--_trailing-space);
-}
-
-.field:not(.with-start) .outlined .label-wrapper {
-  margin-inline-start: max(
-    var(--_leading-space),
-    max(var(--_container-shape-start-start), var(--_container-shape-end-start)) +
-      var(--_outline-label-padding)
-  );
-}
-.field:not(.with-end) .outlined .label-wrapper {
-  margin-inline-end: max(
-    var(--_trailing-space),
-    max(var(--_container-shape-start-end), var(--_container-shape-end-end))
-  );
-}
-
-.outline {
-  border-color: var(--_outline-color);
-  border-radius: inherit;
-  display: flex;
-  pointer-events: none;
-  height: 100%;
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-}
-:hover .outline {
-  border-color: var(--_hover-outline-color);
-  color: var(--_hover-outline-color);
-}
-.focused .outline {
-  color: var(--_focus-outline-color);
-  border-color: var(--_focus-outline-color);
-}
-.error .outline {
-  border-color: var(--_error-outline-color);
-  color: var(--_error-outline-color);
-}
-
-.outline-start {
-  border: inherit;
-  border-radius: inherit;
-  box-sizing: border-box;
-  position: relative;
-  padding-inline-start: max(
-    var(--_leading-space),
-    max(var(--_container-shape-start-start), var(--_container-shape-end-start)) +
-      var(--_outline-label-padding)
-  );
-  &:before,
-  &:after {
-    border: inherit;
-    content: '';
-    inset: 0;
-    position: absolute;
-  }
-  &:before {
-    border-width: var(--_outline-width);
-    border-inline-start-style: solid;
-    border-inline-end-style: none;
-    border-start-start-radius: inherit;
-    border-start-end-radius: 0;
-    border-end-start-radius: inherit;
-    border-end-end-radius: 0;
-    margin-inline-end: var(--_outline-label-padding);
-    border-bottom-style: solid;
-    border-top-style: solid;
-  }
-  &:after {
-    border-width: var(--_focus-outline-width);
-    border-inline-start-style: solid;
-    border-inline-end-style: none;
-    border-start-start-radius: inherit;
-    border-start-end-radius: 0;
-    border-end-start-radius: inherit;
-    border-end-end-radius: 0;
-    margin-inline-end: var(--_outline-label-padding);
-    opacity: 0;
-    transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
-    border-bottom-style: solid;
-    border-top-style: solid;
-  }
-}
-
-.outline-notch {
-  align-items: flex-start;
-  border: inherit;
-  display: flex;
-  margin-inline-start: calc(-1 * var(--_outline-label-padding));
-  margin-inline-end: var(--_outline-label-padding);
-  max-width: calc(100% - var(--_leading-space) - var(--_trailing-space));
-  padding: 0 var(--_outline-label-padding);
-  position: relative;
-}
-.no-label .outline-notch {
-  display: none;
-}
-
-.outline-end {
-  border: inherit;
-  border-radius: inherit;
-  box-sizing: border-box;
-  position: relative;
-  flex-grow: 1;
-  margin-inline-start: calc(-1 * var(--_outline-label-padding));
-  &:before,
-  &:after {
-    border: inherit;
-    content: '';
-    inset: 0;
-    position: absolute;
-  }
-  &:before {
-    border-width: var(--_outline-width);
-    border-inline-start-style: none;
-    border-inline-end-style: solid;
-    border-start-start-radius: 0;
-    border-start-end-radius: inherit;
-    border-end-start-radius: 0;
-    border-end-end-radius: inherit;
-    border-bottom-style: solid;
-    border-top-style: solid;
-  }
-  &:after {
-    border-width: var(--_focus-outline-width);
-    border-inline-start-style: none;
-    border-inline-end-style: solid;
-    border-start-start-radius: 0;
-    border-start-end-radius: inherit;
-    border-end-start-radius: 0;
-    border-end-end-radius: inherit;
-    opacity: 0;
-    transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
-    border-bottom-style: solid;
-    border-top-style: solid;
-  }
-}
-
-.outline-panel-inactive {
-  border-width: var(--_outline-width);
-  content: '';
-  inset: 0;
-  position: absolute;
-  border-left-style: none;
-  border-right-style: none;
-  border-top-style: none;
-  border-color: inherit;
-  border-bottom-style: solid;
-  &:before,
-  &:after {
-    border: inherit;
-    content: '';
-    inset: 0;
-    position: absolute;
-    border-width: var(--_outline-width);
-    border-top-style: solid;
-    border-bottom: none;
-    bottom: auto;
-    transform: scaleX(1);
-    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
-  }
-  &:before {
-    right: 50%;
-    transform-origin: top left;
-  }
-  &:after {
-    left: 50%;
-    transform-origin: top right;
-  }
-}
-
-.outline-panel-active {
-  border: inherit;
-  content: '';
-  inset: 0;
-  position: absolute;
-  border-width: var(--_focus-outline-width);
-  opacity: 0;
-  border-top-style: none;
-  border-left-style: none;
-  border-right-style: none;
-  border-bottom-style: solid;
-  transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
-  &:before,
-  &:after {
-    border: inherit;
-    content: '';
-    inset: 0;
-    position: absolute;
-    border-width: var(--_focus-outline-width);
-    border-top-style: solid;
-    border-bottom: none;
-    bottom: auto;
-    transform: scaleX(1);
-    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
-  }
-  &:before {
-    right: 50%;
-    transform-origin: top left;
-  }
-  &:before {
-    left: 50%;
-    transform-origin: top right;
-  }
-}
-
-.focused .outline-start:after,
-.focused .outline-end:after,
-.focused .outline-panel-active {
-  opacity: 1;
-}
-.populated .outline-panel-inactive:before,
-.populated .outline-panel-inactive:after,
-.populated .outline-panel-active:before,
-.populated .outline-panel-active:after,
-.focused .outline-panel-inactive:before,
-.focused .outline-panel-inactive:after,
-.focused .outline-panel-active:before,
-.focused .outline-panel-active:after {
-  transform: scaleX(0);
-}
-
-.outline-label {
-  display: flex;
-  max-width: 100%;
-  transform: translateY(calc(-100% + var(--_label-text-padding-bottom)));
-}
+.filled {
+  --_active-indicator-color: var(
+    --md-filled-field-active-indicator-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_active-indicator-height: var(
+    --md-filled-field-active-indicator-height,
+    1px
+  );
+  --_bottom-space: var(--md-filled-field-bottom-space, 16px);
+  --_container-color: var(
+    --md-filled-field-container-color,
+    var(--md-sys-color-surface-container-highest, #e6e0e9)
+  );
+  --_container-shape-start-start: var(
+    --md-filled-field-container-shape-start-start,
+    var(--md-filled-field-container-shape, 4px)
+  );
+  --_container-shape-start-end: var(
+    --md-filled-field-container-shape-start-end,
+    var(--md-filled-field-container-shape, 4px)
+  );
+  --_container-shape-end-end: var(
+    --md-filled-field-container-shape-end-end,
+    var(--md-filled-field-container-shape, 0px)
+  );
+  --_container-shape-end-start: var(
+    --md-filled-field-container-shape-end-start,
+    var(--md-filled-field-container-shape, 0px)
+  );
+  --_content-color: var(
+    --md-filled-field-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_content-font: var(
+    --md-filled-field-content-font,
+    var(
+      --md-sys-typescale-body-large-font,
+      var(--md-ref-typeface-plain, Roboto)
+    )
+  );
+  --_content-line-height: var(
+    --md-filled-field-content-line-height,
+    var(--md-sys-typescale-body-large-line-height, 1.5rem)
+  );
+  --_content-size: var(
+    --md-filled-field-content-size,
+    var(--md-sys-typescale-body-large-size, 1rem)
+  );
+  --_content-weight: var(
+    --md-filled-field-content-weight,
+    var(
+      --md-sys-typescale-body-large-weight,
+      var(--md-ref-typeface-weight-regular, 400)
+    )
+  );
+  --_disabled-active-indicator-color: var(
+    --md-filled-field-disabled-active-indicator-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-active-indicator-height: var(
+    --md-filled-field-disabled-active-indicator-height,
+    1px
+  );
+  --_disabled-active-indicator-opacity: var(
+    --md-filled-field-disabled-active-indicator-opacity,
+    0.38
+  );
+  --_disabled-container-color: var(
+    --md-filled-field-disabled-container-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-container-opacity: var(
+    --md-filled-field-disabled-container-opacity,
+    0.04
+  );
+  --_disabled-content-color: var(
+    --md-filled-field-disabled-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-content-opacity: var(
+    --md-filled-field-disabled-content-opacity,
+    0.38
+  );
+  --_disabled-label-text-color: var(
+    --md-filled-field-disabled-label-text-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-label-text-opacity: var(
+    --md-filled-field-disabled-label-text-opacity,
+    0.38
+  );
+  --_disabled-leading-content-color: var(
+    --md-filled-field-disabled-leading-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-leading-content-opacity: var(
+    --md-filled-field-disabled-leading-content-opacity,
+    0.38
+  );
+  --_disabled-supporting-text-color: var(
+    --md-filled-field-disabled-supporting-text-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-supporting-text-opacity: var(
+    --md-filled-field-disabled-supporting-text-opacity,
+    0.38
+  );
+  --_disabled-trailing-content-color: var(
+    --md-filled-field-disabled-trailing-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-trailing-content-opacity: var(
+    --md-filled-field-disabled-trailing-content-opacity,
+    0.38
+  );
+  --_error-active-indicator-color: var(
+    --md-filled-field-error-active-indicator-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-content-color: var(
+    --md-filled-field-error-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_error-focus-active-indicator-color: var(
+    --md-filled-field-error-focus-active-indicator-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-focus-content-color: var(
+    --md-filled-field-error-focus-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_error-focus-label-text-color: var(
+    --md-filled-field-error-focus-label-text-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-focus-leading-content-color: var(
+    --md-filled-field-error-focus-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_error-focus-supporting-text-color: var(
+    --md-filled-field-error-focus-supporting-text-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-focus-trailing-content-color: var(
+    --md-filled-field-error-focus-trailing-content-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-hover-active-indicator-color: var(
+    --md-filled-field-error-hover-active-indicator-color,
+    var(--md-sys-color-on-error-container, #410e0b)
+  );
+  --_error-hover-content-color: var(
+    --md-filled-field-error-hover-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_error-hover-label-text-color: var(
+    --md-filled-field-error-hover-label-text-color,
+    var(--md-sys-color-on-error-container, #410e0b)
+  );
+  --_error-hover-leading-content-color: var(
+    --md-filled-field-error-hover-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_error-hover-state-layer-color: var(
+    --md-filled-field-error-hover-state-layer-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_error-hover-state-layer-opacity: var(
+    --md-filled-field-error-hover-state-layer-opacity,
+    0.08
+  );
+  --_error-hover-supporting-text-color: var(
+    --md-filled-field-error-hover-supporting-text-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-hover-trailing-content-color: var(
+    --md-filled-field-error-hover-trailing-content-color,
+    var(--md-sys-color-on-error-container, #410e0b)
+  );
+  --_error-label-text-color: var(
+    --md-filled-field-error-label-text-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-leading-content-color: var(
+    --md-filled-field-error-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_error-supporting-text-color: var(
+    --md-filled-field-error-supporting-text-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-trailing-content-color: var(
+    --md-filled-field-error-trailing-content-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_focus-active-indicator-color: var(
+    --md-filled-field-focus-active-indicator-color,
+    var(--md-sys-color-primary, #6750a4)
+  );
+  --_focus-active-indicator-height: var(
+    --md-filled-field-focus-active-indicator-height,
+    3px
+  );
+  --_focus-content-color: var(
+    --md-filled-field-focus-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_focus-label-text-color: var(
+    --md-filled-field-focus-label-text-color,
+    var(--md-sys-color-primary, #6750a4)
+  );
+  --_focus-leading-content-color: var(
+    --md-filled-field-focus-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_focus-supporting-text-color: var(
+    --md-filled-field-focus-supporting-text-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_focus-trailing-content-color: var(
+    --md-filled-field-focus-trailing-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_hover-active-indicator-color: var(
+    --md-filled-field-hover-active-indicator-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_hover-active-indicator-height: var(
+    --md-filled-field-hover-active-indicator-height,
+    1px
+  );
+  --_hover-content-color: var(
+    --md-filled-field-hover-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_hover-label-text-color: var(
+    --md-filled-field-hover-label-text-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_hover-leading-content-color: var(
+    --md-filled-field-hover-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_hover-state-layer-color: var(
+    --md-filled-field-hover-state-layer-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_hover-state-layer-opacity: var(
+    --md-filled-field-hover-state-layer-opacity,
+    0.08
+  );
+  --_hover-supporting-text-color: var(
+    --md-filled-field-hover-supporting-text-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_hover-trailing-content-color: var(
+    --md-filled-field-hover-trailing-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_label-text-color: var(
+    --md-filled-field-label-text-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_label-text-font: var(
+    --md-filled-field-label-text-font,
+    var(
+      --md-sys-typescale-body-large-font,
+      var(--md-ref-typeface-plain, Roboto)
+    )
+  );
+  --_label-text-line-height: var(
+    --md-filled-field-label-text-line-height,
+    var(--md-sys-typescale-body-large-line-height, 1.5rem)
+  );
+  --_label-text-populated-line-height: var(
+    --md-filled-field-label-text-populated-line-height,
+    var(--md-sys-typescale-body-small-line-height, 1rem)
+  );
+  --_label-text-populated-size: var(
+    --md-filled-field-label-text-populated-size,
+    var(--md-sys-typescale-body-small-size, 0.75rem)
+  );
+  --_label-text-size: var(
+    --md-filled-field-label-text-size,
+    var(--md-sys-typescale-body-large-size, 1rem)
+  );
+  --_label-text-weight: var(
+    --md-filled-field-label-text-weight,
+    var(
+      --md-sys-typescale-body-large-weight,
+      var(--md-ref-typeface-weight-regular, 400)
+    )
+  );
+  --_leading-content-color: var(
+    --md-filled-field-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_leading-space: var(--md-filled-field-leading-space, 16px);
+  --_supporting-text-color: var(
+    --md-filled-field-supporting-text-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_supporting-text-font: var(
+    --md-filled-field-supporting-text-font,
+    var(
+      --md-sys-typescale-body-small-font,
+      var(--md-ref-typeface-plain, Roboto)
+    )
+  );
+  --_supporting-text-leading-space: var(
+    --md-filled-field-supporting-text-leading-space,
+    16px
+  );
+  --_supporting-text-line-height: var(
+    --md-filled-field-supporting-text-line-height,
+    var(--md-sys-typescale-body-small-line-height, 1rem)
+  );
+  --_supporting-text-size: var(
+    --md-filled-field-supporting-text-size,
+    var(--md-sys-typescale-body-small-size, 0.75rem)
+  );
+  --_supporting-text-top-space: var(
+    --md-filled-field-supporting-text-top-space,
+    4px
+  );
+  --_supporting-text-trailing-space: var(
+    --md-filled-field-supporting-text-trailing-space,
+    16px
+  );
+  --_supporting-text-weight: var(
+    --md-filled-field-supporting-text-weight,
+    var(
+      --md-sys-typescale-body-small-weight,
+      var(--md-ref-typeface-weight-regular, 400)
+    )
+  );
+  --_top-space: var(--md-filled-field-top-space, 16px);
+  --_trailing-content-color: var(
+    --md-filled-field-trailing-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_trailing-space: var(--md-filled-field-trailing-space, 16px);
+  --_with-label-bottom-space: var(
+    --md-filled-field-with-label-bottom-space,
+    8px
+  );
+  --_with-label-top-space: var(--md-filled-field-with-label-top-space, 8px);
+}
+
+.outlined {
+  --_bottom-space: var(--md-outlined-field-bottom-space, 16px);
+  --_container-shape: var(--md-outlined-field-container-shape, 4px);
+  --_content-color: var(
+    --md-outlined-field-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_content-font: var(
+    --md-outlined-field-content-font,
+    var(
+      --md-sys-typescale-body-large-font,
+      var(--md-ref-typeface-plain, Roboto)
+    )
+  );
+  --_content-line-height: var(
+    --md-outlined-field-content-line-height,
+    var(--md-sys-typescale-body-large-line-height, 1.5rem)
+  );
+  --_content-size: var(
+    --md-outlined-field-content-size,
+    var(--md-sys-typescale-body-large-size, 1rem)
+  );
+  --_content-weight: var(
+    --md-outlined-field-content-weight,
+    var(
+      --md-sys-typescale-body-large-weight,
+      var(--md-ref-typeface-weight-regular, 400)
+    )
+  );
+  --_disabled-content-color: var(
+    --md-outlined-field-disabled-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-content-opacity: var(
+    --md-outlined-field-disabled-content-opacity,
+    0.38
+  );
+  --_disabled-label-text-color: var(
+    --md-outlined-field-disabled-label-text-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-label-text-opacity: var(
+    --md-outlined-field-disabled-label-text-opacity,
+    0.38
+  );
+  --_disabled-leading-content-color: var(
+    --md-outlined-field-disabled-leading-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-leading-content-opacity: var(
+    --md-outlined-field-disabled-leading-content-opacity,
+    0.38
+  );
+  --_disabled-outline-color: var(
+    --md-outlined-field-disabled-outline-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-outline-opacity: var(
+    --md-outlined-field-disabled-outline-opacity,
+    0.12
+  );
+  --_disabled-outline-width: var(
+    --md-outlined-field-disabled-outline-width,
+    1px
+  );
+  --_disabled-supporting-text-color: var(
+    --md-outlined-field-disabled-supporting-text-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-supporting-text-opacity: var(
+    --md-outlined-field-disabled-supporting-text-opacity,
+    0.38
+  );
+  --_disabled-trailing-content-color: var(
+    --md-outlined-field-disabled-trailing-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_disabled-trailing-content-opacity: var(
+    --md-outlined-field-disabled-trailing-content-opacity,
+    0.38
+  );
+  --_error-content-color: var(
+    --md-outlined-field-error-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_error-focus-content-color: var(
+    --md-outlined-field-error-focus-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_error-focus-label-text-color: var(
+    --md-outlined-field-error-focus-label-text-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-focus-leading-content-color: var(
+    --md-outlined-field-error-focus-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_error-focus-outline-color: var(
+    --md-outlined-field-error-focus-outline-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-focus-supporting-text-color: var(
+    --md-outlined-field-error-focus-supporting-text-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-focus-trailing-content-color: var(
+    --md-outlined-field-error-focus-trailing-content-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-hover-content-color: var(
+    --md-outlined-field-error-hover-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_error-hover-label-text-color: var(
+    --md-outlined-field-error-hover-label-text-color,
+    var(--md-sys-color-on-error-container, #410e0b)
+  );
+  --_error-hover-leading-content-color: var(
+    --md-outlined-field-error-hover-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_error-hover-outline-color: var(
+    --md-outlined-field-error-hover-outline-color,
+    var(--md-sys-color-on-error-container, #410e0b)
+  );
+  --_error-hover-supporting-text-color: var(
+    --md-outlined-field-error-hover-supporting-text-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-hover-trailing-content-color: var(
+    --md-outlined-field-error-hover-trailing-content-color,
+    var(--md-sys-color-on-error-container, #410e0b)
+  );
+  --_error-label-text-color: var(
+    --md-outlined-field-error-label-text-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-leading-content-color: var(
+    --md-outlined-field-error-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_error-outline-color: var(
+    --md-outlined-field-error-outline-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-supporting-text-color: var(
+    --md-outlined-field-error-supporting-text-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_error-trailing-content-color: var(
+    --md-outlined-field-error-trailing-content-color,
+    var(--md-sys-color-error, #b3261e)
+  );
+  --_focus-content-color: var(
+    --md-outlined-field-focus-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_focus-label-text-color: var(
+    --md-outlined-field-focus-label-text-color,
+    var(--md-sys-color-primary, #6750a4)
+  );
+  --_focus-leading-content-color: var(
+    --md-outlined-field-focus-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_focus-outline-color: var(
+    --md-outlined-field-focus-outline-color,
+    var(--md-sys-color-primary, #6750a4)
+  );
+  --_focus-outline-width: var(--md-outlined-field-focus-outline-width, 3px);
+  --_focus-supporting-text-color: var(
+    --md-outlined-field-focus-supporting-text-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_focus-trailing-content-color: var(
+    --md-outlined-field-focus-trailing-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_hover-content-color: var(
+    --md-outlined-field-hover-content-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_hover-label-text-color: var(
+    --md-outlined-field-hover-label-text-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_hover-leading-content-color: var(
+    --md-outlined-field-hover-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_hover-outline-color: var(
+    --md-outlined-field-hover-outline-color,
+    var(--md-sys-color-on-surface, #1d1b20)
+  );
+  --_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);
+  --_hover-supporting-text-color: var(
+    --md-outlined-field-hover-supporting-text-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_hover-trailing-content-color: var(
+    --md-outlined-field-hover-trailing-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_label-text-color: var(
+    --md-outlined-field-label-text-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_label-text-font: var(
+    --md-outlined-field-label-text-font,
+    var(
+      --md-sys-typescale-body-large-font,
+      var(--md-ref-typeface-plain, Roboto)
+    )
+  );
+  --_label-text-line-height: var(
+    --md-outlined-field-label-text-line-height,
+    var(--md-sys-typescale-body-large-line-height, 1.5rem)
+  );
+  --_label-text-padding-bottom: var(
+    --md-outlined-field-label-text-padding-bottom,
+    8px
+  );
+  --_label-text-populated-line-height: var(
+    --md-outlined-field-label-text-populated-line-height,
+    var(--md-sys-typescale-body-small-line-height, 1rem)
+  );
+  --_label-text-populated-size: var(
+    --md-outlined-field-label-text-populated-size,
+    var(--md-sys-typescale-body-small-size, 0.75rem)
+  );
+  --_label-text-size: var(
+    --md-outlined-field-label-text-size,
+    var(--md-sys-typescale-body-large-size, 1rem)
+  );
+  --_label-text-weight: var(
+    --md-outlined-field-label-text-weight,
+    var(
+      --md-sys-typescale-body-large-weight,
+      var(--md-ref-typeface-weight-regular, 400)
+    )
+  );
+  --_leading-content-color: var(
+    --md-outlined-field-leading-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_leading-space: var(--md-outlined-field-leading-space, 16px);
+  --_outline-color: var(
+    --md-outlined-field-outline-color,
+    var(--md-sys-color-outline, #79747e)
+  );
+  --_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);
+  --_outline-width: var(--md-outlined-field-outline-width, 1px);
+  --_supporting-text-color: var(
+    --md-outlined-field-supporting-text-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_supporting-text-font: var(
+    --md-outlined-field-supporting-text-font,
+    var(
+      --md-sys-typescale-body-small-font,
+      var(--md-ref-typeface-plain, Roboto)
+    )
+  );
+  --_supporting-text-leading-space: var(
+    --md-outlined-field-supporting-text-leading-space,
+    16px
+  );
+  --_supporting-text-line-height: var(
+    --md-outlined-field-supporting-text-line-height,
+    var(--md-sys-typescale-body-small-line-height, 1rem)
+  );
+  --_supporting-text-size: var(
+    --md-outlined-field-supporting-text-size,
+    var(--md-sys-typescale-body-small-size, 0.75rem)
+  );
+  --_supporting-text-top-space: var(
+    --md-outlined-field-supporting-text-top-space,
+    4px
+  );
+  --_supporting-text-trailing-space: var(
+    --md-outlined-field-supporting-text-trailing-space,
+    16px
+  );
+  --_supporting-text-weight: var(
+    --md-outlined-field-supporting-text-weight,
+    var(
+      --md-sys-typescale-body-small-weight,
+      var(--md-ref-typeface-weight-regular, 400)
+    )
+  );
+  --_top-space: var(--md-outlined-field-top-space, 16px);
+  --_trailing-content-color: var(
+    --md-outlined-field-trailing-content-color,
+    var(--md-sys-color-on-surface-variant, #49454f)
+  );
+  --_trailing-space: var(--md-outlined-field-trailing-space, 16px);
+  --_container-shape-start-start: var(
+    --md-outlined-field-container-shape-start-start,
+    var(--_container-shape)
+  );
+  --_container-shape-start-end: var(
+    --md-outlined-field-container-shape-start-end,
+    var(--_container-shape)
+  );
+  --_container-shape-end-end: var(
+    --md-outlined-field-container-shape-end-end,
+    var(--_container-shape)
+  );
+  --_container-shape-end-start: var(
+    --md-outlined-field-container-shape-end-start,
+    var(--_container-shape)
+  );
+}
+
+.field {
+  width: 100%;
+  cursor: text;
+  display: flex;
+  resize: inherit;
+  flex: 1;
+  outline: none;
+  flex-direction: column;
+  writing-mode: horizontal-tb;
+  max-width: 100%;
+  &:hover .outline {
+    border-color: var(--_hover-outline-color);
+    color: var(--_hover-outline-color);
+  }
+}
+
+.container-overflow {
+  resize: inherit;
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-end-radius: var(--_container-shape-end-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  display: flex;
+  height: 100%;
+  position: relative;
+}
+
+.container {
+  align-items: center;
+  border-radius: inherit;
+  display: flex;
+  flex: 1;
+  max-height: 100%;
+  min-height: 100%;
+  min-width: min-content;
+  position: relative;
+}
+
+.start {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  box-sizing: border-box;
+  height: 100%;
+  position: relative;
+}
+
+.middle {
+  display: flex;
+  box-sizing: border-box;
+  height: 100%;
+  position: relative;
+  align-items: stretch;
+  align-self: baseline;
+  flex: 1;
+}
+
+.end {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  box-sizing: border-box;
+  height: 100%;
+  position: relative;
+  color: var(--_trailing-content-color);
+}
+.focused .end {
+  color: var(--_focus-trailing-content-color);
+}
+
+.content {
+  color: var(--_content-color);
+  display: flex;
+  flex: 1 1 0%;
+  opacity: 0;
+  transition: opacity 83ms cubic-bezier(0.2, 0, 0, 1) 0s;
+}
+.focused .content,
+.populated .content {
+  opacity: 1;
+  transition-delay: 67ms;
+}
+
+.input {
+  caret-color: var(--_caret-color);
+  overflow-x: hidden;
+  text-align: inherit;
+}
+
+.label {
+  box-sizing: border-box;
+  color: var(--_label-text-color);
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  z-index: 1;
+  font-family: var(--_label-text-font);
+  font-size: var(--_label-text-size);
+  line-height: var(--_label-text-line-height);
+  font-weight: var(--_label-text-weight);
+  width: min-content;
+  &.resting {
+    position: absolute;
+    top: var(--_top-space);
+  }
+  &.floating {
+    font-size: var(--_label-text-populated-size);
+    line-height: var(--_label-text-populated-line-height);
+    transform-origin: top left;
+  }
+  &.visible {
+    opacity: 0;
+  }
+}
+.error .label {
+  color: var(--_error-label-text-color);
+}
+
+.input-wrapper {
+  all: unset;
+  color: currentColor;
+  font-family: var(--_content-font);
+  font-size: var(--_content-size);
+  line-height: var(--_content-line-height);
+  font-weight: var(--_content-weight);
+  width: 100%;
+  overflow-wrap: revert;
+  white-space: revert;
+  display: flex;
+  padding-top: var(--_top-space);
+  padding-bottom: var(--_bottom-space);
+  & > * {
+    all: inherit;
+    padding: 0;
+  }
+}
+.field:not(.no-label) .filled .input-wrapper {
+  padding-bottom: var(--_with-label-bottom-space);
+  padding-top: calc(
+    var(--_with-label-top-space) + var(--_label-text-populated-line-height)
+  );
+}
+.field:not(.with-start) .filled .input-wrapper {
+  padding-inline-start: var(--_leading-space);
+}
+.field:not(.with-end) .filled .input-wrapper {
+  padding-inline-end: var(--_trailing-space);
+}
+
+.field:not(.no-label) .outlined .input-wrapper {
+  padding-top: var(--_top-space);
+  padding-bottom: var(--_bottom-space);
+}
+
+.field:not(.with-start) .outlined .input-wrapper {
+  padding-inline-start: max(
+    var(--_leading-space),
+    max(var(--_container-shape-start-start), var(--_container-shape-end-start)) +
+      var(--_outline-label-padding)
+  );
+}
+.field:not(.with-end) .outlined .input-wrapper {
+  padding-inline-end: max(
+    var(--_trailing-space),
+    max(var(--_container-shape-start-end), var(--_container-shape-end-end))
+  );
+}
+
+.background {
+  background-color: var(--_container-color);
+  border-radius: inherit;
+  inset: 0;
+  position: absolute;
+}
+
+.state-layer {
+  border-radius: inherit;
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  visibility: hidden;
+}
+:hover .state-layer {
+  background: var(--_hover-state-layer-color);
+  opacity: var(--_hover-state-layer-opacity);
+}
+.field:not(.disabled):hover .state-layer {
+  visibility: visible;
+}
+
+.active-indicator {
+  inset: auto 0 0 0;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  &:before {
+    border-bottom: var(--_active-indicator-height) solid
+      var(--_active-indicator-color);
+    inset: auto 0 0 0;
+    content: '';
+    position: absolute;
+    width: 100%;
+    border-bottom-color: var(--_hover-active-indicator-color);
+    border-bottom-width: var(--_hover-active-indicator-height);
+  }
+  &:after {
+    border-bottom: var(--_active-indicator-height) solid
+      var(--_active-indicator-color);
+    inset: auto 0 0 0;
+    content: '';
+    position: absolute;
+    width: 100%;
+    opacity: 0;
+    transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
+    border-bottom-color: var(--_focus-active-indicator-color);
+    border-bottom-width: var(--_focus-active-indicator-height);
+  }
+}
+.focused .active-indicator:after {
+  opacity: 1;
+}
+
+.label-wrapper {
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  text-align: initial;
+}
+
+.field:not(.with-start) .filled .label-wrapper {
+  margin-inline-start: var(--_leading-space);
+}
+.field:not(.with-end) .filled .label-wrapper {
+  margin-inline-end: var(--_trailing-space);
+}
+
+.field:not(.with-start) .outlined .label-wrapper {
+  margin-inline-start: max(
+    var(--_leading-space),
+    max(var(--_container-shape-start-start), var(--_container-shape-end-start)) +
+      var(--_outline-label-padding)
+  );
+}
+.field:not(.with-end) .outlined .label-wrapper {
+  margin-inline-end: max(
+    var(--_trailing-space),
+    max(var(--_container-shape-start-end), var(--_container-shape-end-end))
+  );
+}
+
+.outline {
+  border-color: var(--_outline-color);
+  border-radius: inherit;
+  display: flex;
+  pointer-events: none;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+
+.field.focused .outline {
+  color: var(--_focus-outline-color);
+  border-color: var(--_focus-outline-color);
+}
+.error .outline {
+  border-color: var(--_error-outline-color);
+  color: var(--_error-outline-color);
+}
+
+.outline-start {
+  border: inherit;
+  border-radius: inherit;
+  box-sizing: border-box;
+  position: relative;
+  padding-inline-start: max(
+    var(--_leading-space),
+    max(var(--_container-shape-start-start), var(--_container-shape-end-start)) +
+      var(--_outline-label-padding)
+  );
+  &:before,
+  &:after {
+    border: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+  }
+  &:before {
+    border-width: var(--_outline-width);
+    border-inline-start-style: solid;
+    border-inline-end-style: none;
+    border-start-start-radius: inherit;
+    border-start-end-radius: 0;
+    border-end-start-radius: inherit;
+    border-end-end-radius: 0;
+    margin-inline-end: var(--_outline-label-padding);
+    border-bottom-style: solid;
+    border-top-style: solid;
+  }
+  &:after {
+    border-width: var(--_focus-outline-width);
+    border-inline-start-style: solid;
+    border-inline-end-style: none;
+    border-start-start-radius: inherit;
+    border-start-end-radius: 0;
+    border-end-start-radius: inherit;
+    border-end-end-radius: 0;
+    margin-inline-end: var(--_outline-label-padding);
+    opacity: 0;
+    transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
+    border-bottom-style: solid;
+    border-top-style: solid;
+  }
+}
+
+.outline-notch {
+  align-items: flex-start;
+  border: inherit;
+  display: flex;
+  margin-inline-start: calc(-1 * var(--_outline-label-padding));
+  margin-inline-end: var(--_outline-label-padding);
+  max-width: calc(100% - var(--_leading-space) - var(--_trailing-space));
+  padding: 0 var(--_outline-label-padding);
+  position: relative;
+}
+.no-label .outline-notch {
+  display: none;
+}
+
+.outline-end {
+  border: inherit;
+  border-radius: inherit;
+  box-sizing: border-box;
+  position: relative;
+  flex-grow: 1;
+  margin-inline-start: calc(-1 * var(--_outline-label-padding));
+  &:before,
+  &:after {
+    border: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+  }
+  &:before {
+    border-width: var(--_outline-width);
+    border-inline-start-style: none;
+    border-inline-end-style: solid;
+    border-start-start-radius: 0;
+    border-start-end-radius: inherit;
+    border-end-start-radius: 0;
+    border-end-end-radius: inherit;
+    border-bottom-style: solid;
+    border-top-style: solid;
+  }
+  &:after {
+    border-width: var(--_focus-outline-width);
+    border-inline-start-style: none;
+    border-inline-end-style: solid;
+    border-start-start-radius: 0;
+    border-start-end-radius: inherit;
+    border-end-start-radius: 0;
+    border-end-end-radius: inherit;
+    opacity: 0;
+    transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
+    border-bottom-style: solid;
+    border-top-style: solid;
+  }
+}
+
+.outline-panel-inactive {
+  border-width: var(--_outline-width);
+  content: '';
+  inset: 0;
+  position: absolute;
+  border-left-style: none;
+  border-right-style: none;
+  border-top-style: none;
+  border-color: inherit;
+  border-bottom-style: solid;
+  &:before,
+  &:after {
+    border: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+    border-width: var(--_outline-width);
+    border-top-style: solid;
+    border-bottom: none;
+    bottom: auto;
+    transform: scaleX(1);
+    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+  &:before {
+    right: 50%;
+    transform-origin: top left;
+  }
+  &:after {
+    left: 50%;
+    transform-origin: top right;
+  }
+}
+
+.outline-panel-active {
+  border: inherit;
+  content: '';
+  inset: 0;
+  position: absolute;
+  border-width: var(--_focus-outline-width);
+  opacity: 0;
+  border-top-style: none;
+  border-left-style: none;
+  border-right-style: none;
+  border-bottom-style: solid;
+  transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
+  &:before,
+  &:after {
+    border: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+    border-width: var(--_focus-outline-width);
+    border-top-style: solid;
+    border-bottom: none;
+    bottom: auto;
+    transform: scaleX(1);
+    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+  &:before {
+    right: 50%;
+    transform-origin: top left;
+  }
+  &:before {
+    left: 50%;
+    transform-origin: top right;
+  }
+}
+
+.focused .outline-start:after,
+.focused .outline-end:after,
+.focused .outline-panel-active {
+  opacity: 1;
+}
+.populated .outline-panel-inactive:before,
+.populated .outline-panel-inactive:after,
+.populated .outline-panel-active:before,
+.populated .outline-panel-active:after,
+.focused .outline-panel-inactive:before,
+.focused .outline-panel-inactive:after,
+.focused .outline-panel-active:before,
+.focused .outline-panel-active:after {
+  transform: scaleX(0);
+}
+
+.outline-label {
+  display: flex;
+  max-width: 100%;
+  transform: translateY(calc(-100% + var(--_label-text-padding-bottom)));
+}