@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/forms/calendar/components/Month.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/Month.tsx"],
-  "sourcesContent": ["import { TZDate } from '@date-fns/tz';\nimport { useRef } from 'react';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { calendarFieldCSS } from '../Calendar.sty.js';\nimport { CalendarItem } from './CalendarItem.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useMonth } from '../hooks/useMonth.js';\n\n/** @internal */\nexport const Month = ({ date }: { date: TZDate }) => {\n  // Reference of the month button, needed to pass to the hook for proper focus management\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const { ariaLabel, tabIndex, isSelected, isCurrent, onClick, isDisabled } =\n    useMonth({\n      date,\n      itemRef,\n    });\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const {\n    state: { showError },\n  } = useFormFieldMessagesContext();\n  const highlightColor = isSelected ? 'primary' : 'neutral';\n  const validatedHighlightColor =\n    showError && highlightColor === 'primary' ? 'critical' : highlightColor;\n\n  return (\n    <td\n      className={calendarFieldCSS({\n        color: validatedHighlightColor,\n        isDisabled: isDisabled || disabled || ariaDisabled,\n      })}\n      role=\"presentation\"\n    >\n      <CalendarItem\n        ref={itemRef}\n        className=\"calendar-button calendar-body-button\"\n        isCurrent={isCurrent}\n        isSelected={isSelected}\n        isDisabled={isDisabled || disabled}\n        highlightColor={validatedHighlightColor}\n        tabIndex={tabIndex}\n        role=\"gridcell\"\n        aria-selected={!!isSelected}\n        ariaLabel={ariaLabel}\n        view=\"month\"\n        onClick={onClick}\n        data-dt-name=\"SelectMonth\"\n        data-dt-properties={`value:${formatDate(date, {\n          month: 'numeric',\n        })}`}\n      >\n        {formatDate(date, {\n          month: 'short',\n        })}\n      </CalendarItem>\n    </td>\n  );\n};\n\nMonth['displayName'] = 'Month';\n"],
-  "mappings": "AAqCM;AApCN,SAAS,cAAc;AAEvB,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,gBAAgB;AAGlB,MAAM,QAAQ,CAAC,EAAE,KAAK,MAAwB;AAEnD,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,EAAE,WAAW,UAAU,YAAY,WAAW,SAAS,WAAW,IACtE,SAAS;AAAA,IACP;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU;AAAA,EACrB,IAAI,4BAA4B;AAChC,QAAM,iBAAiB,aAAa,YAAY;AAChD,QAAM,0BACJ,aAAa,mBAAmB,YAAY,aAAa;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB;AAAA,QAC1B,OAAO;AAAA,QACP,YAAY,cAAc,YAAY;AAAA,MACxC,CAAC;AAAA,MACD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,YAAY,cAAc;AAAA,UAC1B,gBAAgB;AAAA,UAChB;AAAA,UACA,MAAK;AAAA,UACL,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UACA,gBAAa;AAAA,UACb,sBAAoB,SAAS,WAAW,MAAM;AAAA,YAC5C,OAAO;AAAA,UACT,CAAC,CAAC;AAAA,UAED,qBAAW,MAAM;AAAA,YAChB,OAAO;AAAA,UACT,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,aAAa,IAAI;",
+  "sourcesContent": ["import { TZDate } from '@date-fns/tz';\nimport { useRef } from 'react';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { field as monthFieldStyle } from '../Calendar.sty.js';\nimport { CalendarItem } from './CalendarItem.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useMonth } from '../hooks/useMonth.js';\n\n/** @internal */\nexport const Month = ({ date }: { date: TZDate }) => {\n  // Reference of the month button, needed to pass to the hook for proper focus management\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const { ariaLabel, tabIndex, isSelected, isCurrent, onClick, isDisabled } =\n    useMonth({\n      date,\n      itemRef,\n    });\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const {\n    state: { showError },\n  } = useFormFieldMessagesContext();\n  const highlightColor = isSelected ? 'primary' : 'neutral';\n  const validatedHighlightColor =\n    showError && highlightColor === 'primary' ? 'critical' : highlightColor;\n\n  return (\n    <td\n      className={monthFieldStyle({\n        color: validatedHighlightColor,\n        isDisabled: isDisabled || disabled || ariaDisabled,\n      })}\n      role=\"presentation\"\n    >\n      <CalendarItem\n        ref={itemRef}\n        className=\"calendar-button calendar-body-button\"\n        isCurrent={isCurrent}\n        isSelected={isSelected}\n        isDisabled={isDisabled || disabled}\n        highlightColor={validatedHighlightColor}\n        tabIndex={tabIndex}\n        role=\"gridcell\"\n        aria-selected={!!isSelected}\n        ariaLabel={ariaLabel}\n        view=\"month\"\n        onClick={onClick}\n        data-dt-name=\"SelectMonth\"\n        data-dt-properties={`value:${formatDate(date, {\n          month: 'numeric',\n        })}`}\n      >\n        {formatDate(date, {\n          month: 'short',\n        })}\n      </CalendarItem>\n    </td>\n  );\n};\n\nMonth['displayName'] = 'Month';\n"],
+  "mappings": "AAqCM;AApCN,SAAS,cAAc;AAEvB,SAAS,kBAAkB;AAE3B,SAAS,SAAS,uBAAuB;AACzC,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,gBAAgB;AAGlB,MAAM,QAAQ,CAAC,EAAE,KAAK,MAAwB;AAEnD,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,EAAE,WAAW,UAAU,YAAY,WAAW,SAAS,WAAW,IACtE,SAAS;AAAA,IACP;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU;AAAA,EACrB,IAAI,4BAA4B;AAChC,QAAM,iBAAiB,aAAa,YAAY;AAChD,QAAM,0BACJ,aAAa,mBAAmB,YAAY,aAAa;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,gBAAgB;AAAA,QACzB,OAAO;AAAA,QACP,YAAY,cAAc,YAAY;AAAA,MACxC,CAAC;AAAA,MACD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,YAAY,cAAc;AAAA,UAC1B,gBAAgB;AAAA,UAChB;AAAA,UACA,MAAK;AAAA,UACL,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UACA,gBAAa;AAAA,UACb,sBAAoB,SAAS,WAAW,MAAM;AAAA,YAC5C,OAAO;AAAA,UACT,CAAC,CAAC;AAAA,UAED,qBAAW,MAAM;AAAA,YAChB,OAAO;AAAA,UACT,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,aAAa,IAAI;",
   "names": []
 }

package/esm/forms/calendar/components/Weekdays.js

@@ -5,11 +5,7 @@ import { startOfWeek, addDays } from "date-fns";
 import { formatDate } from "@dynatrace-sdk/units";
 import { Text } from "../../../typography/text/Text.js";
 import { eachDayOfInterval } from "../../forms-core/time/helpers.js";
-import {
-  calendarDayRowCSS,
-  calendarRowCSS,
-  calendarWeekdaysCSS
-} from "../Calendar.sty.js";
+import * as styles from "../Calendar.sty.js";
 function Weekdays({
   weekStartsOn,
   configuredTimezone
@@ -22,32 +18,22 @@ function Weekdays({
     start: intervalStart,
     end: addDays(intervalStart, 6)
   });
-  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx(
-    "tr",
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: clsx([styles.row, styles.dayRow, styles.weekdays]), children: days.map((weekday, index) => /* @__PURE__ */ jsx(
+    "th",
     {
-      className: clsx([
-        calendarRowCSS,
-        calendarDayRowCSS,
-        calendarWeekdaysCSS
-      ]),
-      children: days.map((weekday, index) => /* @__PURE__ */ jsx(
-        "th",
-        {
-          className: "weekday",
-          abbr: formatDate(weekday, {
-            weekday: "long",
-            timeZone: configuredTimezone
-          }),
-          scope: "col",
-          children: /* @__PURE__ */ jsx(Text, { textStyle: "small", as: "p", children: formatDate(weekday, {
-            weekday: "short",
-            timeZone: configuredTimezone
-          }) })
-        },
-        `${weekday}-${index}`
-      ))
-    }
-  ) });
+      className: "weekday",
+      abbr: formatDate(weekday, {
+        weekday: "long",
+        timeZone: configuredTimezone
+      }),
+      scope: "col",
+      children: /* @__PURE__ */ jsx(Text, { textStyle: "small", as: "p", children: formatDate(weekday, {
+        weekday: "short",
+        timeZone: configuredTimezone
+      }) })
+    },
+    `${weekday}-${index}`
+  )) }) });
 }
 export {
   Weekdays

package/esm/forms/calendar/components/Weekdays.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/Weekdays.tsx"],
-  "sourcesContent": ["import { TZDate, TZDateMini } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { startOfWeek, addDays } from 'date-fns';\nimport { type ReactNode } from 'react';\nimport { type DayOfWeek } from 'weekstart';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { Text } from '../../../typography/text/Text.js';\nimport { eachDayOfInterval } from '../../forms-core/time/helpers.js';\nimport {\n  calendarDayRowCSS,\n  calendarRowCSS,\n  calendarWeekdaysCSS,\n} from '../Calendar.sty.js';\n\n/** @internal */\nexport function Weekdays({\n  weekStartsOn,\n  configuredTimezone,\n}: Readonly<{\n  weekStartsOn: DayOfWeek;\n  configuredTimezone: string;\n}>): ReactNode {\n  // Generate an array of dates representing each day of the week\n  const today = TZDateMini.tz(configuredTimezone);\n  const intervalStart = startOfWeek(today, {\n    weekStartsOn,\n  });\n\n  // Generate an array of dates representing each day of the week\n  const days = eachDayOfInterval({\n    start: intervalStart,\n    end: addDays(intervalStart, 6) as TZDate,\n  });\n\n  return (\n    <thead>\n      <tr\n        className={clsx([\n          calendarRowCSS,\n          calendarDayRowCSS,\n          calendarWeekdaysCSS,\n        ])}\n      >\n        {days.map((weekday, index) => (\n          <th\n            key={`${weekday}-${index}`}\n            className=\"weekday\"\n            abbr={formatDate(weekday, {\n              weekday: 'long',\n              timeZone: configuredTimezone,\n            })}\n            scope=\"col\"\n          >\n            <Text textStyle=\"small\" as=\"p\">\n              {formatDate(weekday, {\n                weekday: 'short',\n                timeZone: configuredTimezone,\n              })}\n            </Text>\n          </th>\n        ))}\n      </tr>\n    </thead>\n  );\n}\n"],
-  "mappings": "AAuDY;AAvDZ,SAAiB,kBAAkB;AACnC,OAAO,UAAU;AACjB,SAAS,aAAa,eAAe;AAIrC,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AACF,GAGe;AAEb,QAAM,QAAQ,WAAW,GAAG,kBAAkB;AAC9C,QAAM,gBAAgB,YAAY,OAAO;AAAA,IACvC;AAAA,EACF,CAAC;AAGD,QAAM,OAAO,kBAAkB;AAAA,IAC7B,OAAO;AAAA,IACP,KAAK,QAAQ,eAAe,CAAC;AAAA,EAC/B,CAAC;AAED,SACE,oBAAC,WACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MAEA,eAAK,IAAI,CAAC,SAAS,UAClB;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UACV,MAAM,WAAW,SAAS;AAAA,YACxB,SAAS;AAAA,YACT,UAAU;AAAA,UACZ,CAAC;AAAA,UACD,OAAM;AAAA,UAEN,8BAAC,QAAK,WAAU,SAAQ,IAAG,KACxB,qBAAW,SAAS;AAAA,YACnB,SAAS;AAAA,YACT,UAAU;AAAA,UACZ,CAAC,GACH;AAAA;AAAA,QAbK,GAAG,OAAO,IAAI,KAAK;AAAA,MAc1B,CACD;AAAA;AAAA,EACH,GACF;AAEJ;",
+  "sourcesContent": ["import { TZDate, TZDateMini } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { startOfWeek, addDays } from 'date-fns';\nimport { type ReactNode } from 'react';\nimport { type DayOfWeek } from 'weekstart';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { Text } from '../../../typography/text/Text.js';\nimport { eachDayOfInterval } from '../../forms-core/time/helpers.js';\nimport * as styles from '../Calendar.sty.js';\n\n/** @internal */\nexport function Weekdays({\n  weekStartsOn,\n  configuredTimezone,\n}: Readonly<{\n  weekStartsOn: DayOfWeek;\n  configuredTimezone: string;\n}>): ReactNode {\n  // Generate an array of dates representing each day of the week\n  const today = TZDateMini.tz(configuredTimezone);\n  const intervalStart = startOfWeek(today, {\n    weekStartsOn,\n  });\n\n  // Generate an array of dates representing each day of the week\n  const days = eachDayOfInterval({\n    start: intervalStart,\n    end: addDays(intervalStart, 6) as TZDate,\n  });\n\n  return (\n    <thead>\n      <tr className={clsx([styles.row, styles.dayRow, styles.weekdays])}>\n        {days.map((weekday, index) => (\n          <th\n            key={`${weekday}-${index}`}\n            className=\"weekday\"\n            abbr={formatDate(weekday, {\n              weekday: 'long',\n              timeZone: configuredTimezone,\n            })}\n            scope=\"col\"\n          >\n            <Text textStyle=\"small\" as=\"p\">\n              {formatDate(weekday, {\n                weekday: 'short',\n                timeZone: configuredTimezone,\n              })}\n            </Text>\n          </th>\n        ))}\n      </tr>\n    </thead>\n  );\n}\n"],
+  "mappings": "AA6CY;AA7CZ,SAAiB,kBAAkB;AACnC,OAAO,UAAU;AACjB,SAAS,aAAa,eAAe;AAIrC,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAClC,YAAY,YAAY;AAGjB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AACF,GAGe;AAEb,QAAM,QAAQ,WAAW,GAAG,kBAAkB;AAC9C,QAAM,gBAAgB,YAAY,OAAO;AAAA,IACvC;AAAA,EACF,CAAC;AAGD,QAAM,OAAO,kBAAkB;AAAA,IAC7B,OAAO;AAAA,IACP,KAAK,QAAQ,eAAe,CAAC;AAAA,EAC/B,CAAC;AAED,SACE,oBAAC,WACC,8BAAC,QAAG,WAAW,KAAK,CAAC,OAAO,KAAK,OAAO,QAAQ,OAAO,QAAQ,CAAC,GAC7D,eAAK,IAAI,CAAC,SAAS,UAClB;AAAA,IAAC;AAAA;AAAA,MAEC,WAAU;AAAA,MACV,MAAM,WAAW,SAAS;AAAA,QACxB,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,CAAC;AAAA,MACD,OAAM;AAAA,MAEN,8BAAC,QAAK,WAAU,SAAQ,IAAG,KACxB,qBAAW,SAAS;AAAA,QACnB,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,CAAC,GACH;AAAA;AAAA,IAbK,GAAG,OAAO,IAAI,KAAK;AAAA,EAc1B,CACD,GACH,GACF;AAEJ;",
   "names": []
 }

package/esm/forms/calendar/components/Year.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { formatDate } from "@dynatrace-sdk/units";
-import { calendarFieldCSS } from "../Calendar.sty.js";
+import { field as yearFieldStyle } from "../Calendar.sty.js";
 import { CalendarItem } from "./CalendarItem.js";
 import { useFormFieldContext } from "../../forms-core/hooks/useFormFieldContext.js";
 import { useFormFieldMessagesContext } from "../../forms-core/hooks/useFormFieldMessagesContext.js";
@@ -23,7 +23,7 @@ const Year = ({ date }) => {
     "td",
     {
       role: "presentation",
-      className: calendarFieldCSS({
+      className: yearFieldStyle({
         color: validatedHighlightColor,
         isDisabled: isDisabled || disabled || ariaDisabled
       }),

package/esm/forms/calendar/components/Year.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/Year.tsx"],
-  "sourcesContent": ["import { TZDate } from '@date-fns/tz';\nimport { useRef } from 'react';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { calendarFieldCSS } from '../Calendar.sty.js';\nimport { CalendarItem } from './CalendarItem.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useYear } from '../hooks/useYear.js';\n\n/** @internal */\nexport const Year = ({ date }: { date: TZDate }) => {\n  // Reference of the year button, needed to pass to the hook for proper focus management\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const { ariaLabel, tabIndex, isCurrent, isSelected, onClick, isDisabled } =\n    useYear({\n      date,\n      itemRef,\n    });\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const {\n    state: { showError },\n  } = useFormFieldMessagesContext();\n  const highlightColor = isSelected ? 'primary' : 'neutral';\n  const validatedHighlightColor =\n    showError && highlightColor === 'primary' ? 'critical' : highlightColor;\n  const yearValue = formatDate(date, { year: 'numeric' });\n\n  return (\n    <td\n      role=\"presentation\"\n      className={calendarFieldCSS({\n        color: validatedHighlightColor,\n        isDisabled: isDisabled || disabled || ariaDisabled,\n      })}\n    >\n      <CalendarItem\n        ref={itemRef}\n        className=\"calendar-button calendar-body-button\"\n        isCurrent={isCurrent}\n        isSelected={isSelected}\n        isDisabled={isDisabled || disabled}\n        highlightColor={validatedHighlightColor}\n        tabIndex={tabIndex}\n        role=\"gridcell\"\n        aria-selected={!!isSelected}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        view=\"year\"\n        data-dt-name=\"SelectYear\"\n        data-dt-properties={`value:${yearValue}`}\n      >\n        {yearValue}\n      </CalendarItem>\n    </td>\n  );\n};\n\nYear['displayName'] = 'Year';\n"],
-  "mappings": "AAsCM;AArCN,SAAS,cAAc;AAEvB,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,eAAe;AAGjB,MAAM,OAAO,CAAC,EAAE,KAAK,MAAwB;AAElD,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,EAAE,WAAW,UAAU,WAAW,YAAY,SAAS,WAAW,IACtE,QAAQ;AAAA,IACN;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU;AAAA,EACrB,IAAI,4BAA4B;AAChC,QAAM,iBAAiB,aAAa,YAAY;AAChD,QAAM,0BACJ,aAAa,mBAAmB,YAAY,aAAa;AAC3D,QAAM,YAAY,WAAW,MAAM,EAAE,MAAM,UAAU,CAAC;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,iBAAiB;AAAA,QAC1B,OAAO;AAAA,QACP,YAAY,cAAc,YAAY;AAAA,MACxC,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,YAAY,cAAc;AAAA,UAC1B,gBAAgB;AAAA,UAChB;AAAA,UACA,MAAK;AAAA,UACL,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,gBAAa;AAAA,UACb,sBAAoB,SAAS,SAAS;AAAA,UAErC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,KAAK,aAAa,IAAI;",
+  "sourcesContent": ["import { TZDate } from '@date-fns/tz';\nimport { useRef } from 'react';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { field as yearFieldStyle } from '../Calendar.sty.js';\nimport { CalendarItem } from './CalendarItem.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useYear } from '../hooks/useYear.js';\n\n/** @internal */\nexport const Year = ({ date }: { date: TZDate }) => {\n  // Reference of the year button, needed to pass to the hook for proper focus management\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const { ariaLabel, tabIndex, isCurrent, isSelected, onClick, isDisabled } =\n    useYear({\n      date,\n      itemRef,\n    });\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const {\n    state: { showError },\n  } = useFormFieldMessagesContext();\n  const highlightColor = isSelected ? 'primary' : 'neutral';\n  const validatedHighlightColor =\n    showError && highlightColor === 'primary' ? 'critical' : highlightColor;\n  const yearValue = formatDate(date, { year: 'numeric' });\n\n  return (\n    <td\n      role=\"presentation\"\n      className={yearFieldStyle({\n        color: validatedHighlightColor,\n        isDisabled: isDisabled || disabled || ariaDisabled,\n      })}\n    >\n      <CalendarItem\n        ref={itemRef}\n        className=\"calendar-button calendar-body-button\"\n        isCurrent={isCurrent}\n        isSelected={isSelected}\n        isDisabled={isDisabled || disabled}\n        highlightColor={validatedHighlightColor}\n        tabIndex={tabIndex}\n        role=\"gridcell\"\n        aria-selected={!!isSelected}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        view=\"year\"\n        data-dt-name=\"SelectYear\"\n        data-dt-properties={`value:${yearValue}`}\n      >\n        {yearValue}\n      </CalendarItem>\n    </td>\n  );\n};\n\nYear['displayName'] = 'Year';\n"],
+  "mappings": "AAsCM;AArCN,SAAS,cAAc;AAEvB,SAAS,kBAAkB;AAE3B,SAAS,SAAS,sBAAsB;AACxC,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,eAAe;AAGjB,MAAM,OAAO,CAAC,EAAE,KAAK,MAAwB;AAElD,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,EAAE,WAAW,UAAU,WAAW,YAAY,SAAS,WAAW,IACtE,QAAQ;AAAA,IACN;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU;AAAA,EACrB,IAAI,4BAA4B;AAChC,QAAM,iBAAiB,aAAa,YAAY;AAChD,QAAM,0BACJ,aAAa,mBAAmB,YAAY,aAAa;AAC3D,QAAM,YAAY,WAAW,MAAM,EAAE,MAAM,UAAU,CAAC;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,eAAe;AAAA,QACxB,OAAO;AAAA,QACP,YAAY,cAAc,YAAY;AAAA,MACxC,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,YAAY,cAAc;AAAA,UAC1B,gBAAgB;AAAA,UAChB;AAAA,UACA,MAAK;AAAA,UACL,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,gBAAa;AAAA,UACb,sBAAoB,SAAS,SAAS;AAAA,UAErC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,KAAK,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
-var borderColor = "var(--_1jljrbf1-3-4-0)";
-var rangeColor = "var(--_1jljrbf0-3-4-0)";
+var borderColor = "var(--_1jljrbf1-3-5-0)";
+var rangeColor = "var(--_1jljrbf0-3-5-0)";
 export {
   borderColor,
   rangeColor

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/variables.css.ts"],
-  "sourcesContent": ["export var borderColor = 'var(--_1jljrbf1-3-4-0)';\nexport var rangeColor = 'var(--_1jljrbf0-3-4-0)';"],
+  "sourcesContent": ["export var borderColor = 'var(--_1jljrbf1-3-5-0)';\nexport var rangeColor = 'var(--_1jljrbf0-3-5-0)';"],
   "mappings": "AAAO,IAAI,cAAc;AAClB,IAAI,aAAa;",
   "names": []
 }

package/esm/forms/calendar/views/SelectMonthView.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useMemo } from "react";
-import { calendarMonthRowCSS, calendarRowCSS } from "../Calendar.sty.js";
+import * as styles from "../Calendar.sty.js";
 import { Month } from "../components/Month.js";
 import { useSelectMonth } from "../hooks/useSelectMonth.js";
 import {
@@ -14,7 +14,7 @@ const SelectMonthView = () => {
     () => new Array(NUMBER_OF_MONTH_ROWS).fill(0).map((_, index) => /* @__PURE__ */ jsx(
       "tr",
       {
-        className: clsx([calendarRowCSS, calendarMonthRowCSS]),
+        className: clsx([styles.row, styles.monthRow]),
         children: months.slice(
           index * NUMBER_OF_MONTHS_PER_ROW,
           index * NUMBER_OF_MONTHS_PER_ROW + NUMBER_OF_MONTHS_PER_ROW

package/esm/forms/calendar/views/SelectMonthView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/views/SelectMonthView.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode, useMemo } from 'react';\n\nimport { calendarMonthRowCSS, calendarRowCSS } from '../Calendar.sty.js';\nimport { Month } from '../components/Month.js';\nimport { useSelectMonth } from '../hooks/useSelectMonth.js';\nimport {\n  NUMBER_OF_MONTH_ROWS,\n  NUMBER_OF_MONTHS_PER_ROW,\n} from '../types/calendarConfiguration.js';\n\n/**\n * SelectMonthView component\n * Renders a grid of buttons for selecting the month.\n * @internal\n */\nexport const SelectMonthView = () => {\n  const { months } = useSelectMonth();\n  const monthsToShow = useMemo(\n    (): ReactNode =>\n      new Array(NUMBER_OF_MONTH_ROWS).fill(0).map((_, index) => (\n        <tr\n          key={`${months[index]}-row-${index}`}\n          className={clsx([calendarRowCSS, calendarMonthRowCSS])}\n        >\n          {months\n            .slice(\n              index * NUMBER_OF_MONTHS_PER_ROW,\n              index * NUMBER_OF_MONTHS_PER_ROW + NUMBER_OF_MONTHS_PER_ROW,\n            )\n            .map((month) => (\n              <Month date={month} key={month.toISOString()} />\n            ))}\n        </tr>\n      )),\n    [months],\n  );\n\n  return <tbody>{monthsToShow}</tbody>;\n};\n\nSelectMonthView['displayName'] = 'SelectMonthView';\n"],
-  "mappings": "AA+Bc;AA/Bd,OAAO,UAAU;AACjB,SAAyB,eAAe;AAExC,SAAS,qBAAqB,sBAAsB;AACpD,SAAS,aAAa;AACtB,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOA,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,OAAO,IAAI,eAAe;AAClC,QAAM,eAAe;AAAA,IACnB,MACE,IAAI,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9C;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,KAAK,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,QAEpD,iBACE;AAAA,UACC,QAAQ;AAAA,UACR,QAAQ,2BAA2B;AAAA,QACrC,EACC,IAAI,CAAC,UACJ,oBAAC,SAAM,MAAM,SAAY,MAAM,YAAY,CAAG,CAC/C;AAAA;AAAA,MAVE,GAAG,OAAO,KAAK,CAAC,QAAQ,KAAK;AAAA,IAWpC,CACD;AAAA,IACH,CAAC,MAAM;AAAA,EACT;AAEA,SAAO,oBAAC,WAAO,wBAAa;AAC9B;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode, useMemo } from 'react';\n\nimport * as styles from '../Calendar.sty.js';\nimport { Month } from '../components/Month.js';\nimport { useSelectMonth } from '../hooks/useSelectMonth.js';\nimport {\n  NUMBER_OF_MONTH_ROWS,\n  NUMBER_OF_MONTHS_PER_ROW,\n} from '../types/calendarConfiguration.js';\n\n/**\n * SelectMonthView component\n * Renders a grid of buttons for selecting the month.\n * @internal\n */\nexport const SelectMonthView = () => {\n  const { months } = useSelectMonth();\n  const monthsToShow = useMemo(\n    (): ReactNode =>\n      new Array(NUMBER_OF_MONTH_ROWS).fill(0).map((_, index) => (\n        <tr\n          key={`${months[index]}-row-${index}`}\n          className={clsx([styles.row, styles.monthRow])}\n        >\n          {months\n            .slice(\n              index * NUMBER_OF_MONTHS_PER_ROW,\n              index * NUMBER_OF_MONTHS_PER_ROW + NUMBER_OF_MONTHS_PER_ROW,\n            )\n            .map((month) => (\n              <Month date={month} key={month.toISOString()} />\n            ))}\n        </tr>\n      )),\n    [months],\n  );\n\n  return <tbody>{monthsToShow}</tbody>;\n};\n\nSelectMonthView['displayName'] = 'SelectMonthView';\n"],
+  "mappings": "AA+Bc;AA/Bd,OAAO,UAAU;AACjB,SAAyB,eAAe;AAExC,YAAY,YAAY;AACxB,SAAS,aAAa;AACtB,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOA,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,OAAO,IAAI,eAAe;AAClC,QAAM,eAAe;AAAA,IACnB,MACE,IAAI,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9C;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,KAAK,CAAC,OAAO,KAAK,OAAO,QAAQ,CAAC;AAAA,QAE5C,iBACE;AAAA,UACC,QAAQ;AAAA,UACR,QAAQ,2BAA2B;AAAA,QACrC,EACC,IAAI,CAAC,UACJ,oBAAC,SAAM,MAAM,SAAY,MAAM,YAAY,CAAG,CAC/C;AAAA;AAAA,MAVE,GAAG,OAAO,KAAK,CAAC,QAAQ,KAAK;AAAA,IAWpC,CACD;AAAA,IACH,CAAC,MAAM;AAAA,EACT;AAEA,SAAO,oBAAC,WAAO,wBAAa;AAC9B;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

package/esm/forms/calendar/views/SelectYearView.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useMemo } from "react";
-import { calendarRowCSS, calendarYearRowCSS } from "../Calendar.sty.js";
+import * as styles from "../Calendar.sty.js";
 import { Year } from "../components/Year.js";
 import { useSelectYear } from "../hooks/useSelectYear.js";
 import {
@@ -14,7 +14,7 @@ const SelectYearView = () => {
     () => new Array(NUMBER_OF_YEAR_ROWS).fill(0).map((_, index) => /* @__PURE__ */ jsx(
       "tr",
       {
-        className: clsx([calendarRowCSS, calendarYearRowCSS]),
+        className: clsx([styles.row, styles.yearRow]),
         children: years.slice(
           index * NUMBER_OF_YEARS_PER_ROW,
           index * NUMBER_OF_YEARS_PER_ROW + NUMBER_OF_YEARS_PER_ROW

package/esm/forms/calendar/views/SelectYearView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/views/SelectYearView.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode, useMemo } from 'react';\n\nimport { calendarRowCSS, calendarYearRowCSS } from '../Calendar.sty.js';\nimport { Year } from '../components/Year.js';\nimport { useSelectYear } from '../hooks/useSelectYear.js';\nimport {\n  NUMBER_OF_YEAR_ROWS,\n  NUMBER_OF_YEARS_PER_ROW,\n} from '../types/calendarConfiguration.js';\n\n/**\n * SelectYearView component\n * Renders a grid of buttons for selecting the year.\n * @internal\n */\nexport const SelectYearView = () => {\n  const { years } = useSelectYear();\n\n  const yearsToShow = useMemo(\n    (): ReactNode =>\n      new Array(NUMBER_OF_YEAR_ROWS).fill(0).map((_, index) => (\n        <tr\n          key={`${years[index]}-row-${index}`}\n          className={clsx([calendarRowCSS, calendarYearRowCSS])}\n        >\n          {years\n            .slice(\n              index * NUMBER_OF_YEARS_PER_ROW,\n              index * NUMBER_OF_YEARS_PER_ROW + NUMBER_OF_YEARS_PER_ROW,\n            )\n            .map((year) => (\n              <Year date={year} key={year.toISOString()} />\n            ))}\n        </tr>\n      )),\n    [years],\n  );\n\n  return <tbody>{yearsToShow}</tbody>;\n};\n\nSelectYearView['displayName'] = 'SelectYearView';\n"],
-  "mappings": "AAgCc;AAhCd,OAAO,UAAU;AACjB,SAAyB,eAAe;AAExC,SAAS,gBAAgB,0BAA0B;AACnD,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOA,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,MAAM,IAAI,cAAc;AAEhC,QAAM,cAAc;AAAA,IAClB,MACE,IAAI,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAC7C;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,KAAK,CAAC,gBAAgB,kBAAkB,CAAC;AAAA,QAEnD,gBACE;AAAA,UACC,QAAQ;AAAA,UACR,QAAQ,0BAA0B;AAAA,QACpC,EACC,IAAI,CAAC,SACJ,oBAAC,QAAK,MAAM,QAAW,KAAK,YAAY,CAAG,CAC5C;AAAA;AAAA,MAVE,GAAG,MAAM,KAAK,CAAC,QAAQ,KAAK;AAAA,IAWnC,CACD;AAAA,IACH,CAAC,KAAK;AAAA,EACR;AAEA,SAAO,oBAAC,WAAO,uBAAY;AAC7B;AAEA,eAAe,aAAa,IAAI;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode, useMemo } from 'react';\n\nimport * as styles from '../Calendar.sty.js';\nimport { Year } from '../components/Year.js';\nimport { useSelectYear } from '../hooks/useSelectYear.js';\nimport {\n  NUMBER_OF_YEAR_ROWS,\n  NUMBER_OF_YEARS_PER_ROW,\n} from '../types/calendarConfiguration.js';\n\n/**\n * SelectYearView component\n * Renders a grid of buttons for selecting the year.\n * @internal\n */\nexport const SelectYearView = () => {\n  const { years } = useSelectYear();\n\n  const yearsToShow = useMemo(\n    (): ReactNode =>\n      new Array(NUMBER_OF_YEAR_ROWS).fill(0).map((_, index) => (\n        <tr\n          key={`${years[index]}-row-${index}`}\n          className={clsx([styles.row, styles.yearRow])}\n        >\n          {years\n            .slice(\n              index * NUMBER_OF_YEARS_PER_ROW,\n              index * NUMBER_OF_YEARS_PER_ROW + NUMBER_OF_YEARS_PER_ROW,\n            )\n            .map((year) => (\n              <Year date={year} key={year.toISOString()} />\n            ))}\n        </tr>\n      )),\n    [years],\n  );\n\n  return <tbody>{yearsToShow}</tbody>;\n};\n\nSelectYearView['displayName'] = 'SelectYearView';\n"],
+  "mappings": "AAgCc;AAhCd,OAAO,UAAU;AACjB,SAAyB,eAAe;AAExC,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOA,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,MAAM,IAAI,cAAc;AAEhC,QAAM,cAAc;AAAA,IAClB,MACE,IAAI,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAC7C;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,KAAK,CAAC,OAAO,KAAK,OAAO,OAAO,CAAC;AAAA,QAE3C,gBACE;AAAA,UACC,QAAQ;AAAA,UACR,QAAQ,0BAA0B;AAAA,QACpC,EACC,IAAI,CAAC,SACJ,oBAAC,QAAK,MAAM,QAAW,KAAK,YAAY,CAAG,CAC5C;AAAA;AAAA,MAVE,GAAG,MAAM,KAAK,CAAC,QAAQ,KAAK;AAAA,IAWnC,CACD;AAAA,IACH,CAAC,KAAK;AAAA,EACR;AAEA,SAAO,oBAAC,WAAO,uBAAY;AAC7B;AAEA,eAAe,aAAa,IAAI;",
   "names": []
 }

package/esm/forms/checkbox/Checkbox.css

@@ -1,67 +1,67 @@
-._qmw7sp0-3-4-0 {
+._qmw7sp0-3-5-0 {
   display: flex;
   cursor: pointer;
 }
-._qmw7sp1-3-4-0 {
+._qmw7sp1-3-5-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._qmw7sp2-3-4-0:after {
+._qmw7sp2-3-5-0:after {
   content: "*";
 }
-._qmw7sp3-3-4-0 {
+._qmw7sp3-3-5-0 {
   cursor: default;
 }
-._qmw7sp4-3-4-0 {
+._qmw7sp4-3-5-0 {
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
-  background-color: var(--_bx32h3-3-4-0);
+  background-color: var(--_bx32h3-3-5-0);
   flex-shrink: 0;
   box-sizing: border-box;
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._qmw7sp5-3-4-0 {
+._qmw7sp5-3-5-0 {
   margin-right: var(--dt-spacings-size-8, 8px);
 }
-._qmw7sp6-3-4-0 {
+._qmw7sp6-3-5-0 {
   margin-right: 0;
 }
-._qmw7spg-3-4-0 {
+._qmw7spg-3-5-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._qmw7spg-3-4-0:not(:has(:focus-visible)) {
+._qmw7spg-3-5-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._qmw7sph-3-4-0 {
+._qmw7sph-3-5-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._qmw7sph-3-4-0:not(:has(:focus-visible)) {
+._qmw7sph-3-5-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._qmw7spi-3-4-0:not(:has(:focus-visible)) {
+._qmw7spi-3-5-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._qmw7spj-3-4-0:not(:has(:focus-visible)) {
+._qmw7spj-3-5-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._qmw7spk-3-4-0:not(:has(:focus-visible)) {
+._qmw7spk-3-5-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._qmw7spl-3-4-0:not(:has(:focus-visible)) {
+._qmw7spl-3-5-0:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._qmw7spm-3-4-0 {
+._qmw7spm-3-5-0 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  color: var(--_bx32h1-3-4-0);
+  color: var(--_bx32h1-3-5-0);
 }
-._qmw7spn-3-4-0 {
+._qmw7spn-3-5-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._qmw7spp-3-4-0 {
+._qmw7spp-3-5-0 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/esm/forms/checkbox/Checkbox.sty.js

@@ -2,9 +2,9 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Checkbox.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var checkboxIconCSS = _7a468({ defaultClassName: "_qmw7spm-3-4-0", variantClassNames: { readOnly: { true: "_qmw7spn-3-4-0" }, hasError: { true: "_qmw7spo-3-4-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-4-0"]] });
-var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-4-0", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-4-0", false: "_qmw7sp6-3-4-0" }, disabled: { true: "_qmw7sp7-3-4-0", false: "_qmw7sp8-3-4-0" }, hasError: { true: "_qmw7sp9-3-4-0", false: "_qmw7spa-3-4-0" }, checked: { true: "_qmw7spb-3-4-0", false: "_qmw7spc-3-4-0", indeterminate: "_qmw7spd-3-4-0", undefined: "_qmw7spe-3-4-0" }, readOnly: { true: "_qmw7spf-3-4-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-4-0"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-4-0"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-4-0"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-4-0"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-4-0"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-4-0"]] });
-var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-4-0", variantClassNames: { disabled: { true: "_qmw7sp1-3-4-0" }, required: { true: "_qmw7sp2-3-4-0" }, readOnly: { true: "_qmw7sp3-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var checkboxIconCSS = _7a468({ defaultClassName: "_qmw7spm-3-5-0", variantClassNames: { readOnly: { true: "_qmw7spn-3-5-0" }, hasError: { true: "_qmw7spo-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-5-0"]] });
+var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-5-0", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-5-0", false: "_qmw7sp6-3-5-0" }, disabled: { true: "_qmw7sp7-3-5-0", false: "_qmw7sp8-3-5-0" }, hasError: { true: "_qmw7sp9-3-5-0", false: "_qmw7spa-3-5-0" }, checked: { true: "_qmw7spb-3-5-0", false: "_qmw7spc-3-5-0", indeterminate: "_qmw7spd-3-5-0", undefined: "_qmw7spe-3-5-0" }, readOnly: { true: "_qmw7spf-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-5-0"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-5-0"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-5-0"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-5-0"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-5-0"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-5-0"]] });
+var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-5-0", variantClassNames: { disabled: { true: "_qmw7sp1-3-5-0" }, required: { true: "_qmw7sp2-3-5-0" }, readOnly: { true: "_qmw7sp3-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   checkboxIconCSS,
   checkboxKnobCSS,

package/esm/forms/checkbox/Checkbox.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/checkbox/Checkbox.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Checkbox.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checkboxIconCSS = _7a468({defaultClassName:'_qmw7spm-3-4-0',variantClassNames:{readOnly:{true:'_qmw7spn-3-4-0'},hasError:{true:'_qmw7spo-3-4-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-4-0']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-4-0',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-4-0',false:'_qmw7sp6-3-4-0'},disabled:{true:'_qmw7sp7-3-4-0',false:'_qmw7sp8-3-4-0'},hasError:{true:'_qmw7sp9-3-4-0',false:'_qmw7spa-3-4-0'},checked:{true:'_qmw7spb-3-4-0',false:'_qmw7spc-3-4-0',indeterminate:'_qmw7spd-3-4-0',undefined:'_qmw7spe-3-4-0'},readOnly:{true:'_qmw7spf-3-4-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-4-0'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-4-0'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-4-0'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-4-0'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-4-0'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-4-0']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-4-0',variantClassNames:{disabled:{true:'_qmw7sp1-3-4-0'},required:{true:'_qmw7sp2-3-4-0'},readOnly:{true:'_qmw7sp3-3-4-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Checkbox.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checkboxIconCSS = _7a468({defaultClassName:'_qmw7spm-3-5-0',variantClassNames:{readOnly:{true:'_qmw7spn-3-5-0'},hasError:{true:'_qmw7spo-3-5-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-5-0']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-5-0',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-5-0',false:'_qmw7sp6-3-5-0'},disabled:{true:'_qmw7sp7-3-5-0',false:'_qmw7sp8-3-5-0'},hasError:{true:'_qmw7sp9-3-5-0',false:'_qmw7spa-3-5-0'},checked:{true:'_qmw7spb-3-5-0',false:'_qmw7spc-3-5-0',indeterminate:'_qmw7spd-3-5-0',undefined:'_qmw7spe-3-5-0'},readOnly:{true:'_qmw7spf-3-5-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-5-0'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-5-0'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-5-0'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-5-0'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-5-0'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-5-0']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-5-0',variantClassNames:{disabled:{true:'_qmw7sp1-3-5-0'},required:{true:'_qmw7sp2-3-5-0'},readOnly:{true:'_qmw7sp3-3-5-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAC7O,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,OAAM,kBAAiB,eAAc,kBAAiB,WAAU,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,MAAK,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,OAAM,SAAQ,OAAM,UAAS,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACv0B,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/date-time-picker/DateSelector.js

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl";
 import { CalendarIcon } from "@dynatrace/strato-icons";
 import { Button } from "../../buttons/button/Button.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
+import { isVisualRefreshEnabled } from "../../core/utils/is-visual-refresh-enabled.js";
 import { useOverlayWithTrigger } from "../../overlays/hooks/useOverlayWithTrigger.js";
 import { Overlay } from "../../overlays/overlay/Overlay.js";
 import { globalSprinkles } from "../../styles/safe-sprinkles.js";
@@ -71,6 +72,7 @@ const DateSelector = forwardRef(
           ...overlayTriggerProps,
           size: "condensed",
           color: error ? "critical" : "neutral",
+          variant: isVisualRefreshEnabled() ? "emphasized" : "default",
           "data-dt-name": "ShowCalendar",
           children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(CalendarIcon, {}) })
         }

package/esm/forms/date-time-picker/DateSelector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateSelector.tsx"],
-  "sourcesContent": ["import { forwardRef, useImperativeHandle, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport type { DateSelectorProps, DateSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateSelector = forwardRef<DateSelectorRef, DateSelectorProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled,\n      error,\n      readOnly,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-disabled': ariaDisabledProp,\n      ...remainingProps\n    } = props;\n    const [open, setOpen] = useState(false);\n\n    const {\n      targetRef,\n      triggerRef,\n      overlayRef,\n      overlayState,\n      overlayProps,\n      overlayTriggerProps,\n    } = useOverlayWithTrigger({\n      placement: 'bottom-end',\n      offset: 8,\n      trapFocus: false,\n      shouldCloseOnBlur: false,\n      open,\n      onOpenChange: setOpen,\n      // the overlay should not open when disabled or readOnly\n      disabled: disabled || readOnly,\n    });\n\n    const rootRef = useMergeRefs<HTMLButtonElement>([triggerRef, targetRef]);\n    const intl = useIntl();\n    const calendarInputLabel = intl.formatMessage({\n      defaultMessage: 'Calendar for picking a date',\n      id: 'qpf+aqg3hXoviypu',\n      description:\n        'Aria label for the DateTimePicker calendar input used for form validation.',\n    });\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateSelectorRef => ({\n        open: () => setOpen(true),\n        close: () => setOpen(false),\n      }),\n      [],\n    );\n\n    const { state: formFieldState } = useFormFieldMessagesContext();\n\n    return (\n      <>\n        <Button\n          ref={rootRef}\n          data-testid={dataTestId}\n          className={consumerClassName}\n          aria-disabled={ariaDisabledProp}\n          style={consumerStyle}\n          {...remainingProps}\n          {...overlayTriggerProps}\n          size=\"condensed\"\n          color={error ? 'critical' : 'neutral'}\n          data-dt-name=\"ShowCalendar\"\n        >\n          <Button.Prefix>\n            <CalendarIcon />\n          </Button.Prefix>\n        </Button>\n        <Overlay\n          ref={overlayRef}\n          isOpen={overlayState.isOpen}\n          className={globalSprinkles({\n            paddingLeft: 16,\n            paddingTop: 16,\n            paddingRight: 16,\n            paddingBottom: 16,\n          })}\n          overlayProps={overlayProps}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Calendar overlay for picking a date',\n            id: 'A9Pdb5T48IHfEauq',\n            description: 'Aria label for the date time picker overlay.',\n          })}\n        >\n          {/* The Calendar should not consume any validation context to not dispatch any errors. We still want the errorstate to adjust the day highlighting. */}\n          <FormFieldMessageContext.Provider\n            value={{\n              state: {\n                customMessages: [],\n                formControlMessages: [],\n                showError: formFieldState.showError,\n              },\n            }}\n          >\n            <CalendarRoot\n              aria-label={calendarInputLabel}\n              aria-disabled={ariaDisabledProp}\n            />\n          </FormFieldMessageContext.Provider>\n        </Overlay>\n      </>\n    );\n  },\n);\n"],
-  "mappings": "AAyEM,mBAcM,KAdN;AAzEN,SAAS,YAAY,qBAAqB,gBAAgB;AAC1D,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAKrC,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,sBAAsB;AAAA,MACxB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB;AAAA,MACA,cAAc;AAAA;AAAA,MAEd,UAAU,YAAY;AAAA,IACxB,CAAC;AAED,UAAM,UAAU,aAAgC,CAAC,YAAY,SAAS,CAAC;AACvE,UAAM,OAAO,QAAQ;AACrB,UAAM,qBAAqB,KAAK,cAAc;AAAA,MAC5C,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aACE;AAAA,IACJ,CAAC;AAED;AAAA,MACE;AAAA,MACA,OAAwB;AAAA,QACtB,MAAM,MAAM,QAAQ,IAAI;AAAA,QACxB,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC5B;AAAA,MACA,CAAC;AAAA,IACH;AAEA,UAAM,EAAE,OAAO,eAAe,IAAI,4BAA4B;AAE9D,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAa;AAAA,UACb,WAAW;AAAA,UACX,iBAAe;AAAA,UACf,OAAO;AAAA,UACN,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,MAAK;AAAA,UACL,OAAO,QAAQ,aAAa;AAAA,UAC5B,gBAAa;AAAA,UAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,QAAQ,aAAa;AAAA,UACrB,WAAW,gBAAgB;AAAA,YACzB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,cAAc;AAAA,YACd,eAAe;AAAA,UACjB,CAAC;AAAA,UACD;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,cAAY,KAAK,cAAc;AAAA,YAC7B,gBAAgB;AAAA,YAChB,IAAI;AAAA,YACJ,aAAa;AAAA,UACf,CAAC;AAAA,UAGD;AAAA,YAAC,wBAAwB;AAAA,YAAxB;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,kBACL,gBAAgB,CAAC;AAAA,kBACjB,qBAAqB,CAAC;AAAA,kBACtB,WAAW,eAAe;AAAA,gBAC5B;AAAA,cACF;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,iBAAe;AAAA;AAAA,cACjB;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import { forwardRef, useImperativeHandle, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport type { DateSelectorProps, DateSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isVisualRefreshEnabled } from '../../core/utils/is-visual-refresh-enabled.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateSelector = forwardRef<DateSelectorRef, DateSelectorProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled,\n      error,\n      readOnly,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-disabled': ariaDisabledProp,\n      ...remainingProps\n    } = props;\n    const [open, setOpen] = useState(false);\n\n    const {\n      targetRef,\n      triggerRef,\n      overlayRef,\n      overlayState,\n      overlayProps,\n      overlayTriggerProps,\n    } = useOverlayWithTrigger({\n      placement: 'bottom-end',\n      offset: 8,\n      trapFocus: false,\n      shouldCloseOnBlur: false,\n      open,\n      onOpenChange: setOpen,\n      // the overlay should not open when disabled or readOnly\n      disabled: disabled || readOnly,\n    });\n\n    const rootRef = useMergeRefs<HTMLButtonElement>([triggerRef, targetRef]);\n    const intl = useIntl();\n    const calendarInputLabel = intl.formatMessage({\n      defaultMessage: 'Calendar for picking a date',\n      id: 'qpf+aqg3hXoviypu',\n      description:\n        'Aria label for the DateTimePicker calendar input used for form validation.',\n    });\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateSelectorRef => ({\n        open: () => setOpen(true),\n        close: () => setOpen(false),\n      }),\n      [],\n    );\n\n    const { state: formFieldState } = useFormFieldMessagesContext();\n\n    return (\n      <>\n        <Button\n          ref={rootRef}\n          data-testid={dataTestId}\n          className={consumerClassName}\n          aria-disabled={ariaDisabledProp}\n          style={consumerStyle}\n          {...remainingProps}\n          {...overlayTriggerProps}\n          size=\"condensed\"\n          color={error ? 'critical' : 'neutral'}\n          variant={isVisualRefreshEnabled() ? 'emphasized' : 'default'}\n          data-dt-name=\"ShowCalendar\"\n        >\n          <Button.Prefix>\n            <CalendarIcon />\n          </Button.Prefix>\n        </Button>\n        <Overlay\n          ref={overlayRef}\n          isOpen={overlayState.isOpen}\n          className={globalSprinkles({\n            paddingLeft: 16,\n            paddingTop: 16,\n            paddingRight: 16,\n            paddingBottom: 16,\n          })}\n          overlayProps={overlayProps}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Calendar overlay for picking a date',\n            id: 'A9Pdb5T48IHfEauq',\n            description: 'Aria label for the date time picker overlay.',\n          })}\n        >\n          {/* The Calendar should not consume any validation context to not dispatch any errors. We still want the errorstate to adjust the day highlighting. */}\n          <FormFieldMessageContext.Provider\n            value={{\n              state: {\n                customMessages: [],\n                formControlMessages: [],\n                showError: formFieldState.showError,\n              },\n            }}\n          >\n            <CalendarRoot\n              aria-label={calendarInputLabel}\n              aria-disabled={ariaDisabledProp}\n            />\n          </FormFieldMessageContext.Provider>\n        </Overlay>\n      </>\n    );\n  },\n);\n"],
+  "mappings": "AA0EM,mBAeM,KAfN;AA1EN,SAAS,YAAY,qBAAqB,gBAAgB;AAC1D,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAKrC,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,sBAAsB;AAAA,MACxB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB;AAAA,MACA,cAAc;AAAA;AAAA,MAEd,UAAU,YAAY;AAAA,IACxB,CAAC;AAED,UAAM,UAAU,aAAgC,CAAC,YAAY,SAAS,CAAC;AACvE,UAAM,OAAO,QAAQ;AACrB,UAAM,qBAAqB,KAAK,cAAc;AAAA,MAC5C,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aACE;AAAA,IACJ,CAAC;AAED;AAAA,MACE;AAAA,MACA,OAAwB;AAAA,QACtB,MAAM,MAAM,QAAQ,IAAI;AAAA,QACxB,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC5B;AAAA,MACA,CAAC;AAAA,IACH;AAEA,UAAM,EAAE,OAAO,eAAe,IAAI,4BAA4B;AAE9D,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAa;AAAA,UACb,WAAW;AAAA,UACX,iBAAe;AAAA,UACf,OAAO;AAAA,UACN,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,MAAK;AAAA,UACL,OAAO,QAAQ,aAAa;AAAA,UAC5B,SAAS,uBAAuB,IAAI,eAAe;AAAA,UACnD,gBAAa;AAAA,UAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,QAAQ,aAAa;AAAA,UACrB,WAAW,gBAAgB;AAAA,YACzB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,cAAc;AAAA,YACd,eAAe;AAAA,UACjB,CAAC;AAAA,UACD;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,cAAY,KAAK,cAAc;AAAA,YAC7B,gBAAgB;AAAA,YAChB,IAAI;AAAA,YACJ,aAAa;AAAA,UACf,CAAC;AAAA,UAGD;AAAA,YAAC,wBAAwB;AAAA,YAAxB;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,kBACL,gBAAgB,CAAC;AAAA,kBACjB,qBAAqB,CAAC;AAAA,kBACtB,WAAW,eAAe;AAAA,gBAC5B;AAAA,cACF;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,iBAAe;AAAA;AAAA,cACjB;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;",
   "names": []
 }

package/esm/forms/date-time-picker/DateTimePicker.css

@@ -1,94 +1,122 @@
-._1i883gj7-3-4-0 {
-  --_1i883gj0-3-4-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_1i883gj1-3-4-0: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_1i883gj2-3-4-0: var(--_1i883gj0-3-4-0);
-  --_1i883gj3-3-4-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1i883gj4-3-4-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
-  --_1i883gj5-3-4-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj6-3-4-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj7-3-5-0 {
+  --_1i883gj0-3-5-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_1i883gj1-3-5-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_1i883gj2-3-5-0: var(--_1i883gj0-3-5-0);
+  --_1i883gj3-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1i883gj4-3-5-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+  --_1i883gj5-3-5-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj6-3-5-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: text;
 }
-._1i883gj8-3-4-0 {
-  --_1i883gj5-3-4-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj6-3-4-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
-  --_1i883gj2-3-4-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-4-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-4-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1jgl8s50-3-5-0 ._1i883gj7-3-5-0 {
+  --_1i883gj3-3-5-0: var(--dt-colors-background-surface-default, #fff);
+}
+._1i883gj8-3-5-0 {
+  --_1i883gj5-3-5-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj6-3-5-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+  --_1i883gj2-3-5-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-5-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj4-3-5-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._1i883gj9-3-4-0 {
-  --_1i883gj0-3-4-0: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj1-3-4-0: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj3-3-4-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_1i883gj4-3-4-0: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
-  --_1i883gj5-3-4-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_1i883gj6-3-4-0: var(--dt-colors-background-field-critical-accent, #c62239);
-}
-._1i883gja-3-4-0 {
-  --_1i883gj0-3-4-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj1-3-4-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-4-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-4-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj5-3-4-0: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
-  --_1i883gj6-3-4-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1jgl8s50-3-5-0 ._1i883gj8-3-5-0 {
+  --_1i883gj3-3-5-0: var(--dt-colors-background-surface-default, #fff);
+  --_1i883gj4-3-5-0: var(--dt-colors-background-surface-default, #fff);
+}
+._1i883gj9-3-5-0 {
+  --_1i883gj0-3-5-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj1-3-5-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj3-3-5-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_1i883gj4-3-5-0: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+  --_1i883gj5-3-5-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_1i883gj6-3-5-0: var(--dt-colors-background-field-critical-accent, #c62239);
+}
+._1jgl8s50-3-5-0 ._1i883gj9-3-5-0 {
+  --_1i883gj3-3-5-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._1i883gja-3-5-0 {
+  --_1i883gj0-3-5-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj1-3-5-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-5-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj4-3-5-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj5-3-5-0: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
+  --_1i883gj6-3-5-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: not-allowed;
 }
-._1i883gjc-3-4-0 {
+._1i883gjc-3-5-0 {
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1i883gje-3-4-0 {
-  --_1i883gj2-3-4-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-4-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_1i883gj4-3-4-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+._1i883gje-3-5-0 {
+  --_1i883gj2-3-5-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-5-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_1i883gj4-3-5-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+}
+._1jgl8s50-3-5-0 ._1i883gje-3-5-0 {
+  --_1i883gj3-3-5-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1i883gjf-3-4-0 {
+._1i883gjf-3-5-0 {
   display: flex;
   flex: 1;
-  color: var(--_1i883gj1-3-4-0);
+  color: var(--_1i883gj1-3-5-0);
   white-space-collapse: preserve;
 }
-._1i883gjg-3-4-0 {
+._1i883gjg-3-5-0 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-8, 8px);
   border-radius: 0;
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
-  color: var(--_1i883gj2-3-4-0);
-  background-color: var(--_1i883gj3-3-4-0);
+  color: var(--_1i883gj2-3-5-0);
+  background-color: var(--_1i883gj3-3-5-0);
+}
+._1i883gjg-3-5-0:hover {
+  background-color: var(--_1i883gj4-3-5-0);
+}
+._r47o0w0-3-5-0 ._r47o0w1-3-5-0 {
+  color: var(--_1i883gj0-3-5-0);
+}
+._r47o0w0-3-5-0 ._r47o0w1-3-5-0::before {
+  color: var(--_1i883gj1-3-5-0);
 }
-._1i883gjg-3-4-0:hover {
-  background-color: var(--_1i883gj4-3-4-0);
+._r47o0w0-3-5-0 ._r47o0w1-3-5-0:focus {
+  background-color: var(--_1i883gj6-3-5-0);
+  color: var(--_1i883gj5-3-5-0);
 }
-._r47o0w0-3-4-0 ._r47o0w1-3-4-0 {
-  color: var(--_1i883gj0-3-4-0);
+._r47o0w0-3-5-0 ._r47o0w1-3-5-0:focus::before {
+  color: var(--_1i883gj5-3-5-0);
 }
-._r47o0w0-3-4-0 ._r47o0w1-3-4-0::before {
-  color: var(--_1i883gj1-3-4-0);
+._r47o0w0-3-5-0 *::selection {
+  background-color: transparent;
 }
-._r47o0w0-3-4-0 ._r47o0w1-3-4-0:focus {
-  background-color: var(--_1i883gj6-3-4-0);
-  color: var(--_1i883gj5-3-4-0);
+._r47o0w0-3-5-0 ._r47o0w1-3-5-0:focus::selection, ._r47o0w0-3-5-0 ._r47o0w1-3-5-0:focus *::selection {
+  background-color: transparent;
+  color: var(--_1i883gj5-3-5-0);
 }
-._r47o0w0-3-4-0 ._r47o0w1-3-4-0:focus::before {
-  color: var(--_1i883gj5-3-4-0);
+._r47o0w0-3-5-0 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-5-0[data-drag-selected]::before {
+  background-color: var(--_1i883gj6-3-5-0);
+  color: var(--_1i883gj5-3-5-0);
 }
-._r47o0w0-3-4-0 *::selection {
-  color: var(--_1i883gj5-3-4-0);
-  background-color: var(--_1i883gj6-3-4-0);
+._r47o0w0-3-5-0 [data-drag-selected]::selection, ._r47o0w0-3-5-0 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
+  background-color: transparent;
 }
-[data-shift-selection] ._r47o0w1-3-4-0:focus {
+[data-shift-selection=true] ._r47o0w1-3-5-0:focus {
   background-color: transparent;
-  color: var(--_1i883gj0-3-4-0);
+  color: var(--_1i883gj0-3-5-0);
   caret-color: auto;
 }
-[data-shift-selection] ._r47o0w1-3-4-0:focus::before {
-  color: var(--_1i883gj1-3-4-0);
+[data-shift-selection=true] ._r47o0w1-3-5-0:focus::before {
+  color: var(--_1i883gj1-3-5-0);
 }
-._1i883gjh-3-4-0 {
+._1i883gjh-3-5-0 {
   position: absolute;
   top: var(--dt-spacings-size-4, 4px);
   right: var(--dt-spacings-size-4, 4px);
 }
-._1i883gjh-3-4-0:is(button._1i883gjh-3-4-0._1i883gjh-3-4-0) {
+._1i883gjh-3-5-0:is(button._1i883gjh-3-5-0._1i883gjh-3-5-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
+}
+._1jgl8s50-3-5-0 ._1i883gjh-3-5-0._1i883gjh-3-5-0._1i883gjh-3-5-0 {
+  position: absolute;
+  margin: var(--dt-spacings-size-0, 0);
+  z-index: 0;
 }