@dynatrace/strato-components 3.4.1 → 3.5.2

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

@@ -30,17 +30,19 @@ __export(BaseInput_css_exports, {
   wrapper: () => wrapper
 });
 module.exports = __toCommonJS(BaseInput_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
+var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.css");
 var import_BaseInput_css_ts_vanilla = require("./BaseInput.css");
-var clearIconButton = "_1a8lqy9d-3-4-1";
-var container = "_1a8lqy97-3-4-1";
-var containerPadding = { none: "_1a8lqy98-3-4-1", rightNone: "_1a8lqy99-3-4-1", rightUnset: "_1a8lqy9a-3-4-1", leftUnset: "_1a8lqy9b-3-4-1" };
-var disabled = "_1a8lqy92-3-4-1";
-var divider = "_1a8lqy9e-3-4-1";
-var hasError = "_1a8lqy91-3-4-1";
-var input = "_1a8lqy9c-3-4-1 _yfwka33-3-4-1 _da9a8v0-3-4-1 _da9a8v2-3-4-1 _da9a8v3-3-4-1 _da9a8vb-3-4-1";
-var isAutoFilled = "_1a8lqy9f-3-4-1";
-var readOnly = "_1a8lqy93-3-4-1";
-var variant = { "default": "_1a8lqy94-3-4-1", minimal: "_1a8lqy95-3-4-1" };
-var wrapper = "_1a8lqy90-3-4-1";
+var clearIconButton = "_1a8lqy9e-3-5-2";
+var container = "_1a8lqy98-3-5-2";
+var containerPadding = { none: "_1a8lqy99-3-5-2", rightNone: "_1a8lqy9a-3-5-2", rightUnset: "_1a8lqy9b-3-5-2", leftUnset: "_1a8lqy9c-3-5-2" };
+var disabled = "_1a8lqy92-3-5-2";
+var divider = "_1a8lqy9f-3-5-2";
+var hasError = "_1a8lqy91-3-5-2";
+var input = "_1a8lqy9d-3-5-2 _yfwka33-3-5-2 _da9a8v0-3-5-2 _da9a8v2-3-5-2 _da9a8v3-3-5-2 _da9a8vb-3-5-2";
+var isAutoFilled = "_1a8lqy9g-3-5-2";
+var readOnly = "_1a8lqy93-3-5-2";
+var variant = { "default": "_1a8lqy94-3-5-2", minimal: "_1a8lqy95-3-5-2" };
+var wrapper = "_1a8lqy90-3-5-2";

package/forms/_base-input/BaseInputContent.css

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

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

@@ -20,8 +20,10 @@ __export(BaseInputContent_css_exports, {
   content: () => content
 });
 module.exports = __toCommonJS(BaseInputContent_css_exports);
+var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
+var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.css");
 var import_BaseInput_css_ts_vanilla = require("./BaseInput.css");
 var import_BaseInputContent_css_ts_vanilla = require("./BaseInputContent.css");
-var content = "_o6rxr70-3-4-1 _da9a8v0-3-4-1 _da9a8v2-3-4-1 _da9a8v3-3-4-1 _da9a8vb-3-4-1";
+var content = "_o6rxr70-3-5-2 _da9a8v0-3-5-2 _da9a8v2-3-5-2 _da9a8v3-3-5-2 _da9a8vb-3-5-2";

package/forms/calendar/Calendar.css

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

package/forms/calendar/Calendar.sty.d.ts

@@ -1,24 +1,24 @@
 import { borderColor, rangeColor } from './variables.sty.js';
-export declare const calendarCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const calendar: import("@vanilla-extract/recipes").RuntimeFn<{
     readOnly: {
         true: {
             cursor: "not-allowed";
         };
     };
 }>;
-export declare const calendarDisabledCSS: string;
-export declare const calendarBodyCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const disabled: string;
+export declare const body: import("@vanilla-extract/recipes").RuntimeFn<{
     isReadOnly: {
         true: {
             pointerEvents: "none";
         };
     };
 }>;
-export declare const calendarRowCSS: string;
-export declare const calendarDayRowCSS: string;
-export declare const calendarMonthRowCSS: string;
-export declare const calendarYearRowCSS: string;
-export declare const calendarFieldCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const row: string;
+export declare const dayRow: string;
+export declare const monthRow: string;
+export declare const yearRow: string;
+export declare const field: import("@vanilla-extract/recipes").RuntimeFn<{
     color: {
         primary: {
             vars: {
@@ -50,7 +50,7 @@ export declare const calendarFieldCSS: import("@vanilla-extract/recipes").Runtim
         true: {};
     };
 }>;
-export declare const calendarRangeFieldCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const rangeField: import("@vanilla-extract/recipes").RuntimeFn<{
     rangeKind: {
         first: {
             background: `var(--${string})`;
@@ -98,5 +98,5 @@ export declare const calendarRangeFieldCSS: import("@vanilla-extract/recipes").R
         };
     };
 }>;
-export declare const calendarClearBgCSS: string;
-export declare const calendarWeekdaysCSS: string;
+export declare const clearBackground: string;
+export declare const weekdays: string;

package/forms/calendar/Calendar.sty.js

@@ -17,29 +17,29 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Calendar_css_exports = {};
 __export(Calendar_css_exports, {
-  calendarBodyCSS: () => calendarBodyCSS,
-  calendarCSS: () => calendarCSS,
-  calendarClearBgCSS: () => calendarClearBgCSS,
-  calendarDayRowCSS: () => calendarDayRowCSS,
-  calendarDisabledCSS: () => calendarDisabledCSS,
-  calendarFieldCSS: () => calendarFieldCSS,
-  calendarMonthRowCSS: () => calendarMonthRowCSS,
-  calendarRangeFieldCSS: () => calendarRangeFieldCSS,
-  calendarRowCSS: () => calendarRowCSS,
-  calendarWeekdaysCSS: () => calendarWeekdaysCSS,
-  calendarYearRowCSS: () => calendarYearRowCSS
+  body: () => body,
+  calendar: () => calendar,
+  clearBackground: () => clearBackground,
+  dayRow: () => dayRow,
+  disabled: () => disabled,
+  field: () => field,
+  monthRow: () => monthRow,
+  rangeField: () => rangeField,
+  row: () => row,
+  weekdays: () => weekdays,
+  yearRow: () => yearRow
 });
 module.exports = __toCommonJS(Calendar_css_exports);
 var import_Calendar_css_ts_vanilla = require("./Calendar.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var calendarBodyCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk3-3-4-1", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk0-3-4-1", variantClassNames: { readOnly: { true: "_xm8mdk1-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarClearBgCSS = "_xm8mdkm-3-4-1";
-var calendarDayRowCSS = "_xm8mdk6-3-4-1";
-var calendarDisabledCSS = "_xm8mdk2-3-4-1";
-var calendarFieldCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk9-3-4-1", variantClassNames: { color: { primary: "_xm8mdka-3-4-1", neutral: "_xm8mdkb-3-4-1", critical: "_xm8mdkc-3-4-1" }, isIncompleteSelection: { true: "_xm8mdkd-3-4-1" }, isDisabled: { true: "_xm8mdke-3-4-1" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-4-1"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-4-1"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-4-1"]] });
-var calendarMonthRowCSS = "_xm8mdk7-3-4-1";
-var calendarRangeFieldCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdki-3-4-1", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-4-1", last: "_xm8mdkk-3-4-1", inbetween: "_xm8mdkl-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarRowCSS = "_xm8mdk5-3-4-1";
-var calendarWeekdaysCSS = "_xm8mdkn-3-4-1";
-var calendarYearRowCSS = "_xm8mdk8-3-4-1";
+var body = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk3-3-5-2", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var calendar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk0-3-5-2", variantClassNames: { readOnly: { true: "_xm8mdk1-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var clearBackground = "_xm8mdkm-3-5-2";
+var dayRow = "_xm8mdk6-3-5-2";
+var disabled = "_xm8mdk2-3-5-2";
+var field = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk9-3-5-2", variantClassNames: { color: { primary: "_xm8mdka-3-5-2", neutral: "_xm8mdkb-3-5-2", critical: "_xm8mdkc-3-5-2" }, isIncompleteSelection: { true: "_xm8mdkd-3-5-2" }, isDisabled: { true: "_xm8mdke-3-5-2" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-5-2"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-5-2"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-5-2"]] });
+var monthRow = "_xm8mdk7-3-5-2";
+var rangeField = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdki-3-5-2", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-5-2", last: "_xm8mdkk-3-5-2", inbetween: "_xm8mdkl-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var row = "_xm8mdk5-3-5-2";
+var weekdays = "_xm8mdkn-3-5-2";
+var yearRow = "_xm8mdk8-3-5-2";

package/forms/calendar/CalendarRoot.js

@@ -41,7 +41,7 @@ var import_validation = require("../../core/time/validation.js");
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
-var import_Calendar_css = require("./Calendar.sty.js");
+var styles = __toESM(require("./Calendar.sty.js"));
 var import_CalendarContext = require("./contexts/CalendarContext.js");
 var import_useCalendar = require("./hooks/useCalendar.js");
 var import_useCalendarNavigation = require("./hooks/useCalendarNavigation.js");
@@ -166,8 +166,8 @@ function CalendarComponent(props, forwardedRef) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
-        className: (0, import_clsx.default)((0, import_Calendar_css.calendarCSS)({ readOnly }), consumerClassName, {
-          [import_Calendar_css.calendarDisabledCSS]: disabledOrAriaDisabled
+        className: (0, import_clsx.default)(styles.calendar({ readOnly }), consumerClassName, {
+          [styles.disabled]: disabledOrAriaDisabled
         }),
         "data-testid": dataTestId,
         ref: calendarRef,
@@ -180,7 +180,7 @@ function CalendarComponent(props, forwardedRef) {
             "table",
             {
               role: "grid",
-              className: (0, import_Calendar_css.calendarBodyCSS)({
+              className: styles.body({
                 isReadOnly: !!readOnly
               }),
               children: renderView(state.currentView)

package/forms/calendar/components/CalendarItem.css

@@ -1,7 +1,7 @@
-._1basjc0-3-4-1 {
+._1basjc0-3-5-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1basjc1-3-4-1::after,._1basjc1-3-4-1::before {
+._1basjc1-3-5-2::after,._1basjc1-3-5-2::before {
   content: "";
   position: absolute;
   width: 4px;
@@ -11,11 +11,11 @@
   left: 50%;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._1basjc1-3-4-1::before {
+._1basjc1-3-5-2::before {
   transform: translate(-50%, 50%) scale(2);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1basjc2-3-4-1 {
+._1basjc2-3-5-2 {
   padding-left: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   margin: var(--dt-spacings-size-0, 0);
@@ -23,9 +23,9 @@
   position: relative;
   z-index: 0;
 }
-._1basjc2-3-4-1::after {
-  background: var(--_1jljrbf1-3-4-1);
+._1basjc2-3-5-2::after {
+  background: var(--_1jljrbf1-3-5-2);
 }
-._1basjc3-3-4-1 {
+._1basjc3-3-5-2 {
   flex-grow: 1;
 }

package/forms/calendar/components/CalendarItem.sty.js

@@ -24,7 +24,7 @@ __export(CalendarItem_css_exports, {
 });
 module.exports = __toCommonJS(CalendarItem_css_exports);
 var import_CalendarItem_css_ts_vanilla = require("./CalendarItem.css");
-var calendarButton = "_1basjc2-3-4-1";
-var currentIndicator = "_1basjc1-3-4-1";
-var headerButton = "_1basjc3-3-4-1";
-var outOfScopeDay = "_1basjc0-3-4-1";
+var calendarButton = "_1basjc2-3-5-2";
+var currentIndicator = "_1basjc1-3-5-2";
+var headerButton = "_1basjc3-3-5-2";
+var outOfScopeDay = "_1basjc0-3-5-2";

package/forms/calendar/components/CalendarOutlineIcon.css

@@ -1,24 +1,24 @@
-._1uazq660-3-4-1 {
+._1uazq660-3-5-2 {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   overflow: visible;
-  fill: var(--_1jljrbf1-3-4-1);
+  fill: var(--_1jljrbf1-3-5-2);
 }
-._1uazq661-3-4-1 {
-  fill: var(--_1jljrbf1-3-4-1);
+._1uazq661-3-5-2 {
+  fill: var(--_1jljrbf1-3-5-2);
 }
-._1uazq662-3-4-1 {
+._1uazq662-3-5-2 {
   fill: var(--dt-colors-background-surface-default, #fff);
 }
-._1uazq663-3-4-1 {
-  fill: var(--_1jljrbf0-3-4-1);
+._1uazq663-3-5-2 {
+  fill: var(--_1jljrbf0-3-5-2);
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   opacity: 0;
   transition-property: opacity;
 }
-._1uazq664-3-4-1 {
+._1uazq664-3-5-2 {
   opacity: 1;
 }

package/forms/calendar/components/CalendarOutlineIcon.sty.js

@@ -25,8 +25,8 @@ __export(CalendarOutlineIcon_css_exports, {
 });
 module.exports = __toCommonJS(CalendarOutlineIcon_css_exports);
 var import_CalendarOutlineIcon_css_ts_vanilla = require("./CalendarOutlineIcon.css");
-var calendarIndicatorBackgroundCSS = "_1uazq662-3-4-1";
-var calendarIndicatorCSS = "_1uazq661-3-4-1";
-var calendarOutlineCSS = "_1uazq660-3-4-1";
-var calendarRangeCornersCSS = "_1uazq663-3-4-1";
-var calendarRangeCornorVisibleCSS = "_1uazq664-3-4-1";
+var calendarIndicatorBackgroundCSS = "_1uazq662-3-5-2";
+var calendarIndicatorCSS = "_1uazq661-3-5-2";
+var calendarOutlineCSS = "_1uazq660-3-5-2";
+var calendarRangeCornersCSS = "_1uazq663-3-5-2";
+var calendarRangeCornorVisibleCSS = "_1uazq664-3-5-2";

package/forms/calendar/components/Day.js

@@ -40,7 +40,7 @@ var import_useTimeframeStore = require("../../../core/time/timeframeStore/useTim
 var import_validation = require("../../../core/time/validation.js");
 var import_useFormFieldContext = require("../../forms-core/hooks/useFormFieldContext.js");
 var import_useFormFieldMessagesContext = require("../../forms-core/hooks/useFormFieldMessagesContext.js");
-var import_Calendar_css = require("../Calendar.sty.js");
+var styles = __toESM(require("../Calendar.sty.js"));
 var import_CalendarItem = require("./CalendarItem.js");
 var import_CalendarOutlineIcon = require("./CalendarOutlineIcon.js");
 var import_helpers = require("../../../core/time/helpers.js");
@@ -106,15 +106,15 @@ const Day = ({ date, isCurrentMonthDay = true, position }) => {
   } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const validatedHighlightColor = showError && highlightColor === "primary" ? "critical" : highlightColor;
   const className = (0, import_clsx.default)(
-    (0, import_Calendar_css.calendarFieldCSS)({
+    styles.field({
       color: validatedHighlightColor,
       isDisabled: isDisabled || disabled || ariaDisabled,
       isIncompleteSelection
     }),
-    highlightType && highlightType !== "same" ? (0, import_Calendar_css.calendarRangeFieldCSS)({
+    highlightType && highlightType !== "same" ? styles.rangeField({
       rangeKind: highlightType
     }) : "",
-    isSelected ? import_Calendar_css.calendarClearBgCSS : ""
+    isSelected ? styles.clearBackground : ""
   );
   const dayValue = date.getDate();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { role: "presentation", className, ...rangeInteractionProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/forms/calendar/components/Days.js

@@ -34,7 +34,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_Day = require("./Day.js");
-var import_Calendar_css = require("../Calendar.sty.js");
+var styles = __toESM(require("../Calendar.sty.js"));
 var import_DayViewContext = require("../contexts/DayViewContext.js");
 var import_useCalendarContext = require("../hooks/useCalendarContext.js");
 var import_calendarConfiguration = require("../types/calendarConfiguration.js");
@@ -55,7 +55,7 @@ function Days({ weekStartsOn }) {
       children: new Array(import_calendarConfiguration.NUMBER_OF_WEEK_ROWS).fill(0).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "tr",
         {
-          className: (0, import_clsx.default)([import_Calendar_css.calendarRowCSS, import_Calendar_css.calendarDayRowCSS]),
+          className: (0, import_clsx.default)([styles.row, styles.dayRow]),
           children: days.slice(
             index * import_calendarConfiguration.NUMBER_OF_WEEKDAYS,
             index * import_calendarConfiguration.NUMBER_OF_WEEKDAYS + import_calendarConfiguration.NUMBER_OF_WEEKDAYS

package/forms/calendar/components/Month.js

@@ -43,7 +43,7 @@ const Month = ({ date }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "td",
     {
-      className: (0, import_Calendar_css.calendarFieldCSS)({
+      className: (0, import_Calendar_css.field)({
         color: validatedHighlightColor,
         isDisabled: isDisabled || disabled || ariaDisabled
       }),

package/forms/calendar/components/Weekdays.js

@@ -37,7 +37,7 @@ var import_date_fns = require("date-fns");
 var import_units = require("@dynatrace-sdk/units");
 var import_Text = require("../../../typography/text/Text.js");
 var import_helpers = require("../../forms-core/time/helpers.js");
-var import_Calendar_css = require("../Calendar.sty.js");
+var styles = __toESM(require("../Calendar.sty.js"));
 function Weekdays({
   weekStartsOn,
   configuredTimezone
@@ -50,30 +50,20 @@ function Weekdays({
     start: intervalStart,
     end: (0, import_date_fns.addDays)(intervalStart, 6)
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "tr",
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: (0, import_clsx.default)([styles.row, styles.dayRow, styles.weekdays]), children: days.map((weekday, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "th",
     {
-      className: (0, import_clsx.default)([
-        import_Calendar_css.calendarRowCSS,
-        import_Calendar_css.calendarDayRowCSS,
-        import_Calendar_css.calendarWeekdaysCSS
-      ]),
-      children: days.map((weekday, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "th",
-        {
-          className: "weekday",
-          abbr: (0, import_units.formatDate)(weekday, {
-            weekday: "long",
-            timeZone: configuredTimezone
-          }),
-          scope: "col",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", as: "p", children: (0, import_units.formatDate)(weekday, {
-            weekday: "short",
-            timeZone: configuredTimezone
-          }) })
-        },
-        `${weekday}-${index}`
-      ))
-    }
-  ) });
+      className: "weekday",
+      abbr: (0, import_units.formatDate)(weekday, {
+        weekday: "long",
+        timeZone: configuredTimezone
+      }),
+      scope: "col",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "small", as: "p", children: (0, import_units.formatDate)(weekday, {
+        weekday: "short",
+        timeZone: configuredTimezone
+      }) })
+    },
+    `${weekday}-${index}`
+  )) }) });
 }

package/forms/calendar/components/Year.js

@@ -45,7 +45,7 @@ const Year = ({ date }) => {
     "td",
     {
       role: "presentation",
-      className: (0, import_Calendar_css.calendarFieldCSS)({
+      className: (0, import_Calendar_css.field)({
         color: validatedHighlightColor,
         isDisabled: isDisabled || disabled || ariaDisabled
       }),

package/forms/calendar/variables.sty.js

@@ -21,5 +21,5 @@ __export(variables_css_exports, {
   rangeColor: () => rangeColor
 });
 module.exports = __toCommonJS(variables_css_exports);
-var borderColor = "var(--_1jljrbf1-3-4-1)";
-var rangeColor = "var(--_1jljrbf0-3-4-1)";
+var borderColor = "var(--_1jljrbf1-3-5-2)";
+var rangeColor = "var(--_1jljrbf0-3-5-2)";