@dynatrace/strato-components 3.1.3 → 3.2.1

package/esm/forms/_base-input/BaseInput.css

@@ -1,6 +1,6 @@
-._1a8lqy96-3-1-3 {
-  --_1a8lqy95-3-1-3: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_yfwka30-3-1-3: var(--_1a8lqy95-3-1-3);
+._1a8lqy96-3-2-1 {
+  --_1a8lqy95-3-2-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_yfwka30-3-2-1: var(--_1a8lqy95-3-2-1);
   position: relative;
   display: flex;
   min-width: 0;
@@ -14,55 +14,55 @@
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
-  background-color: var(--_1a8lqy95-3-1-3);
+  background-color: var(--_1a8lqy95-3-2-1);
 }
-._1a8lqy96-3-1-3:hover {
-  --_1a8lqy95-3-1-3: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1a8lqy96-3-2-1:hover {
+  --_1a8lqy95-3-2-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy96-3-1-3:active {
-  --_1a8lqy95-3-1-3: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1a8lqy96-3-2-1:active {
+  --_1a8lqy95-3-2-1: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy91-3-1-3 ._1a8lqy96-3-1-3 {
+._1a8lqy91-3-2-1 ._1a8lqy96-3-2-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy91-3-1-3:not(._1a8lqy92-3-1-3) ._1a8lqy96-3-1-3:hover {
+._1a8lqy91-3-2-1:not(._1a8lqy92-3-2-1) ._1a8lqy96-3-2-1:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy91-3-1-3:not(._1a8lqy92-3-1-3) ._1a8lqy96-3-1-3:active {
+._1a8lqy91-3-2-1:not(._1a8lqy92-3-2-1) ._1a8lqy96-3-2-1:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy92-3-1-3 ._1a8lqy96-3-1-3 {
+._1a8lqy92-3-2-1 ._1a8lqy96-3-2-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1a8lqy94-3-1-3:not(:hover) ._1a8lqy96-3-1-3 {
+._1a8lqy94-3-2-1:not(:hover) ._1a8lqy96-3-2-1 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy94-3-1-3:not(:hover) ._1a8lqy96-3-1-3:hover {
+._1a8lqy94-3-2-1:not(:hover) ._1a8lqy96-3-2-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1a8lqy94-3-1-3:not(:hover) ._1a8lqy96-3-1-3:active {
+._1a8lqy94-3-2-1:not(:hover) ._1a8lqy96-3-2-1:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1a8lqy94-3-1-3._1a8lqy92-3-1-3 ._1a8lqy96-3-1-3:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy94-3-2-1._1a8lqy92-3-2-1 ._1a8lqy96-3-2-1:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy97-3-1-3 {
+._1a8lqy97-3-2-1 {
   padding-right: 0;
   padding-left: 0;
 }
-._1a8lqy98-3-1-3 {
+._1a8lqy98-3-2-1 {
   padding-right: 0;
 }
-._1a8lqy99-3-1-3 {
+._1a8lqy99-3-2-1 {
   padding-right: unset;
 }
-._1a8lqy9a-3-1-3 {
+._1a8lqy9a-3-2-1 {
   padding-left: unset;
 }
-._1a8lqy9b-3-1-3 {
+._1a8lqy9b-3-2-1 {
   display: block;
   text-overflow: ellipsis;
   appearance: none;
@@ -76,87 +76,87 @@
   min-width: 0;
   color: inherit;
 }
-._1a8lqy9b-3-1-3:read-only {
+._1a8lqy9b-3-2-1:read-only {
   cursor: not-allowed;
 }
-._1a8lqy9b-3-1-3:focus {
+._1a8lqy9b-3-2-1:focus {
   outline: none;
 }
-._1a8lqy9b-3-1-3::placeholder {
+._1a8lqy9b-3-2-1::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1a8lqy9b-3-1-3::-webkit-search-cancel-button {
+._1a8lqy9b-3-2-1::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-._1a8lqy9b-3-1-3::-ms-reveal {
+._1a8lqy9b-3-2-1::-ms-reveal {
   display: none;
 }
-._1a8lqy91-3-1-3 ._1a8lqy9b-3-1-3:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-1-3 ._1a8lqy9b-3-1-3::placeholder {
+._1a8lqy91-3-2-1 ._1a8lqy9b-3-2-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-2-1 ._1a8lqy9b-3-2-1::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
   -webkit-text-fill-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1a8lqy92-3-1-3 ._1a8lqy9b-3-1-3:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-1-3 ._1a8lqy9b-3-1-3::placeholder {
+._1a8lqy92-3-2-1 ._1a8lqy9b-3-2-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-2-1 ._1a8lqy9b-3-2-1::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   -webkit-text-fill-color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1a8lqy92-3-1-3 ._1a8lqy9b-3-1-3 {
+._1a8lqy92-3-2-1 ._1a8lqy9b-3-2-1 {
   cursor: not-allowed;
 }
-button ._1a8lqy9b-3-1-3 {
+button ._1a8lqy9b-3-2-1 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9c-3-1-3 {
+._1a8lqy9c-3-2-1 {
   margin: 0 var(--dt-spacings-size-4, 4px);
   padding: var(--dt-spacings-size-2, 2px) 0;
   width: var(--dt-spacings-size-28, 28px);
 }
-._1a8lqy9c-3-1-3:is(button._1a8lqy9c-3-1-3._1a8lqy9c-3-1-3) {
+._1a8lqy9c-3-2-1:is(button._1a8lqy9c-3-2-1._1a8lqy9c-3-2-1) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9d-3-1-3 {
+._1a8lqy9d-3-2-1 {
   margin-top: var(--dt-spacings-size-6, 6px);
   margin-bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1a8lqy91-3-1-3:not(._1a8lqy92-3-1-3) ._1a8lqy9d-3-1-3 {
+._1a8lqy91-3-2-1:not(._1a8lqy92-3-2-1) ._1a8lqy9d-3-2-1 {
   background-color: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3):hover button {
+._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1):hover button {
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3):hover button:active {
+._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3):hover button:hover {
+._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3)._1a8lqy91-3-1-3:hover button {
+._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1)._1a8lqy91-3-2-1:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3)._1a8lqy91-3-1-3:hover button:active {
+._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1)._1a8lqy91-3-2-1:hover button:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3)._1a8lqy91-3-1-3:hover button:hover {
+._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1)._1a8lqy91-3-2-1:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy94-3-1-3:not(._1a8lqy92-3-1-3):hover button:is(:disabled,[aria-disabled=true]) {
+._1a8lqy94-3-2-1:not(._1a8lqy92-3-2-1):hover button:is(:disabled,[aria-disabled=true]) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a8lqy96-3-1-3:has(._1a8lqy9c-3-1-3:hover) {
+._1a8lqy96-3-2-1:has(._1a8lqy9c-3-2-1:hover) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy91-3-1-3 ._1a8lqy96-3-1-3:has(._1a8lqy9c-3-1-3:hover):not(._1a8lqy92-3-1-3) {
+._1a8lqy91-3-2-1 ._1a8lqy96-3-2-1:has(._1a8lqy9c-3-2-1:hover):not(._1a8lqy92-3-2-1) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy96-3-1-3:hover ._1a8lqy9d-3-1-3 {
+._1a8lqy96-3-2-1:hover ._1a8lqy9d-3-2-1 {
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._1a8lqy91-3-1-3 ._1a8lqy96-3-1-3:hover ._1a8lqy9d-3-1-3 {
+._1a8lqy91-3-2-1 ._1a8lqy96-3-2-1:hover ._1a8lqy9d-3-2-1 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._1a8lqy96-3-1-3._1a8lqy9e-3-1-3 div svg {
+._1a8lqy96-3-2-1._1a8lqy9e-3-2-1 div svg {
   fill: currentcolor;
 }

package/esm/forms/_base-input/BaseInput.sty.js

@@ -1,16 +1,16 @@
 import "../../styles/textStyle.css";
 import "../hooks/useAutofillEvent.css";
 import "./BaseInput.css";
-var clearIconButton = "_1a8lqy9c-3-1-3";
-var container = "_1a8lqy96-3-1-3";
-var containerPadding = { none: "_1a8lqy97-3-1-3", rightNone: "_1a8lqy98-3-1-3", rightUnset: "_1a8lqy99-3-1-3", leftUnset: "_1a8lqy9a-3-1-3" };
-var disabled = "_1a8lqy92-3-1-3";
-var divider = "_1a8lqy9d-3-1-3";
-var hasError = "_1a8lqy91-3-1-3";
-var input = "_1a8lqy9b-3-1-3 _yfwka33-3-1-3 _da9a8v0-3-1-3 _da9a8v2-3-1-3 _da9a8v3-3-1-3 _da9a8vb-3-1-3";
-var isAutoFilled = "_1a8lqy9e-3-1-3";
-var variant = { "default": "_1a8lqy93-3-1-3", minimal: "_1a8lqy94-3-1-3" };
-var wrapper = "_1a8lqy90-3-1-3";
+var clearIconButton = "_1a8lqy9c-3-2-1";
+var container = "_1a8lqy96-3-2-1";
+var containerPadding = { none: "_1a8lqy97-3-2-1", rightNone: "_1a8lqy98-3-2-1", rightUnset: "_1a8lqy99-3-2-1", leftUnset: "_1a8lqy9a-3-2-1" };
+var disabled = "_1a8lqy92-3-2-1";
+var divider = "_1a8lqy9d-3-2-1";
+var hasError = "_1a8lqy91-3-2-1";
+var input = "_1a8lqy9b-3-2-1 _yfwka33-3-2-1 _da9a8v0-3-2-1 _da9a8v2-3-2-1 _da9a8v3-3-2-1 _da9a8vb-3-2-1";
+var isAutoFilled = "_1a8lqy9e-3-2-1";
+var variant = { "default": "_1a8lqy93-3-2-1", minimal: "_1a8lqy94-3-2-1" };
+var wrapper = "_1a8lqy90-3-2-1";
 export {
   clearIconButton,
   container,

package/esm/forms/_base-input/BaseInput.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInput.css.ts"],
-  "sourcesContent": ["import '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var clearIconButton = '_1a8lqy9c-3-1-3';\nexport var container = '_1a8lqy96-3-1-3';\nexport var containerPadding = {none:'_1a8lqy97-3-1-3',rightNone:'_1a8lqy98-3-1-3',rightUnset:'_1a8lqy99-3-1-3',leftUnset:'_1a8lqy9a-3-1-3'};\nexport var disabled = '_1a8lqy92-3-1-3';\nexport var divider = '_1a8lqy9d-3-1-3';\nexport var hasError = '_1a8lqy91-3-1-3';\nexport var input = '_1a8lqy9b-3-1-3 _yfwka33-3-1-3 _da9a8v0-3-1-3 _da9a8v2-3-1-3 _da9a8v3-3-1-3 _da9a8vb-3-1-3';\nexport var isAutoFilled = '_1a8lqy9e-3-1-3';\nexport var variant = {'default':'_1a8lqy93-3-1-3',minimal:'_1a8lqy94-3-1-3'};\nexport var wrapper = '_1a8lqy90-3-1-3';"],
+  "sourcesContent": ["import '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var clearIconButton = '_1a8lqy9c-3-2-1';\nexport var container = '_1a8lqy96-3-2-1';\nexport var containerPadding = {none:'_1a8lqy97-3-2-1',rightNone:'_1a8lqy98-3-2-1',rightUnset:'_1a8lqy99-3-2-1',leftUnset:'_1a8lqy9a-3-2-1'};\nexport var disabled = '_1a8lqy92-3-2-1';\nexport var divider = '_1a8lqy9d-3-2-1';\nexport var hasError = '_1a8lqy91-3-2-1';\nexport var input = '_1a8lqy9b-3-2-1 _yfwka33-3-2-1 _da9a8v0-3-2-1 _da9a8v2-3-2-1 _da9a8v3-3-2-1 _da9a8vb-3-2-1';\nexport var isAutoFilled = '_1a8lqy9e-3-2-1';\nexport var variant = {'default':'_1a8lqy93-3-2-1',minimal:'_1a8lqy94-3-2-1'};\nexport var wrapper = '_1a8lqy90-3-2-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,YAAY;AAChB,IAAI,mBAAmB,EAAC,MAAK,mBAAkB,WAAU,mBAAkB,YAAW,mBAAkB,WAAU,kBAAiB;AACnI,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,eAAe;AACnB,IAAI,UAAU,EAAC,WAAU,mBAAkB,SAAQ,kBAAiB;AACpE,IAAI,UAAU;",
   "names": []
 }

package/esm/forms/_base-input/BaseInputContent.css

@@ -1,27 +1,27 @@
-._o6rxr70-3-1-3 {
+._o6rxr70-3-2-1 {
   white-space: nowrap;
   overflow: hidden;
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1a8lqy91-3-1-3 ._o6rxr70-3-1-3 {
+._1a8lqy91-3-2-1 ._o6rxr70-3-2-1 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1a8lqy92-3-1-3 ._o6rxr70-3-1-3 {
+._1a8lqy92-3-2-1 ._o6rxr70-3-2-1 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
 }
-._o6rxr70-3-1-3:has(svg):not(:has(span)) {
+._o6rxr70-3-2-1:has(svg):not(:has(span)) {
   overflow: inherit;
 }
-._o6rxr70-3-1-3 > * {
+._o6rxr70-3-2-1 > * {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
 }
-._o6rxr70-3-1-3 svg {
+._o6rxr70-3-2-1 svg {
   box-sizing: content-box;
   align-items: stretch;
   flex-shrink: 0;
 }
-._o6rxr70-3-1-3 svg:first-of-type {
+._o6rxr70-3-2-1 svg:first-of-type {
   align-self: center;
 }

package/esm/forms/_base-input/BaseInputContent.sty.js

@@ -2,7 +2,7 @@ import "../../styles/textStyle.css";
 import "../hooks/useAutofillEvent.css";
 import "./BaseInput.css";
 import "./BaseInputContent.css";
-var content = "_o6rxr70-3-1-3 _da9a8v0-3-1-3 _da9a8v2-3-1-3 _da9a8v3-3-1-3 _da9a8vb-3-1-3";
+var content = "_o6rxr70-3-2-1 _da9a8v0-3-2-1 _da9a8v2-3-2-1 _da9a8v3-3-2-1 _da9a8vb-3-2-1";
 export {
   content
 };

package/esm/forms/_base-input/BaseInputContent.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInputContent.css.ts"],
-  "sourcesContent": ["import '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nimport './BaseInputContent.css';\nexport var content = '_o6rxr70-3-1-3 _da9a8v0-3-1-3 _da9a8v2-3-1-3 _da9a8v3-3-1-3 _da9a8vb-3-1-3';"],
+  "sourcesContent": ["import '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nimport './BaseInputContent.css';\nexport var content = '_o6rxr70-3-2-1 _da9a8v0-3-2-1 _da9a8v2-3-2-1 _da9a8v3-3-2-1 _da9a8vb-3-2-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/forms/calendar/Calendar.css

@@ -1,24 +1,24 @@
-._xm8mdk0-3-1-3 {
+._xm8mdk0-3-2-1 {
   width: 248px;
 }
-._xm8mdk1-3-1-3 {
+._xm8mdk1-3-2-1 {
   cursor: not-allowed;
 }
-._xm8mdk2-3-1-3 {
+._xm8mdk2-3-2-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._xm8mdk3-3-1-3 {
+._xm8mdk3-3-2-1 {
   all: revert;
   width: 100%;
   border-collapse: collapse;
   border: 0;
   border-spacing: 0;
 }
-._xm8mdk4-3-1-3 {
+._xm8mdk4-3-2-1 {
   pointer-events: none;
 }
-._xm8mdk5-3-1-3 {
+._xm8mdk5-3-2-1 {
   background: revert;
   border: 0;
   display: grid;
@@ -26,16 +26,16 @@
   justify-items: center;
   align-items: center;
 }
-._xm8mdk6-3-1-3 {
+._xm8mdk6-3-2-1 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
-._xm8mdk7-3-1-3 {
+._xm8mdk7-3-2-1 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-._xm8mdk8-3-1-3 {
+._xm8mdk8-3-2-1 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
-._xm8mdk9-3-1-3 {
+._xm8mdk9-3-2-1 {
   border: 0;
   width: 100%;
   margin-top: var(--dt-spacings-size-2, 2px);
@@ -43,85 +43,85 @@
   padding: 0;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdka-3-1-3 {
-  --_1jljrbf0-3-1-3: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1jljrbf1-3-1-3: var(--dt-colors-border-primary-accent, #464cce);
+._xm8mdka-3-2-1 {
+  --_1jljrbf0-3-2-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1jljrbf1-3-2-1: var(--dt-colors-border-primary-accent, #464cce);
 }
-._xm8mdkb-3-1-3 {
-  --_1jljrbf0-3-1-3: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1jljrbf1-3-1-3: var(--dt-colors-text-neutral-default, #2f2f4f);
+._xm8mdkb-3-2-1 {
+  --_1jljrbf0-3-2-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1jljrbf1-3-2-1: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._xm8mdkc-3-1-3 {
-  --_1jljrbf0-3-1-3: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_1jljrbf1-3-1-3: var(--dt-colors-border-critical-accent, #bb0731);
+._xm8mdkc-3-2-1 {
+  --_1jljrbf0-3-2-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_1jljrbf1-3-2-1: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._xm8mdkd-3-1-3 {
-  --_1jljrbf0-3-1-3: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._xm8mdkd-3-2-1 {
+  --_1jljrbf0-3-2-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._xm8mdkf-3-1-3 {
-  --_1jljrbf0-3-1-3: var(--dt-colors-background-field-primary-disabled, #e4e5eb80);
-  --_1jljrbf1-3-1-3: var(--dt-colors-border-primary-disabled, #dadbe480);
+._xm8mdkf-3-2-1 {
+  --_1jljrbf0-3-2-1: var(--dt-colors-background-field-primary-disabled, #e4e5eb80);
+  --_1jljrbf1-3-2-1: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._xm8mdkg-3-1-3 {
-  --_1jljrbf0-3-1-3: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1jljrbf1-3-1-3: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._xm8mdkg-3-2-1 {
+  --_1jljrbf0-3-2-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1jljrbf1-3-2-1: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._xm8mdkh-3-1-3 {
-  --_1jljrbf0-3-1-3: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_1jljrbf1-3-1-3: var(--dt-colors-border-critical-disabled, #dadbe480);
+._xm8mdkh-3-2-1 {
+  --_1jljrbf0-3-2-1: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_1jljrbf1-3-2-1: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._xm8mdki-3-1-3 {
+._xm8mdki-3-2-1 {
   position: relative;
   z-index: 0;
 }
-._xm8mdki-3-1-3::before {
+._xm8mdki-3-2-1::before {
   content: "";
   position: absolute;
   top: 0;
-  background: var(--_1jljrbf0-3-1-3);
+  background: var(--_1jljrbf0-3-2-1);
   height: 100%;
   z-index: -1;
 }
-._xm8mdkj-3-1-3 {
-  background: var(--_1jljrbf0-3-1-3);
+._xm8mdkj-3-2-1 {
+  background: var(--_1jljrbf0-3-2-1);
 }
-._xm8mdkj-3-1-3::before {
+._xm8mdkj-3-2-1::before {
   right: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(var(--dt-spacings-size-4, 4px) / 2);
 }
-._xm8mdkj-3-1-3:last-child::before {
+._xm8mdkj-3-2-1:last-child::before {
   background: none;
 }
-._xm8mdkk-3-1-3 {
-  background: var(--_1jljrbf0-3-1-3);
+._xm8mdkk-3-2-1 {
+  background: var(--_1jljrbf0-3-2-1);
 }
-._xm8mdkk-3-1-3::before {
+._xm8mdkk-3-2-1::before {
   left: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(var(--dt-spacings-size-4, 4px) / 2);
 }
-._xm8mdkk-3-1-3:first-child::before {
+._xm8mdkk-3-2-1:first-child::before {
   background: none;
 }
-._xm8mdkl-3-1-3::before {
+._xm8mdkl-3-2-1::before {
   left: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(100% + (var(--dt-spacings-size-4, 4px)));
-  background: var(--_1jljrbf0-3-1-3);
+  background: var(--_1jljrbf0-3-2-1);
 }
-._xm8mdkl-3-1-3:first-child::before {
+._xm8mdkl-3-2-1:first-child::before {
   left: 0;
   width: calc(100% + (var(--dt-spacings-size-4, 4px) / 2));
   border-top-left-radius: var(--dt-borders-radius-field-default, 6px);
   border-bottom-left-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdkl-3-1-3:last-child::before {
+._xm8mdkl-3-2-1:last-child::before {
   width: calc(100% + (var(--dt-spacings-size-4, 4px) / 2));
   border-top-right-radius: var(--dt-borders-radius-field-default, 6px);
   border-bottom-right-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdkm-3-1-3 {
+._xm8mdkm-3-2-1 {
   background: none;
 }
-._xm8mdkn-3-1-3 {
+._xm8mdkn-3-2-1 {
   width: 100%;
   border-collapse: collapse;
   border: 0;

package/esm/forms/calendar/Calendar.sty.js

@@ -1,16 +1,16 @@
 import "./Calendar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var calendarBodyCSS = _7a468({ defaultClassName: "_xm8mdk3-3-1-3", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarCSS = _7a468({ defaultClassName: "_xm8mdk0-3-1-3", variantClassNames: { readOnly: { true: "_xm8mdk1-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarClearBgCSS = "_xm8mdkm-3-1-3";
-var calendarDayRowCSS = "_xm8mdk6-3-1-3";
-var calendarDisabledCSS = "_xm8mdk2-3-1-3";
-var calendarFieldCSS = _7a468({ defaultClassName: "_xm8mdk9-3-1-3", variantClassNames: { color: { primary: "_xm8mdka-3-1-3", neutral: "_xm8mdkb-3-1-3", critical: "_xm8mdkc-3-1-3" }, isIncompleteSelection: { true: "_xm8mdkd-3-1-3" }, isDisabled: { true: "_xm8mdke-3-1-3" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-1-3"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-1-3"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-1-3"]] });
-var calendarMonthRowCSS = "_xm8mdk7-3-1-3";
-var calendarRangeFieldCSS = _7a468({ defaultClassName: "_xm8mdki-3-1-3", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-1-3", last: "_xm8mdkk-3-1-3", inbetween: "_xm8mdkl-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarRowCSS = "_xm8mdk5-3-1-3";
-var calendarWeekdaysCSS = "_xm8mdkn-3-1-3";
-var calendarYearRowCSS = "_xm8mdk8-3-1-3";
+var calendarBodyCSS = _7a468({ defaultClassName: "_xm8mdk3-3-2-1", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var calendarCSS = _7a468({ defaultClassName: "_xm8mdk0-3-2-1", variantClassNames: { readOnly: { true: "_xm8mdk1-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var calendarClearBgCSS = "_xm8mdkm-3-2-1";
+var calendarDayRowCSS = "_xm8mdk6-3-2-1";
+var calendarDisabledCSS = "_xm8mdk2-3-2-1";
+var calendarFieldCSS = _7a468({ defaultClassName: "_xm8mdk9-3-2-1", variantClassNames: { color: { primary: "_xm8mdka-3-2-1", neutral: "_xm8mdkb-3-2-1", critical: "_xm8mdkc-3-2-1" }, isIncompleteSelection: { true: "_xm8mdkd-3-2-1" }, isDisabled: { true: "_xm8mdke-3-2-1" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-2-1"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-2-1"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-2-1"]] });
+var calendarMonthRowCSS = "_xm8mdk7-3-2-1";
+var calendarRangeFieldCSS = _7a468({ defaultClassName: "_xm8mdki-3-2-1", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-2-1", last: "_xm8mdkk-3-2-1", inbetween: "_xm8mdkl-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var calendarRowCSS = "_xm8mdk5-3-2-1";
+var calendarWeekdaysCSS = "_xm8mdkn-3-2-1";
+var calendarYearRowCSS = "_xm8mdk8-3-2-1";
 export {
   calendarBodyCSS,
   calendarCSS,

package/esm/forms/calendar/Calendar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/Calendar.css.ts"],
-  "sourcesContent": ["import './Calendar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var calendarBodyCSS = _7a468({defaultClassName:'_xm8mdk3-3-1-3',variantClassNames:{isReadOnly:{true:'_xm8mdk4-3-1-3'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarCSS = _7a468({defaultClassName:'_xm8mdk0-3-1-3',variantClassNames:{readOnly:{true:'_xm8mdk1-3-1-3'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarClearBgCSS = '_xm8mdkm-3-1-3';\nexport var calendarDayRowCSS = '_xm8mdk6-3-1-3';\nexport var calendarDisabledCSS = '_xm8mdk2-3-1-3';\nexport var calendarFieldCSS = _7a468({defaultClassName:'_xm8mdk9-3-1-3',variantClassNames:{color:{primary:'_xm8mdka-3-1-3',neutral:'_xm8mdkb-3-1-3',critical:'_xm8mdkc-3-1-3'},isIncompleteSelection:{true:'_xm8mdkd-3-1-3'},isDisabled:{true:'_xm8mdke-3-1-3'}},defaultVariants:{isDisabled:false,color:'neutral'},compoundVariants:[[{color:'primary',isDisabled:true},'_xm8mdkf-3-1-3'],[{color:'neutral',isDisabled:true},'_xm8mdkg-3-1-3'],[{color:'critical',isDisabled:true},'_xm8mdkh-3-1-3']]});\nexport var calendarMonthRowCSS = '_xm8mdk7-3-1-3';\nexport var calendarRangeFieldCSS = _7a468({defaultClassName:'_xm8mdki-3-1-3',variantClassNames:{rangeKind:{first:'_xm8mdkj-3-1-3',last:'_xm8mdkk-3-1-3',inbetween:'_xm8mdkl-3-1-3'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarRowCSS = '_xm8mdk5-3-1-3';\nexport var calendarWeekdaysCSS = '_xm8mdkn-3-1-3';\nexport var calendarYearRowCSS = '_xm8mdk8-3-1-3';"],
+  "sourcesContent": ["import './Calendar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var calendarBodyCSS = _7a468({defaultClassName:'_xm8mdk3-3-2-1',variantClassNames:{isReadOnly:{true:'_xm8mdk4-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarCSS = _7a468({defaultClassName:'_xm8mdk0-3-2-1',variantClassNames:{readOnly:{true:'_xm8mdk1-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarClearBgCSS = '_xm8mdkm-3-2-1';\nexport var calendarDayRowCSS = '_xm8mdk6-3-2-1';\nexport var calendarDisabledCSS = '_xm8mdk2-3-2-1';\nexport var calendarFieldCSS = _7a468({defaultClassName:'_xm8mdk9-3-2-1',variantClassNames:{color:{primary:'_xm8mdka-3-2-1',neutral:'_xm8mdkb-3-2-1',critical:'_xm8mdkc-3-2-1'},isIncompleteSelection:{true:'_xm8mdkd-3-2-1'},isDisabled:{true:'_xm8mdke-3-2-1'}},defaultVariants:{isDisabled:false,color:'neutral'},compoundVariants:[[{color:'primary',isDisabled:true},'_xm8mdkf-3-2-1'],[{color:'neutral',isDisabled:true},'_xm8mdkg-3-2-1'],[{color:'critical',isDisabled:true},'_xm8mdkh-3-2-1']]});\nexport var calendarMonthRowCSS = '_xm8mdk7-3-2-1';\nexport var calendarRangeFieldCSS = _7a468({defaultClassName:'_xm8mdki-3-2-1',variantClassNames:{rangeKind:{first:'_xm8mdkj-3-2-1',last:'_xm8mdkk-3-2-1',inbetween:'_xm8mdkl-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarRowCSS = '_xm8mdk5-3-2-1';\nexport var calendarWeekdaysCSS = '_xm8mdkn-3-2-1';\nexport var calendarYearRowCSS = '_xm8mdk8-3-2-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC9J,IAAI,cAAc,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxJ,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,sBAAsB;AAC1B,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,SAAQ,kBAAiB,SAAQ,kBAAiB,UAAS,iBAAgB,GAAE,uBAAsB,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,YAAW,OAAM,OAAM,UAAS,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,YAAW,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,YAAW,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,YAAW,YAAW,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAChe,IAAI,sBAAsB;AAC1B,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,OAAM,kBAAiB,MAAK,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrN,IAAI,iBAAiB;AACrB,IAAI,sBAAsB;AAC1B,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/calendar/calendar-header/CalendarHeader.js

@@ -11,7 +11,7 @@ import { useFormFieldContext } from "../../forms-core/hooks/useFormFieldContext.
 import { SelectDateLabel } from "../calendar-header-label/SelectDateLabel.js";
 import { SelectMonthLabel } from "../calendar-header-label/SelectMonthLabel.js";
 import { SelectYearLabel } from "../calendar-header-label/SelectYearLabel.js";
-import { calendarHeaderButtonCSS } from "../components/CalendarItem.sty.js";
+import * as itemStyles from "../components/CalendarItem.sty.js";
 import { useCalendarContext } from "../hooks/useCalendarContext.js";
 import { NUMBER_OF_YEARS } from "../types/calendarConfiguration.js";
 function getViewSpecificProps(view) {
@@ -20,18 +20,21 @@ function getViewSpecificProps(view) {
       return {
         label: /* @__PURE__ */ jsx(SelectDateLabel, {}),
         nextView: "month",
+        headerDataDtName: "ChangeToMonthsView",
         payload: { amount: 1, unit: "month" }
       };
     case "month":
       return {
         label: /* @__PURE__ */ jsx(SelectMonthLabel, {}),
         nextView: "year",
+        headerDataDtName: "ChangeToYearsView",
         payload: { amount: 1, unit: "year" }
       };
     case "year":
       return {
         label: /* @__PURE__ */ jsx(SelectYearLabel, {}),
         nextView: "day",
+        headerDataDtName: "ChangeToDaysView",
         payload: { amount: NUMBER_OF_YEARS }
       };
   }
@@ -41,7 +44,7 @@ const CalendarHeader = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const { dispatch } = useCalendarContext();
   const { disabled, ariaDisabled } = useFormFieldContext();
   const intl = useIntl();
-  const { label, nextView, payload } = getViewSpecificProps(view);
+  const { label, nextView, payload, headerDataDtName } = getViewSpecificProps(view);
   return /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", marginBottom: 16, children: [
     /* @__PURE__ */ jsx(
       Button,
@@ -57,13 +60,14 @@ const CalendarHeader = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
           type: "navigateCurrentView",
           payload: { ...payload, amount: payload.amount * -1 }
         }),
+        "data-dt-name": "PreviousPage",
         children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronLeftSmallIcon, {}) })
       }
     ),
     /* @__PURE__ */ jsx(
       Button,
       {
-        className: calendarHeaderButtonCSS,
+        className: itemStyles.headerButton,
         disabled,
         "aria-disabled": ariaDisabled,
         "aria-live": "polite",
@@ -73,6 +77,7 @@ const CalendarHeader = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
           payload: nextView
         }),
         ref: forwardedRef,
+        "data-dt-name": headerDataDtName,
         children: label
       }
     ),
@@ -90,6 +95,7 @@ const CalendarHeader = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
           type: "navigateCurrentView",
           payload
         }),
+        "data-dt-name": "NextPage",
         children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronRightSmallIcon, {}) })
       }
     )

package/esm/forms/calendar/calendar-header/CalendarHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/calendar-header/CalendarHeader.tsx"],
-  "sourcesContent": ["import { forwardRef, type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { SelectDateLabel } from '../calendar-header-label/SelectDateLabel.js';\nimport { SelectMonthLabel } from '../calendar-header-label/SelectMonthLabel.js';\nimport { SelectYearLabel } from '../calendar-header-label/SelectYearLabel.js';\nimport { calendarHeaderButtonCSS } from '../components/CalendarItem.sty.js';\nimport { useCalendarContext } from '../hooks/useCalendarContext.js';\nimport { NUMBER_OF_YEARS } from '../types/calendarConfiguration.js';\nimport type { CalendarViewType } from '../types/shared-types.js';\n\n/**\n * @internal\n */\ninterface CalendarHeaderProps {\n  /** The view currently shown to provide the proper text content. */\n  view: CalendarViewType;\n  /** Calendar header label id used for the 'aria-labelledby' attribute. */\n  labelId: string;\n}\n\n/** Returns the right values for label, nextView, and the navigation button payload for each view. */\nfunction getViewSpecificProps(view: CalendarViewType): {\n  label: JSX.Element;\n  nextView: CalendarViewType;\n  payload: { amount: number; unit?: CalendarViewType };\n} {\n  switch (view) {\n    case 'day':\n      return {\n        label: <SelectDateLabel />,\n        nextView: 'month',\n        payload: { amount: 1, unit: 'month' },\n      };\n    case 'month':\n      return {\n        label: <SelectMonthLabel />,\n        nextView: 'year',\n        payload: { amount: 1, unit: 'year' },\n      };\n    case 'year':\n      return {\n        label: <SelectYearLabel />,\n        nextView: 'day',\n        payload: { amount: NUMBER_OF_YEARS },\n      };\n  }\n}\n\n/**\n * CalendarHeader component\n * Renders the calendar header, including the buttons to navigate to the previous/next\n * month/year/list of years and the button (label) to switch the calendar view.\n * @internal\n */\nexport const CalendarHeader = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  CalendarHeaderProps\n>((props: CalendarHeaderProps, forwardedRef) => {\n  const { labelId, view } = props;\n  const { dispatch } = useCalendarContext();\n  const { disabled, ariaDisabled } = useFormFieldContext();\n\n  const intl = useIntl();\n\n  const { label, nextView, payload } = getViewSpecificProps(view);\n  return (\n    <Flex justifyContent=\"space-between\" marginBottom={16}>\n      <Button\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-label={intl.formatMessage({\n          defaultMessage: 'Go to previous page.',\n          id: 'VoqQWp9yEM0QM8eF',\n          description: 'Aria label to add to the `previous` button',\n        })}\n        onClick={() =>\n          dispatch({\n            type: 'navigateCurrentView',\n            payload: { ...payload, amount: payload.amount * -1 },\n          })\n        }\n      >\n        <Button.Prefix>\n          <ChevronLeftSmallIcon />\n        </Button.Prefix>\n      </Button>\n      <Button\n        className={calendarHeaderButtonCSS}\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-live=\"polite\"\n        id={labelId}\n        onClick={() =>\n          dispatch({\n            type: 'currentViewChange',\n            payload: nextView,\n          })\n        }\n        ref={forwardedRef}\n      >\n        {label}\n      </Button>\n      <Button\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-label={intl.formatMessage({\n          defaultMessage: 'Go to next page.',\n          id: 'KAAzM9PVtiJno9ks',\n          description: 'Aria label to add to the `next` button',\n        })}\n        onClick={() =>\n          dispatch({\n            type: 'navigateCurrentView',\n            payload,\n          })\n        }\n      >\n        <Button.Prefix>\n          <ChevronRightSmallIcon />\n        </Button.Prefix>\n      </Button>\n    </Flex>\n  );\n});\n\n(\n  CalendarHeader as typeof CalendarHeader & { displayName: string }\n).displayName = 'CalendarHeader';\n"],
-  "mappings": "AAsCe,cAqCX,YArCW;AAtCf,SAAS,kBAA4B;AACrC,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAchC,SAAS,qBAAqB,MAI5B;AACA,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,QACL,OAAO,oBAAC,mBAAgB;AAAA,QACxB,UAAU;AAAA,QACV,SAAS,EAAE,QAAQ,GAAG,MAAM,QAAQ;AAAA,MACtC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,OAAO,oBAAC,oBAAiB;AAAA,QACzB,UAAU;AAAA,QACV,SAAS,EAAE,QAAQ,GAAG,MAAM,OAAO;AAAA,MACrC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,OAAO,oBAAC,mBAAgB;AAAA,QACxB,UAAU;AAAA,QACV,SAAS,EAAE,QAAQ,gBAAgB;AAAA,MACrC;AAAA,EACJ;AACF;AAQO,MAAM,iBAAiC,2BAG5C,CAAC,OAA4B,iBAAiB;AAC9C,QAAM,EAAE,SAAS,KAAK,IAAI;AAC1B,QAAM,EAAE,SAAS,IAAI,mBAAmB;AACxC,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AAEvD,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,OAAO,UAAU,QAAQ,IAAI,qBAAqB,IAAI;AAC9D,SACE,qBAAC,QAAK,gBAAe,iBAAgB,cAAc,IACjD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,iBAAe;AAAA,QACf,cAAY,KAAK,cAAc;AAAA,UAC7B,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aAAa;AAAA,QACf,CAAC;AAAA,QACD,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN,SAAS,EAAE,GAAG,SAAS,QAAQ,QAAQ,SAAS,GAAG;AAAA,QACrD,CAAC;AAAA,QAGH,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX;AAAA,QACA,iBAAe;AAAA,QACf,aAAU;AAAA,QACV,IAAI;AAAA,QACJ,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN,SAAS;AAAA,QACX,CAAC;AAAA,QAEH,KAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,iBAAe;AAAA,QACf,cAAY,KAAK,cAAc;AAAA,UAC7B,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aAAa;AAAA,QACf,CAAC;AAAA,QACD,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN;AAAA,QACF,CAAC;AAAA,QAGH,8BAAC,OAAO,QAAP,EACC,8BAAC,yBAAsB,GACzB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;AAGC,eACA,cAAc;",
+  "sourcesContent": ["import { forwardRef, type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { SelectDateLabel } from '../calendar-header-label/SelectDateLabel.js';\nimport { SelectMonthLabel } from '../calendar-header-label/SelectMonthLabel.js';\nimport { SelectYearLabel } from '../calendar-header-label/SelectYearLabel.js';\nimport * as itemStyles from '../components/CalendarItem.sty.js';\nimport { useCalendarContext } from '../hooks/useCalendarContext.js';\nimport { NUMBER_OF_YEARS } from '../types/calendarConfiguration.js';\nimport type { CalendarViewType } from '../types/shared-types.js';\n\n/**\n * @internal\n */\ninterface CalendarHeaderProps {\n  /** The view currently shown to provide the proper text content. */\n  view: CalendarViewType;\n  /** Calendar header label id used for the 'aria-labelledby' attribute. */\n  labelId: string;\n}\n\n/**\n * Returns the right values for label, nextView, data-dt-name for the header button,\n * and the navigation button payload for each view.\n */\nfunction getViewSpecificProps(view: CalendarViewType): {\n  label: JSX.Element;\n  nextView: CalendarViewType;\n  headerDataDtName: string;\n  payload: { amount: number; unit?: CalendarViewType };\n} {\n  switch (view) {\n    case 'day':\n      return {\n        label: <SelectDateLabel />,\n        nextView: 'month',\n        headerDataDtName: 'ChangeToMonthsView',\n        payload: { amount: 1, unit: 'month' },\n      };\n    case 'month':\n      return {\n        label: <SelectMonthLabel />,\n        nextView: 'year',\n        headerDataDtName: 'ChangeToYearsView',\n        payload: { amount: 1, unit: 'year' },\n      };\n    case 'year':\n      return {\n        label: <SelectYearLabel />,\n        nextView: 'day',\n        headerDataDtName: 'ChangeToDaysView',\n        payload: { amount: NUMBER_OF_YEARS },\n      };\n  }\n}\n\n/**\n * CalendarHeader component\n * Renders the calendar header, including the buttons to navigate to the previous/next\n * month/year/list of years and the button (label) to switch the calendar view.\n * @internal\n */\nexport const CalendarHeader = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  CalendarHeaderProps\n>((props: CalendarHeaderProps, forwardedRef) => {\n  const { labelId, view } = props;\n  const { dispatch } = useCalendarContext();\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const intl = useIntl();\n\n  const { label, nextView, payload, headerDataDtName } =\n    getViewSpecificProps(view);\n\n  return (\n    <Flex justifyContent=\"space-between\" marginBottom={16}>\n      <Button\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-label={intl.formatMessage({\n          defaultMessage: 'Go to previous page.',\n          id: 'VoqQWp9yEM0QM8eF',\n          description: 'Aria label to add to the `previous` button',\n        })}\n        onClick={() =>\n          dispatch({\n            type: 'navigateCurrentView',\n            payload: { ...payload, amount: payload.amount * -1 },\n          })\n        }\n        data-dt-name=\"PreviousPage\"\n      >\n        <Button.Prefix>\n          <ChevronLeftSmallIcon />\n        </Button.Prefix>\n      </Button>\n      <Button\n        className={itemStyles.headerButton}\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-live=\"polite\"\n        id={labelId}\n        onClick={() =>\n          dispatch({\n            type: 'currentViewChange',\n            payload: nextView,\n          })\n        }\n        ref={forwardedRef}\n        data-dt-name={headerDataDtName}\n      >\n        {label}\n      </Button>\n      <Button\n        disabled={disabled}\n        aria-disabled={ariaDisabled}\n        aria-label={intl.formatMessage({\n          defaultMessage: 'Go to next page.',\n          id: 'KAAzM9PVtiJno9ks',\n          description: 'Aria label to add to the `next` button',\n        })}\n        onClick={() =>\n          dispatch({\n            type: 'navigateCurrentView',\n            payload,\n          })\n        }\n        data-dt-name=\"NextPage\"\n      >\n        <Button.Prefix>\n          <ChevronRightSmallIcon />\n        </Button.Prefix>\n      </Button>\n    </Flex>\n  );\n});\n\n(\n  CalendarHeader as typeof CalendarHeader & { displayName: string }\n).displayName = 'CalendarHeader';\n"],
+  "mappings": "AA0Ce,cAyCX,YAzCW;AA1Cf,SAAS,kBAA4B;AACrC,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,YAAY,gBAAgB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAiBhC,SAAS,qBAAqB,MAK5B;AACA,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,QACL,OAAO,oBAAC,mBAAgB;AAAA,QACxB,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB,SAAS,EAAE,QAAQ,GAAG,MAAM,QAAQ;AAAA,MACtC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,OAAO,oBAAC,oBAAiB;AAAA,QACzB,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB,SAAS,EAAE,QAAQ,GAAG,MAAM,OAAO;AAAA,MACrC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,OAAO,oBAAC,mBAAgB;AAAA,QACxB,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB,SAAS,EAAE,QAAQ,gBAAgB;AAAA,MACrC;AAAA,EACJ;AACF;AAQO,MAAM,iBAAiC,2BAG5C,CAAC,OAA4B,iBAAiB;AAC9C,QAAM,EAAE,SAAS,KAAK,IAAI;AAC1B,QAAM,EAAE,SAAS,IAAI,mBAAmB;AACxC,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,OAAO,UAAU,SAAS,iBAAiB,IACjD,qBAAqB,IAAI;AAE3B,SACE,qBAAC,QAAK,gBAAe,iBAAgB,cAAc,IACjD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,iBAAe;AAAA,QACf,cAAY,KAAK,cAAc;AAAA,UAC7B,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aAAa;AAAA,QACf,CAAC;AAAA,QACD,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN,SAAS,EAAE,GAAG,SAAS,QAAQ,QAAQ,SAAS,GAAG;AAAA,QACrD,CAAC;AAAA,QAEH,gBAAa;AAAA,QAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW;AAAA,QACtB;AAAA,QACA,iBAAe;AAAA,QACf,aAAU;AAAA,QACV,IAAI;AAAA,QACJ,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN,SAAS;AAAA,QACX,CAAC;AAAA,QAEH,KAAK;AAAA,QACL,gBAAc;AAAA,QAEb;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,iBAAe;AAAA,QACf,cAAY,KAAK,cAAc;AAAA,UAC7B,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aAAa;AAAA,QACf,CAAC;AAAA,QACD,SAAS,MACP,SAAS;AAAA,UACP,MAAM;AAAA,UACN;AAAA,QACF,CAAC;AAAA,QAEH,gBAAa;AAAA,QAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,yBAAsB,GACzB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;AAGC,eACA,cAAc;",
   "names": []
 }