@koobiq/react-components 0.11.1 → 0.13.0

package/dist/style.css

@@ -230,34 +230,128 @@
 }
 .kbq-container-136c61 {
   --container-max-inline-size: intial;
-  --container-position: intial;
+  --container-placement: intial;
   --container-margins: intial;
   box-sizing: border-box;
   inline-size: 100%;
   max-inline-size: var(--container-max-inline-size);
-  margin-inline: var(--container-position);
+  margin-inline: var(--container-placement);
   padding: 0 var(--container-margins);
 }
-.kbq-formcontrol-dbb0e4 {
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  display: inline-flex;
-  position: relative;
+.kbq-formfieldinput-b5d864 {
+  box-sizing: border-box;
+  inline-size: 100%;
+  color: var(--form-field-control-color);
+  padding-block: var(--form-field-control-padding-block-start) var(--form-field-control-padding-block-end);
+  transition: color var(--kbq-transition-default), background-color var(--kbq-transition-default);
+  min-inline-size: 40px;
+  font-size: var(--kbq-typography-text-normal-font-size);
+  font-weight: var(--kbq-typography-text-normal-font-weight);
+  line-height: var(--kbq-typography-text-normal-line-height);
+  font-family: var(--kbq-typography-text-normal-font-family);
+  font-style: var(--kbq-typography-text-normal-font-style);
+  text-transform: var(--kbq-typography-text-normal-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+  background-color: #0000;
+  border: none;
+  outline: none;
+  padding-inline: 0;
 }
 
-.kbq-formcontrol-fullWidth-b3e32c {
-  inline-size: 100%;
+.kbq-formfieldinput-b5d864:-webkit-autofill {
+  box-shadow: 0 0 0 1000px var(--kbq-background-theme-fade) inset !important;
+  background-color: #0000 !important;
 }
 
-.kbq-formcontrol-top-17ba41 {
+.kbq-formfieldinput-b5d864::placeholder {
+  color: var(--form-field-control-placeholder-color);
+}
+
+.kbq-formfieldinput-b5d864:where(input) {
+  block-size: var(--form-field-control-size-height);
+}
+
+.kbq-formfieldinput-b5d864:where(textarea) {
+  min-block-size: var(--form-field-control-size-height);
+  padding-inline: var(--form-field-control-padding-inline-start) var(--form-field-control-padding-inline-end);
+  resize: none;
+}
+
+.kbq-formfieldinput-b5d864:disabled {
+  cursor: not-allowed;
+}
+.kbq-formfieldselect-301ef6 {
+  cursor: pointer;
+  box-sizing: border-box;
+  inline-size: 100%;
+  color: var(--form-field-control-color);
+  min-inline-size: 0;
+  min-block-size: var(--form-field-control-size-height);
+  transition: color var(--kbq-transition-default), background-color var(--kbq-transition-default);
+  font-size: var(--kbq-typography-text-normal-font-size);
+  font-weight: var(--kbq-typography-text-normal-font-weight);
+  line-height: var(--kbq-typography-text-normal-line-height);
+  font-family: var(--kbq-typography-text-normal-font-family);
+  font-style: var(--kbq-typography-text-normal-font-style);
+  text-transform: var(--kbq-typography-text-normal-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+  background: none;
+  border: none;
+  outline: none;
   flex-direction: column;
+  padding-inline: 0;
+  display: flex;
 }
 
-.kbq-formcontrol-side-3e528f {
-  flex-direction: row;
+.kbq-formfieldselect-container-920d39 {
+  align-items: center;
+  gap: var(--kbq-size-xs);
+  block-size: 100%;
+  display: flex;
+}
+
+.kbq-formfieldselect-content-9846b3 {
+  padding-block: var(--kbq-size-xs);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.kbq-formfieldselect-301ef6[aria-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.kbq-formfieldselect-hasPlaceholder-29f7ed {
+  --form-field-control-color: var(--form-field-control-placeholder-color);
+}
+
+.kbq-formfieldselect-hiddenPlaceholder-6598b6 {
+  text-align: start;
+  visibility: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  block-size: 0;
+  overflow: hidden;
 }
-.kbq-formcontrollabel-f90f77 {
+.kbq-formfieldcaption-8209de {
+  inline-size: 100%;
+  font-size: var(--kbq-typography-text-compact-font-size);
+  font-weight: var(--kbq-typography-text-compact-font-weight);
+  line-height: var(--kbq-typography-text-compact-line-height);
+  font-family: var(--kbq-typography-text-compact-font-family);
+  font-style: var(--kbq-typography-text-compact-font-style);
+  text-transform: var(--kbq-typography-text-compact-text-transform);
+  font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
+  color: var(--kbq-foreground-contrast-secondary);
+  transition: color var(--kbq-transition-default);
+}
+.kbq-formfieldlabel-d39737 {
   font-size: var(--kbq-typography-text-normal-font-size);
   font-weight: var(--kbq-typography-text-normal-font-weight);
   line-height: var(--kbq-typography-text-normal-line-height);
@@ -272,7 +366,7 @@
   box-sizing: border-box;
 }
 
-.kbq-formcontrollabel-hidden-b6c00b {
+.kbq-formfieldlabel-hidden-8f1ae7 {
   clip: rect(0, 0, 0, 0);
   clip-path: inset(50%);
   white-space: nowrap;
@@ -285,7 +379,7 @@
   overflow: hidden;
 }
 
-.kbq-formcontrollabel-sup-08dbc0 {
+.kbq-formfieldlabel-sup-725d9d {
   color: var(--kbq-foreground-error);
   vertical-align: baseline;
   line-height: 0;
@@ -301,23 +395,217 @@
   position: relative;
 }
 
-[data-label-placement="top"] .kbq-formcontrollabel-f90f77 {
+[data-label-placement="top"] .kbq-formfieldlabel-d39737 {
   padding-block-end: var(--kbq-size-xs);
 }
 
-[data-label-placement="side"] .kbq-formcontrollabel-f90f77 {
+[data-label-placement="side"] .kbq-formfieldlabel-d39737 {
   padding-block-start: var(--kbq-size-xs);
   padding-inline-end: var(--kbq-size-l);
 }
 
-[data-label-align="start"] .kbq-formcontrollabel-f90f77 {
+[data-label-align="start"] .kbq-formfieldlabel-d39737 {
   text-align: start;
 }
 
-[data-label-align="end"] .kbq-formcontrollabel-f90f77 {
+[data-label-align="end"] .kbq-formfieldlabel-d39737 {
   text-align: end;
   justify-content: flex-end;
 }
+.kbq-formfielderror-5dded9 {
+  inline-size: 100%;
+  font-size: var(--kbq-typography-text-compact-font-size);
+  font-weight: var(--kbq-typography-text-compact-font-weight);
+  line-height: var(--kbq-typography-text-compact-line-height);
+  font-family: var(--kbq-typography-text-compact-font-family);
+  font-style: var(--kbq-typography-text-compact-font-style);
+  text-transform: var(--kbq-typography-text-compact-text-transform);
+  font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
+  color: var(--kbq-foreground-error);
+  transition: color var(--kbq-transition-default);
+}
+.kbq-formfieldcontrolgroup-e5c3bd {
+  --form-field-control-color: ;
+  --form-field-control-bg-color: ;
+  --form-field-control-size-height: 32px;
+  --form-field-control-placeholder-color: ;
+  --form-field-control-group-border-color: ;
+  --form-field-control-group-outline-width: 2px;
+  --form-field-control-group-outline-color: transparent;
+  --form-field-control-group-border-radius: var(--kbq-size-s);
+  --form-field-control-group-border-width: var(--kbq-size-border-width);
+  --form-field-control-padding-inline-start: var(--kbq-size-m);
+  --form-field-control-padding-inline-end: var(--kbq-size-m);
+  --form-field-control-padding-block-start: var(--kbq-size-xs);
+  --form-field-control-padding-block-end: var(--kbq-size-xs);
+  inline-size: 100%;
+  font-size: var(--kbq-typography-text-normal-font-size);
+  font-weight: var(--kbq-typography-text-normal-font-weight);
+  line-height: var(--kbq-typography-text-normal-line-height);
+  font-family: var(--kbq-typography-text-normal-font-family);
+  font-style: var(--kbq-typography-text-normal-font-style);
+  text-transform: var(--kbq-typography-text-normal-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+  box-sizing: border-box;
+  border-radius: var(--form-field-control-group-border-radius);
+  background: var(--form-field-control-bg-color);
+  padding-inline: var(--form-field-control-padding-inline-start) var(--form-field-control-padding-inline-end);
+  display: flex;
+  position: relative;
+}
+
+.kbq-formfieldcontrolgroup-e5c3bd:before {
+  content: "";
+  pointer-events: none;
+  border-radius: inherit;
+  z-index: var(--kbq-layer-absolute);
+  transition: border-color var(--kbq-transition-default);
+  border: var(--form-field-control-group-border-width) solid var(--form-field-control-group-border-color, transparent);
+  position: absolute;
+  inset: 0;
+}
+
+.kbq-formfieldcontrolgroup-e5c3bd:after {
+  content: "";
+  pointer-events: none;
+  border-radius: inherit;
+  z-index: var(--kbq-layer-absolute);
+  transition: outline-color var(--kbq-transition-default);
+  outline-offset: calc(-1 * var(--form-field-control-group-outline-width) / 2);
+  outline: var(--form-field-control-group-outline-width) solid var(--form-field-control-group-outline-color);
+  position: absolute;
+  inset: 0;
+}
+
+.kbq-formfieldcontrolgroup-e5c3bd:not(.kbq-formfieldcontrolgroup-disabled-16937d):has( > button, [role="button"]) {
+  cursor: pointer;
+}
+
+.kbq-formfieldcontrolgroup-e5c3bd:has(input:-webkit-autofill) {
+  background-color: var(--kbq-background-theme-fade);
+}
+
+.kbq-formfieldcontrolgroup-transparent-85bd5d {
+  --form-field-control-color: var(--kbq-foreground-contrast);
+  --form-field-control-bg-color: transparent;
+  --form-field-control-placeholder-color: var(--kbq-foreground-contrast-tertiary);
+  --form-field-control-group-border-color: transparent;
+}
+
+.kbq-formfieldcontrolgroup-filled-c28a4b {
+  --form-field-control-color: var(--kbq-foreground-contrast);
+  --form-field-control-bg-color: var(--kbq-background-bg);
+  --form-field-control-placeholder-color: var(--kbq-foreground-contrast-tertiary);
+  --form-field-control-group-border-color: var(--kbq-line-contrast-fade);
+}
+
+.kbq-formfieldcontrolgroup-filled-c28a4b:where(.kbq-formfieldcontrolgroup-focused-43f1f7) {
+  --form-field-control-group-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+.kbq-formfieldcontrolgroup-filled-c28a4b:where(.kbq-formfieldcontrolgroup-invalid-f901a7) {
+  --form-field-control-color: var(--kbq-foreground-error);
+  --form-field-control-bg-color: var(--kbq-background-error-less);
+  --form-field-control-placeholder-color: var(--kbq-foreground-error-tertiary);
+  --form-field-control-group-border-color: var(--kbq-line-error);
+}
+
+.kbq-formfieldcontrolgroup-filled-c28a4b:where(.kbq-formfieldcontrolgroup-invalid-f901a7.kbq-formfieldcontrolgroup-focused-43f1f7) {
+  --form-field-control-group-outline-color: var(--form-field-control-group-border-color);
+}
+
+.kbq-formfieldcontrolgroup-transparent-85bd5d:where(.kbq-formfieldcontrolgroup-invalid-f901a7) {
+  --form-field-control-color: var(--kbq-foreground-error);
+  --form-field-control-bg-color: transparent;
+  --form-field-control-placeholder-color: var(--kbq-foreground-error-tertiary);
+  --form-field-control-group-border-color: transparent;
+}
+
+.kbq-formfieldcontrolgroup-disabled-16937d {
+  --form-field-control-placeholder-color: var(--kbq-foreground-contrast-tertiary);
+  --form-field-control-color: var(--kbq-states-foreground-disabled);
+  cursor: not-allowed;
+}
+
+.kbq-formfieldcontrolgroup-filled-c28a4b:where(.kbq-formfieldcontrolgroup-disabled-16937d) {
+  --form-field-control-bg-color: var(--kbq-states-background-disabled);
+  --form-field-control-group-border-color: var(--kbq-states-line-disabled);
+}
+.kbq-formfieldaddon-3e3223 {
+  --form-field-addon-color: var(--kbq-icon-contrast-fade);
+  color: var(--form-field-addon-color);
+  block-size: var(--form-field-control-size-height);
+  transition: color var(--kbq-transition-default);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.kbq-formfieldaddon-invalid-6f8de4 {
+  --form-field-addon-color: var(--kbq-icon-error);
+}
+
+.kbq-formfieldaddon-disabled-d4ab91 {
+  --form-field-addon-color: var(--kbq-states-icon-disabled);
+}
+
+.kbq-formfieldaddon-start-a88be1 {
+  margin-inline-end: var(--kbq-size-xs);
+}
+
+.kbq-formfieldaddon-end-fb2bf3 {
+  margin-inline-start: var(--kbq-size-xxs);
+}
+.kbq-formfieldinputdate-a158cd {
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: var(--form-field-control-size-height);
+  color: var(--form-field-control-color);
+  padding-block: var(--form-field-control-padding-block-start) var(--form-field-control-padding-block-end);
+  transition: color var(--kbq-transition-default), background-color var(--kbq-transition-default);
+  font-size: var(--kbq-typography-text-normal-font-size);
+  font-weight: var(--kbq-typography-text-normal-font-weight);
+  line-height: var(--kbq-typography-text-normal-line-height);
+  font-family: var(--kbq-typography-text-normal-font-family);
+  font-style: var(--kbq-typography-text-normal-font-style);
+  text-transform: var(--kbq-typography-text-normal-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+  scrollbar-width: none;
+  background: none;
+  align-items: center;
+  padding-inline: 0;
+  display: flex;
+  overflow-x: auto;
+}
+
+.kbq-formfieldinputdate-a158cd[aria-disabled="true"] {
+  cursor: not-allowed;
+}
+.kbq-formfield-b52e32 {
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  display: inline-flex;
+  position: relative;
+}
+
+.kbq-formfield-fullWidth-8515a1 {
+  inline-size: 100%;
+}
+
+.kbq-formfield-top-f0a5c0 {
+  flex-direction: column;
+}
+
+.kbq-formfield-side-9d854f {
+  flex-direction: row;
+}
 .kbq-alert-bc5d04 {
   --alert-padding: 0 var(--kbq-size-s) 0 var(--kbq-size-s);
   --alert-content-padding: var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-m);
@@ -2035,240 +2323,60 @@
 .kbq-input-hasEndAddon-12fbf6 {
   --field-padding-inline-end: 36px;
 }
-.kbq-field-25e8f8 {
-  --field-size-height: 32px;
-  --field-input-padding-inline-start: var(--kbq-size-m);
-  --field-input-padding-inline-end: var(--kbq-size-m);
-  --field-input-padding-block-start: var(--kbq-size-xs);
-  --field-input-padding-block-end: var(--kbq-size-xs);
+
+.kbq-input-body-3b6f04 {
   inline-size: 100%;
+  min-inline-size: fit-content;
 }
 
-.kbq-field-25e8f8 > :first-child + * {
+.kbq-input-body-3b6f04 > :first-child + * {
   margin: 0;
   margin-block-start: var(--kbq-size-xs);
 }
 
-.kbq-field-25e8f8 > :first-child + * + * {
+.kbq-input-body-3b6f04 > :first-child + * + * {
   margin: 0;
   margin-block-start: var(--kbq-size-xxs);
 }
-.kbq-fieldcontentgroup-d85be3 {
-  --field-content-border-color: ;
-  --field-content-outline-width: 2px;
-  --field-content-outline-color: transparent;
-  --field-content-border-radius: var(--kbq-size-s);
-  --field-content-border-width: var(--kbq-size-border-width);
-  --field-input-padding-inline-start: var(--field-control-start-addon-inline-size, var(--kbq-size-m));
-  --field-input-padding-inline-end: var(--field-control-end-addon-inline-size, var(--kbq-size-m));
-  --field-input-padding-block-start: var(--kbq-size-xs);
-  --field-input-padding-block-end: var(--kbq-size-xs);
-  border-radius: var(--field-content-border-radius);
-  inline-size: 100%;
-  display: flex;
-  position: relative;
-}
-
-.kbq-fieldcontentgroup-d85be3:before {
-  content: "";
-  pointer-events: none;
-  border-radius: inherit;
-  z-index: var(--kbq-layer-absolute);
-  transition: border-color var(--kbq-transition-default);
-  border: var(--field-content-border-width) solid var(--field-content-border-color, transparent);
-  position: absolute;
-  inset: 0;
-}
-
-.kbq-fieldcontentgroup-d85be3:after {
-  content: "";
-  pointer-events: none;
-  border-radius: inherit;
-  z-index: var(--kbq-layer-absolute);
-  transition: outline-color var(--kbq-transition-default);
-  outline-offset: calc(-1 * var(--field-content-outline-width) / 2);
-  outline: var(--field-content-outline-width) solid var(--field-content-outline-color);
-  position: absolute;
-  inset: 0;
-}
-
-.kbq-fieldcontentgroup-hasStartAddon-62fb80 {
-  --field-control-start-addon-inline-size: 36px;
-}
-
-.kbq-fieldcontentgroup-hasEndAddon-e8c20a {
-  --field-control-end-addon-inline-size: 36px;
-}
-
-.kbq-fieldcontentgroup-transparent-ac42b6 {
-  --field-content-border-color: transparent;
-}
-
-.kbq-fieldcontentgroup-filled-37bb93 {
-  --field-content-border-color: var(--kbq-line-contrast-fade);
-}
-
-.kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-focused-8fb205) {
-  --field-content-outline-color: var(--kbq-states-line-focus-theme);
-}
-
-.kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-invalid-e4973b) {
-  --field-content-border-color: var(--kbq-line-error);
-}
-
-.kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-invalid-e4973b.kbq-fieldcontentgroup-focused-8fb205) {
-  --field-content-outline-color: var(--field-content-border-color);
-}
-
-.kbq-fieldcontentgroup-transparent-ac42b6:where(.kbq-fieldcontentgroup-invalid-e4973b) {
-  --field-content-border-color: transparent;
-}
-
-.kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-disabled-54827b) {
-  --field-content-border-color: var(--kbq-states-line-disabled);
-}
-.kbq-fieldaddon-3388d3 {
-  --field-addon-color: var(--kbq-icon-contrast-fade);
-  z-index: 1;
-  color: var(--field-addon-color);
-  block-size: var(--field-size-height);
-  transition: color var(--kbq-transition-default);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  position: absolute;
-}
-
-.kbq-fieldaddon-start-83aa84 {
-  padding-inline: var(--kbq-size-m) var(--kbq-size-s);
-}
-
-.kbq-fieldaddon-end-f314bf {
-  padding-inline: var(--kbq-size-s) var(--kbq-size-m);
-  inset-inline-end: 0;
-}
-
-.kbq-fieldaddon-invalid-08b1fe {
-  --field-addon-color: var(--kbq-icon-error);
-}
-
-.kbq-fieldaddon-disabled-c170bf {
-  --field-addon-color: var(--kbq-states-icon-disabled);
-}
-.kbq-fieldinput-77b90b {
-  --field-input-color: ;
-  --field-input-bg-color: ;
-  --field-input-placeholder-color: ;
-  box-sizing: border-box;
-  border-radius: inherit;
-  inline-size: 100%;
-  color: var(--field-input-color);
-  background: var(--field-input-bg-color);
-  padding-block: var(--field-input-padding-block-start) var(--field-input-padding-block-end);
-  padding-inline: var(--field-input-padding-inline-start) var(--field-input-padding-inline-end);
-  transition: color var(--kbq-transition-default), background-color var(--kbq-transition-default);
-  font-size: var(--kbq-typography-text-normal-font-size);
-  font-weight: var(--kbq-typography-text-normal-font-weight);
-  line-height: var(--kbq-typography-text-normal-line-height);
-  font-family: var(--kbq-typography-text-normal-font-family);
-  font-style: var(--kbq-typography-text-normal-font-style);
-  text-transform: var(--kbq-typography-text-normal-text-transform);
-  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
-  border: none;
-  outline: none;
-}
-
-.kbq-fieldinput-77b90b:-webkit-autofill {
-  box-shadow: 0 0 0 1000px var(--kbq-background-theme-fade) inset !important;
-  background-color: #0000 !important;
-}
-
-.kbq-fieldinput-77b90b::placeholder {
-  color: var(--field-input-placeholder-color);
-}
-
-.kbq-fieldinput-77b90b:where(input) {
-  block-size: var(--field-size-height);
-}
-
-.kbq-fieldinput-77b90b:where(textarea) {
-  min-block-size: var(--field-size-height);
+.kbq-textarea-auto-size-566580 {
   resize: none;
 }
 
-.kbq-fieldinput-transparent-ed7263 {
-  --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-bg-color: transparent;
-  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
-}
-
-.kbq-fieldinput-filled-abb632 {
-  --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-bg-color: var(--kbq-background-bg);
-  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
-}
-
-.kbq-fieldinput-filled-abb632:where(.kbq-fieldinput-invalid-2af82b) {
-  --field-input-color: var(--kbq-foreground-error);
-  --field-input-bg-color: var(--kbq-background-error-less);
-  --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
+.kbq-textarea-vertical-resize-bde131 {
+  resize: block;
+  overflow: auto;
 }
 
-.kbq-fieldinput-transparent-ed7263:where(.kbq-fieldinput-invalid-2af82b) {
-  --field-input-color: var(--kbq-foreground-error);
-  --field-input-bg-color: transparent;
-  --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
+.kbq-textarea-body-943a69 {
+  inline-size: 100%;
 }
 
-.kbq-fieldinput-disabled-59285a {
-  cursor: not-allowed;
+.kbq-textarea-body-943a69 > :first-child + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xs);
 }
 
-.kbq-fieldinput-filled-abb632:where(.kbq-fieldinput-disabled-59285a) {
-  --field-input-color: var(--kbq-states-foreground-disabled);
-  --field-input-bg-color: var(--kbq-states-background-disabled);
+.kbq-textarea-body-943a69 > :first-child + * + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xxs);
 }
 
-.kbq-fieldinput-transparent-ed7263:where(.kbq-fieldinput-disabled-59285a) {
-  --field-input-color: var(--kbq-states-foreground-disabled);
-}
-.kbq-fieldcaption-8a3413 {
-  inline-size: 100%;
-  font-size: var(--kbq-typography-text-compact-font-size);
-  font-weight: var(--kbq-typography-text-compact-font-weight);
-  line-height: var(--kbq-typography-text-compact-line-height);
-  font-family: var(--kbq-typography-text-compact-font-family);
-  font-style: var(--kbq-typography-text-compact-font-style);
-  text-transform: var(--kbq-typography-text-compact-text-transform);
-  font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings);
-  letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
-  text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
-  color: var(--kbq-foreground-contrast-secondary);
-  transition: color var(--kbq-transition-default);
+.kbq-textarea-group-c8f6ff {
+  padding-inline: 0;
 }
-.kbq-fielderror-a0b0a4 {
+.kbq-inputnumber-body-4de1da {
   inline-size: 100%;
-  font-size: var(--kbq-typography-text-compact-font-size);
-  font-weight: var(--kbq-typography-text-compact-font-weight);
-  line-height: var(--kbq-typography-text-compact-line-height);
-  font-family: var(--kbq-typography-text-compact-font-family);
-  font-style: var(--kbq-typography-text-compact-font-style);
-  text-transform: var(--kbq-typography-text-compact-text-transform);
-  font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings);
-  letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
-  text-underline-offset: calc(( var(--kbq-typography-text-compact-line-height)  - var(--kbq-typography-text-compact-font-size)) / 2);
-  color: var(--kbq-foreground-error);
-  transition: color var(--kbq-transition-default);
+  min-inline-size: fit-content;
 }
-.kbq-textarea-auto-size-566580 {
-  resize: none;
+
+.kbq-inputnumber-body-4de1da > :first-child + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xs);
 }
 
-.kbq-textarea-vertical-resize-bde131 {
-  resize: block;
-  overflow: auto;
+.kbq-inputnumber-body-4de1da > :first-child + * + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xxs);
 }
 .kbq-inputnumbercountercontrols-77ed13 {
   flex-direction: column;
@@ -2290,6 +2398,20 @@
 [data-label-placement="side"] .kbq-radiogroup-label-750809 {
   padding-block-start: 0;
 }
+
+.kbq-radiogroup-body-4c887c {
+  inline-size: 100%;
+}
+
+.kbq-radiogroup-body-4c887c > :first-child + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xs);
+}
+
+.kbq-radiogroup-body-4c887c > :first-child + * + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xxs);
+}
 .kbq-radio-c3ed31 {
   --radio-size: ;
   --radio-opacity: 0;
@@ -3221,6 +3343,20 @@
   margin: auto;
 }
 
+.kbq-select-body-69aa88 {
+  inline-size: 100%;
+}
+
+.kbq-select-body-69aa88 > :first-child + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xs);
+}
+
+.kbq-select-body-69aa88 > :first-child + * + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xxs);
+}
+
 .kbq-select-list-8ffac0 {
   inline-size: 100%;
 }
@@ -3244,76 +3380,6 @@
 .kbq-select-clearButton-8031a1 {
   margin-inline-end: var(--kbq-size-xxs);
 }
-
-.kbq-select-clearable-2f5092 {
-  --field-input-padding-inline-end: calc(var(--field-control-end-addon-inline-size)  + 28px);
-}
-.kbq-fieldselect-0f0f5e {
-  --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-bg-color: var(--kbq-background-bg);
-  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
-  cursor: pointer;
-  box-sizing: border-box;
-  border-radius: inherit;
-  inline-size: 100%;
-  color: var(--field-input-color);
-  background: var(--field-input-bg-color);
-  min-block-size: var(--field-size-height);
-  padding-inline: var(--field-input-padding-inline-start) var(--field-input-padding-inline-end);
-  transition: color var(--kbq-transition-default), background-color var(--kbq-transition-default);
-  font-size: var(--kbq-typography-text-normal-font-size);
-  font-weight: var(--kbq-typography-text-normal-font-weight);
-  line-height: var(--kbq-typography-text-normal-line-height);
-  font-family: var(--kbq-typography-text-normal-font-family);
-  font-style: var(--kbq-typography-text-normal-font-style);
-  text-transform: var(--kbq-typography-text-normal-text-transform);
-  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
-  border: none;
-  outline: none;
-  flex-direction: column;
-  display: flex;
-}
-
-.kbq-fieldselect-container-422b17 {
-  align-items: center;
-  gap: var(--kbq-size-xs);
-  block-size: 100%;
-  display: flex;
-}
-
-.kbq-fieldselect-content-c36142 {
-  padding-block: var(--kbq-size-xs);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.kbq-fieldselect-invalid-db8152 {
-  --field-input-color: var(--kbq-foreground-error);
-  --field-input-bg-color: var(--kbq-background-error-less);
-  --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
-}
-
-.kbq-fieldselect-disabled-f0efd4 {
-  --field-input-color: var(--kbq-states-foreground-disabled);
-  --field-input-bg-color: var(--kbq-states-background-disabled);
-  cursor: not-allowed;
-}
-
-.kbq-fieldselect-hasPlaceholder-7b7518 {
-  --field-input-color: var(--field-input-placeholder-color);
-}
-
-.kbq-fieldselect-hiddenPlaceholder-a3a36d {
-  text-align: start;
-  visibility: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  block-size: 0;
-  overflow: hidden;
-}
 .kbq-selectlist-label-4b49f4 {
   padding: var(--kbq-size-xs) var(--kbq-size-m);
 }
@@ -3742,6 +3808,33 @@
   outline-offset: -2px;
   outline: 2px solid var(--kbq-states-line-focus-theme);
 }
+
+.kbq-tablecolumnheader-sortable-038383 {
+  cursor: pointer;
+}
+
+.kbq-tablecolumnheader-content-2b6a20 {
+  gap: var(--kbq-size-s);
+  display: flex;
+}
+
+.kbq-tablecolumnheader-sortIcon-b98bf4 {
+  visibility: hidden;
+  display: flex;
+}
+
+.kbq-tablecolumnheader-sortIcon-b98bf4:after {
+  content: " ";
+  font-size: 0;
+}
+
+.kbq-tablecolumnheader-sortIcon-b98bf4 > * {
+  margin: auto;
+}
+
+.kbq-tablecolumnheader-active-f9b640 {
+  visibility: visible;
+}
 .kbq-tablerow-4a268c {
   box-sizing: border-box;
   cursor: default;
@@ -4017,71 +4110,22 @@
 .kbq-dateinput-a4c39b {
   min-inline-size: 150px;
 }
-.kbq-fieldinputdate-a54331 {
-  --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-bg-color: var(--kbq-background-bg);
-  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
-  cursor: pointer;
-  box-sizing: border-box;
-  inline-size: 100%;
-  block-size: var(--field-size-height);
-  border-radius: inherit;
-  color: var(--field-input-color);
-  background: var(--field-input-bg-color);
-  padding-block: var(--field-input-padding-block-start) var(--field-input-padding-block-end);
-  padding-inline: var(--field-input-padding-inline-start) var(--field-input-padding-inline-end);
-  transition: color var(--kbq-transition-default), background-color var(--kbq-transition-default);
-  font-size: var(--kbq-typography-text-normal-font-size);
-  font-weight: var(--kbq-typography-text-normal-font-weight);
-  line-height: var(--kbq-typography-text-normal-line-height);
-  font-family: var(--kbq-typography-text-normal-font-family);
-  font-style: var(--kbq-typography-text-normal-font-style);
-  text-transform: var(--kbq-typography-text-normal-text-transform);
-  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
-  align-items: center;
-  display: flex;
-}
-
-.kbq-fieldinputdate-transparent-04d912 {
-  --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-bg-color: transparent;
-  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
-}
-
-.kbq-fieldinputdate-filled-02db7d {
-  --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-bg-color: var(--kbq-background-bg);
-  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
-}
-
-.kbq-fieldinputdate-filled-02db7d:where(.kbq-fieldinputdate-invalid-d764c6) {
-  --field-input-color: var(--kbq-foreground-error);
-  --field-input-bg-color: var(--kbq-background-error-less);
-  --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
-}
-
-.kbq-fieldinputdate-transparent-04d912:where(.kbq-fieldinputdate-invalid-d764c6) {
-  --field-input-color: var(--kbq-foreground-error);
-  --field-input-bg-color: transparent;
-  --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
-}
 
-.kbq-fieldinputdate-disabled-692832 {
-  cursor: not-allowed;
+.kbq-dateinput-body-64bfc5 {
+  inline-size: 100%;
 }
 
-.kbq-fieldinputdate-filled-02db7d:where(.kbq-fieldinputdate-disabled-692832) {
-  --field-input-color: var(--kbq-states-foreground-disabled);
-  --field-input-bg-color: var(--kbq-states-background-disabled);
+.kbq-dateinput-body-64bfc5 > :first-child + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xs);
 }
 
-.kbq-fieldinputdate-transparent-04d912:where(.kbq-fieldinputdate-disabled-692832) {
-  --field-input-color: var(--kbq-states-foreground-disabled);
+.kbq-dateinput-body-64bfc5 > :first-child + * + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xxs);
 }
 .kbq-datesegment-3b7153 {
-  --date-input-segment-color: var(--field-input-color);
+  --date-input-segment-color: var(--form-field-control-color);
   color: var(--date-input-segment-color);
 }
 
@@ -4092,7 +4136,7 @@
 }
 
 .kbq-datesegment-placeholder-b233e5 {
-  color: var(--field-input-placeholder-color);
+  color: var(--form-field-control-placeholder-color);
 }
 
 .kbq-datesegment-literal-a4b534 {
@@ -4100,7 +4144,7 @@
 }
 
 .kbq-datesegment-literal-a4b534:not(.kbq-datesegment-hasValue-800714) {
-  color: var(--field-input-placeholder-color);
+  color: var(--form-field-control-placeholder-color);
 }
 .kbq-datepicker-calendar-25a0d7 {
   margin-inline-end: calc(-1 * var(--kbq-size-xxs));
@@ -4132,6 +4176,20 @@
 .kbq-timepicker-startAddon-46c835 > :not(.kbq-timepicker-clock-920ed0) {
   pointer-events: all;
 }
+
+.kbq-timepicker-body-15a987 {
+  inline-size: 100%;
+}
+
+.kbq-timepicker-body-15a987 > :first-child + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xs);
+}
+
+.kbq-timepicker-body-15a987 > :first-child + * + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xxs);
+}
 .kbq-searchinput-input-f896b1::-webkit-search-decoration {
   appearance: none;
 }
@@ -4159,53 +4217,78 @@
 .kbq-searchinput-clearButton-71f872 {
   margin-inline-end: calc(-1 * var(--kbq-size-xxs));
 }
-.kbq-form-40d37e, .kbq-form-fieldset-b2924b {
+
+.kbq-searchinput-body-972749 {
+  inline-size: 100%;
+  min-inline-size: fit-content;
+}
+
+.kbq-searchinput-body-972749 > :first-child + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xs);
+}
+
+.kbq-searchinput-body-972749 > :first-child + * + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xxs);
+}
+.kbq-form-40d37e {
   --gap-y: var(--kbq-size-xl);
-  --template-columns: max-content 1fr;
-  display: grid;
+  --label-inline-size: ;
 }
 
-:is(.kbq-form-40d37e, .kbq-form-fieldset-b2924b) > [data-slot="form-control"] {
-  width: 100%;
+.kbq-form-40d37e > [data-slot="form-field"], .kbq-form-40d37e > .kbq-form-group-4158f5 > [data-slot="form-field"] {
+  inline-size: 100%;
 }
 
-:is(.kbq-form-40d37e, .kbq-form-fieldset-b2924b) > [data-slot="form-control"]:not(:last-child) {
-  margin-block-end: var(--gap-y);
+.kbq-form-caption-052541 {
+  display: table-caption;
 }
 
-:is(.kbq-form-40d37e, .kbq-form-fieldset-b2924b) > * {
-  grid-column: 1 / -1;
-  justify-self: start;
+.kbq-form-caption-052541 .kbq-form-top-605582 {
+  caption-side: top;
 }
 
-.kbq-form-fieldset-b2924b {
-  border: 0;
-  margin: 0;
-  padding: 0;
+.kbq-form-caption-052541 .kbq-form-bottom-c13772 {
+  caption-side: bottom;
 }
 
-.kbq-form-fieldset-b2924b .kbq-form-legend-91e738 {
-  margin-block-end: var(--kbq-size-l);
+.kbq-form-vertical-2f3a00, .kbq-form-vertical-2f3a00 .kbq-form-group-4158f5 {
+  gap: var(--gap-y);
+  flex-direction: column;
+  display: flex;
 }
 
-.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b {
-  grid-template-columns: var(--template-columns);
+.kbq-form-horizontal-52dea8 {
+  border-collapse: separate;
+  border-spacing: 0 var(--gap-y);
+  margin-block: calc(-1 * var(--gap-y));
+  display: table;
 }
 
-:is(.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b) > [data-slot="form-control"] {
-  grid-template-columns: subgrid;
-  align-items: center;
-  display: grid;
+.kbq-form-horizontal-52dea8 > [data-slot="form-field"], .kbq-form-horizontal-52dea8 > .kbq-form-group-4158f5 > [data-slot="form-field"] {
+  inline-size: 100%;
+  display: table-row;
+}
+
+:is(.kbq-form-horizontal-52dea8 > [data-slot="form-field"], .kbq-form-horizontal-52dea8 > .kbq-form-group-4158f5 > [data-slot="form-field"]) [data-slot="form-field-label"] {
+  inline-size: var(--label-inline-size);
+  display: table-cell;
 }
 
-:is(.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b) > [data-slot="form-control"] > :first-child {
-  grid-column: 1;
-  align-self: start;
+.kbq-form-horizontal-52dea8 .kbq-form-group-4158f5 {
+  display: table-row-group;
 }
 
-:is(.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b) > [data-slot="form-control"] > :last-child {
-  grid-column: 2;
-  justify-self: start;
+.kbq-form-horizontal-52dea8 .kbq-form-actions-22aca9 {
+  inline-size: 100%;
+  display: table-row;
+}
+
+.kbq-form-horizontal-52dea8 .kbq-form-actions-22aca9:before {
+  content: "";
+  inline-size: var(--label-inline-size);
+  display: table-cell;
 }
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;