@dynatrace/strato-components 3.12.1 → 3.13.0

package/esm/forms/calendar/components/CalendarOutlineIcon.css

@@ -1,24 +1,24 @@
-._1uazq660-3-12-1 {
+._1uazq660-3-13-0 {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   overflow: visible;
-  fill: var(--_1jljrbf1-3-12-1);
+  fill: var(--_1jljrbf1-3-13-0);
 }
-._1uazq661-3-12-1 {
-  fill: var(--_1jljrbf1-3-12-1);
+._1uazq661-3-13-0 {
+  fill: var(--_1jljrbf1-3-13-0);
 }
-._1uazq662-3-12-1 {
+._1uazq662-3-13-0 {
   fill: var(--dt-colors-background-surface-default, #fff);
 }
-._1uazq663-3-12-1 {
-  fill: var(--_1jljrbf0-3-12-1);
+._1uazq663-3-13-0 {
+  fill: var(--_1jljrbf0-3-13-0);
   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-12-1 {
+._1uazq664-3-13-0 {
   opacity: 1;
 }

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

@@ -1,9 +1,9 @@
 import "./CalendarOutlineIcon.css";
-var calendarIndicatorBackgroundCSS = "_1uazq662-3-12-1";
-var calendarIndicatorCSS = "_1uazq661-3-12-1";
-var calendarOutlineCSS = "_1uazq660-3-12-1";
-var calendarRangeCornersCSS = "_1uazq663-3-12-1";
-var calendarRangeCornorVisibleCSS = "_1uazq664-3-12-1";
+var calendarIndicatorBackgroundCSS = "_1uazq662-3-13-0";
+var calendarIndicatorCSS = "_1uazq661-3-13-0";
+var calendarOutlineCSS = "_1uazq660-3-13-0";
+var calendarRangeCornersCSS = "_1uazq663-3-13-0";
+var calendarRangeCornorVisibleCSS = "_1uazq664-3-13-0";
 export {
   calendarIndicatorBackgroundCSS,
   calendarIndicatorCSS,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/CalendarOutlineIcon.css.ts"],
-  "sourcesContent": ["import './CalendarOutlineIcon.css';\nexport var calendarIndicatorBackgroundCSS = '_1uazq662-3-12-1';\nexport var calendarIndicatorCSS = '_1uazq661-3-12-1';\nexport var calendarOutlineCSS = '_1uazq660-3-12-1';\nexport var calendarRangeCornersCSS = '_1uazq663-3-12-1';\nexport var calendarRangeCornorVisibleCSS = '_1uazq664-3-12-1';"],
+  "sourcesContent": ["import './CalendarOutlineIcon.css';\nexport var calendarIndicatorBackgroundCSS = '_1uazq662-3-13-0';\nexport var calendarIndicatorCSS = '_1uazq661-3-13-0';\nexport var calendarOutlineCSS = '_1uazq660-3-13-0';\nexport var calendarRangeCornersCSS = '_1uazq663-3-13-0';\nexport var calendarRangeCornorVisibleCSS = '_1uazq664-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iCAAiC;AACrC,IAAI,uBAAuB;AAC3B,IAAI,qBAAqB;AACzB,IAAI,0BAA0B;AAC9B,IAAI,gCAAgC;",
   "names": []
 }

package/esm/forms/calendar/hooks/useCalendar.js

@@ -8,8 +8,7 @@ import { useCalendarStore } from "../../../core/time/timeframeStore/useTimeframe
 import { initialState as defaultState } from "../contexts/CalendarContext.js";
 import { reducer } from "../state/calendar-state-reducer.js";
 function useCalendar({
-  // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment
-  // @ts-ignore Strict mode transition - needs to be investigated
+  // @ts-expect-error: Strict mode transition — the default value `'single'` is not assignable to the generic `type` parameter constrained by `Type extends CalendarType`
   type = "single"
 }) {
   const uniqueId = useId();

package/esm/forms/calendar/hooks/useCalendar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/hooks/useCalendar.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { isValid, startOfDay } from 'date-fns';\nimport { useReducer } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useId } from '../../../core/hooks/useId.js';\nimport { isTimeValue } from '../../../core/time/helpers.js';\nimport { useCalendarStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type {\n  CalendarProps,\n  CalendarStrictValueType,\n} from '../Calendar.types.js';\nimport { initialState as defaultState } from '../contexts/CalendarContext.js';\nimport { reducer } from '../state/calendar-state-reducer.js';\nimport { type CalendarType } from '../types/calendarConfiguration.js';\nimport type { CalendarState } from '../types/shared-types.js';\n\n//#region types\n/** @internal */\nexport type UseCalendarProps<Type extends CalendarType> = Pick<\n  CalendarProps<Type>,\n  'onChange' | 'type' | 'precision'\n> & {\n  value: CalendarStrictValueType<Type>;\n};\n//#endregion\n\n/**\n * Calendar hook to initialize the calendar state and update it to prop changes.\n * @internal\n */\nexport function useCalendar<Type extends CalendarType>({\n  // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n  // @ts-ignore Strict mode transition - needs to be investigated\n  type = 'single',\n}: UseCalendarProps<Type>) {\n  const uniqueId = useId();\n  // All parse times here need to use the same _now_ date, to not be subject\n  // to millisecond differences during parsing.\n  const configuredTimezone = getTimezone();\n\n  const calendarValue = useCalendarStore((state) => state.calendarValue);\n\n  const activeISODate = isTimeValue(calendarValue)\n    ? calendarValue?.absoluteDate\n    : calendarValue?.from?.absoluteDate;\n\n  const today = startOfDay(TZDateMini.tz(configuredTimezone));\n\n  const parsedActiveDate = new TZDateMini(\n    activeISODate ?? today.toISOString(),\n    configuredTimezone,\n  );\n\n  const initialState: CalendarState = {\n    ...defaultState,\n    type,\n    activeDate: isValid(parsedActiveDate) ? parsedActiveDate : today,\n  };\n\n  const [state, dispatch] = useReducer(\n    reducer,\n    // activeDate might be undefined but will be set in the initializer, to ensure the correct timezone.\n    initialState,\n    (state: CalendarState) => {\n      // Make sure the state initializes with a new TZDateMini when the component is created\n      // instead of on the module scope.\n      // Extract the user-settings timezone to use for the calculation\n\n      return {\n        ...state,\n        activeDate: state.activeDate ?? today,\n        today,\n      };\n    },\n  );\n\n  return { state, dispatch, uniqueId };\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,SAAS,kBAAkB;AACpC,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAE5B,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAKjC,SAAS,gBAAgB,oBAAoB;AAC7C,SAAS,eAAe;AAkBjB,SAAS,YAAuC;AAAA;AAAA;AAAA,EAGrD,OAAO;AACT,GAA2B;AACzB,QAAM,WAAW,MAAM;AAGvB,QAAM,qBAAqB,YAAY;AAEvC,QAAM,gBAAgB,iBAAiB,CAACA,WAAUA,OAAM,aAAa;AAErE,QAAM,gBAAgB,YAAY,aAAa,IAC3C,eAAe,eACf,eAAe,MAAM;AAEzB,QAAM,QAAQ,WAAW,WAAW,GAAG,kBAAkB,CAAC;AAE1D,QAAM,mBAAmB,IAAI;AAAA,IAC3B,iBAAiB,MAAM,YAAY;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,eAA8B;AAAA,IAClC,GAAG;AAAA,IACH;AAAA,IACA,YAAY,QAAQ,gBAAgB,IAAI,mBAAmB;AAAA,EAC7D;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IACxB;AAAA;AAAA,IAEA;AAAA,IACA,CAACA,WAAyB;AAKxB,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,YAAYA,OAAM,cAAc;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,OAAO,UAAU,SAAS;AACrC;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { isValid, startOfDay } from 'date-fns';\nimport { useReducer } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useId } from '../../../core/hooks/useId.js';\nimport { isTimeValue } from '../../../core/time/helpers.js';\nimport { useCalendarStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type {\n  CalendarProps,\n  CalendarStrictValueType,\n} from '../Calendar.types.js';\nimport { initialState as defaultState } from '../contexts/CalendarContext.js';\nimport { reducer } from '../state/calendar-state-reducer.js';\nimport { type CalendarType } from '../types/calendarConfiguration.js';\nimport type { CalendarState } from '../types/shared-types.js';\n\n//#region types\n/** @internal */\nexport type UseCalendarProps<Type extends CalendarType> = Pick<\n  CalendarProps<Type>,\n  'onChange' | 'type' | 'precision'\n> & {\n  value: CalendarStrictValueType<Type>;\n};\n//#endregion\n\n/**\n * Calendar hook to initialize the calendar state and update it to prop changes.\n * @internal\n */\nexport function useCalendar<Type extends CalendarType>({\n  // @ts-expect-error: Strict mode transition \u2014 the default value `'single'` is not assignable to the generic `type` parameter constrained by `Type extends CalendarType`\n  type = 'single',\n}: UseCalendarProps<Type>) {\n  const uniqueId = useId();\n  // All parse times here need to use the same _now_ date, to not be subject\n  // to millisecond differences during parsing.\n  const configuredTimezone = getTimezone();\n\n  const calendarValue = useCalendarStore((state) => state.calendarValue);\n\n  const activeISODate = isTimeValue(calendarValue)\n    ? calendarValue?.absoluteDate\n    : calendarValue?.from?.absoluteDate;\n\n  const today = startOfDay(TZDateMini.tz(configuredTimezone));\n\n  const parsedActiveDate = new TZDateMini(\n    activeISODate ?? today.toISOString(),\n    configuredTimezone,\n  );\n\n  const initialState: CalendarState = {\n    ...defaultState,\n    type,\n    activeDate: isValid(parsedActiveDate) ? parsedActiveDate : today,\n  };\n\n  const [state, dispatch] = useReducer(\n    reducer,\n    // activeDate might be undefined but will be set in the initializer, to ensure the correct timezone.\n    initialState,\n    (state: CalendarState) => {\n      // Make sure the state initializes with a new TZDateMini when the component is created\n      // instead of on the module scope.\n      // Extract the user-settings timezone to use for the calculation\n\n      return {\n        ...state,\n        activeDate: state.activeDate ?? today,\n        today,\n      };\n    },\n  );\n\n  return { state, dispatch, uniqueId };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,SAAS,kBAAkB;AACpC,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAE5B,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAKjC,SAAS,gBAAgB,oBAAoB;AAC7C,SAAS,eAAe;AAkBjB,SAAS,YAAuC;AAAA;AAAA,EAErD,OAAO;AACT,GAA2B;AACzB,QAAM,WAAW,MAAM;AAGvB,QAAM,qBAAqB,YAAY;AAEvC,QAAM,gBAAgB,iBAAiB,CAACA,WAAUA,OAAM,aAAa;AAErE,QAAM,gBAAgB,YAAY,aAAa,IAC3C,eAAe,eACf,eAAe,MAAM;AAEzB,QAAM,QAAQ,WAAW,WAAW,GAAG,kBAAkB,CAAC;AAE1D,QAAM,mBAAmB,IAAI;AAAA,IAC3B,iBAAiB,MAAM,YAAY;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,eAA8B;AAAA,IAClC,GAAG;AAAA,IACH;AAAA,IACA,YAAY,QAAQ,gBAAgB,IAAI,mBAAmB;AAAA,EAC7D;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IACxB;AAAA;AAAA,IAEA;AAAA,IACA,CAACA,WAAyB;AAKxB,aAAO;AAAA,QACL,GAAGA;AAAA,QACH,YAAYA,OAAM,cAAc;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,OAAO,UAAU,SAAS;AACrC;",
   "names": ["state"]
 }

package/esm/forms/calendar/state/calendar-state-reducer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/state/calendar-state-reducer.ts"],
-  "sourcesContent": ["import { TZDate, TZDateMini } from '@date-fns/tz';\nimport { addDays, addMonths, addYears } from 'date-fns';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport type {\n  CalendarReducerAction,\n  CalendarState,\n} from '../types/shared-types.js';\nimport { getWeekStartOrEnd } from '../utils/helpers.js';\n\n/** Calendar reducer */\nexport function reducer(\n  state: CalendarState,\n  action: CalendarReducerAction,\n): CalendarState {\n  switch (action.type) {\n    case 'activeDateChange':\n      return {\n        ...state,\n        activeDate: action.payload.activeDate,\n        currentView: action.payload.changeToView ?? state.currentView,\n      };\n    case 'currentViewChange':\n      return { ...state, currentView: action.payload };\n    case 'shouldUpdateFocusFromKeydown':\n      return { ...state, shouldUpdateFocusFromKeydown: action.payload };\n    case 'navigateCurrentView': {\n      let newActiveDate: TZDate;\n      const { amount, unit } = action.payload;\n      const affectedScale = unit ?? state.currentView;\n      const realAmount =\n        typeof amount === 'number'\n          ? amount\n          : getWeekStartOrEnd(amount, state.activeDate);\n\n      const configuredTimezone = getTimezone();\n      const activeDate = new TZDateMini(state.activeDate, configuredTimezone);\n\n      switch (affectedScale) {\n        case 'day':\n          newActiveDate = addDays(activeDate, realAmount);\n          break;\n        case 'month':\n          newActiveDate = addMonths(activeDate, realAmount);\n          break;\n        case 'year':\n          newActiveDate = addYears(activeDate, realAmount);\n          break;\n      }\n\n      return {\n        ...state,\n        activeDate: newActiveDate,\n      };\n    }\n    default:\n      // Should never happen\n      // eslint-disable-next-line no-console\n      console.warn('The dispatched action does not exist.');\n      return state;\n  }\n}\n"],
+  "sourcesContent": ["import { TZDate, TZDateMini } from '@date-fns/tz';\nimport { addDays, addMonths, addYears } from 'date-fns';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport type {\n  CalendarReducerAction,\n  CalendarState,\n} from '../types/shared-types.js';\nimport { getWeekStartOrEnd } from '../utils/helpers.js';\n\n/** Calendar reducer */\nexport function reducer(\n  state: CalendarState,\n  action: CalendarReducerAction,\n): CalendarState {\n  switch (action.type) {\n    case 'activeDateChange':\n      return {\n        ...state,\n        activeDate: action.payload.activeDate,\n        currentView: action.payload.changeToView ?? state.currentView,\n      };\n    case 'currentViewChange':\n      return { ...state, currentView: action.payload };\n    case 'shouldUpdateFocusFromKeydown':\n      return { ...state, shouldUpdateFocusFromKeydown: action.payload };\n    case 'navigateCurrentView': {\n      let newActiveDate: TZDate;\n      const { amount, unit } = action.payload;\n      const affectedScale = unit ?? state.currentView;\n      const realAmount =\n        typeof amount === 'number'\n          ? amount\n          : getWeekStartOrEnd(amount, state.activeDate);\n\n      const configuredTimezone = getTimezone();\n      const activeDate = new TZDateMini(state.activeDate, configuredTimezone);\n\n      switch (affectedScale) {\n        case 'day':\n          newActiveDate = addDays(activeDate, realAmount);\n          break;\n        case 'month':\n          newActiveDate = addMonths(activeDate, realAmount);\n          break;\n        case 'year':\n          newActiveDate = addYears(activeDate, realAmount);\n          break;\n      }\n\n      return {\n        ...state,\n        activeDate: newActiveDate,\n      };\n    }\n    default:\n      // Should never happen\n      // oxlint-disable-next-line no-console\n      console.warn('The dispatched action does not exist.');\n      return state;\n  }\n}\n"],
   "mappings": "AAAA,SAAiB,kBAAkB;AACnC,SAAS,SAAS,WAAW,gBAAgB;AAE7C,SAAS,mBAAmB;AAM5B,SAAS,yBAAyB;AAG3B,SAAS,QACd,OACA,QACe;AACf,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,YAAY,OAAO,QAAQ;AAAA,QAC3B,aAAa,OAAO,QAAQ,gBAAgB,MAAM;AAAA,MACpD;AAAA,IACF,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,aAAa,OAAO,QAAQ;AAAA,IACjD,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,8BAA8B,OAAO,QAAQ;AAAA,IAClE,KAAK,uBAAuB;AAC1B,UAAI;AACJ,YAAM,EAAE,QAAQ,KAAK,IAAI,OAAO;AAChC,YAAM,gBAAgB,QAAQ,MAAM;AACpC,YAAM,aACJ,OAAO,WAAW,WACd,SACA,kBAAkB,QAAQ,MAAM,UAAU;AAEhD,YAAM,qBAAqB,YAAY;AACvC,YAAM,aAAa,IAAI,WAAW,MAAM,YAAY,kBAAkB;AAEtE,cAAQ,eAAe;AAAA,QACrB,KAAK;AACH,0BAAgB,QAAQ,YAAY,UAAU;AAC9C;AAAA,QACF,KAAK;AACH,0BAAgB,UAAU,YAAY,UAAU;AAChD;AAAA,QACF,KAAK;AACH,0BAAgB,SAAS,YAAY,UAAU;AAC/C;AAAA,MACJ;AAEA,aAAO;AAAA,QACL,GAAG;AAAA,QACH,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA;AAGE,cAAQ,KAAK,uCAAuC;AACpD,aAAO;AAAA,EACX;AACF;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
-var borderColor = "var(--_1jljrbf1-3-12-1)";
-var rangeColor = "var(--_1jljrbf0-3-12-1)";
+var borderColor = "var(--_1jljrbf1-3-13-0)";
+var rangeColor = "var(--_1jljrbf0-3-13-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-12-1)';\nexport var rangeColor = 'var(--_1jljrbf0-3-12-1)';"],
+  "sourcesContent": ["export var borderColor = 'var(--_1jljrbf1-3-13-0)';\nexport var rangeColor = 'var(--_1jljrbf0-3-13-0)';"],
   "mappings": "AAAO,IAAI,cAAc;AAClB,IAAI,aAAa;",
   "names": []
 }

package/esm/forms/checkbox/Checkbox.css

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

package/esm/forms/checkbox/Checkbox.js

@@ -53,7 +53,7 @@ const Checkbox = forwardRef(
       onValidityChange,
       onChange,
       children,
-      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
       controlState,
       className: consumerClassName,
       style: consumerStyle,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/checkbox/Checkbox.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport {\n  checkboxIconCSS,\n  checkboxKnobCSS,\n  checkboxLabelCSS,\n} from './Checkbox.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nconst COMPONENT_NAME = 'Checkbox';\n\n// #region Typings\n/**\n * @public\n */\nexport type CheckboxProps = FormControlProps<\n  boolean | 'indeterminate',\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\n    /**\n     * A string representing the value used for the checkbox.\n     * When submitted in a form, it is only submitted if checked, with the set value.\n     * If undefined, the string 'on' is submitted by default as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value.\n     */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Use the `Checkbox` to let users select one or more options from a list, or to confirm a selection that requires a further action such as clicking a submit button.\n * @public\n */\nexport const Checkbox = forwardRef<FormControlRef, CheckboxProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      defaultValue,\n      value,\n      name,\n      _form,\n      _messageTarget,\n      formValue,\n      onValidityChange,\n      onChange,\n      children,\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlState,\n      className: consumerClassName,\n      style: consumerStyle,\n      'aria-disabled': ariaDisabledProp,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      onFocus,\n      onBlur,\n      ...remainingProps\n    }: CheckboxProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaLabelingProps = _useAriaLabelingProps(restProps);\n    const forwardProps = _useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const {\n      id,\n      disabled,\n      required,\n      ariaDisabled,\n      readOnly: _readOnly,\n      inputProps,\n      hintProps,\n      hint,\n      showError,\n      messageState: messagesContextState,\n      messageDispatch: messagesContextDispatch,\n    } = useFormControl({\n      propId,\n      propDisabled,\n      propRequired,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n      controlState,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const controlRef = useRef<FormControlRef>(null);\n    const combinedRef = useMergeRefs<FormControlRef | null>([\n      forwardedRef,\n      controlRef,\n    ]);\n    const formValidityChangeRef = useRef<\n      ((state: ValidationState) => void) | undefined\n    >(undefined);\n    const _emitValidationState = useValidationStateEmitter((state) =>\n      formValidityChangeRef.current?.(state),\n    );\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value) },\n      ariaLabelingProps,\n      undefined,\n      _emitValidationState,\n    );\n\n    useImperativeHandle(combinedRef, (): FormControlRef => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (messagesContextState) {\n            inputRef.current?.checkValidity();\n            messagesContextDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n            emitValidationState(\n              getI18nValidationState(intl, inputRef.current, 'manual'),\n            );\n          }\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n      };\n    });\n\n    const [state, setState] = useControllableState({\n      defaultValue,\n      value,\n    });\n\n    const formControl = useInternalFormRegistration({\n      id,\n      name,\n      form: _form,\n      messageTarget: _messageTarget,\n      value: state === true,\n      controlRef,\n      onValidityChange,\n    });\n    formValidityChangeRef.current = formControl.onValidityChange;\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n    const readOnly = !!_readOnly;\n\n    let focusRingColor: 'neutral' | 'critical' | 'primary' = 'neutral';\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(disabled || readOnly) && state) {\n      focusRingColor = 'primary';\n    }\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {\n      if (readOnly) {\n        return;\n      }\n\n      const newValue = e.target.indeterminate ? true : e.target.checked;\n      setState(newValue);\n      onChange?.(newValue, e);\n      validationOnChange();\n    };\n\n    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLDivElement>({\n        onFocus,\n        onBlur,\n        disabled,\n        emitValidationState,\n      });\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = state === 'indeterminate';\n      }\n    }, [state]);\n\n    let fieldColorVariant: 'default' | 'accent' | 'emphasized' = 'default';\n    if (state === true || state === 'indeterminate') {\n      fieldColorVariant = 'accent';\n    } else if (showError || disabledOrAriaDisabled) {\n      fieldColorVariant = 'emphasized';\n    }\n\n    let fieldColorColor: 'neutral' | 'primary' | 'critical' = 'primary';\n    if (showError) {\n      fieldColorColor = 'critical';\n    } else if (state === false) {\n      fieldColorColor = 'neutral';\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        role=\"group\"\n        flexDirection=\"column\"\n        gap={4}\n        className={clsx(containerClassName, consumerClassName)}\n        style={consumerStyle}\n        {...containerProps}\n        {...mergeProps(forwardProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            checkboxLabelCSS({\n              required: typeof children === 'string' && required,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            textStyleCSS({ fontStyle: 'text', textStyle: 'base' }),\n          )}\n        >\n          <div\n            className={clsx(\n              checkboxKnobCSS({\n                disabled: disabledOrAriaDisabled,\n                hasChildren: !!children,\n                hasError: showError,\n                checked: state === true || state === 'indeterminate',\n                readOnly,\n              }),\n              fieldColorsCSS({\n                variant: fieldColorVariant,\n                disabled: disabledOrAriaDisabled,\n                color: fieldColorColor,\n              }),\n              focusRingStatic({\n                when: 'focus-within-visible',\n                color: focusRingColor,\n                disabled,\n              }),\n            )}\n          >\n            <VisuallyHidden>\n              <input\n                id={id}\n                ref={inputRef}\n                type=\"checkbox\"\n                aria-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                form={_form}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\n                onInvalid={validationOnInvalid}\n                {...(controlState ? inputProps : ariaProps)}\n              />\n            </VisuallyHidden>\n            <div className={checkboxIconCSS({ readOnly, hasError: showError })}>\n              <CheckboxIconSvg state={state} />\n            </div>\n          </div>\n          {children}\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Checkbox as typeof Checkbox & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\ntype CheckboxIconProps = {\n  state: boolean | 'indeterminate';\n};\n\n/** Determines what svg to display based on the checked and indeterminate attributes. */\nconst CheckboxIconSvg = memo((props: CheckboxIconProps) => {\n  switch (props.state) {\n    case true:\n      return <CheckmarkSmallIcon />;\n    case 'indeterminate':\n      return <MinusIcon />;\n    case false:\n    default:\n      return null;\n  }\n});\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport {\n  checkboxIconCSS,\n  checkboxKnobCSS,\n  checkboxLabelCSS,\n} from './Checkbox.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nconst COMPONENT_NAME = 'Checkbox';\n\n// #region Typings\n/**\n * @public\n */\nexport type CheckboxProps = FormControlProps<\n  boolean | 'indeterminate',\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\n    /**\n     * A string representing the value used for the checkbox.\n     * When submitted in a form, it is only submitted if checked, with the set value.\n     * If undefined, the string 'on' is submitted by default as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value.\n     */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Use the `Checkbox` to let users select one or more options from a list, or to confirm a selection that requires a further action such as clicking a submit button.\n * @public\n */\nexport const Checkbox = forwardRef<FormControlRef, CheckboxProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      defaultValue,\n      value,\n      name,\n      _form,\n      _messageTarget,\n      formValue,\n      onValidityChange,\n      onChange,\n      children,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlState,\n      className: consumerClassName,\n      style: consumerStyle,\n      'aria-disabled': ariaDisabledProp,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      onFocus,\n      onBlur,\n      ...remainingProps\n    }: CheckboxProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaLabelingProps = _useAriaLabelingProps(restProps);\n    const forwardProps = _useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const {\n      id,\n      disabled,\n      required,\n      ariaDisabled,\n      readOnly: _readOnly,\n      inputProps,\n      hintProps,\n      hint,\n      showError,\n      messageState: messagesContextState,\n      messageDispatch: messagesContextDispatch,\n    } = useFormControl({\n      propId,\n      propDisabled,\n      propRequired,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n      controlState,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const controlRef = useRef<FormControlRef>(null);\n    const combinedRef = useMergeRefs<FormControlRef | null>([\n      forwardedRef,\n      controlRef,\n    ]);\n    const formValidityChangeRef = useRef<\n      ((state: ValidationState) => void) | undefined\n    >(undefined);\n    const _emitValidationState = useValidationStateEmitter((state) =>\n      formValidityChangeRef.current?.(state),\n    );\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value) },\n      ariaLabelingProps,\n      undefined,\n      _emitValidationState,\n    );\n\n    useImperativeHandle(combinedRef, (): FormControlRef => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (messagesContextState) {\n            inputRef.current?.checkValidity();\n            messagesContextDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n            emitValidationState(\n              getI18nValidationState(intl, inputRef.current, 'manual'),\n            );\n          }\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n      };\n    });\n\n    const [state, setState] = useControllableState({\n      defaultValue,\n      value,\n    });\n\n    const formControl = useInternalFormRegistration({\n      id,\n      name,\n      form: _form,\n      messageTarget: _messageTarget,\n      value: state === true,\n      controlRef,\n      onValidityChange,\n    });\n    formValidityChangeRef.current = formControl.onValidityChange;\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n    const readOnly = !!_readOnly;\n\n    let focusRingColor: 'neutral' | 'critical' | 'primary' = 'neutral';\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(disabled || readOnly) && state) {\n      focusRingColor = 'primary';\n    }\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {\n      if (readOnly) {\n        return;\n      }\n\n      const newValue = e.target.indeterminate ? true : e.target.checked;\n      setState(newValue);\n      onChange?.(newValue, e);\n      validationOnChange();\n    };\n\n    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLDivElement>({\n        onFocus,\n        onBlur,\n        disabled,\n        emitValidationState,\n      });\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = state === 'indeterminate';\n      }\n    }, [state]);\n\n    let fieldColorVariant: 'default' | 'accent' | 'emphasized' = 'default';\n    if (state === true || state === 'indeterminate') {\n      fieldColorVariant = 'accent';\n    } else if (showError || disabledOrAriaDisabled) {\n      fieldColorVariant = 'emphasized';\n    }\n\n    let fieldColorColor: 'neutral' | 'primary' | 'critical' = 'primary';\n    if (showError) {\n      fieldColorColor = 'critical';\n    } else if (state === false) {\n      fieldColorColor = 'neutral';\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        role=\"group\"\n        flexDirection=\"column\"\n        gap={4}\n        className={clsx(containerClassName, consumerClassName)}\n        style={consumerStyle}\n        {...containerProps}\n        {...mergeProps(forwardProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            checkboxLabelCSS({\n              required: typeof children === 'string' && required,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            textStyleCSS({ fontStyle: 'text', textStyle: 'base' }),\n          )}\n        >\n          <div\n            className={clsx(\n              checkboxKnobCSS({\n                disabled: disabledOrAriaDisabled,\n                hasChildren: !!children,\n                hasError: showError,\n                checked: state === true || state === 'indeterminate',\n                readOnly,\n              }),\n              fieldColorsCSS({\n                variant: fieldColorVariant,\n                disabled: disabledOrAriaDisabled,\n                color: fieldColorColor,\n              }),\n              focusRingStatic({\n                when: 'focus-within-visible',\n                color: focusRingColor,\n                disabled,\n              }),\n            )}\n          >\n            <VisuallyHidden>\n              <input\n                id={id}\n                ref={inputRef}\n                type=\"checkbox\"\n                aria-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                form={_form}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\n                onInvalid={validationOnInvalid}\n                {...(controlState ? inputProps : ariaProps)}\n              />\n            </VisuallyHidden>\n            <div className={checkboxIconCSS({ readOnly, hasError: showError })}>\n              <CheckboxIconSvg state={state} />\n            </div>\n          </div>\n          {children}\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Checkbox as typeof Checkbox & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\ntype CheckboxIconProps = {\n  state: boolean | 'indeterminate';\n};\n\n/** Determines what svg to display based on the checked and indeterminate attributes. */\nconst CheckboxIconSvg = memo((props: CheckboxIconProps) => {\n  switch (props.state) {\n    case true:\n      return <CheckmarkSmallIcon />;\n    case 'indeterminate':\n      return <MinusIcon />;\n    case false:\n    default:\n      return null;\n  }\n});\n"],
   "mappings": "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",
   "names": ["state"]
 }

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-12-1", variantClassNames: { readOnly: { true: "_qmw7spn-3-12-1" }, hasError: { true: "_qmw7spo-3-12-1" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-12-1"]] });
-var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-12-1", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-12-1", false: "_qmw7sp6-3-12-1" }, disabled: { true: "_qmw7sp7-3-12-1", false: "_qmw7sp8-3-12-1" }, hasError: { true: "_qmw7sp9-3-12-1", false: "_qmw7spa-3-12-1" }, checked: { true: "_qmw7spb-3-12-1", false: "_qmw7spc-3-12-1", indeterminate: "_qmw7spd-3-12-1", undefined: "_qmw7spe-3-12-1" }, readOnly: { true: "_qmw7spf-3-12-1" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-12-1"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-12-1"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-12-1"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-12-1"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-12-1"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-12-1"]] });
-var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-12-1", variantClassNames: { disabled: { true: "_qmw7sp1-3-12-1" }, required: { true: "_qmw7sp2-3-12-1" }, readOnly: { true: "_qmw7sp3-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var checkboxIconCSS = _7a468({ defaultClassName: "_qmw7spm-3-13-0", variantClassNames: { readOnly: { true: "_qmw7spn-3-13-0" }, hasError: { true: "_qmw7spo-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-13-0"]] });
+var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-13-0", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-13-0", false: "_qmw7sp6-3-13-0" }, disabled: { true: "_qmw7sp7-3-13-0", false: "_qmw7sp8-3-13-0" }, hasError: { true: "_qmw7sp9-3-13-0", false: "_qmw7spa-3-13-0" }, checked: { true: "_qmw7spb-3-13-0", false: "_qmw7spc-3-13-0", indeterminate: "_qmw7spd-3-13-0", undefined: "_qmw7spe-3-13-0" }, readOnly: { true: "_qmw7spf-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-13-0"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-13-0"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-13-0"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-13-0"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-13-0"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-13-0"]] });
+var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-13-0", variantClassNames: { disabled: { true: "_qmw7sp1-3-13-0" }, required: { true: "_qmw7sp2-3-13-0" }, readOnly: { true: "_qmw7sp3-3-13-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-12-1',variantClassNames:{readOnly:{true:'_qmw7spn-3-12-1'},hasError:{true:'_qmw7spo-3-12-1'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-12-1']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-12-1',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-12-1',false:'_qmw7sp6-3-12-1'},disabled:{true:'_qmw7sp7-3-12-1',false:'_qmw7sp8-3-12-1'},hasError:{true:'_qmw7sp9-3-12-1',false:'_qmw7spa-3-12-1'},checked:{true:'_qmw7spb-3-12-1',false:'_qmw7spc-3-12-1',indeterminate:'_qmw7spd-3-12-1',undefined:'_qmw7spe-3-12-1'},readOnly:{true:'_qmw7spf-3-12-1'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-12-1'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-12-1'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-12-1'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-12-1'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-12-1'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-12-1']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-12-1',variantClassNames:{disabled:{true:'_qmw7sp1-3-12-1'},required:{true:'_qmw7sp2-3-12-1'},readOnly:{true:'_qmw7sp3-3-12-1'}},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-13-0',variantClassNames:{readOnly:{true:'_qmw7spn-3-13-0'},hasError:{true:'_qmw7spo-3-13-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-13-0']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-13-0',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-13-0',false:'_qmw7sp6-3-13-0'},disabled:{true:'_qmw7sp7-3-13-0',false:'_qmw7sp8-3-13-0'},hasError:{true:'_qmw7sp9-3-13-0',false:'_qmw7spa-3-13-0'},checked:{true:'_qmw7spb-3-13-0',false:'_qmw7spc-3-13-0',indeterminate:'_qmw7spd-3-13-0',undefined:'_qmw7spe-3-13-0'},readOnly:{true:'_qmw7spf-3-13-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-13-0'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-13-0'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-13-0'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-13-0'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-13-0'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-13-0']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-13-0',variantClassNames:{disabled:{true:'_qmw7sp1-3-13-0'},required:{true:'_qmw7sp2-3-13-0'},readOnly:{true:'_qmw7sp3-3-13-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACjP,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,SAAQ,EAAC,MAAK,mBAAkB,OAAM,mBAAkB,eAAc,mBAAkB,WAAU,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,SAAQ,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,SAAQ,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,MAAK,SAAQ,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,OAAM,SAAQ,OAAM,UAAS,MAAK,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACz1B,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,85 +1,85 @@
-._1i883gj4-3-12-1 {
-  --_1i883gj0-3-12-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_1i883gj1-3-12-1: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_1i883gj2-3-12-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj3-3-12-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj4-3-13-0 {
+  --_1i883gj0-3-13-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_1i883gj1-3-13-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_1i883gj2-3-13-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj3-3-13-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: text;
 }
-._1i883gj5-3-12-1 {
+._1i883gj5-3-13-0 {
   cursor: default;
 }
-._1i883gj6-3-12-1 {
-  --_1i883gj0-3-12-1: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj1-3-12-1: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj2-3-12-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_1i883gj3-3-12-1: var(--dt-colors-background-field-critical-accent, #c62239);
+._1i883gj6-3-13-0 {
+  --_1i883gj0-3-13-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj1-3-13-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj2-3-13-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_1i883gj3-3-13-0: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._1i883gj7-3-12-1 {
-  --_1i883gj0-3-12-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj1-3-12-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj2-3-12-1: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
+._1i883gj7-3-13-0 {
+  --_1i883gj0-3-13-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj1-3-13-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj2-3-13-0: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
   cursor: not-allowed;
 }
-._1i883gj9-3-12-1 {
+._1i883gj9-3-13-0 {
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1i883gjb-3-12-1 {
+._1i883gjb-3-13-0 {
   display: flex;
   flex: 1;
-  color: var(--_1i883gj1-3-12-1);
+  color: var(--_1i883gj1-3-13-0);
   white-space-collapse: preserve;
 }
-._1i883gjc-3-12-1 {
+._1i883gjc-3-13-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);
 }
-._r47o0w0-3-12-1 ._r47o0w1-3-12-1 {
-  color: var(--_1i883gj0-3-12-1);
+._r47o0w0-3-13-0 ._r47o0w1-3-13-0 {
+  color: var(--_1i883gj0-3-13-0);
 }
-._r47o0w0-3-12-1 ._r47o0w1-3-12-1::before {
-  color: var(--_1i883gj1-3-12-1);
+._r47o0w0-3-13-0 ._r47o0w1-3-13-0::before {
+  color: var(--_1i883gj1-3-13-0);
 }
-._r47o0w0-3-12-1 ._r47o0w1-3-12-1:focus {
-  background-color: var(--_1i883gj3-3-12-1);
-  color: var(--_1i883gj2-3-12-1);
+._r47o0w0-3-13-0 ._r47o0w1-3-13-0:focus {
+  background-color: var(--_1i883gj3-3-13-0);
+  color: var(--_1i883gj2-3-13-0);
 }
-._r47o0w0-3-12-1 ._r47o0w1-3-12-1:focus::before {
-  color: var(--_1i883gj2-3-12-1);
+._r47o0w0-3-13-0 ._r47o0w1-3-13-0:focus::before {
+  color: var(--_1i883gj2-3-13-0);
 }
-._r47o0w0-3-12-1 *::selection {
+._r47o0w0-3-13-0 *::selection {
   background-color: transparent;
 }
-._r47o0w0-3-12-1 ._r47o0w1-3-12-1:focus::selection, ._r47o0w0-3-12-1 ._r47o0w1-3-12-1:focus *::selection {
+._r47o0w0-3-13-0 ._r47o0w1-3-13-0:focus::selection, ._r47o0w0-3-13-0 ._r47o0w1-3-13-0:focus *::selection {
   background-color: transparent;
-  color: var(--_1i883gj2-3-12-1);
+  color: var(--_1i883gj2-3-13-0);
 }
-._r47o0w0-3-12-1 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-12-1[data-drag-selected]::before {
-  background-color: var(--_1i883gj3-3-12-1);
-  color: var(--_1i883gj2-3-12-1);
+._r47o0w0-3-13-0 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-13-0[data-drag-selected]::before {
+  background-color: var(--_1i883gj3-3-13-0);
+  color: var(--_1i883gj2-3-13-0);
 }
-._r47o0w0-3-12-1 [data-drag-selected]::selection, ._r47o0w0-3-12-1 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
+._r47o0w0-3-13-0 [data-drag-selected]::selection, ._r47o0w0-3-13-0 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
   background-color: transparent;
 }
-[data-shift-selection=true] ._r47o0w1-3-12-1:focus {
+[data-shift-selection=true] ._r47o0w1-3-13-0:focus {
   background-color: transparent;
-  color: var(--_1i883gj0-3-12-1);
+  color: var(--_1i883gj0-3-13-0);
   caret-color: auto;
 }
-[data-shift-selection=true] ._r47o0w1-3-12-1:focus::before {
-  color: var(--_1i883gj1-3-12-1);
+[data-shift-selection=true] ._r47o0w1-3-13-0:focus::before {
+  color: var(--_1i883gj1-3-13-0);
 }
-._1i883gjd-3-12-1 {
+._1i883gjd-3-13-0 {
   position: absolute;
   top: var(--dt-spacings-size-4, 4px);
   right: var(--dt-spacings-size-4, 4px);
 }
-._1i883gjd-3-12-1:is(button._1i883gjd-3-12-1._1i883gjd-3-12-1) {
+._1i883gjd-3-13-0:is(button._1i883gjd-3-13-0._1i883gjd-3-13-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1jgl8s50-3-12-1 ._1i883gjd-3-12-1._1i883gjd-3-12-1._1i883gjd-3-12-1 {
+._1jgl8s50-3-13-0 ._1i883gjd-3-13-0._1i883gjd-3-13-0._1i883gjd-3-13-0 {
   position: absolute;
   margin: var(--dt-spacings-size-0, 0);
   z-index: 0;

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

@@ -121,7 +121,7 @@ const DateTimePicker = forwardRef(
     readOnly: propReadOnly,
     id: propId,
     "aria-disabled": propAriaDisabled,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     controlState,
     type,
     ...remainingProps
@@ -136,7 +136,7 @@ const DateTimePicker = forwardRef(
     const memoedDefaultValue = useMemo(
       () => getTimeValue(propDefaultValue, precision),
       /** We're ignoring updates to defaultValue as it only considers the initial state. */
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // oxlint-disable-next-line react-hooks/exhaustive-deps
       []
     );
     const { min, max } = useMinMax(propMin, propMax, precision);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePicker.tsx"],
-  "sourcesContent": ["import {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimePickerRoot } from './DateTimePickerRoot.js';\nimport type { DateTimePickerProps } from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimePickerActions } from '../../core/time/timeframeStore/actions/dateTimePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimePickerValueStates,\n  DateTimePickerValueStoreActions,\n} from '../../core/time/timeframeStore/dateTimePicker.types.js';\nimport { DateTimePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport type { TimeValue } from '../../core/types/time.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { toCalendarValue } from '../../forms/forms-core/time/helpers.js';\nimport {\n  removePrecisionFromTimeValue,\n  getTimeValue,\n} from '../../forms/forms-core/time/timeParser.js';\nimport { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport type { DateTimeInputRef } from '../date-time-range-picker/types.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n  TimeRangePickerRef,\n} from '../shared-types.js';\n\ntype DateTimePickerStore = StoreApi<\n  DateTimePickerValueStates & DateTimePickerValueStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: DateTimePickerStore,\n  memoedValue: TimeValue | null | undefined,\n  isControlled: boolean,\n  precision: Precision,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimePickerRef: RefObject<FormControlWithOverlayRef<HTMLSpanElement> | null>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        // In case of an invalid interim state the onChange can emit a string that\n        // is not a valid time value yet. Don't overwrite internal state in that case,\n        // so users can continue editing.\n        if (memoedValue?.absoluteDate === '') {\n          return state;\n        }\n\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          formerError: state.calendarError,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          ref: dateTimePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'single',\n          required: required,\n        });\n\n        const value = removePrecisionFromTimeValue(\n          memoedValue ?? null,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'single',\n          state.min,\n          state.max,\n          state.precision,\n        );\n\n        return {\n          ...state,\n          dateTimePickerValue: value,\n          calendarValue: toCalendarValue(value, state.precision),\n          calendarError: error,\n          dateTimePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    dateTimePickerRef,\n  ]);\n\n  // Sync precision, formatString, and required into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeValue(\n        state.dateTimePickerValue,\n        precision,\n      );\n\n      const error = validate(value, state.min, state.max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        formerError: state.dateTimePickerError,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n        required,\n      });\n\n      return {\n        ...state,\n        formatString,\n        precision,\n        dateTimePickerValue: value,\n        calendarValue: toCalendarValue(value, precision),\n        required,\n        calendarError: error,\n        dateTimePickerError: error,\n      };\n    });\n  }, [\n    formatString,\n    precision,\n    store,\n    required,\n    formFieldMessagesDispatch,\n    dateTimePickerRef,\n  ]);\n}\n\n/**\n * Component to comfortably enter a date time value.\n * The `DateTimePicker` component automatically uses the user's settings for the\n * locale and timezone and formats the date and time accordingly.\n * @public\n */\nexport const DateTimePicker = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  DateTimePickerProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision: propPrecision = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlState,\n      type,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n    const precision = type === 'date' ? 'day' : propPrecision;\n\n    const memoedValue = useMemo(\n      () => getTimeValue(propValue, precision) ?? null,\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => getTimeValue(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax, precision);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeInputRef = useRef<DateTimeInputRef>(null);\n    const dateTimePickerRef =\n      useRef<FormControlWithOverlayRef<HTMLSpanElement>>(null);\n\n    const formControl = useFormControl({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled,\n      propReadOnly,\n      controlState,\n    });\n    const { required, messageDispatch: formFieldMessagesDispatch } =\n      formControl;\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const [initialState] = useState<DateTimePickerValueStates>(() => {\n      const _value = isControlled ? memoedValue : memoedDefaultValue;\n      const value = _value ?? null;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'single',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n        required,\n      });\n\n      // The DateTimePicker can handle partial timeValues but the calendar can't\n      // so we need to adjust the calendar value accordingly\n      const calendarValue = toCalendarValue(value, precision);\n\n      return {\n        calendarValue,\n        dateTimePickerValue: value,\n        min,\n        max,\n        precision,\n        formatString,\n        calendarRef,\n        dateTimeInputRef,\n        dateTimePickerRef,\n        calendarError: error,\n        dateTimePickerError: error,\n        timeOffset,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimePickerValueStates,\n        DateTimePickerValueStoreActions\n      >(\n        initialState,\n        getDateTimePickerActions(\n          formFieldMessagesDispatch,\n          onChangeProp,\n          isControlled,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimePickerValueStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimePickerValue, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs([dateTimePickerRef, forwardedRef]);\n\n    return (\n      <DateTimePickerStoreProvider store={store}>\n        <DateTimePickerRoot\n          {...remainingProps}\n          ref={mergedRef}\n          formControl={formControl}\n          type={type}\n        />\n      </DateTimePickerStoreProvider>\n    );\n  },\n);\n"],
+  "sourcesContent": ["import {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimePickerRoot } from './DateTimePickerRoot.js';\nimport type { DateTimePickerProps } from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimePickerActions } from '../../core/time/timeframeStore/actions/dateTimePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimePickerValueStates,\n  DateTimePickerValueStoreActions,\n} from '../../core/time/timeframeStore/dateTimePicker.types.js';\nimport { DateTimePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport type { TimeValue } from '../../core/types/time.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { toCalendarValue } from '../../forms/forms-core/time/helpers.js';\nimport {\n  removePrecisionFromTimeValue,\n  getTimeValue,\n} from '../../forms/forms-core/time/timeParser.js';\nimport { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport type { DateTimeInputRef } from '../date-time-range-picker/types.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n  TimeRangePickerRef,\n} from '../shared-types.js';\n\ntype DateTimePickerStore = StoreApi<\n  DateTimePickerValueStates & DateTimePickerValueStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: DateTimePickerStore,\n  memoedValue: TimeValue | null | undefined,\n  isControlled: boolean,\n  precision: Precision,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimePickerRef: RefObject<FormControlWithOverlayRef<HTMLSpanElement> | null>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        // In case of an invalid interim state the onChange can emit a string that\n        // is not a valid time value yet. Don't overwrite internal state in that case,\n        // so users can continue editing.\n        if (memoedValue?.absoluteDate === '') {\n          return state;\n        }\n\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          formerError: state.calendarError,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          ref: dateTimePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'single',\n          required: required,\n        });\n\n        const value = removePrecisionFromTimeValue(\n          memoedValue ?? null,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'single',\n          state.min,\n          state.max,\n          state.precision,\n        );\n\n        return {\n          ...state,\n          dateTimePickerValue: value,\n          calendarValue: toCalendarValue(value, state.precision),\n          calendarError: error,\n          dateTimePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    dateTimePickerRef,\n  ]);\n\n  // Sync precision, formatString, and required into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeValue(\n        state.dateTimePickerValue,\n        precision,\n      );\n\n      const error = validate(value, state.min, state.max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        formerError: state.dateTimePickerError,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n        required,\n      });\n\n      return {\n        ...state,\n        formatString,\n        precision,\n        dateTimePickerValue: value,\n        calendarValue: toCalendarValue(value, precision),\n        required,\n        calendarError: error,\n        dateTimePickerError: error,\n      };\n    });\n  }, [\n    formatString,\n    precision,\n    store,\n    required,\n    formFieldMessagesDispatch,\n    dateTimePickerRef,\n  ]);\n}\n\n/**\n * Component to comfortably enter a date time value.\n * The `DateTimePicker` component automatically uses the user's settings for the\n * locale and timezone and formats the date and time accordingly.\n * @public\n */\nexport const DateTimePicker = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  DateTimePickerProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision: propPrecision = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlState,\n      type,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n    const precision = type === 'date' ? 'day' : propPrecision;\n\n    const memoedValue = useMemo(\n      () => getTimeValue(propValue, precision) ?? null,\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => getTimeValue(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax, precision);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeInputRef = useRef<DateTimeInputRef>(null);\n    const dateTimePickerRef =\n      useRef<FormControlWithOverlayRef<HTMLSpanElement>>(null);\n\n    const formControl = useFormControl({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled,\n      propReadOnly,\n      controlState,\n    });\n    const { required, messageDispatch: formFieldMessagesDispatch } =\n      formControl;\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const [initialState] = useState<DateTimePickerValueStates>(() => {\n      const _value = isControlled ? memoedValue : memoedDefaultValue;\n      const value = _value ?? null;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'single',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n        required,\n      });\n\n      // The DateTimePicker can handle partial timeValues but the calendar can't\n      // so we need to adjust the calendar value accordingly\n      const calendarValue = toCalendarValue(value, precision);\n\n      return {\n        calendarValue,\n        dateTimePickerValue: value,\n        min,\n        max,\n        precision,\n        formatString,\n        calendarRef,\n        dateTimeInputRef,\n        dateTimePickerRef,\n        calendarError: error,\n        dateTimePickerError: error,\n        timeOffset,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimePickerValueStates,\n        DateTimePickerValueStoreActions\n      >(\n        initialState,\n        getDateTimePickerActions(\n          formFieldMessagesDispatch,\n          onChangeProp,\n          isControlled,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimePickerValueStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimePickerValue, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs([dateTimePickerRef, forwardedRef]);\n\n    return (\n      <DateTimePickerStoreProvider store={store}>\n        <DateTimePickerRoot\n          {...remainingProps}\n          ref={mergedRef}\n          formControl={formControl}\n          type={type}\n        />\n      </DateTimePickerStoreProvider>\n    );\n  },\n);\n"],
   "mappings": "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",
   "names": ["min", "max"]
 }

package/esm/forms/date-time-picker/DateTimePicker.sty.js

@@ -3,12 +3,12 @@ import "../../styles/textStyle.css";
 import "../spin-buttons/SpinButton.css";
 import "./DateTimePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearIconButton = "_1i883gjd-3-12-1";
-var dateSelector = "_1i883gjc-3-12-1";
-var dateTimePicker = _7a468({ defaultClassName: "_1i883gj4-3-12-1", variantClassNames: { readOnly: { true: "_1i883gj5-3-12-1" }, showError: { true: "_1i883gj6-3-12-1" }, disabled: { true: "_1i883gj7-3-12-1" }, type: { date: "_1i883gj8-3-12-1", time: "_1i883gj9-3-12-1", datetime: "_1i883gja-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
-var spinButtonGroup = "_1i883gjb-3-12-1 _da9a8v0-3-12-1 _da9a8v2-3-12-1 _da9a8v3-3-12-1 _da9a8vb-3-12-1";
-var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj3-3-12-1)";
-var spinButtonSelectionColorVar = "var(--_1i883gj2-3-12-1)";
+var clearIconButton = "_1i883gjd-3-13-0";
+var dateSelector = "_1i883gjc-3-13-0";
+var dateTimePicker = _7a468({ defaultClassName: "_1i883gj4-3-13-0", variantClassNames: { readOnly: { true: "_1i883gj5-3-13-0" }, showError: { true: "_1i883gj6-3-13-0" }, disabled: { true: "_1i883gj7-3-13-0" }, type: { date: "_1i883gj8-3-13-0", time: "_1i883gj9-3-13-0", datetime: "_1i883gja-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var spinButtonGroup = "_1i883gjb-3-13-0 _da9a8v0-3-13-0 _da9a8v2-3-13-0 _da9a8v3-3-13-0 _da9a8vb-3-13-0";
+var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj3-3-13-0)";
+var spinButtonSelectionColorVar = "var(--_1i883gj2-3-13-0)";
 export {
   clearIconButton,
   dateSelector,