@dynatrace/strato-components 3.10.4 → 3.11.1

package/esm/layouts/app-header/action-group/NavItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/NavItem.css.ts"],
-  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-10-4';\nexport var isDisabled = '_bf74pw1-3-10-4';\nexport var isSelected = '_bf74pw0-3-10-4';"],
+  "sourcesContent": ["import './NavItem.css';\nexport var button = '_bf74pw2-3-11-1';\nexport var isDisabled = '_bf74pw1-3-11-1';\nexport var isSelected = '_bf74pw0-3-11-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,aAAa;AACjB,IAAI,aAAa;",
   "names": []
 }

package/esm/layouts/app-header/app-icon/AppIcon.css

@@ -1,4 +1,4 @@
-@keyframes _1dtfpz50-3-10-4 {
+@keyframes _1dtfpz50-3-11-1 {
   0% {
     opacity: 0;
   }
@@ -6,11 +6,11 @@
     opacity: 1;
   }
 }
-._1dtfpz51-3-10-4 {
+._1dtfpz51-3-11-1 {
   object-fit: contain;
 }
-._1dtfpz52-3-10-4 {
-  animation-name: _1dtfpz50-3-10-4;
+._1dtfpz52-3-11-1 {
+  animation-name: _1dtfpz50-3-11-1;
   animation-duration: var(--dt-animations-fade-in-duration-slow, 350ms);
   animation-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
 }

package/esm/layouts/app-header/app-icon/AppIcon.sty.js

@@ -1,6 +1,6 @@
 import "./AppIcon.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var icon = _7a468({ defaultClassName: "_1dtfpz51-3-10-4", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var icon = _7a468({ defaultClassName: "_1dtfpz51-3-11-1", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   icon
 };

package/esm/layouts/app-header/app-icon/AppIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/app-icon/AppIcon.css.ts"],
-  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-10-4',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-10-4'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-11-1',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-11-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/container/Container.css

@@ -1,11 +1,11 @@
-._f32lcd0-3-10-4 {
+._f32lcd0-3-11-1 {
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-radius: var(--dt-borders-radius-container-default, 9px);
-  color: var(--_6levse0-3-10-4);
-  border-color: var(--_6levse2-3-10-4);
-  background-color: var(--_6levse1-3-10-4);
+  color: var(--_6levse0-3-11-1);
+  border-color: var(--_6levse2-3-11-1);
+  background-color: var(--_6levse1-3-11-1);
 }
-._1jgl8s50-3-10-4 ._f32lcd0-3-10-4 {
+._1jgl8s50-3-11-1 ._f32lcd0-3-11-1 {
   border-width: var(--dt-borders-width-default, 1px);
 }

package/esm/layouts/container/Container.sty.js

@@ -1,7 +1,7 @@
 import "../../core/components/app-root/AppRoot.css";
 import "../../styles/container.css";
 import "./Container.css";
-var containerCSS = "_f32lcd0-3-10-4";
+var containerCSS = "_f32lcd0-3-11-1";
 export {
   containerCSS
 };

package/esm/layouts/container/Container.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/container/Container.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-10-4';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-11-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/divider/Divider.css

@@ -1,21 +1,21 @@
-._1thxv8m0-3-10-4 {
+._1thxv8m0-3-11-1 {
   border: none;
   margin: 0;
   overflow-wrap: break-word;
-  background-color: var(--_k096v42-3-10-4);
+  background-color: var(--_k096v42-3-11-1);
 }
-._1thxv8m1-3-10-4 {
+._1thxv8m1-3-11-1 {
   width: 100%;
   height: var(--dt-borders-width-default, 1px);
 }
-._1thxv8m2-3-10-4 {
+._1thxv8m2-3-11-1 {
   width: var(--dt-borders-width-default, 1px);
   height: 100%;
 }
-._1thxv8m5-3-10-4 {
+._1thxv8m5-3-11-1 {
   flex-shrink: 0;
 }
-._1thxv8m6-3-10-4 {
+._1thxv8m6-3-11-1 {
   flex-shrink: 0;
   width: var(--dt-borders-width-default, 1px);
   height: auto;

package/esm/layouts/divider/Divider.sty.js

@@ -1,7 +1,7 @@
 import "../../core/utils/colorUtils.css";
 import "./Divider.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-10-4", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-10-4", vertical: "_1thxv8m2-3-10-4" }, flexItem: { true: "_1thxv8m3-3-10-4", false: "_1thxv8m4-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-10-4"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-10-4"]] });
+var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-11-1", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-11-1", vertical: "_1thxv8m2-3-11-1" }, flexItem: { true: "_1thxv8m3-3-11-1", false: "_1thxv8m4-3-11-1" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-11-1"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-11-1"]] });
 export {
   dividerCSS
 };

package/esm/layouts/divider/Divider.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/divider/Divider.css.ts"],
-  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-10-4',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-10-4',vertical:'_1thxv8m2-3-10-4'},flexItem:{true:'_1thxv8m3-3-10-4',false:'_1thxv8m4-3-10-4'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-10-4'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-10-4']]});"],
+  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-11-1',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-11-1',vertical:'_1thxv8m2-3-11-1'},flexItem:{true:'_1thxv8m3-3-11-1',false:'_1thxv8m4-3-11-1'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-11-1'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-11-1']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,aAAY,EAAC,YAAW,oBAAmB,UAAS,mBAAkB,GAAE,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,aAAY,cAAa,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,aAAY,YAAW,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/input-group/InputGroup.css

@@ -1,64 +1,103 @@
-._1jgl8s50-3-10-4 ._1x4bl8z0-3-10-4 {
+._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 {
   gap: var(--dt-spacings-size-0, 0);
+  isolation: isolate;
 }
-._1jgl8s50-3-10-4 ._1x4bl8z0-3-10-4 > *:not(:first-child),
- ._1jgl8s50-3-10-4 ._1x4bl8z0-3-10-4 > *:not(:first-child, ._1x4bl8z0-3-10-4) > .strato-inputgroup,
- ._1jgl8s50-3-10-4 ._1x4bl8z0-3-10-4 > ._1x4bl8z0-3-10-4 + * {
+._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:not(:first-child),
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:not(:first-child, ._1x4bl8z1-3-11-1) > .strato-inputgroup,
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > ._1x4bl8z1-3-11-1 + * {
   margin-left: -1px;
   box-sizing: content-box;
 }
-._1jgl8s50-3-10-4 ._1x4bl8z0-3-10-4 > *,
- ._1jgl8s50-3-10-4 ._1x4bl8z0-3-10-4 > * > .strato-inputgroup {
+._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > * {
+  --_1x4bl8z0-3-11-1: 1;
   position: relative;
-  z-index: var(--_bx32h5-3-10-4);
+  z-index: var(--_1x4bl8z0-3-11-1);
 }
-._1jgl8s50-3-10-4 ._1x4bl8z0-3-10-4 > *:focus-within,
- ._1jgl8s50-3-10-4 ._1x4bl8z0-3-10-4 > * > .strato-inputgroup:focus-within {
-  z-index: 6;
+._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > * > .strato-inputgroup {
+  position: relative;
+  z-index: var(--_1x4bl8z0-3-11-1);
+}
+._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:not(:has([disabled])):hover,
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:not(:has([disabled])):active {
+  --_1x4bl8z0-3-11-1: 2;
+}
+._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > ._bx32hd-3-11-1._bx32h8-3-11-1:not(._bx32h6-3-11-1):not(:has(._1a8lqy92-3-11-1)):not(._1a8lqy92-3-11-1):hover,
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > ._bx32hd-3-11-1._bx32h8-3-11-1:not(._bx32h6-3-11-1):not(:has(._1a8lqy92-3-11-1)):not(._1a8lqy92-3-11-1):active {
+  --_1x4bl8z0-3-11-1: 2;
+}
+._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > ._bx32hd-3-11-1:is(._bx32h7-3-11-1,._bx32h9-3-11-1,._bx32ha-3-11-1,._bx32hb-3-11-1):not(._bx32h6-3-11-1):not(:has(._1a8lqy92-3-11-1)):not(._1a8lqy92-3-11-1),
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:has(._1a8lqy91-3-11-1):not(:has(._1a8lqy92-3-11-1)),
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1._1a8lqy91-3-11-1:not(._1a8lqy92-3-11-1) > *:not(._bx32h6-3-11-1):not(:has(._1a8lqy92-3-11-1)):not(._1a8lqy92-3-11-1) {
+  --_1x4bl8z0-3-11-1: 3;
+}
+._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > ._bx32hd-3-11-1:is(._bx32h7-3-11-1,._bx32h9-3-11-1,._bx32ha-3-11-1,._bx32hb-3-11-1):not(._bx32h6-3-11-1):not(:has(._1a8lqy92-3-11-1)):not(._1a8lqy92-3-11-1):hover,
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > ._bx32hd-3-11-1:is(._bx32h7-3-11-1,._bx32h9-3-11-1,._bx32ha-3-11-1,._bx32hb-3-11-1):not(._bx32h6-3-11-1):not(:has(._1a8lqy92-3-11-1)):not(._1a8lqy92-3-11-1):active,
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:has(._1a8lqy91-3-11-1):not(:has(._1a8lqy92-3-11-1)):hover,
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:has(._1a8lqy91-3-11-1):not(:has(._1a8lqy92-3-11-1)):active,
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1._1a8lqy91-3-11-1:not(._1a8lqy92-3-11-1) > *:not(._bx32h6-3-11-1):not(:has(._1a8lqy92-3-11-1)):not(._1a8lqy92-3-11-1):hover,
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1._1a8lqy91-3-11-1:not(._1a8lqy92-3-11-1) > *:not(._bx32h6-3-11-1):not(:has(._1a8lqy92-3-11-1)):not(._1a8lqy92-3-11-1):active {
+  --_1x4bl8z0-3-11-1: 4;
+}
+._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > ._bx32he-3-11-1:not(._bx32h6-3-11-1):not(:has(._1a8lqy92-3-11-1)):not(._1a8lqy92-3-11-1) {
+  --_1x4bl8z0-3-11-1: 5;
+}
+._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:focus-within,
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > * > .strato-inputgroup:focus-within {
+  --_1x4bl8z0-3-11-1: 6;
+}
+._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > ._bx32h6-3-11-1,
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > ._bx32h6-3-11-1:is(:hover, :active),
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > ._1a8lqy92-3-11-1,
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > ._1a8lqy92-3-11-1:is(:hover, :active),
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:has(._1a8lqy92-3-11-1),
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:has(._1a8lqy92-3-11-1):is(:hover, :active),
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:has(._bx32h6-3-11-1),
+ ._1jgl8s50-3-11-1 ._1x4bl8z1-3-11-1 > *:has(._bx32h6-3-11-1):is(:hover, :active) {
+  --_1x4bl8z0-3-11-1: 0;
 }
-._1x4bl8z0-3-10-4 > .strato-inputgroup:not(:last-child),
- ._1x4bl8z0-3-10-4 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z1-3-11-1 > .strato-inputgroup:not(:last-child),
+ ._1x4bl8z1-3-11-1 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1x4bl8z0-3-10-4 > .strato-inputgroup:not(:first-child),
- ._1x4bl8z0-3-10-4 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z1-3-11-1 > .strato-inputgroup:not(:first-child),
+ ._1x4bl8z1-3-11-1 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._1x4bl8z0-3-10-4 > ._mvcxum0-3-10-4 {
+._1x4bl8z1-3-11-1 > ._mvcxum0-3-11-1 {
   display: grid;
   align-items: center;
   grid-template-rows: subgrid;
 }
-._1x4bl8z0-3-10-4:has(> ._mvcxum0-3-10-4 > label):has(> ._mvcxum0-3-10-4 > ._1l9bja60-3-10-4:last-child:not(:empty)) > ._mvcxum0-3-10-4 {
+._1x4bl8z1-3-11-1:has(> ._mvcxum0-3-11-1 > label):has(> ._mvcxum0-3-11-1 > ._1l9bja60-3-11-1:last-child:not(:empty)) > ._mvcxum0-3-11-1 {
   grid-row: 1 / span 3;
 }
-._1x4bl8z0-3-10-4:has(> ._mvcxum0-3-10-4 > label):not(:has(> ._mvcxum0-3-10-4 > ._1l9bja60-3-10-4:last-child:not(:empty))) > ._mvcxum0-3-10-4 {
+._1x4bl8z1-3-11-1:has(> ._mvcxum0-3-11-1 > label):not(:has(> ._mvcxum0-3-11-1 > ._1l9bja60-3-11-1:last-child:not(:empty))) > ._mvcxum0-3-11-1 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-10-4:not(:has(> ._mvcxum0-3-10-4 > label)):has(> ._mvcxum0-3-10-4 > ._1l9bja60-3-10-4:last-child:not(:empty)) > ._mvcxum0-3-10-4 {
+._1x4bl8z1-3-11-1:not(:has(> ._mvcxum0-3-11-1 > label)):has(> ._mvcxum0-3-11-1 > ._1l9bja60-3-11-1:last-child:not(:empty)) > ._mvcxum0-3-11-1 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-10-4 > ._mvcxum0-3-10-4 > label {
+._1x4bl8z1-3-11-1 > ._mvcxum0-3-11-1 > label {
   grid-row: 1 / 2;
   align-self: end;
 }
-._1x4bl8z0-3-10-4 > ._mvcxum0-3-10-4:has(> :not(label, ._1l9bja60-3-10-4)) > label {
+._1x4bl8z1-3-11-1 > ._mvcxum0-3-11-1:has(> :not(label, ._1l9bja60-3-11-1)) > label {
   width: 0;
   min-width: 100%;
 }
-._1x4bl8z0-3-10-4 > :not(._mvcxum0-3-10-4) {
+._1x4bl8z1-3-11-1 > :not(._mvcxum0-3-11-1) {
   grid-row: 1 / 2;
 }
-._1x4bl8z0-3-10-4:has(> ._mvcxum0-3-10-4 > label) > :not(._mvcxum0-3-10-4), ._1x4bl8z0-3-10-4:has(> ._mvcxum0-3-10-4 > label) > ._mvcxum0-3-10-4 > :not(label, ._1l9bja60-3-10-4) {
+._1x4bl8z1-3-11-1:has(> ._mvcxum0-3-11-1 > label) > :not(._mvcxum0-3-11-1), ._1x4bl8z1-3-11-1:has(> ._mvcxum0-3-11-1 > label) > ._mvcxum0-3-11-1 > :not(label, ._1l9bja60-3-11-1) {
   grid-row: 2 / 3;
 }
-._1x4bl8z0-3-10-4:has(> ._mvcxum0-3-10-4 > label) > ._mvcxum0-3-10-4 > ._1l9bja60-3-10-4 {
+._1x4bl8z1-3-11-1:has(> ._mvcxum0-3-11-1 > label) > ._mvcxum0-3-11-1 > ._1l9bja60-3-11-1 {
   grid-row: 3 / 4;
   align-self: start;
 }
-._1x4bl8z0-3-10-4 > ._mvcxum0-3-10-4:has(> :not(label, ._1l9bja60-3-10-4)) > ._1l9bja60-3-10-4 ._16z6rg14-3-10-4 {
+._1x4bl8z1-3-11-1 > ._mvcxum0-3-11-1:has(> :not(label, ._1l9bja60-3-11-1)) > ._1l9bja60-3-11-1 ._16z6rg14-3-11-1 {
   width: 0;
   flex: 1 1 auto;
 }

package/esm/layouts/input-group/InputGroup.sty.js

@@ -1,10 +1,13 @@
 import "../../core/components/app-root/AppRoot.css";
+import "../../styles/field.css";
+import "../../styles/textStyle.css";
+import "../../forms/hooks/useAutofillEvent.css";
+import "../../forms/_base-input/BaseInput.css";
 import "../../forms/forms-core/components/form-field/FormField.css";
 import "../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css";
 import "../../forms/forms-core/components/form-field-messages/FormFieldMessages.css";
-import "../../styles/field.css";
 import "./InputGroup.css";
-var inputGroup = "_1x4bl8z0-3-10-4";
+var inputGroup = "_1x4bl8z1-3-11-1";
 var inputGroupClassName = "strato-inputgroup";
 export {
   inputGroup,

package/esm/layouts/input-group/InputGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/input-group/InputGroup.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../forms/forms-core/components/form-field/FormField.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessages.css';\nimport '../../styles/field.css';\nimport './InputGroup.css';\nexport var inputGroup = '_1x4bl8z0-3-10-4';\nexport var inputGroupClassName = 'strato-inputgroup';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,sBAAsB;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../../forms/hooks/useAutofillEvent.css';\nimport '../../forms/_base-input/BaseInput.css';\nimport '../../forms/forms-core/components/form-field/FormField.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessages.css';\nimport './InputGroup.css';\nexport var inputGroup = '_1x4bl8z1-3-11-1';\nexport var inputGroupClassName = 'strato-inputgroup';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,sBAAsB;",
   "names": []
 }

package/esm/layouts/page/DetailView.css

@@ -1,11 +1,11 @@
-._wapl5d0-3-10-4 {
+._wapl5d0-3-11-1 {
   grid-area: details;
   flex-direction: row-reverse;
 }
-._wapl5d1-3-10-4 {
+._wapl5d1-3-11-1 {
   background: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-10-4 ._wapl5d1-3-10-4 {
+._1jgl8s50-3-11-1 ._wapl5d1-3-11-1 {
   border-top-left-radius: 0;
 }

package/esm/layouts/page/DetailView.sty.js

@@ -1,7 +1,7 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./DetailView.css";
-var content = "_wapl5d1-3-10-4";
-var details = "_wapl5d0-3-10-4";
+var content = "_wapl5d1-3-11-1";
+var details = "_wapl5d0-3-11-1";
 export {
   content,
   details

package/esm/layouts/page/DetailView.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/DetailView.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './DetailView.css';\nexport var content = '_wapl5d1-3-10-4';\nexport var details = '_wapl5d0-3-10-4';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './DetailView.css';\nexport var content = '_wapl5d1-3-11-1';\nexport var details = '_wapl5d0-3-11-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/Header.css

@@ -1,9 +1,9 @@
-._150dima0-3-10-4 {
+._150dima0-3-11-1 {
   grid-area: header;
   width: 100%;
   padding: var(--dt-spacings-size-8, 8px);
   box-sizing: border-box;
-  ._1jgl8s50-3-10-4 & {
+  ._1jgl8s50-3-11-1 & {
     border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
   }
 }

package/esm/layouts/page/Header.sty.js

@@ -1,6 +1,6 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Header.css";
-var header = "_150dima0-3-10-4";
+var header = "_150dima0-3-11-1";
 export {
   header
 };

package/esm/layouts/page/Header.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Header.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Header.css';\nexport var header = '_150dima0-3-10-4';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Header.css';\nexport var header = '_150dima0-3-11-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/page/Main.css

@@ -1,23 +1,23 @@
-._5zin930-3-10-4 {
+._5zin930-3-11-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   grid-area: main;
   overflow: hidden;
 }
-._5zin931-3-10-4 {
+._5zin931-3-11-1 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._5zin932-3-10-4 {
+._5zin932-3-11-1 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-10-4 ._5zin932-3-10-4 {
+._1jgl8s50-3-11-1 ._5zin932-3-11-1 {
   border-radius: 0;
 }
-._5zin933-3-10-4 {
+._5zin933-3-11-1 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1jgl8s50-3-10-4 ._5zin933-3-10-4 {
+._1jgl8s50-3-11-1 ._5zin933-3-11-1 {
   border-radius: 0;
 }

package/esm/layouts/page/Main.sty.js

@@ -1,9 +1,9 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Main.css";
-var content = "_5zin931-3-10-4";
-var main = "_5zin930-3-10-4";
-var withDetails = "_5zin933-3-10-4";
-var withSidebar = "_5zin932-3-10-4";
+var content = "_5zin931-3-11-1";
+var main = "_5zin930-3-11-1";
+var withDetails = "_5zin933-3-11-1";
+var withSidebar = "_5zin932-3-11-1";
 export {
   content,
   main,

package/esm/layouts/page/Main.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Main.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Main.css';\nexport var content = '_5zin931-3-10-4';\nexport var main = '_5zin930-3-10-4';\nexport var withDetails = '_5zin933-3-10-4';\nexport var withSidebar = '_5zin932-3-10-4';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Main.css';\nexport var content = '_5zin931-3-11-1';\nexport var main = '_5zin930-3-11-1';\nexport var withDetails = '_5zin933-3-11-1';\nexport var withSidebar = '_5zin932-3-11-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,cAAc;",
   "names": []
 }

package/esm/layouts/page/Page.css

@@ -1,10 +1,10 @@
-._1j29czt0-3-10-4 {
+._1j29czt0-3-11-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;
   height: 100vh;
   overflow: hidden;
 }
-._1jgl8s50-3-10-4 ._1j29czt0-3-10-4 {
+._1jgl8s50-3-11-1 ._1j29czt0-3-11-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }

package/esm/layouts/page/Page.sty.js

@@ -1,6 +1,6 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./Page.css";
-var page = "_1j29czt0-3-10-4";
+var page = "_1j29czt0-3-11-1";
 export {
   page
 };

package/esm/layouts/page/Page.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Page.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Page.css';\nexport var page = '_1j29czt0-3-10-4';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './Page.css';\nexport var page = '_1j29czt0-3-11-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/layouts/page/Sidebar.css

@@ -1,16 +1,16 @@
-._zdcge90-3-10-4 {
+._zdcge90-3-11-1 {
   grid-area: sidebar;
   justify-content: flex-end;
 }
-._zdcge91-3-10-4 {
+._zdcge91-3-11-1 {
   flex-shrink: 0;
   height: 100%;
   left: 0;
   position: relative;
   width: 0;
 }
-._zdcge93-3-10-4 {
-  --_zdcge92-3-10-4: 16px;
+._zdcge93-3-11-1 {
+  --_zdcge92-3-11-1: 16px;
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -20,35 +20,35 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: background-color, translate;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
-  width: var(--_zdcge92-3-10-4);
-  translate: calc(0px - var(--_zdcge92-3-10-4) * 2);
+  width: var(--_zdcge92-3-11-1);
+  translate: calc(0px - var(--_zdcge92-3-11-1) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1p91g301-3-10-4:is(:hover,:focus-within) ._zdcge93-3-10-4 {
+._1p91g301-3-11-1:is(:hover,:focus-within) ._zdcge93-3-11-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  translate: calc(0px - var(--_zdcge92-3-10-4) - var(--_zdcge92-3-10-4) / 2);
+  translate: calc(0px - var(--_zdcge92-3-11-1) - var(--_zdcge92-3-11-1) / 2);
 }
-._1jgl8s50-3-10-4 ._zdcge93-3-10-4, ._1jgl8s50-3-10-4 ._zdcge93-3-10-4:hover, ._1jgl8s50-3-10-4 ._zdcge93-3-10-4:focus, ._1jgl8s50-3-10-4 ._1p91g301-3-10-4:is(:hover,:focus-within) ._zdcge93-3-10-4 {
+._1jgl8s50-3-11-1 ._zdcge93-3-11-1, ._1jgl8s50-3-11-1 ._zdcge93-3-11-1:hover, ._1jgl8s50-3-11-1 ._zdcge93-3-11-1:focus, ._1jgl8s50-3-11-1 ._1p91g301-3-11-1:is(:hover,:focus-within) ._zdcge93-3-11-1 {
   border-top-right-radius: 0;
-  translate: calc(-1 * var(--_zdcge92-3-10-4));
+  translate: calc(-1 * var(--_zdcge92-3-11-1));
   box-shadow: none;
 }
-._zdcge95-3-10-4 {
-  --_zdcge94-3-10-4: 24px;
+._zdcge95-3-11-1 {
+  --_zdcge94-3-11-1: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
-  left: calc(0px - var(--_zdcge94-3-10-4) / 2 + 2px);
+  left: calc(0px - var(--_zdcge94-3-11-1) / 2 + 2px);
   z-index: 1;
 }
-._zdcge96-3-10-4 {
-  width: var(--_zdcge94-3-10-4);
-  height: var(--_zdcge94-3-10-4);
+._zdcge96-3-11-1 {
+  width: var(--_zdcge94-3-11-1);
+  height: var(--_zdcge94-3-11-1);
   box-sizing: border-box;
   outline-color: transparent;
   outline-style: var(--dt-borders-style-default, solid);
   outline-width: var(--dt-borders-width-emphasized, 2px);
 }
-._zdcge97-3-10-4 {
+._zdcge97-3-11-1 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   opacity: 0;
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
@@ -56,70 +56,70 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._zdcge97-3-10-4:hover {
+._zdcge97-3-11-1:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._zdcge97-3-10-4:focus-visible {
+._zdcge97-3-11-1:focus-visible {
   opacity: 1;
 }
-._1p91g301-3-10-4:hover ._zdcge97-3-10-4 {
+._1p91g301-3-11-1:hover ._zdcge97-3-11-1 {
   opacity: 1;
 }
-._1jgl8s50-3-10-4 ._zdcge97-3-10-4 {
+._1jgl8s50-3-11-1 ._zdcge97-3-11-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   outline-color: transparent;
   opacity: 0;
 }
-._1jgl8s50-3-10-4 ._zdcge97-3-10-4:hover {
+._1jgl8s50-3-11-1 ._zdcge97-3-11-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   opacity: 1;
 }
-._1jgl8s50-3-10-4 ._zdcge97-3-10-4:active {
+._1jgl8s50-3-11-1 ._zdcge97-3-11-1:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1jgl8s50-3-10-4 ._zdcge97-3-10-4:focus-visible {
+._1jgl8s50-3-11-1 ._zdcge97-3-11-1:focus-visible {
   opacity: 1;
 }
-._zdcge98-3-10-4 {
+._zdcge98-3-11-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge98-3-10-4:hover {
+._zdcge98-3-11-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-10-4 ._zdcge98-3-10-4 {
+._1jgl8s50-3-11-1 ._zdcge98-3-11-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-10-4 ._zdcge98-3-10-4:not(:focus-visible) {
+._1jgl8s50-3-11-1 ._zdcge98-3-11-1:not(:focus-visible) {
   box-shadow: none;
 }
-._1jgl8s50-3-10-4 ._zdcge98-3-10-4:hover {
+._1jgl8s50-3-11-1 ._zdcge98-3-11-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   outline-color: transparent;
   box-shadow: none;
 }
-._1jgl8s50-3-10-4 ._zdcge98-3-10-4:active {
+._1jgl8s50-3-11-1 ._zdcge98-3-11-1:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
   box-shadow: none;
 }
-._zdcge99-3-10-4._1p91g302-3-10-4 {
+._zdcge99-3-11-1._1p91g302-3-11-1 {
   width: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-10-4 ._zdcge99-3-10-4._1p91g302-3-10-4 {
+._1jgl8s50-3-11-1 ._zdcge99-3-11-1._1p91g302-3-11-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
 }
-._1jgl8s50-3-10-4 ._zdcge99-3-10-4._1p91g302-3-10-4:hover {
+._1jgl8s50-3-11-1 ._zdcge99-3-11-1._1p91g302-3-11-1:hover {
   border-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-10-4 ._zdcge99-3-10-4._1p91g302-3-10-4:active {
+._1jgl8s50-3-11-1 ._zdcge99-3-11-1._1p91g302-3-11-1:active {
   border-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._zdcge9a-3-10-4 {
+._zdcge9a-3-11-1 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-inline: var(--dt-spacings-size-8, 8px);