diff --git a/.idea/shelf/Uncommitted_changes_before_Update_at_1_28_24,_7_04_PM_[Changes]/shelved.patch b/.idea/shelf/Uncommitted_changes_before_Update_at_1_28_24,_7_04_PM_[Changes]/shelved.patch new file mode 100644 index 0000000..a5a0278 --- /dev/null +++ b/.idea/shelf/Uncommitted_changes_before_Update_at_1_28_24,_7_04_PM_[Changes]/shelved.patch @@ -0,0 +1,220 @@ +Index: src/styles/generics.css +IDEA additional info: +Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP +<+>@import \"./themes/theme.dark.css\" (prefers-color-scheme: dark);\n@import \"./themes/theme.light.css\" (prefers-color-scheme: light);\nbutton.m3.m3-fab {\n transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;\n}\nbutton.m3.m3-fab > span.m3-icon {\n font-family: Material-Symbols-Outlined-Regular, sans-serif;\n}\nbutton.m3.m3-fab.m3 {\n contain: content;\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n text-align: center;\n border: none;\n gap: 12px;\n}\nbutton.m3.m3-fab::before {\n transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;\n content: \"\";\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n position: absolute;\n background: rgba(0, 0, 0, 0);\n}\nbutton.m3.m3-fab.surface {\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);\n background-color: var(--md-sys-color-surface-container-high);\n}\nbutton.m3.m3-fab.surface > span.m3-icon, button.m3.m3-fab.surface {\n color: var(--md-sys-color-primary);\n}\nbutton.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {\n background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);\n}\nbutton.m3.m3-fab.primary {\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);\n background-color: var(--md-sys-color-primary-container);\n}\nbutton.m3.m3-fab.primary > span.m3-icon, button.m3.m3-fab.primary {\n color: var(--md-sys-color-on-primary-container);\n}\nbutton.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {\n background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);\n}\nbutton.m3.m3-fab.secondary {\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);\n background-color: var(--md-sys-color-secondary-container);\n}\nbutton.m3.m3-fab.secondary > span.m3-icon, button.m3.m3-fab.secondary {\n color: var(--md-sys-color-on-secondary-container);\n}\nbutton.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {\n background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);\n}\nbutton.m3.m3-fab.tertiary {\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);\n background-color: var(--md-sys-color-tertiary-container);\n}\nbutton.m3.m3-fab.tertiary > span.m3-icon, button.m3.m3-fab.tertiary {\n color: var(--md-sys-color-on-tertiary-container);\n}\nbutton.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {\n background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);\n}\nbutton.m3.m3-fab.m3-small-fab {\n width: 40px;\n height: 40px;\n border-radius: 12px;\n padding: 11px;\n font-size: 24px;\n}\nbutton.m3.m3-fab.m3-default-fab {\n width: 56px;\n height: 56px;\n border-radius: 16px;\n padding: 19px;\n font-size: 24px;\n}\nbutton.m3.m3-fab.m3-large-fab {\n width: 96px;\n height: 96px;\n border-radius: 28px;\n padding: 34.5px;\n font-size: 36px;\n}\nbutton.m3.m3-fab.m3-extended-fab {\n width: auto;\n height: 56px;\n border-radius: 16px;\n padding: 19px;\n font-size: 24px;\n}\nbutton.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):hover {\n box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);\n}\nbutton.m3.m3-fab:is(.surface, .primary, .secondary, .tertiary):active {\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;\n}\nbutton.m3.m3-fab:hover.surface::before {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);\n}\nbutton.m3.m3-fab:hover.primary::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent);\n}\nbutton.m3.m3-fab:hover.secondary::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);\n}\nbutton.m3.m3-fab:hover.tertiary::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent);\n}\nbutton.m3.m3-fab:focus-visible.surface::before {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);\n}\nbutton.m3.m3-fab:focus-visible.primary::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);\n}\nbutton.m3.m3-fab:focus-visible.secondary::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);\n}\nbutton.m3.m3-fab:focus-visible.tertiary::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);\n}\n\nlabel.m3.m3-radio-label {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n}\nlabel.m3.m3-radio-label > span.m3.m3-radio-state-layer {\n position: absolute;\n width: 40px;\n aspect-ratio: inherit;\n border-radius: 50%;\n transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);\n}\n\ninput[type=radio].m3.m3-radio {\n appearance: none;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n width: 20px;\n margin: 0;\n aspect-ratio: inherit;\n border-radius: 50%;\n border: 2px solid var(--md-sys-color-on-surface-variant);\n transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);\n}\ninput[type=radio].m3.m3-radio::after {\n content: \"\";\n width: 10px;\n aspect-ratio: 1;\n border-radius: 50%;\n}\ninput[type=radio].m3.m3-radio:disabled {\n border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n}\ninput[type=radio].m3.m3-radio:checked {\n border: 2px solid var(--md-sys-color-primary);\n}\ninput[type=radio].m3.m3-radio:checked::after {\n background-color: var(--md-sys-color-primary);\n}\ninput[type=radio].m3.m3-radio:checked:disabled {\n border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n}\ninput[type=radio].m3.m3-radio:checked:disabled::after {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n}\ninput[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);\n}\ninput[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);\n}\ninput[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer + span.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);\n}\ninput[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);\n}\ninput[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n}\ninput[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer + span.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);\n}\n\n@font-face {\n font-family: Material-Icons-Regular;\n src: url(\"./font/MaterialIcons-Regular.ttf\");\n}\n@font-face {\n font-family: Material-Icons-Outlined-Regular;\n src: url(\"./font/MaterialIconsOutlined-Regular.otf\");\n}\n@font-face {\n font-family: Material-Icons-Round-Regular;\n src: url(\"./font/MaterialIconsRound-Regular.otf\");\n}\n@font-face {\n font-family: Material-Icons-Sharp-Regular;\n src: url(\"./font/MaterialIconsSharp-Regular.otf\");\n}\n@font-face {\n font-family: Material-Icons-Two-Tone-Regular;\n src: url(\"./font/MaterialIconsTwoTone-Regular.otf\");\n}\n@font-face {\n font-family: Material-Symbols-Outlined-Regular;\n src: url(\"./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf\");\n src: url(\"./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2\") format(\"woff2\");\n}\n@font-face {\n font-family: Material-Symbols-Round-Regular;\n src: url(\"./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf\");\n src: url(\"./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2\") format(\"woff2\");\n}\n@font-face {\n font-family: Material-Symbols-Sharp-Regular;\n src: url(\"./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf\");\n src: url(\"./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2\") format(\"woff2\");\n}\n@font-face {\n font-family: Roboto;\n font-face-name: Thin;\n font-weight: 100;\n src: url(\"./font/Roboto-Thin.ttf\");\n}\n@font-face {\n font-family: Roboto;\n font-face-name: Light;\n font-weight: 300;\n src: url(\"./font/Roboto-Light.ttf\");\n}\n@font-face {\n font-family: Roboto;\n font-face-name: Regular;\n font-weight: 400;\n src: url(\"./font/Roboto-Regular.ttf\");\n}\n@font-face {\n font-family: Roboto;\n font-face-name: Medium;\n font-weight: 500;\n src: url(\"./font/Roboto-Medium.ttf\");\n}\n@font-face {\n font-family: Roboto;\n font-face-name: Bold;\n font-weight: 700;\n src: url(\"./font/Roboto-Bold.ttf\");\n}\n@font-face {\n font-family: Roboto;\n font-face-name: Black;\n font-weight: 900;\n src: url(\"./font/Roboto-Black.ttf\");\n}\nbutton:not(.m3-fab, .m3-icon-button) {\n transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;\n}\nbutton:not(.m3-fab, .m3-icon-button) > span.m3-icon {\n font-family: Material-Symbols-Outlined-Regular, sans-serif;\n font-weight: 500;\n font-size: 18px;\n line-height: 18px;\n}\nbutton:not(.m3-fab, .m3-icon-button).m3 {\n contain: content;\n box-sizing: border-box;\n border-radius: 100px;\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 10px 24px;\n border: none;\n gap: 8px;\n}\nbutton:not(.m3-fab, .m3-icon-button).filled {\n background-color: var(--md-sys-color-primary);\n}\nbutton:not(.m3-fab, .m3-icon-button).filled, button:not(.m3-fab, .m3-icon-button).filled > span.m3-icon {\n color: var(--md-sys-color-on-primary);\n}\nbutton:not(.m3-fab, .m3-icon-button).outlined {\n border: 1px solid var(--md-sys-color-outline) !important;\n background-color: rgba(0, 0, 0, 0);\n}\nbutton:not(.m3-fab, .m3-icon-button).outlined, button:not(.m3-fab, .m3-icon-button).outlined > span.m3-icon {\n color: var(--md-sys-color-primary);\n}\nbutton:not(.m3-fab, .m3-icon-button).text {\n padding: 10px 12px !important;\n background-color: rgba(0, 0, 0, 0);\n}\nbutton:not(.m3-fab, .m3-icon-button).text, button:not(.m3-fab, .m3-icon-button).text > span.m3-icon {\n color: var(--md-sys-color-primary);\n}\nbutton:not(.m3-fab, .m3-icon-button).elevated {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n background-color: var(--md-sys-color-surface-container-low);\n}\nbutton:not(.m3-fab, .m3-icon-button).elevated, button:not(.m3-fab, .m3-icon-button).elevated > span.m3-icon {\n color: var(--md-sys-color-primary);\n}\nbutton:not(.m3-fab, .m3-icon-button).tonal {\n background-color: var(--md-sys-color-secondary-container);\n}\nbutton:not(.m3-fab, .m3-icon-button).tonal, button:not(.m3-fab, .m3-icon-button).tonal > span.m3-icon {\n color: var(--md-sys-color-on-secondary-container);\n}\nbutton:not(.m3-fab, .m3-icon-button)::before {\n transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;\n content: \"\";\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n position: absolute;\n background: rgba(0, 0, 0, 0);\n}\nbutton:not(.m3-fab, .m3-icon-button).filled > .m3.m3-ripple-domain > .m3.ripple {\n background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated) > .m3.m3-ripple-domain > .m3.ripple {\n background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {\n background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {\n box-shadow: none !important;\n}\nbutton:not(.m3-fab, .m3-icon-button):active.elevated {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;\n}\nbutton:not(.m3-fab, .m3-icon-button):active.tonal::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button):focus-visible.outlined {\n border-color: var(--md-sys-color-primary) !important;\n}\nbutton:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button):focus-visible:is(.outlined, .text, .elevated)::before {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n}\nbutton:not(.m3-fab, .m3-icon-button):hover.elevated {\n box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n}\nbutton:not(.m3-fab, .m3-icon-button):hover.filled::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button):hover:is(.outlined, .text, .elevated)::before {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button):hover.tonal::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button):disabled {\n pointer-events: none;\n}\nbutton:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal, .outlined, .text) {\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {\n background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n}\nbutton:not(.m3-fab, .m3-icon-button):disabled.elevated {\n box-shadow: none;\n}\nbutton:not(.m3-fab, .m3-icon-button):disabled.outlined {\n border: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;\n}\n\n.m3.m3-ripple-domain {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 20;\n pointer-events: none;\n}\n\n.m3.ripple {\n position: absolute;\n overflow: hidden;\n pointer-events: none;\n transform-origin: center;\n opacity: 0;\n z-index: 20;\n aspect-ratio: 1;\n border-radius: 50%;\n animation-name: rippleAppearanceAnimation;\n animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n animation-duration: 0.55s;\n transition: opacity, background, background-color, 0.55s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.m3.ripple.visible {\n opacity: 1 !important;\n}\n\n@keyframes rippleAppearanceAnimation {\n 0% {\n transform: scale3d(0, 0, 0);\n }\n 100% {\n transform: scale3d(1, 1, 1);\n }\n}\ninput[type=checkbox].m3.m3-switch {\n transition: background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n display: flex;\n position: relative;\n align-items: center;\n width: 52px;\n height: 32px;\n appearance: none;\n padding: 2px 2px 2px 6px;\n border-radius: 16px;\n border: 2px solid var(--md-sys-color-outline);\n background-color: var(--md-sys-color-surface-container-high);\n}\ninput[type=checkbox].m3.m3-switch:disabled {\n border: 2px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n background-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) 12%, transparent);\n}\ninput[type=checkbox].m3.m3-switch:checked {\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--md-sys-color-primary);\n}\ninput[type=checkbox].m3.m3-switch::after {\n transition: color, background-color, opacity, 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n z-index: 9;\n position: absolute;\n display: flex;\n content: \"\";\n height: 40px;\n width: 40px;\n left: -6px;\n border-radius: 50%;\n}\ninput[type=checkbox].m3.m3-switch:checked::after {\n transform: translateX(50%);\n}\ninput[type=checkbox].m3.m3-switch:checked::after, input[type=checkbox].m3.m3-switch::after, input[type=checkbox].m3.m3-switch:checked::before, input[type=checkbox].m3.m3-switch::before {\n transform-origin: center;\n}\ninput[type=checkbox].m3.m3-switch:is([data-icon=true], [data-icon=true]:checked)::before {\n font-family: Material-Symbols-Outlined-Regular, sans-serif;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-weight: 500;\n font-size: 12px;\n line-height: 12px;\n}\ninput[type=checkbox].m3.m3-switch[data-icon=true]:checked::before {\n content: \"done\" !important;\n color: var(--md-sys-color-on-primary-container);\n}\n@media (prefers-color-scheme: light) {\n input[type=checkbox].m3.m3-switch[data-icon=true]::before {\n color: var(--md-sys-color-on-primary);\n }\n input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {\n color: var(--md-sys-color-surface-container-highest);\n }\n input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n }\n}\n@media (prefers-color-scheme: dark) {\n input[type=checkbox].m3.m3-switch[data-icon=true]::before {\n color: var(--md-sys-color-surface-container-high);\n }\n input[type=checkbox].m3.m3-switch[data-icon=true]:disabled::before {\n color: var(--md-sys-color-surface-container-highest);\n }\n input[type=checkbox].m3.m3-switch[data-icon=true]:disabled:checked::before {\n color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);\n }\n}\ninput[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false])::before, input[type=checkbox].m3.m3-switch[data-icon=true]:where([data-selected=false]):disabled::before {\n transform: scale(150%);\n content: \"close\";\n}\ninput[type=checkbox].m3.m3-switch::before {\n z-index: 10;\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n content: \"\";\n display: flex;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background-color: var(--md-sys-color-outline);\n}\ninput[type=checkbox].m3.m3-switch:checked::before {\n opacity: 1;\n transform: translateX(125%) scale(150%);\n background-color: var(--md-sys-color-on-primary);\n}\ninput[type=checkbox].m3.m3-switch:hover:checked::after {\n transform: translateX(50%);\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);\n}\ninput[type=checkbox].m3.m3-switch:hover::after {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);\n}\ninput[type=checkbox].m3.m3-switch:active:checked::after {\n transform: translateX(50%);\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);\n}\ninput[type=checkbox].m3.m3-switch:active::after {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n}\ninput[type=checkbox].m3.m3-switch:active:checked::before {\n transform: translateX(125%) scale(175%);\n background-color: var(--md-sys-color-primary-container);\n}\ninput[type=checkbox].m3.m3-switch:active::before {\n transform: scale(175%);\n background-color: var(--md-sys-color-on-surface-variant);\n}\ninput[type=checkbox].m3.m3-switch:disabled:checked {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;\n}\ninput[type=checkbox].m3.m3-switch:disabled:checked::after, input[type=checkbox].m3.m3-switch:disabled::after {\n opacity: 0;\n}\ninput[type=checkbox].m3.m3-switch:disabled::before {\n opacity: 0.38;\n transform: initial;\n background-color: var(--md-sys-color-outline) !important;\n}\ninput[type=checkbox].m3.m3-switch:disabled:checked::before {\n opacity: 1;\n transform: translateX(125%) scale(150%);\n background-color: var(--md-sys-color-surface) !important;\n}\n\n@keyframes toggle-shifting {\n 50% {\n width: 30px;\n }\n 100% {\n width: 16px;\n }\n}\nlabel.m3.m3-checkbox-label {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n}\nlabel.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {\n position: absolute;\n width: 40px;\n aspect-ratio: inherit;\n border-radius: 50%;\n transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);\n}\n\nspan.m3.m3-checkbox-ripple-layer {\n z-index: 20;\n contain: content;\n border-radius: 50%;\n position: absolute;\n width: 40px;\n height: 40px;\n}\n\ninput[type=checkbox].m3.m3-checkbox {\n appearance: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: content-box;\n z-index: 10;\n width: 14px;\n height: 14px;\n margin: 0;\n border-radius: 2px;\n border: 2px solid var(--md-sys-color-on-surface-variant);\n transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);\n}\ninput[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {\n border: 2px solid var(--md-sys-color-error);\n background-color: var(--md-sys-color-error);\n}\ninput[type=checkbox].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {\n border: 2px solid var(--md-sys-color-error);\n}\ninput[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {\n border: 2px solid var(--md-sys-color-primary);\n background-color: var(--md-sys-color-primary);\n}\ninput[type=checkbox].m3.m3-checkbox:disabled:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {\n opacity: 38%;\n border: 2px solid var(--md-sys-color-on-surface);\n}\ninput[type=checkbox].m3.m3-checkbox:disabled:checked:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled) {\n opacity: 38%;\n background-color: var(--md-sys-color-on-surface);\n}\ninput[type=checkbox].m3.m3-checkbox::after {\n line-height: 18px;\n font-family: Material-Symbols-Outlined-Regular, sans-serif;\n font-weight: 700;\n font-size: 18px;\n color: var(--md-sys-color-on-primary);\n}\ninput[type=checkbox].m3.m3-checkbox:checked::after {\n content: \"done\";\n}\ninput[type=checkbox].m3.m3-checkbox:indeterminate::after {\n content: \"check_indeterminate_small\";\n}\ninput[type=checkbox].m3.m3-checkbox:hover {\n border: 2px solid var(--md-sys-color-on-surface);\n}\ninput[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) + span.m3.m3-checkbox-state-layer {\n background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);\n}\ninput[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer {\n background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);\n}\ninput[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent);\n}\ninput[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) + span.m3.m3-checkbox-state-layer {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);\n}\ninput[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);\n}\ninput[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);\n}\ninput[type=checkbox].m3.m3-checkbox:not(:disabled):hover + span.m3-checkbox-state-layer {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);\n}\ninput[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n}\ninput[type=checkbox].m3.m3-checkbox:not(:disabled):active + span.m3.m3-checkbox-state-layer + span.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);\n}\n\ndiv.m3.m3-text-field {\n position: relative;\n display: flex;\n justify-content: center;\n flex-direction: column;\n box-sizing: border-box;\n margin: 0;\n}\ndiv.m3.m3-text-field span.m3-icon.icon-before {\n align-self: start;\n}\ndiv.m3.m3-text-field + span.m3-text-field-supporting-text {\n display: flex;\n line-height: var(--md-sys-typescale-body-large-line-height);\n font-size: var(--md-sys-typescale-body-small-font-size);\n color: var(--md-sys-color-on-surface-variant);\n margin: 0 16px;\n}\ndiv.m3.m3-text-field > label {\n padding-inline: 4px;\n pointer-events: none;\n transform: translate(12px, 0);\n transition: 0.2s cubic-bezier(0.2, 0, 0, 1);\n color: var(--md-sys-color-on-surface-variant);\n line-height: var(--md-sys-typescale-body-large-line-height);\n font-size: var(--md-sys-typescale-body-large-font-size);\n position: absolute;\n}\ndiv.m3.m3-text-field > input {\n transition: 0.2s cubic-bezier(0.2, 0, 0, 1);\n color: var(--md-sys-color-on-surface);\n line-height: var(--md-sys-typescale-body-large-line-height);\n font-size: var(--md-sys-typescale-body-large-font-size);\n background-color: transparent;\n border: none;\n}\ndiv.m3.m3-text-field > span.m3-icon {\n position: absolute;\n align-self: end;\n margin: 12px;\n width: 24px;\n line-height: 24px;\n font-size: 24px;\n display: inherit;\n align-items: center;\n justify-content: inherit;\n cursor: pointer;\n color: var(--md-sys-color-on-surface-variant);\n font-family: Material-Symbols-Outlined-Regular, serif;\n}\ndiv.m3.m3-text-field > span.m3-text-field-state-layer {\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n}\ndiv.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {\n outline: none;\n caret-color: var(--md-sys-color-primary);\n}\ndiv.m3.m3-text-field.filled {\n contain: content;\n border-radius: 4px 4px 0 0;\n}\ndiv.m3.m3-text-field.filled > label.used {\n transform: translate(12px, -12px);\n line-height: var(--md-sys-typescale-body-small-line-height);\n font-size: var(--md-sys-typescale-body-small-font-size);\n}\ndiv.m3.m3-text-field.filled > input:required:user-invalid {\n caret-color: var(--md-sys-color-error);\n box-shadow: inset 0 -2px 0 var(--md-sys-color-error);\n}\ndiv.m3.m3-text-field.filled:has(input:required:user-invalid) > *, div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {\n color: var(--md-sys-color-error);\n}\ndiv.m3.m3-text-field.filled > input:focus-visible {\n outline-offset: 2px;\n box-shadow: inset 0 -2px 0 var(--md-sys-color-primary);\n}\ndiv.m3.m3-text-field.filled > input:focus-visible + label {\n color: var(--md-sys-color-primary);\n}\ndiv.m3.m3-text-field.filled:has(input:disabled), div.m3.m3-text-field.filled:has(input:disabled) + span.m3-text-field-supporting-text {\n opacity: 38%;\n}\ndiv.m3.m3-text-field.filled > input {\n box-sizing: border-box;\n border-radius: 4px 4px 0 0;\n background-color: var(--md-sys-color-surface-container-highest);\n box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant);\n}\ndiv.m3.m3-text-field.filled > input.with-after-icon {\n padding: 24px 48px 8px 16px;\n}\ndiv.m3.m3-text-field.filled > input.with-before-icon {\n padding: 24px 16px 8px 48px;\n}\ndiv.m3.m3-text-field.filled > input.with-before-icon + label {\n margin-left: 32px;\n}\ndiv.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {\n padding: 24px 16px 8px;\n}\ndiv.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {\n padding: 24px 48px 8px 48px;\n}\ndiv.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {\n transition: 0.2s cubic-bezier(0.2, 0, 0, 1);\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);\n}\ndiv.m3.m3-text-field.outlined {\n border-radius: 4px;\n}\ndiv.m3.m3-text-field.outlined > label.used {\n background-color: var(--md-sys-color-surface);\n transform: translate(12px, -27px) !important;\n line-height: var(--md-sys-typescale-body-small-line-height);\n font-size: var(--md-sys-typescale-body-small-font-size);\n}\ndiv.m3.m3-text-field.outlined > input:required:user-invalid {\n caret-color: var(--md-sys-color-error);\n outline-offset: -2px;\n outline: 2px solid var(--md-sys-color-error);\n}\ndiv.m3.m3-text-field.outlined:has(input:required:user-invalid) > *, div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {\n color: var(--md-sys-color-error);\n}\ndiv.m3.m3-text-field.outlined > input:focus-visible {\n outline-offset: -2px;\n outline: 2px solid var(--md-sys-color-primary);\n}\ndiv.m3.m3-text-field.outlined > input:focus-visible + label {\n color: var(--md-sys-color-primary);\n}\ndiv.m3.m3-text-field.outlined:has(input:disabled), div.m3.m3-text-field.outlined:has(input:disabled) + span.m3-text-field-supporting-text {\n opacity: 38%;\n}\ndiv.m3.m3-text-field.outlined > input {\n box-sizing: border-box;\n border-radius: 4px;\n outline-offset: -1px;\n outline: 1px solid var(--md-sys-color-outline);\n}\ndiv.m3.m3-text-field.outlined > input.with-after-icon {\n padding: 16px 48px 16px 16px;\n}\ndiv.m3.m3-text-field.outlined > input.with-before-icon {\n padding: 16px 16px 16px 48px;\n}\ndiv.m3.m3-text-field.outlined > input.with-before-icon + label {\n transform: translate(48px, 0);\n}\ndiv.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {\n padding: 16px;\n}\ndiv.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {\n padding: 16px 48px;\n}\ndiv.m3.m3-text-field.outlined:hover:not(:focus-visible) {\n transition: 0.2s cubic-bezier(0.2, 0, 0, 1);\n}\ndiv.m3.m3-text-field.outlined:hover:not(:focus-visible):has(input:not(div.m3.m3-text-field.outlined:hover:not(:focus-visible):user-invalid, :disabled, :focus-visible)) > label {\n color: var(--md-sys-color-on-surface);\n}\ndiv.m3.m3-text-field.outlined:hover:not(:focus-visible) > input:not(:user-invalid, :disabled, :focus-visible) {\n outline-color: var(--md-sys-color-on-surface) !important;\n}\n\nbutton.m3.m3-icon-button {\n transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;\n contain: content;\n border-radius: 50%;\n position: relative;\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 40px;\n height: 40px;\n border: none;\n padding: 0;\n}\nbutton.m3.m3-icon-button::before {\n transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n}\nbutton.m3.m3-icon-button > span.m3-icon {\n z-index: 25;\n font-size: 2em;\n font-variation-settings: \"FILL\" 0, \"wght\" 500, \"GRAD\" 0, \"opsz\" 48;\n}\nbutton.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined) {\n font-family: Material-Symbols-Round-Regular, serif;\n}\nbutton.m3.m3-icon-button:is(.default, .filled, .tonal, .outlined).selected.toggled {\n font-size: 13.49px;\n font-family: Material-Icons-Regular, serif;\n font-weight: 500;\n}\nbutton.m3.m3-icon-button.default {\n color: var(--md-sys-color-on-surface-variant);\n background-color: rgba(0, 0, 0, 0);\n}\nbutton.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {\n color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);\n background-color: rgba(0, 0, 0, 0);\n}\nbutton.m3.m3-icon-button.default.selected.toggled {\n color: var(--md-sys-color-primary);\n}\nbutton.m3.m3-icon-button.filled {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n}\nbutton.m3.m3-icon-button.filled.toggled {\n color: var(--md-sys-color-primary);\n background-color: var(--md-sys-color-surface-container-highest);\n}\nbutton.m3.m3-icon-button.filled.selected.toggled {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n}\nbutton.m3.m3-icon-button.tonal.toggled {\n color: var(--md-sys-color-on-surface-variant);\n background-color: var(--md-sys-color-surface-container-highest);\n}\nbutton.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {\n color: var(--md-sys-color-on-secondary-container);\n background-color: var(--md-sys-color-secondary-container);\n}\nbutton.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n}\nbutton.m3.m3-icon-button.outlined {\n border: 1px solid var(--md-sys-color-outline);\n color: var(--md-sys-color-on-surface-variant);\n background-color: rgba(0, 0, 0, 0);\n}\nbutton.m3.m3-icon-button.outlined:disabled {\n border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);\n color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);\n background-color: rgba(0, 0, 0, 0);\n}\nbutton.m3.m3-icon-button.outlined.toggled.selected:disabled {\n border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);\n color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n}\n@media (prefers-color-scheme: light) {\n button.m3.m3-icon-button.outlined.selected.toggled {\n border: 1px solid rgba(0, 0, 0, 0);\n background-color: var(--md-sys-color-inverse-surface-light);\n color: var(--md-sys-color-inverse-on-surface);\n }\n}\n@media (prefers-color-scheme: dark) {\n button.m3.m3-icon-button.outlined.selected.toggled {\n border: 1px solid rgba(0, 0, 0, 0);\n background-color: var(--md-sys-color-inverse-surface);\n color: var(--md-sys-color-inverse-on-surface);\n }\n}\nbutton.m3.m3-icon-button.filled:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.filled:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);\n}\nbutton.m3.m3-icon-button.filled:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);\n}\nbutton.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > .m3.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);\n}\nbutton.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);\n}\nbutton.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);\n}\nbutton.m3.m3-icon-button.tonal:not(:disabled) > .m3.m3-ripple-domain > .m3.ripple, button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled > .m3.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);\n}\nbutton.m3.m3-icon-button.tonal:not(:disabled).toggled > .m3.m3-ripple-domain > .m3.ripple {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);\n}\nbutton.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);\n}\nbutton.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);\n}\nbutton.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);\n}\nbutton.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);\n}\nbutton.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);\n}\nbutton.m3.m3-icon-button:focus-visible:not(:disabled):is(.default, .outlined)::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);\n}\nbutton.m3.m3-icon-button:focus-visible:not(:disabled).filled::before, button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled.selected::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);\n}\nbutton.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {\n background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);\n}\nbutton.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before, button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled.selected::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);\n}\nbutton.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);\n}\n\n:root {\n /* display - large */\n --md-sys-typescale-display-large-font-family-name: Roboto;\n --md-sys-typescale-display-large-font-family-style: Regular;\n --md-sys-typescale-display-large-font-weight: 400;\n --md-sys-typescale-display-large-font-size: 57px;\n --md-sys-typescale-display-large-line-height: 64px;\n --md-sys-typescale-display-large-letter-spacing: -0.25px;\n /* display - medium */\n --md-sys-typescale-display-medium-font-family-name: Roboto;\n --md-sys-typescale-display-medium-font-family-style: Regular;\n --md-sys-typescale-display-medium-font-weight: 400;\n --md-sys-typescale-display-medium-font-size: 45px;\n --md-sys-typescale-display-medium-line-height: 52px;\n --md-sys-typescale-display-medium-letter-spacing: 0px;\n /* display - small */\n --md-sys-typescale-display-small-font-family-name: Roboto;\n --md-sys-typescale-display-small-font-family-style: Regular;\n --md-sys-typescale-display-small-font-weight: 400;\n --md-sys-typescale-display-small-font-size: 36px;\n --md-sys-typescale-display-small-line-height: 44px;\n --md-sys-typescale-display-small-letter-spacing: 0px;\n /* headline - large */\n --md-sys-typescale-headline-large-font-family-name: Roboto;\n --md-sys-typescale-headline-large-font-family-style: Regular;\n --md-sys-typescale-headline-large-font-weight: 400;\n --md-sys-typescale-headline-large-font-size: 32px;\n --md-sys-typescale-headline-large-line-height: 40px;\n --md-sys-typescale-headline-large-letter-spacing: 0px;\n /* headline - medium */\n --md-sys-typescale-headline-medium-font-family-name: Roboto;\n --md-sys-typescale-headline-medium-font-family-style: Regular;\n --md-sys-typescale-headline-medium-font-weight: 400;\n --md-sys-typescale-headline-medium-font-size: 28px;\n --md-sys-typescale-headline-medium-line-height: 36px;\n --md-sys-typescale-headline-medium-letter-spacing: 0px;\n /* headline - small */\n --md-sys-typescale-headline-small-font-family-name: Roboto;\n --md-sys-typescale-headline-small-font-family-style: Regular;\n --md-sys-typescale-headline-small-font-weight: 400;\n --md-sys-typescale-headline-small-font-size: 24px;\n --md-sys-typescale-headline-small-line-height: 32px;\n --md-sys-typescale-headline-small-letter-spacing: 0px;\n /* body - large */\n --md-sys-typescale-body-large-font-family-name: Roboto;\n --md-sys-typescale-body-large-font-family-style: Regular;\n --md-sys-typescale-body-large-font-weight: 400;\n --md-sys-typescale-body-large-font-size: 16px;\n --md-sys-typescale-body-large-line-height: 24px;\n --md-sys-typescale-body-large-letter-spacing: 0.50px;\n /* body - medium */\n --md-sys-typescale-body-medium-font-family-name: Roboto;\n --md-sys-typescale-body-medium-font-family-style: Regular;\n --md-sys-typescale-body-medium-font-weight: 400;\n --md-sys-typescale-body-medium-font-size: 14px;\n --md-sys-typescale-body-medium-line-height: 20px;\n --md-sys-typescale-body-medium-letter-spacing: 0.25px;\n /* body - small */\n --md-sys-typescale-body-small-font-family-name: Roboto;\n --md-sys-typescale-body-small-font-family-style: Regular;\n --md-sys-typescale-body-small-font-weight: 400;\n --md-sys-typescale-body-small-font-size: 12px;\n --md-sys-typescale-body-small-line-height: 16px;\n --md-sys-typescale-body-small-letter-spacing: 0.40px;\n /* label - large */\n --md-sys-typescale-label-large-font-family-name: Roboto;\n --md-sys-typescale-label-large-font-family-style: Medium;\n --md-sys-typescale-label-large-font-weight: 500;\n --md-sys-typescale-label-large-font-size: 14px;\n --md-sys-typescale-label-large-line-height: 20px;\n --md-sys-typescale-label-large-letter-spacing: 0.10px;\n /* label - medium */\n --md-sys-typescale-label-medium-font-family-name: Roboto;\n --md-sys-typescale-label-medium-font-family-style: Medium;\n --md-sys-typescale-label-medium-font-weight: 500;\n --md-sys-typescale-label-medium-font-size: 12px;\n --md-sys-typescale-label-medium-line-height: 16px;\n --md-sys-typescale-label-medium-letter-spacing: 0.50px;\n /* label - small */\n --md-sys-typescale-label-small-font-family-name: Roboto;\n --md-sys-typescale-label-small-font-family-style: Medium;\n --md-sys-typescale-label-small-font-weight: 500;\n --md-sys-typescale-label-small-font-size: 11px;\n --md-sys-typescale-label-small-line-height: 16px;\n --md-sys-typescale-label-small-letter-spacing: 0.50px;\n /* title - large */\n --md-sys-typescale-title-large-font-family-name: Roboto;\n --md-sys-typescale-title-large-font-family-style: Regular;\n --md-sys-typescale-title-large-font-weight: 400;\n --md-sys-typescale-title-large-font-size: 22px;\n --md-sys-typescale-title-large-line-height: 28px;\n --md-sys-typescale-title-large-letter-spacing: 0px;\n /* title - medium */\n --md-sys-typescale-title-medium-font-family-name: Roboto;\n --md-sys-typescale-title-medium-font-family-style: Medium;\n --md-sys-typescale-title-medium-font-weight: 500;\n --md-sys-typescale-title-medium-font-size: 16px;\n --md-sys-typescale-title-medium-line-height: 24px;\n --md-sys-typescale-title-medium-letter-spacing: 0.15px;\n /* title - small */\n --md-sys-typescale-title-small-font-family-name: Roboto;\n --md-sys-typescale-title-small-font-family-style: Medium;\n --md-sys-typescale-title-small-font-weight: 500;\n --md-sys-typescale-title-small-font-size: 14px;\n --md-sys-typescale-title-small-line-height: 20px;\n --md-sys-typescale-title-small-letter-spacing: 0.10px;\n}\n\n.primary {\n background-color: var(--md-sys-color-primary);\n}\n\n.primary-text {\n color: var(--md-sys-color-primary);\n}\n\n.on-primary {\n background-color: var(--md-sys-color-on-primary);\n}\n\n.on-primary-text {\n color: var(--md-sys-color-on-primary);\n}\n\n.primary-container {\n background-color: var(--md-sys-color-primary-container);\n}\n\n.primary-container-text {\n color: var(--md-sys-color-primary-container);\n}\n\n.on-primary-container {\n background-color: var(--md-sys-color-on-primary-container);\n}\n\n.on-primary-container-text {\n color: var(--md-sys-color-on-primary-container);\n}\n\n.primary-fixed {\n background-color: var(--md-sys-color-primary-fixed);\n}\n\n.primary-fixed-text {\n color: var(--md-sys-color-primary-fixed);\n}\n\n.on-primary-fixed {\n background-color: var(--md-sys-color-on-primary-fixed);\n}\n\n.on-primary-fixed-text {\n color: var(--md-sys-color-on-primary-fixed);\n}\n\n.primary-fixed-dim {\n background-color: var(--md-sys-color-primary-fixed-dim);\n}\n\n.primary-fixed-dim-text {\n color: var(--md-sys-color-primary-fixed-dim);\n}\n\n.on-primary-fixed-variant {\n background-color: var(--md-sys-color-on-primary-fixed-variant);\n}\n\n.on-primary-fixed-variant-text {\n color: var(--md-sys-color-on-primary-fixed-variant);\n}\n\n.secondary {\n background-color: var(--md-sys-color-secondary);\n}\n\n.secondary-text {\n color: var(--md-sys-color-secondary);\n}\n\n.on-secondary {\n background-color: var(--md-sys-color-on-secondary);\n}\n\n.on-secondary-text {\n color: var(--md-sys-color-on-secondary);\n}\n\n.secondary-container {\n background-color: var(--md-sys-color-secondary-container);\n}\n\n.secondary-container-text {\n color: var(--md-sys-color-secondary-container);\n}\n\n.on-secondary-container {\n background-color: var(--md-sys-color-on-secondary-container);\n}\n\n.on-secondary-container-text {\n color: var(--md-sys-color-on-secondary-container);\n}\n\n.secondary-fixed {\n background-color: var(--md-sys-color-secondary-fixed);\n}\n\n.secondary-fixed-text {\n color: var(--md-sys-color-secondary-fixed);\n}\n\n.on-secondary-fixed {\n background-color: var(--md-sys-color-on-secondary-fixed);\n}\n\n.on-secondary-fixed-text {\n color: var(--md-sys-color-on-secondary-fixed);\n}\n\n.secondary-fixed-dim {\n background-color: var(--md-sys-color-secondary-fixed-dim);\n}\n\n.secondary-fixed-dim-text {\n color: var(--md-sys-color-secondary-fixed-dim);\n}\n\n.on-secondary-fixed-variant {\n background-color: var(--md-sys-color-on-secondary-fixed-variant);\n}\n\n.on-secondary-fixed-variant-text {\n color: var(--md-sys-color-on-secondary-fixed-variant);\n}\n\n.tertiary {\n background-color: var(--md-sys-color-tertiary);\n}\n\n.tertiary-text {\n color: var(--md-sys-color-tertiary);\n}\n\n.on-tertiary {\n background-color: var(--md-sys-color-on-tertiary);\n}\n\n.on-tertiary-text {\n color: var(--md-sys-color-on-tertiary);\n}\n\n.tertiary-container {\n background-color: var(--md-sys-color-tertiary-container);\n}\n\n.tertiary-container-text {\n color: var(--md-sys-color-tertiary-container);\n}\n\n.on-tertiary-container {\n background-color: var(--md-sys-color-on-tertiary-container);\n}\n\n.on-tertiary-container-text {\n color: var(--md-sys-color-on-tertiary-container);\n}\n\n.tertiary-fixed {\n background-color: var(--md-sys-color-tertiary-fixed);\n}\n\n.tertiary-fixed-text {\n color: var(--md-sys-color-tertiary-fixed);\n}\n\n.on-tertiary-fixed {\n background-color: var(--md-sys-color-on-tertiary-fixed);\n}\n\n.on-tertiary-fixed-text {\n color: var(--md-sys-color-on-tertiary-fixed);\n}\n\n.tertiary-fixed-dim {\n background-color: var(--md-sys-color-tertiary-fixed-dim);\n}\n\n.tertiary-fixed-dim-text {\n color: var(--md-sys-color-tertiary-fixed-dim);\n}\n\n.on-tertiary-fixed-variant {\n background-color: var(--md-sys-color-on-tertiary-fixed-variant);\n}\n\n.on-tertiary-fixed-variant-text {\n color: var(--md-sys-color-on-tertiary-fixed-variant);\n}\n\n.error {\n background-color: var(--md-sys-color-error);\n}\n\n.error-text {\n color: var(--md-sys-color-error);\n}\n\n.error-container {\n background-color: var(--md-sys-color-error-container);\n}\n\n.error-container-text {\n color: var(--md-sys-color-error-container);\n}\n\n.on-error {\n background-color: var(--md-sys-color-on-error);\n}\n\n.on-error-text {\n color: var(--md-sys-color-on-error);\n}\n\n.on-error-container {\n background-color: var(--md-sys-color-on-error-container);\n}\n\n.on-error-container-text {\n color: var(--md-sys-color-on-error-container);\n}\n\n.background {\n background-color: var(--md-sys-color-background);\n}\n\n.background-text {\n color: var(--md-sys-color-background);\n}\n\n.on-background {\n background-color: var(--md-sys-color-on-background);\n}\n\n.on-background-text {\n color: var(--md-sys-color-on-background);\n}\n\n.outline {\n background-color: var(--md-sys-color-outline);\n}\n\n.outline-text {\n color: var(--md-sys-color-outline);\n}\n\n.inverse-on-surface {\n background-color: var(--md-sys-color-inverse-on-surface);\n}\n\n.inverse-on-surface-text {\n color: var(--md-sys-color-inverse-on-surface);\n}\n\n.inverse-surface {\n background-color: var(--md-sys-color-inverse-surface);\n}\n\n.inverse-surface-text {\n color: var(--md-sys-color-inverse-surface);\n}\n\n.inverse-primary {\n background-color: var(--md-sys-color-inverse-primary);\n}\n\n.inverse-primary-text {\n color: var(--md-sys-color-inverse-primary);\n}\n\n.shadow {\n background-color: var(--md-sys-color-shadow);\n}\n\n.shadow-text {\n color: var(--md-sys-color-shadow);\n}\n\n.surface-tint {\n background-color: var(--md-sys-color-surface-tint);\n}\n\n.surface-tint-text {\n color: var(--md-sys-color-surface-tint);\n}\n\n.outline-variant {\n background-color: var(--md-sys-color-outline-variant);\n}\n\n.outline-variant-text {\n color: var(--md-sys-color-outline-variant);\n}\n\n.scrim {\n background-color: var(--md-sys-color-scrim);\n}\n\n.scrim-text {\n color: var(--md-sys-color-scrim);\n}\n\n.surface {\n background-color: var(--md-sys-color-surface);\n}\n\n.surface-text {\n color: var(--md-sys-color-surface);\n}\n\n.on-surface {\n background-color: var(--md-sys-color-on-surface);\n}\n\n.on-surface-text {\n color: var(--md-sys-color-on-surface);\n}\n\n.surface-variant {\n background-color: var(--md-sys-color-surface-variant);\n}\n\n.surface-variant-text {\n color: var(--md-sys-color-surface-variant);\n}\n\n.on-surface-variant {\n background-color: var(--md-sys-color-on-surface-variant);\n}\n\n.on-surface-variant-text {\n color: var(--md-sys-color-on-surface-variant);\n}\n\n.surface-container-highest {\n background-color: var(--md-sys-color-surface-container-highest);\n}\n\n.surface-container-highest-text {\n color: var(--md-sys-color-surface-container-highest);\n}\n\n.surface-container-high {\n background-color: var(--md-sys-color-surface-container-high);\n}\n\n.surface-container-high-text {\n color: var(--md-sys-color-surface-container-high);\n}\n\n.surface-container {\n background-color: var(--md-sys-color-surface-container);\n}\n\n.surface-container-text {\n color: var(--md-sys-color-surface-container);\n}\n\n.surface-container-low {\n background-color: var(--md-sys-color-surface-container-low);\n}\n\n.surface-container-low-text {\n color: var(--md-sys-color-surface-container-low);\n}\n\n.surface-container-lowest {\n background-color: var(--md-sys-color-surface-container-lowest);\n}\n\n.surface-container-lowest-text {\n color: var(--md-sys-color-surface-container-lowest);\n}\n\n.surface-dim {\n background-color: var(--md-sys-color-surface-dim);\n}\n\n.surface-dim-text {\n color: var(--md-sys-color-surface-dim);\n}\n\n.surface-bright {\n background-color: var(--md-sys-color-surface-bright);\n}\n\n.surface-bright-text {\n color: var(--md-sys-color-surface-bright);\n}\n\n.display-large {\n font-family: var(--md-sys-typescale-display-large-font-family-name);\n font-style: var(--md-sys-typescale-display-large-font-family-style);\n font-weight: var(--md-sys-typescale-display-large-font-weight);\n font-size: var(--md-sys-typescale-display-large-font-size);\n letter-spacing: var(--md-sys-typescale-display-large-tracking);\n line-height: var(--md-sys-typescale-display-large-height);\n text-transform: var(--md-sys-typescale-display-large-text-transform);\n text-decoration: var(--md-sys-typescale-display-large-text-decoration);\n}\n\n.display-medium {\n font-family: var(--md-sys-typescale-display-medium-font-family-name);\n font-style: var(--md-sys-typescale-display-medium-font-family-style);\n font-weight: var(--md-sys-typescale-display-medium-font-weight);\n font-size: var(--md-sys-typescale-display-medium-font-size);\n letter-spacing: var(--md-sys-typescale-display-medium-tracking);\n line-height: var(--md-sys-typescale-display-medium-height);\n text-transform: var(--md-sys-typescale-display-medium-text-transform);\n text-decoration: var(--md-sys-typescale-display-medium-text-decoration);\n}\n\n.display-small {\n font-family: var(--md-sys-typescale-display-small-font-family-name);\n font-style: var(--md-sys-typescale-display-small-font-family-style);\n font-weight: var(--md-sys-typescale-display-small-font-weight);\n font-size: var(--md-sys-typescale-display-small-font-size);\n letter-spacing: var(--md-sys-typescale-display-small-tracking);\n line-height: var(--md-sys-typescale-display-small-height);\n text-transform: var(--md-sys-typescale-display-small-text-transform);\n text-decoration: var(--md-sys-typescale-display-small-text-decoration);\n}\n\n.headline-large {\n font-family: var(--md-sys-typescale-headline-large-font-family-name);\n font-style: var(--md-sys-typescale-headline-large-font-family-style);\n font-weight: var(--md-sys-typescale-headline-large-font-weight);\n font-size: var(--md-sys-typescale-headline-large-font-size);\n letter-spacing: var(--md-sys-typescale-headline-large-tracking);\n line-height: var(--md-sys-typescale-headline-large-height);\n text-transform: var(--md-sys-typescale-headline-large-text-transform);\n text-decoration: var(--md-sys-typescale-headline-large-text-decoration);\n}\n\n.headline-medium {\n font-family: var(--md-sys-typescale-headline-medium-font-family-name);\n font-style: var(--md-sys-typescale-headline-medium-font-family-style);\n font-weight: var(--md-sys-typescale-headline-medium-font-weight);\n font-size: var(--md-sys-typescale-headline-medium-font-size);\n letter-spacing: var(--md-sys-typescale-headline-medium-tracking);\n line-height: var(--md-sys-typescale-headline-medium-height);\n text-transform: var(--md-sys-typescale-headline-medium-text-transform);\n text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);\n}\n\n.headline-small {\n font-family: var(--md-sys-typescale-headline-small-font-family-name);\n font-style: var(--md-sys-typescale-headline-small-font-family-style);\n font-weight: var(--md-sys-typescale-headline-small-font-weight);\n font-size: var(--md-sys-typescale-headline-small-font-size);\n letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n line-height: var(--md-sys-typescale-headline-small-height);\n text-transform: var(--md-sys-typescale-headline-small-text-transform);\n text-decoration: var(--md-sys-typescale-headline-small-text-decoration);\n}\n\n.body-large {\n font-family: var(--md-sys-typescale-body-large-font-family-name);\n font-style: var(--md-sys-typescale-body-large-font-family-style);\n font-weight: var(--md-sys-typescale-body-large-font-weight);\n font-size: var(--md-sys-typescale-body-large-font-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n text-transform: var(--md-sys-typescale-body-large-text-transform);\n text-decoration: var(--md-sys-typescale-body-large-text-decoration);\n}\n\n.body-medium {\n font-family: var(--md-sys-typescale-body-medium-font-family-name);\n font-style: var(--md-sys-typescale-body-medium-font-family-style);\n font-weight: var(--md-sys-typescale-body-medium-font-weight);\n font-size: var(--md-sys-typescale-body-medium-font-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n text-transform: var(--md-sys-typescale-body-medium-text-transform);\n text-decoration: var(--md-sys-typescale-body-medium-text-decoration);\n}\n\n.body-small {\n font-family: var(--md-sys-typescale-body-small-font-family-name);\n font-style: var(--md-sys-typescale-body-small-font-family-style);\n font-weight: var(--md-sys-typescale-body-small-font-weight);\n font-size: var(--md-sys-typescale-body-small-font-size);\n letter-spacing: var(--md-sys-typescale-body-small-tracking);\n line-height: var(--md-sys-typescale-body-small-height);\n text-transform: var(--md-sys-typescale-body-small-text-transform);\n text-decoration: var(--md-sys-typescale-body-small-text-decoration);\n}\n\n.label-large {\n font-family: var(--md-sys-typescale-label-large-font-family-name);\n font-style: var(--md-sys-typescale-label-large-font-family-style);\n font-weight: var(--md-sys-typescale-label-large-font-weight);\n font-size: var(--md-sys-typescale-label-large-font-size);\n letter-spacing: var(--md-sys-typescale-label-large-tracking);\n line-height: var(--md-sys-typescale-label-large-height);\n text-transform: var(--md-sys-typescale-label-large-text-transform);\n text-decoration: var(--md-sys-typescale-label-large-text-decoration);\n}\n\n.label-medium {\n font-family: var(--md-sys-typescale-label-medium-font-family-name);\n font-style: var(--md-sys-typescale-label-medium-font-family-style);\n font-weight: var(--md-sys-typescale-label-medium-font-weight);\n font-size: var(--md-sys-typescale-label-medium-font-size);\n letter-spacing: var(--md-sys-typescale-label-medium-tracking);\n line-height: var(--md-sys-typescale-label-medium-height);\n text-transform: var(--md-sys-typescale-label-medium-text-transform);\n text-decoration: var(--md-sys-typescale-label-medium-text-decoration);\n}\n\n.label-small {\n font-family: var(--md-sys-typescale-label-small-font-family-name);\n font-style: var(--md-sys-typescale-label-small-font-family-style);\n font-weight: var(--md-sys-typescale-label-small-font-weight);\n font-size: var(--md-sys-typescale-label-small-font-size);\n letter-spacing: var(--md-sys-typescale-label-small-tracking);\n line-height: var(--md-sys-typescale-label-small-height);\n text-transform: var(--md-sys-typescale-label-small-text-transform);\n text-decoration: var(--md-sys-typescale-label-small-text-decoration);\n}\n\n.title-large {\n font-family: var(--md-sys-typescale-title-large-font-family-name);\n font-style: var(--md-sys-typescale-title-large-font-family-style);\n font-weight: var(--md-sys-typescale-title-large-font-weight);\n font-size: var(--md-sys-typescale-title-large-font-size);\n letter-spacing: var(--md-sys-typescale-title-large-tracking);\n line-height: var(--md-sys-typescale-title-large-height);\n text-transform: var(--md-sys-typescale-title-large-text-transform);\n text-decoration: var(--md-sys-typescale-title-large-text-decoration);\n}\n\n.title-medium {\n font-family: var(--md-sys-typescale-title-medium-font-family-name);\n font-style: var(--md-sys-typescale-title-medium-font-family-style);\n font-weight: var(--md-sys-typescale-title-medium-font-weight);\n font-size: var(--md-sys-typescale-title-medium-font-size);\n letter-spacing: var(--md-sys-typescale-title-medium-tracking);\n line-height: var(--md-sys-typescale-title-medium-height);\n text-transform: var(--md-sys-typescale-title-medium-text-transform);\n text-decoration: var(--md-sys-typescale-title-medium-text-decoration);\n}\n\n.title-small {\n font-family: var(--md-sys-typescale-title-small-font-family-name);\n font-style: var(--md-sys-typescale-title-small-font-family-style);\n font-weight: var(--md-sys-typescale-title-small-font-weight);\n font-size: var(--md-sys-typescale-title-small-font-size);\n letter-spacing: var(--md-sys-typescale-title-small-tracking);\n line-height: var(--md-sys-typescale-title-small-height);\n text-transform: var(--md-sys-typescale-title-small-text-transform);\n text-decoration: var(--md-sys-typescale-title-small-text-decoration);\n}\n\nhtml {\n font-family: Roboto, serif;\n color: var(--md-sys-color-on-surface);\n}\n\n.m3 {\n user-select: none;\n}\n\n.m3.m3-wrapper {\n background-color: var(--md-sys-color-surface);\n border-radius: 25px;\n padding: 25px;\n width: max-content;\n height: min-content;\n}\n\n/*# sourceMappingURL=generics.css.map */\n +Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP +<+>UTF-8 +=================================================================== +diff --git a/src/styles/generics.css b/src/styles/generics.css +--- a/src/styles/generics.css (revision cf584fe269c6fbcc80a14b027d07b6802e2bf7d6) ++++ b/src/styles/generics.css (date 1706261320372) +@@ -780,7 +780,6 @@ + border-radius: 4px; + } + div.m3.m3-text-field.outlined > label.used { +- background-color: var(--md-sys-color-surface); + transform: translate(12px, -27px) !important; + line-height: var(--md-sys-typescale-body-small-line-height); + font-size: var(--md-sys-typescale-body-small-font-size); +Index: src/styles/text-field.sass +IDEA additional info: +Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP +<+>div.m3.m3-text-field\n position: relative\n display: flex\n justify-content: center\n flex-direction: column\n box-sizing: border-box\n margin: 0\n\n span.m3-icon.icon-before\n align-self: start\n\n & + span.m3-text-field-supporting-text\n display: flex\n line-height: var(--md-sys-typescale-body-large-line-height)\n font-size: var(--md-sys-typescale-body-small-font-size)\n color: var(--md-sys-color-on-surface-variant)\n margin: 0 16px\n\n & > label\n padding-inline: 4px\n pointer-events: none\n transform: translate(12px, 0)\n transition: .2s cubic-bezier(0.2, 0, 0, 1)\n color: var(--md-sys-color-on-surface-variant)\n line-height: var(--md-sys-typescale-body-large-line-height)\n font-size: var(--md-sys-typescale-body-large-font-size)\n position: absolute\n\n & > input\n transition: .2s cubic-bezier(0.2, 0, 0, 1)\n color: var(--md-sys-color-on-surface)\n line-height: var(--md-sys-typescale-body-large-line-height)\n font-size: var(--md-sys-typescale-body-large-font-size)\n background-color: transparent\n border: none\n\n & > span.m3-icon\n position: absolute\n align-self: end\n margin: 12px\n width: 24px\n line-height: 24px\n font-size: 24px\n display: inherit\n align-items: center\n justify-content: inherit\n cursor: pointer\n color: var(--md-sys-color-on-surface-variant)\n font-family: Material-Symbols-Outlined-Regular, serif\n\n & > span.m3-text-field-state-layer\n width: 100%\n height: 100%\n pointer-events: none\n position: absolute\n\n &:is(.filled, .outlined) > input:focus-visible\n outline: none\n caret-color: var(--md-sys-color-primary)\n\n &.filled\n contain: content\n border-radius: 4px 4px 0 0\n\n & > label.used\n transform: translate(12px, -12px)\n line-height: var(--md-sys-typescale-body-small-line-height)\n font-size: var(--md-sys-typescale-body-small-font-size)\n\n & > input:required:user-invalid\n caret-color: var(--md-sys-color-error)\n box-shadow: inset 0 -2px 0 var(--md-sys-color-error)\n\n &:has(input:required:user-invalid) > *,\n &:has(input:required:user-invalid) + span.m3-text-field-supporting-text\n color: var(--md-sys-color-error)\n\n & > input:focus-visible\n outline-offset: 2px\n box-shadow: inset 0 -2px 0 var(--md-sys-color-primary)\n\n & > input:focus-visible + label\n color: var(--md-sys-color-primary)\n\n &:has(input:disabled),\n &:has(input:disabled) + span.m3-text-field-supporting-text\n opacity: 38%\n\n & > input\n &.with-after-icon\n padding: 24px 48px 8px 16px\n\n &.with-before-icon\n padding: 24px 16px 8px 48px\n\n &.with-before-icon + label\n margin-left: 32px\n\n &:not(.with-after-icon, .with-before-icon)\n padding: 24px 16px 8px\n\n &.with-after-icon.with-before-icon\n padding: 24px 48px 8px 48px\n\n box-sizing: border-box\n border-radius: 4px 4px 0 0\n background-color: var(--md-sys-color-surface-container-highest)\n box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant)\n\n &:hover\n & > input:not(:disabled) ~ span.m3-text-field-state-layer\n transition: .2s cubic-bezier(0.2, 0, 0, 1)\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)\n\n &.outlined\n border-radius: 4px\n\n & > label.used\n background-color: var(--md-sys-color-surface)\n transform: translate(12px, -27px) !important\n line-height: var(--md-sys-typescale-body-small-line-height)\n font-size: var(--md-sys-typescale-body-small-font-size)\n\n & > input:required:user-invalid\n caret-color: var(--md-sys-color-error)\n outline-offset: -2px\n outline: 2px solid var(--md-sys-color-error)\n\n &:has(input:required:user-invalid) > *,\n &:has(input:required:user-invalid) + span.m3-text-field-supporting-text\n color: var(--md-sys-color-error)\n\n & > input:focus-visible\n outline-offset: -2px\n outline: 2px solid var(--md-sys-color-primary)\n\n & > input:focus-visible + label\n color: var(--md-sys-color-primary)\n\n &:has(input:disabled),\n &:has(input:disabled) + span.m3-text-field-supporting-text\n opacity: 38%\n\n & > input\n &.with-after-icon\n padding: 16px 48px 16px 16px\n\n &.with-before-icon\n padding: 16px 16px 16px 48px\n\n &.with-before-icon + label\n transform: translate(48px, 0)\n\n &:not(.with-after-icon, .with-before-icon)\n padding: 16px\n\n &.with-after-icon.with-before-icon\n padding: 16px 48px\n\n box-sizing: border-box\n border-radius: 4px\n outline-offset: -1px\n outline: 1px solid var(--md-sys-color-outline)\n\n &:hover:not(:focus-visible)\n transition: .2s cubic-bezier(0.2, 0, 0, 1)\n\n &:has(input:not(&:user-invalid,:disabled,:focus-visible)) > label\n color: var(--md-sys-color-on-surface)\n\n & > input:not(:user-invalid,:disabled,:focus-visible)\n outline-color: var(--md-sys-color-on-surface) !important\n\n +Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP +<+>UTF-8 +=================================================================== +diff --git a/src/styles/text-field.sass b/src/styles/text-field.sass +--- a/src/styles/text-field.sass (revision cf584fe269c6fbcc80a14b027d07b6802e2bf7d6) ++++ b/src/styles/text-field.sass (date 1706261320302) +@@ -116,7 +116,6 @@ + border-radius: 4px + + & > label.used +- background-color: var(--md-sys-color-surface) + transform: translate(12px, -27px) !important + line-height: var(--md-sys-typescale-body-small-line-height) + font-size: var(--md-sys-typescale-body-small-font-size) +Index: src/primitive-components/text-field/text-field.tsx +IDEA additional info: +Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP +<+>\"use client\"\n\nimport React, {PropsWithChildren, useState} from 'react';\nimport {bool, string} from \"prop-types\";\n\ninterface TextFieldInterface extends PropsWithChildren{\n variant: \"filled\" | \"outlined\",\n withAfterIcon?: boolean,\n withBeforeIcon?: boolean,\n supportingText?: string,\n}\n\nexport function TextField({variant, withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) {\n\n const [used, setUsed] = useState(false);\n\n const callback = (e : any) => {\n if(e.type === \"blur\" && e.target.value.length === 0) setUsed(false);\n else if(e.type === \"focus\") setUsed(true);\n }\n\n const iconStyles = withBeforeIcon && withAfterIcon ? \"with-before-icon with-after-icon\" :\n withBeforeIcon ? \"with-before-icon\" : withAfterIcon ? \"with-after-icon\" : \"\"\n\n return (\n \n
\n {withBeforeIcon && {withBeforeIcon && \"search\"}}\n {\n callback(event);\n if(props.onFocus) props.onFocus(event)\n }}\n onBlur={(event) => {\n callback(event)\n if(props.onBlur) props.onBlur(event)\n }}/>\n \n \n {withAfterIcon && {withAfterIcon && \"cancel\"}}\n
\n {supportingText && {supportingText}}\n \n );\n\n}\n\nTextField.propTypes = {\n children: string,\n withBeforeIcon: bool,\n withAfterIcon: bool,\n className: string,\n variant: string,\n supportingText: string,\n} +Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP +<+>UTF-8 +=================================================================== +diff --git a/src/primitive-components/text-field/text-field.tsx b/src/primitive-components/text-field/text-field.tsx +--- a/src/primitive-components/text-field/text-field.tsx (revision cf584fe269c6fbcc80a14b027d07b6802e2bf7d6) ++++ b/src/primitive-components/text-field/text-field.tsx (date 1706262314036) +@@ -24,6 +24,32 @@ + + return ( + ++ { ++ variant === "outlined" && ++
++ ++ {props.children ?? "Label"} ++ ++
++ } +
+ {withBeforeIcon && {withBeforeIcon && "search"}} + {\"version\":3,\"sourceRoot\":\"\",\"sources\":[\"generics.sass\",\"fabs.sass\",\"mixins/m3-mixins.sass\",\"radio.sass\",\"fonts.sass\",\"button.sass\",\"ripple.sass\",\"swtich.sass\",\"checkbox.sass\",\"text-field.sass\",\"icon-button.sass\",\"themes/tokens.css\",\"themes/colors.module.css\",\"themes/typography.module.css\"],\"names\":[],\"mappings\":\"AAYQ;AACA;ACXR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EHHI;EGKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EHaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EHpCA;;AGuCA;EHjCA;;AGoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EHnDA;;AGsDA;EHhDA;;AGmDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;AClIR;ENDI;EACA;EACA;EACA;EACA;;AMDA;ENIA;EACA;EACA;EACA;EACA;;;AMLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAQJ;EACI;EACA;;AAEZ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAOR;EACI;;AAEA;EACI;;AAEJ;EACI;;;ACzKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;IACI;IACA;IACA;;;AAER;EACI;IACI;IACA;IACA;;;AAGR;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;ACvJZ;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACpSF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AbrIF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA\",\"file\":\"generics.css\"} +Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP +<+>UTF-8 +=================================================================== +diff --git a/src/styles/generics.css.map b/src/styles/generics.css.map +--- a/src/styles/generics.css.map (revision cf584fe269c6fbcc80a14b027d07b6802e2bf7d6) ++++ b/src/styles/generics.css.map (date 1706261320369) +@@ -1,1 +1,1 @@ +-{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","checkbox.sass","text-field.sass","icon-button.sass","themes/tokens.css","themes/colors.module.css","themes/typography.module.css"],"names":[],"mappings":"AAYQ;AACA;ACXR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EHHI;EGKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EHaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EHpCA;;AGuCA;EHjCA;;AGoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EHnDA;;AGsDA;EHhDA;;AGmDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;AClIR;ENDI;EACA;EACA;EACA;EACA;;AMDA;ENIA;EACA;EACA;EACA;EACA;;;AMLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAQJ;EACI;EACA;;AAEZ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAOR;EACI;;AAEA;EACI;;AAEJ;EACI;;;ACzKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;IACI;IACA;IACA;;;AAER;EACI;IACI;IACA;IACA;;;AAGR;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;ACvJZ;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACpSF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AbrIF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA","file":"generics.css"} +\ No newline at end of file ++{"version":3,"sourceRoot":"","sources":["generics.sass","fabs.sass","mixins/m3-mixins.sass","radio.sass","fonts.sass","button.sass","ripple.sass","swtich.sass","checkbox.sass","text-field.sass","icon-button.sass","themes/tokens.css","themes/colors.module.css","themes/typography.module.css"],"names":[],"mappings":"AAYQ;AACA;ACXR;EACI;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EC8CA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADlDA;EC4BI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADDJ;ECyBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADEJ;ECsBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADKJ;ECmBI;EA5BJ;;AACA;EACI;;AACJ;EACI;;ADQJ;ECnBA,ODoBkC;ECnBlC,QDmBwC;EClBxC,eDkB4B;ECjB5B,SDiB8C;EAC1C;;AAEJ;ECvBA,ODwBkC;ECvBlC,QDuBwC;ECtBxC,eDsB4B;ECrB5B,SDqB8C;EAC1C;;AAEJ;EC3BA,OD4BkC;EC3BlC,QD2BwC;EC1BxC,eD0B4B;ECzB5B,SDyB8C;EAC1C;;AAEJ;EC/BA,ODgCkC;EC/BlC,QD+BwC;EC9BxC,eD8B4B;EC7B5B,SD6B8C;EAC1C;;AAEJ;ECMI;;ADHJ;ECLI;;ADSA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AE9EZ;EDDI;EACA;EACA;EACA;EACA;;ACDA;EDIA;EACA;EACA;EACA;EACA;;;ACLJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAIA;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1DhB;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;ACnEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EACI;EACA;;AACA;EACI;;AAER;EHHI;EGKA;;AACA;EACI;;AAER;EACI;;AACA;EACI;;AAER;EHaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGjBA;EACI;;AAGA;EACI;;AAER;EACI;;AAGA;EHpCA;;AGuCA;EHjCA;;AGoCA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EHnDA;;AGsDA;EHhDA;;AGmDA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACrHZ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;AC5BJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EACI;IACI;;EACJ;IACI;;EACJ;IACI;;;AAER;EAEI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAEZ;EACI;IACI;;EACJ;IACI;;;AClIR;ENDI;EACA;EACA;EACA;EACA;;AMDA;ENIA;EACA;EACA;EACA;EACA;;;AMLJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAII;EACI;;AAER;EACI;;AACA;EACI;;AAER;EACI;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;;AC1FhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAQJ;EACI;EACA;;AAEZ;EACI;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EAEI;;AAEJ;EAgBI;EACA;EACA;EACA;;AAlBA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAOR;EACI;;AAEA;EACI;;AAEJ;EACI;;;ACxKhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAER;EACI;EACA;;AAGA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;IACI;IACA;IACA;;;AAER;EACI;IACI;IACA;IACA;;;AAGR;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AACJ;EACI;;AAEJ;EACI;;AACJ;EACI;;;ACvJZ;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACpSF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AbrIF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA","file":"generics.css"} +\ No newline at end of file +Index: app/components/text-fields.tsx +IDEA additional info: +Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP +<+>import React from 'react';\nimport {TextField} from \"../../src/primitive-components/text-field/text-field\";\nimport {Button} from \"../../src/primitive-components/button/button\";\n\nexport function TextFields(_props : any) {\n return (\n
\n
\n

Inputs

\n
\n

Filled Inputs

\n
\n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n

Outlined

\n
\n

Filled Inputs

\n
\n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n \n
\n
\n \n \n \n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n );\n} +Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP +<+>UTF-8 +=================================================================== +diff --git a/app/components/text-fields.tsx b/app/components/text-fields.tsx +--- a/app/components/text-fields.tsx (revision cf584fe269c6fbcc80a14b027d07b6802e2bf7d6) ++++ b/app/components/text-fields.tsx (date 1706259367440) +@@ -4,7 +4,7 @@ + + export function TextFields(_props : any) { + return ( +-
++
+
+

Inputs

+
+Index: src/styles/text-field.css +IDEA additional info: +Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP +<+>div.m3.m3-text-field {\n position: relative;\n display: flex;\n justify-content: center;\n flex-direction: column;\n box-sizing: border-box;\n margin: 0;\n}\ndiv.m3.m3-text-field span.m3-icon.icon-before {\n align-self: start;\n}\ndiv.m3.m3-text-field + span.m3-text-field-supporting-text {\n display: flex;\n line-height: var(--md-sys-typescale-body-large-line-height);\n font-size: var(--md-sys-typescale-body-small-font-size);\n color: var(--md-sys-color-on-surface-variant);\n margin: 0 16px;\n}\ndiv.m3.m3-text-field > label {\n padding-inline: 4px;\n pointer-events: none;\n transform: translate(12px, 0);\n transition: 0.2s cubic-bezier(0.2, 0, 0, 1);\n color: var(--md-sys-color-on-surface-variant);\n line-height: var(--md-sys-typescale-body-large-line-height);\n font-size: var(--md-sys-typescale-body-large-font-size);\n position: absolute;\n}\ndiv.m3.m3-text-field > input {\n transition: 0.2s cubic-bezier(0.2, 0, 0, 1);\n color: var(--md-sys-color-on-surface);\n line-height: var(--md-sys-typescale-body-large-line-height);\n font-size: var(--md-sys-typescale-body-large-font-size);\n background-color: transparent;\n border: none;\n}\ndiv.m3.m3-text-field > span.m3-icon {\n position: absolute;\n align-self: end;\n margin: 12px;\n width: 24px;\n line-height: 24px;\n font-size: 24px;\n display: inherit;\n align-items: center;\n justify-content: inherit;\n cursor: pointer;\n color: var(--md-sys-color-on-surface-variant);\n font-family: Material-Symbols-Outlined-Regular, serif;\n}\ndiv.m3.m3-text-field > span.m3-text-field-state-layer {\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n}\ndiv.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {\n outline: none;\n caret-color: var(--md-sys-color-primary);\n}\ndiv.m3.m3-text-field.filled {\n contain: content;\n border-radius: 4px 4px 0 0;\n}\ndiv.m3.m3-text-field.filled > label.used {\n transform: translate(12px, -12px);\n line-height: var(--md-sys-typescale-body-small-line-height);\n font-size: var(--md-sys-typescale-body-small-font-size);\n}\ndiv.m3.m3-text-field.filled > input:required:user-invalid {\n caret-color: var(--md-sys-color-error);\n box-shadow: inset 0 -2px 0 var(--md-sys-color-error);\n}\ndiv.m3.m3-text-field.filled:has(input:required:user-invalid) > *, div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {\n color: var(--md-sys-color-error);\n}\ndiv.m3.m3-text-field.filled > input:focus-visible {\n outline-offset: 2px;\n box-shadow: inset 0 -2px 0 var(--md-sys-color-primary);\n}\ndiv.m3.m3-text-field.filled > input:focus-visible + label {\n color: var(--md-sys-color-primary);\n}\ndiv.m3.m3-text-field.filled:has(input:disabled), div.m3.m3-text-field.filled:has(input:disabled) + span.m3-text-field-supporting-text {\n opacity: 38%;\n}\ndiv.m3.m3-text-field.filled > input {\n box-sizing: border-box;\n border-radius: 4px 4px 0 0;\n background-color: var(--md-sys-color-surface-container-highest);\n box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant);\n}\ndiv.m3.m3-text-field.filled > input.with-after-icon {\n padding: 24px 48px 8px 16px;\n}\ndiv.m3.m3-text-field.filled > input.with-before-icon {\n padding: 24px 16px 8px 48px;\n}\ndiv.m3.m3-text-field.filled > input.with-before-icon + label {\n margin-left: 32px;\n}\ndiv.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {\n padding: 24px 16px 8px;\n}\ndiv.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {\n padding: 24px 48px 8px 48px;\n}\ndiv.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {\n transition: 0.2s cubic-bezier(0.2, 0, 0, 1);\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);\n}\ndiv.m3.m3-text-field.outlined {\n border-radius: 4px;\n}\ndiv.m3.m3-text-field.outlined > label.used {\n background-color: var(--md-sys-color-surface);\n transform: translate(12px, -27px) !important;\n line-height: var(--md-sys-typescale-body-small-line-height);\n font-size: var(--md-sys-typescale-body-small-font-size);\n}\ndiv.m3.m3-text-field.outlined > input:required:user-invalid {\n caret-color: var(--md-sys-color-error);\n outline-offset: -2px;\n outline: 2px solid var(--md-sys-color-error);\n}\ndiv.m3.m3-text-field.outlined:has(input:required:user-invalid) > *, div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {\n color: var(--md-sys-color-error);\n}\ndiv.m3.m3-text-field.outlined > input:focus-visible {\n outline-offset: -2px;\n outline: 2px solid var(--md-sys-color-primary);\n}\ndiv.m3.m3-text-field.outlined > input:focus-visible + label {\n color: var(--md-sys-color-primary);\n}\ndiv.m3.m3-text-field.outlined:has(input:disabled), div.m3.m3-text-field.outlined:has(input:disabled) + span.m3-text-field-supporting-text {\n opacity: 38%;\n}\ndiv.m3.m3-text-field.outlined > input {\n box-sizing: border-box;\n border-radius: 4px;\n outline-offset: -1px;\n outline: 1px solid var(--md-sys-color-outline);\n}\ndiv.m3.m3-text-field.outlined > input.with-after-icon {\n padding: 16px 48px 16px 16px;\n}\ndiv.m3.m3-text-field.outlined > input.with-before-icon {\n padding: 16px 16px 16px 48px;\n}\ndiv.m3.m3-text-field.outlined > input.with-before-icon + label {\n transform: translate(48px, 0);\n}\ndiv.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {\n padding: 16px;\n}\ndiv.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {\n padding: 16px 48px;\n}\ndiv.m3.m3-text-field.outlined:hover:not(:focus-visible) {\n transition: 0.2s cubic-bezier(0.2, 0, 0, 1);\n}\ndiv.m3.m3-text-field.outlined:hover:not(:focus-visible):has(input:not(div.m3.m3-text-field.outlined:hover:not(:focus-visible):user-invalid, :disabled, :focus-visible)) > label {\n color: var(--md-sys-color-on-surface);\n}\ndiv.m3.m3-text-field.outlined:hover:not(:focus-visible) > input:not(:user-invalid, :disabled, :focus-visible) {\n outline-color: var(--md-sys-color-on-surface) !important;\n}\n\n/*# sourceMappingURL=text-field.css.map */\n +Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP +<+>UTF-8 +=================================================================== +diff --git a/src/styles/text-field.css b/src/styles/text-field.css +--- a/src/styles/text-field.css (revision cf584fe269c6fbcc80a14b027d07b6802e2bf7d6) ++++ b/src/styles/text-field.css (date 1706261320339) +@@ -113,7 +113,6 @@ + border-radius: 4px; + } + div.m3.m3-text-field.outlined > label.used { +- background-color: var(--md-sys-color-surface); + transform: translate(12px, -27px) !important; + line-height: var(--md-sys-typescale-body-small-line-height); + font-size: var(--md-sys-typescale-body-small-font-size); +Index: .idea/workspace.xml +IDEA additional info: +Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP +<+>\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {\n "customColor": "",\n "associatedIndex": 2\n}\n \n \n \n {\n "keyToString": {\n "RunOnceActivity.OpenProjectViewOnStart": "true",\n "RunOnceActivity.ShowReadmeOnStart": "true",\n "WebServerToolWindowFactoryState": "false",\n "git-widget-placeholder": "experimental",\n "last_opened_file_path": "/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/src/styles",\n "list.type.of.created.stylesheet": "Sass",\n "node.js.detected.package.eslint": "true",\n "node.js.detected.package.tslint": "true",\n "node.js.selected.package.eslint": "(autodetect)",\n "node.js.selected.package.tslint": "(autodetect)",\n "nodejs_package_manager_path": "npm",\n "settings.editor.selected.configurable": "preferences.lookFeel",\n "ts.external.directory.path": "/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/node_modules/typescript/lib",\n "vue.rearranger.settings.migration": "true"\n }\n}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n