@dynatrace/strato-components 3.8.0 → 3.9.1

package/esm/forms/validation/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/validation/types.ts"],
-  "sourcesContent": ["/**\n * Lifecycle state of a validation run.\n * @public\n */\nexport type ValidationStatus = 'pending' | 'done' | 'aborted';\n\n/**\n * Why a validation run was triggered.\n * @public\n */\nexport type ValidationTrigger =\n  | 'change'\n  | 'blur'\n  | 'manual'\n  | 'submit'\n  | 'initial';\n\n/**\n * Where a {@link ValidationError} originated.\n * @public\n */\nexport type ValidationErrorSource = 'native' | 'strato' | 'custom';\n\n/**\n * Stable, comparable identity for a validity key.\n *\n * @remarks\n * Use {@link ValidityStateKey.equals} for comparisons. `===` fails across\n * module boundaries since each instance is a distinct object reference.\n *\n * @public\n */\nexport class ValidityStateKey<T extends string = string> {\n  constructor(readonly value: T) {}\n\n  /** Value equality check. Safe across module boundaries. */\n  equals(other: ValidityStateKey): boolean {\n    return this.value === other.value;\n  }\n\n  toString(): string {\n    return this.value;\n  }\n}\n\n/**\n * Browser-native validity keys, wrapping the same values as the native\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ValidityState | ValidityState}.\n * @public\n */\nexport const NativeValidityStateKeys = {\n  valueMissing: new ValidityStateKey('valueMissing'),\n  typeMismatch: new ValidityStateKey('typeMismatch'),\n  patternMismatch: new ValidityStateKey('patternMismatch'),\n  tooLong: new ValidityStateKey('tooLong'),\n  tooShort: new ValidityStateKey('tooShort'),\n  rangeUnderflow: new ValidityStateKey('rangeUnderflow'),\n  rangeOverflow: new ValidityStateKey('rangeOverflow'),\n  stepMismatch: new ValidityStateKey('stepMismatch'),\n  badInput: new ValidityStateKey('badInput'),\n  customError: new ValidityStateKey('customError'),\n} as const;\n\n/**\n * Union of the browser-native validity keys.\n * @public\n */\nexport type NativeValidityStateKey =\n  (typeof NativeValidityStateKeys)[keyof typeof NativeValidityStateKeys];\n\n/**\n * Strato-specific validity keys used by components whose validation cannot be\n * represented by browser-native validity states.\n * @public\n */\nexport const StratoValidityStateKeys = {\n  syntaxError: new ValidityStateKey('syntaxError'),\n  minMaxBoundary: new ValidityStateKey('minMaxBoundary'),\n  invalidOrder: new ValidityStateKey('invalidOrder'),\n  invalid: new ValidityStateKey('invalid'),\n  invalidFrom: new ValidityStateKey('invalidFrom'),\n  invalidTo: new ValidityStateKey('invalidTo'),\n  invalidFromTo: new ValidityStateKey('invalidFromTo'),\n  missingFrom: new ValidityStateKey('missingFrom'),\n  missingTo: new ValidityStateKey('missingTo'),\n  arrayIdentifierError: new ValidityStateKey('arrayIdentifierError'),\n  unavailable: new ValidityStateKey('unavailable'),\n  needsUpdate: new ValidityStateKey('needs-update'),\n  missingVariables: new ValidityStateKey('missing-variables'),\n  genericError: new ValidityStateKey('genericError'),\n} as const;\n\n/**\n * Union of Strato-specific validity keys.\n * @public\n */\nexport type StratoValidityStateKey =\n  (typeof StratoValidityStateKeys)[keyof typeof StratoValidityStateKeys];\n\n/**\n * Options accepted by the {@link ValidationError} constructor.\n * @public\n */\nexport type ValidationErrorOptions = ErrorOptions & {\n  /** Where the error came from. @defaultValue `'custom'` */\n  source?: ValidationErrorSource;\n  /** Stable error identity. @defaultValue `NativeValidityStateKeys.customError` */\n  validityStateKey?: ValidityStateKey;\n  /** ID(s) of all form control inputs affected by this error. */\n  formControlId?: string | string[];\n};\n\n/**\n * A single validation error.\n *\n * @remarks\n * Extends `Error` so that `instanceof` narrowing works across package\n * boundaries and the original async failure can be preserved via `Error.cause`.\n *\n * @public\n */\nexport class ValidationError extends Error {\n  /** Where the error came from. */\n  readonly source: ValidationErrorSource;\n  /** Stable error identity; always compare via {@link ValidityStateKey.equals}. */\n  readonly validityStateKey: ValidityStateKey;\n  /** ID(s) of all form control inputs affected by this error. */\n  readonly formControlId: string | string[] | undefined;\n\n  constructor(message: string, options: ValidationErrorOptions = {}) {\n    super(message, { cause: options.cause });\n    this.name = 'ValidationError';\n    this.source = options.source ?? 'custom';\n    this.validityStateKey =\n      options.validityStateKey ?? NativeValidityStateKeys.customError;\n    this.formControlId = options.formControlId;\n  }\n}\n\n/**\n * Shared validation result type returned by `validateAsync()` and passed to\n * `onValidityChange`.\n * @public\n */\nexport type ValidationState = {\n  /** Validation lifecycle state. */\n  status: ValidationStatus;\n  /** Why validation fired. */\n  trigger: ValidationTrigger;\n  /** Validation errors. Empty when the control is valid or still `'pending'`. */\n  errors: ValidationError[];\n};\n"],
-  "mappings": "AAgCO,MAAM,iBAA4C;AAAA,EACvD,YAAqB,OAAU;AAAV;AAAA,EAAW;AAAA,EAAX;AAAA;AAAA,EAGrB,OAAO,OAAkC;AACvC,WAAO,KAAK,UAAU,MAAM;AAAA,EAC9B;AAAA,EAEA,WAAmB;AACjB,WAAO,KAAK;AAAA,EACd;AACF;AAOO,MAAM,0BAA0B;AAAA,EACrC,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,iBAAiB,IAAI,iBAAiB,iBAAiB;AAAA,EACvD,SAAS,IAAI,iBAAiB,SAAS;AAAA,EACvC,UAAU,IAAI,iBAAiB,UAAU;AAAA,EACzC,gBAAgB,IAAI,iBAAiB,gBAAgB;AAAA,EACrD,eAAe,IAAI,iBAAiB,eAAe;AAAA,EACnD,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,UAAU,IAAI,iBAAiB,UAAU;AAAA,EACzC,aAAa,IAAI,iBAAiB,aAAa;AACjD;AAcO,MAAM,0BAA0B;AAAA,EACrC,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,gBAAgB,IAAI,iBAAiB,gBAAgB;AAAA,EACrD,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,SAAS,IAAI,iBAAiB,SAAS;AAAA,EACvC,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,WAAW,IAAI,iBAAiB,WAAW;AAAA,EAC3C,eAAe,IAAI,iBAAiB,eAAe;AAAA,EACnD,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,WAAW,IAAI,iBAAiB,WAAW;AAAA,EAC3C,sBAAsB,IAAI,iBAAiB,sBAAsB;AAAA,EACjE,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,aAAa,IAAI,iBAAiB,cAAc;AAAA,EAChD,kBAAkB,IAAI,iBAAiB,mBAAmB;AAAA,EAC1D,cAAc,IAAI,iBAAiB,cAAc;AACnD;AA+BO,MAAM,wBAAwB,MAAM;AAAA;AAAA,EAEhC;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EAET,YAAY,SAAiB,UAAkC,CAAC,GAAG;AACjE,UAAM,SAAS,EAAE,OAAO,QAAQ,MAAM,CAAC;AACvC,SAAK,OAAO;AACZ,SAAK,SAAS,QAAQ,UAAU;AAChC,SAAK,mBACH,QAAQ,oBAAoB,wBAAwB;AACtD,SAAK,gBAAgB,QAAQ;AAAA,EAC/B;AACF;",
+  "sourcesContent": ["/**\n * Lifecycle state of a validation run.\n * @public\n */\nexport type ValidationStatus = 'pending' | 'done' | 'aborted';\n\n/**\n * Why a validation run was triggered.\n * @public\n */\nexport type ValidationTrigger =\n  | 'change'\n  | 'blur'\n  | 'manual'\n  | 'submit'\n  | 'initial';\n\n/**\n * Where a {@link ValidationError} originated.\n * @public\n */\nexport type ValidationErrorSource = 'native' | 'strato' | 'custom';\n\n/**\n * Stable, comparable identity for a validity key.\n *\n * @remarks\n * Use {@link ValidityStateKey.equals} for comparisons. `===` fails across\n * module boundaries since each instance is a distinct object reference.\n *\n * @public\n */\nexport class ValidityStateKey<T extends string = string> {\n  constructor(readonly value: T) {}\n\n  /** Value equality check. Safe across module boundaries. */\n  equals(other: ValidityStateKey): boolean {\n    return this.value === other.value;\n  }\n\n  toString(): string {\n    return this.value;\n  }\n}\n\n/**\n * Browser-native validity keys, wrapping the same values as the native\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ValidityState | ValidityState}.\n * @public\n */\nexport const NativeValidityStateKeys = {\n  valueMissing: new ValidityStateKey('valueMissing'),\n  typeMismatch: new ValidityStateKey('typeMismatch'),\n  patternMismatch: new ValidityStateKey('patternMismatch'),\n  tooLong: new ValidityStateKey('tooLong'),\n  tooShort: new ValidityStateKey('tooShort'),\n  rangeUnderflow: new ValidityStateKey('rangeUnderflow'),\n  rangeOverflow: new ValidityStateKey('rangeOverflow'),\n  stepMismatch: new ValidityStateKey('stepMismatch'),\n  badInput: new ValidityStateKey('badInput'),\n  customError: new ValidityStateKey('customError'),\n} as const;\n\n/**\n * Union of the browser-native validity keys.\n * @public\n */\nexport type NativeValidityStateKey =\n  (typeof NativeValidityStateKeys)[keyof typeof NativeValidityStateKeys];\n\n/**\n * Strato-specific validity keys used by components whose validation cannot be\n * represented by browser-native validity states.\n * @public\n */\nexport const StratoValidityStateKeys = {\n  syntaxError: new ValidityStateKey('syntaxError'),\n  minMaxBoundary: new ValidityStateKey('minMaxBoundary'),\n  invalidOrder: new ValidityStateKey('invalidOrder'),\n  invalid: new ValidityStateKey('invalid'),\n  invalidFrom: new ValidityStateKey('invalidFrom'),\n  invalidTo: new ValidityStateKey('invalidTo'),\n  invalidFromTo: new ValidityStateKey('invalidFromTo'),\n  missingFrom: new ValidityStateKey('missingFrom'),\n  missingTo: new ValidityStateKey('missingTo'),\n  arrayIdentifierError: new ValidityStateKey('arrayIdentifierError'),\n  unavailable: new ValidityStateKey('unavailable'),\n  needsUpdate: new ValidityStateKey('needsUpdate'),\n  missingVariables: new ValidityStateKey('missingVariables'),\n  invalidVariables: new ValidityStateKey('invalidVariables'),\n  genericError: new ValidityStateKey('genericError'),\n} as const;\n\n/**\n * Union of Strato-specific validity keys.\n * @public\n */\nexport type StratoValidityStateKey =\n  (typeof StratoValidityStateKeys)[keyof typeof StratoValidityStateKeys];\n\n/**\n * Options accepted by the {@link ValidationError} constructor.\n * @public\n */\nexport type ValidationErrorOptions = ErrorOptions & {\n  /** Where the error came from. @defaultValue `'custom'` */\n  source?: ValidationErrorSource;\n  /** Stable error identity. @defaultValue `NativeValidityStateKeys.customError` */\n  validityStateKey?: ValidityStateKey;\n  /** ID(s) of all form control inputs affected by this error. */\n  formControlId?: string | string[];\n};\n\n/**\n * A single validation error.\n *\n * @remarks\n * Extends `Error` so that `instanceof` narrowing works across package\n * boundaries and the original async failure can be preserved via `Error.cause`.\n *\n * @public\n */\nexport class ValidationError extends Error {\n  /** Where the error came from. */\n  readonly source: ValidationErrorSource;\n  /** Stable error identity; always compare via {@link ValidityStateKey.equals}. */\n  readonly validityStateKey: ValidityStateKey;\n  /** ID(s) of all form control inputs affected by this error. */\n  readonly formControlId: string | string[] | undefined;\n\n  constructor(message: string, options: ValidationErrorOptions = {}) {\n    super(message, { cause: options.cause });\n    this.name = 'ValidationError';\n    this.source = options.source ?? 'custom';\n    this.validityStateKey =\n      options.validityStateKey ?? NativeValidityStateKeys.customError;\n    this.formControlId = options.formControlId;\n  }\n}\n\n/**\n * Shared validation result type returned by `validateAsync()` and passed to\n * `onValidityChange`.\n * @public\n */\nexport type ValidationState = {\n  /** Validation lifecycle state. */\n  status: ValidationStatus;\n  /** Why validation fired. */\n  trigger: ValidationTrigger;\n  /** Validation errors. Empty when the control is valid or still `'pending'`. */\n  errors: ValidationError[];\n};\n"],
+  "mappings": "AAgCO,MAAM,iBAA4C;AAAA,EACvD,YAAqB,OAAU;AAAV;AAAA,EAAW;AAAA,EAAX;AAAA;AAAA,EAGrB,OAAO,OAAkC;AACvC,WAAO,KAAK,UAAU,MAAM;AAAA,EAC9B;AAAA,EAEA,WAAmB;AACjB,WAAO,KAAK;AAAA,EACd;AACF;AAOO,MAAM,0BAA0B;AAAA,EACrC,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,iBAAiB,IAAI,iBAAiB,iBAAiB;AAAA,EACvD,SAAS,IAAI,iBAAiB,SAAS;AAAA,EACvC,UAAU,IAAI,iBAAiB,UAAU;AAAA,EACzC,gBAAgB,IAAI,iBAAiB,gBAAgB;AAAA,EACrD,eAAe,IAAI,iBAAiB,eAAe;AAAA,EACnD,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,UAAU,IAAI,iBAAiB,UAAU;AAAA,EACzC,aAAa,IAAI,iBAAiB,aAAa;AACjD;AAcO,MAAM,0BAA0B;AAAA,EACrC,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,gBAAgB,IAAI,iBAAiB,gBAAgB;AAAA,EACrD,cAAc,IAAI,iBAAiB,cAAc;AAAA,EACjD,SAAS,IAAI,iBAAiB,SAAS;AAAA,EACvC,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,WAAW,IAAI,iBAAiB,WAAW;AAAA,EAC3C,eAAe,IAAI,iBAAiB,eAAe;AAAA,EACnD,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,WAAW,IAAI,iBAAiB,WAAW;AAAA,EAC3C,sBAAsB,IAAI,iBAAiB,sBAAsB;AAAA,EACjE,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,aAAa,IAAI,iBAAiB,aAAa;AAAA,EAC/C,kBAAkB,IAAI,iBAAiB,kBAAkB;AAAA,EACzD,kBAAkB,IAAI,iBAAiB,kBAAkB;AAAA,EACzD,cAAc,IAAI,iBAAiB,cAAc;AACnD;AA+BO,MAAM,wBAAwB,MAAM;AAAA;AAAA,EAEhC;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EAET,YAAY,SAAiB,UAAkC,CAAC,GAAG;AACjE,UAAM,SAAS,EAAE,OAAO,QAAQ,MAAM,CAAC;AACvC,SAAK,OAAO;AACZ,SAAK,SAAS,QAAQ,UAAU;AAChC,SAAK,mBACH,QAAQ,oBAAoB,wBAAwB;AACtD,SAAK,gBAAgB,QAAQ;AAAA,EAC/B;AACF;",
   "names": []
 }

package/esm/forms/validation/useCustomMessageEmitter.js

@@ -11,8 +11,8 @@ function useCustomMessageEmitter(emitValidationState, getBaseState) {
   customMessagesRef.current = state.customMessages;
   const customMessageTextsRef = useRef(state.customMessageTexts);
   customMessageTextsRef.current = state.customMessageTexts;
-  const controlIdsRef = useRef(state.controlIds);
-  controlIdsRef.current = state.controlIds;
+  const formControlIdRef = useRef(state.formControlId);
+  formControlIdRef.current = state.formControlId;
   const isTouchedRef = useRef(state.isTouched);
   isTouchedRef.current = state.isTouched;
   const getBaseStateRef = useRef(getBaseState);
@@ -25,7 +25,7 @@ function useCustomMessageEmitter(emitValidationState, getBaseState) {
       const baseErrors = validationState.errors.filter(
         (e) => !e.validityStateKey.equals(NativeValidityStateKeys.customError)
       );
-      const baseControlId = baseErrors.find((e) => e.formControlId !== void 0)?.formControlId ?? controlIdsRef.current;
+      const baseControlId = baseErrors.find((e) => e.formControlId !== void 0)?.formControlId ?? formControlIdRef.current;
       const merged = {
         ...validationState,
         errors: [

package/esm/forms/validation/useCustomMessageEmitter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/validation/useCustomMessageEmitter.ts"],
-  "sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\n\nimport {\n  NativeValidityStateKeys,\n  ValidationError,\n  type ValidationState,\n} from './types.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\n\n/**\n * Returns a wrapped `emitValidationState` that always merges current custom\n * error messages into every emitted state. Also fires when the set of custom\n * errors changes (added or removed), using `getBaseState` to determine the\n * underlying native/Strato errors at that point.\n * @internal\n */\nexport function useCustomMessageEmitter(\n  emitValidationState: ((state: ValidationState) => void) | undefined,\n  getBaseState?: () => ValidationState | Promise<ValidationState>,\n): (state: ValidationState) => ValidationState {\n  const { state } = useFormFieldMessagesContext();\n\n  // Stable primitive dep: detects add/remove/swap by ID and message text changes.\n  const customErrorKey = state.customMessages\n    .filter((m) => m.variant === 'error')\n    .map((m) => `${m.id}:${state.customMessageTexts?.[m.id] ?? ''}`)\n    .sort((a, b) => a.localeCompare(b))\n    .join(',');\n\n  // Read via ref so callbacks always see current values without re-creating.\n  const customMessagesRef = useRef(state.customMessages);\n  customMessagesRef.current = state.customMessages;\n\n  const customMessageTextsRef = useRef(state.customMessageTexts);\n  customMessageTextsRef.current = state.customMessageTexts;\n\n  const controlIdsRef = useRef(state.controlIds);\n  controlIdsRef.current = state.controlIds;\n\n  const isTouchedRef = useRef(state.isTouched);\n  isTouchedRef.current = state.isTouched;\n\n  const getBaseStateRef = useRef(getBaseState);\n  getBaseStateRef.current = getBaseState;\n\n  // Wrapped emitter: merges current custom errors into every emitted state so\n  // that onChange/onBlur calls never silently drop an active custom error.\n  // Returns the merged state so callers (e.g. validateAsync) can return it\n  // directly instead of the raw pre-merge state.\n  const emitWithCustomErrors = useCallback(\n    (validationState: ValidationState): ValidationState => {\n      const customErrors = customMessagesRef.current.filter(\n        (m) => m.variant === 'error',\n      );\n\n      // native/customError is set via setCustomValidity and is already\n      // represented by our explicit custom entries \u2014 exclude to avoid doubling.\n      const baseErrors = validationState.errors.filter(\n        (e) => !e.validityStateKey.equals(NativeValidityStateKeys.customError),\n      );\n\n      // Prefer the form control ID from native errors (already knows the right\n      // input element). Fall back to context-registered control IDs for cases\n      // where there are no native errors.\n      const baseControlId =\n        baseErrors.find((e) => e.formControlId !== undefined)?.formControlId ??\n        controlIdsRef.current;\n\n      const merged: ValidationState = {\n        ...validationState,\n        errors: [\n          ...baseErrors,\n          ...customErrors.map(\n            (m) =>\n              new ValidationError(customMessageTextsRef.current?.[m.id] ?? '', {\n                source: 'custom',\n                formControlId: m.controlId ?? baseControlId,\n              }),\n          ),\n        ],\n      };\n\n      emitValidationState?.(merged);\n      return merged;\n    },\n    [emitValidationState],\n  );\n\n  const customErrorKeyRef = useRef(customErrorKey);\n  customErrorKeyRef.current = customErrorKey;\n\n  const scheduleEmit = useCallback(() => {\n    let cancelled = false;\n    const run = async () => {\n      const baseState = (await getBaseStateRef.current?.()) ?? {\n        status: 'done' as const,\n        trigger: 'manual' as const,\n        errors: [],\n      };\n      if (cancelled) {\n        return;\n      }\n      emitWithCustomErrors(baseState);\n    };\n    void run();\n    return () => {\n      cancelled = true;\n    };\n  }, [emitWithCustomErrors]);\n\n  // Fires when the custom error set changes (add, remove, swap) so the consumer\n  // always gets an up-to-date state without a value change being required.\n  useEffect(() => {\n    if (!emitValidationState || !isTouchedRef.current) {\n      return;\n    }\n    return scheduleEmit();\n  }, [customErrorKey, emitValidationState, scheduleEmit]);\n\n  // Fires when isTouched flips to true while custom errors are already pending,\n  // covering the case where errors were set before the field was ever blurred.\n  useEffect(() => {\n    if (\n      !emitValidationState ||\n      !isTouchedRef.current ||\n      !customErrorKeyRef.current\n    ) {\n      return;\n    }\n    return scheduleEmit();\n  }, [state.isTouched, emitValidationState, scheduleEmit]);\n\n  return emitWithCustomErrors;\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,WAAW,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mCAAmC;AASrC,SAAS,wBACd,qBACA,cAC6C;AAC7C,QAAM,EAAE,MAAM,IAAI,4BAA4B;AAG9C,QAAM,iBAAiB,MAAM,eAC1B,OAAO,CAAC,MAAM,EAAE,YAAY,OAAO,EACnC,IAAI,CAAC,MAAM,GAAG,EAAE,EAAE,IAAI,MAAM,qBAAqB,EAAE,EAAE,KAAK,EAAE,EAAE,EAC9D,KAAK,CAAC,GAAG,MAAM,EAAE,cAAc,CAAC,CAAC,EACjC,KAAK,GAAG;AAGX,QAAM,oBAAoB,OAAO,MAAM,cAAc;AACrD,oBAAkB,UAAU,MAAM;AAElC,QAAM,wBAAwB,OAAO,MAAM,kBAAkB;AAC7D,wBAAsB,UAAU,MAAM;AAEtC,QAAM,gBAAgB,OAAO,MAAM,UAAU;AAC7C,gBAAc,UAAU,MAAM;AAE9B,QAAM,eAAe,OAAO,MAAM,SAAS;AAC3C,eAAa,UAAU,MAAM;AAE7B,QAAM,kBAAkB,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAM1B,QAAM,uBAAuB;AAAA,IAC3B,CAAC,oBAAsD;AACrD,YAAM,eAAe,kBAAkB,QAAQ;AAAA,QAC7C,CAAC,MAAM,EAAE,YAAY;AAAA,MACvB;AAIA,YAAM,aAAa,gBAAgB,OAAO;AAAA,QACxC,CAAC,MAAM,CAAC,EAAE,iBAAiB,OAAO,wBAAwB,WAAW;AAAA,MACvE;AAKA,YAAM,gBACJ,WAAW,KAAK,CAAC,MAAM,EAAE,kBAAkB,MAAS,GAAG,iBACvD,cAAc;AAEhB,YAAM,SAA0B;AAAA,QAC9B,GAAG;AAAA,QACH,QAAQ;AAAA,UACN,GAAG;AAAA,UACH,GAAG,aAAa;AAAA,YACd,CAAC,MACC,IAAI,gBAAgB,sBAAsB,UAAU,EAAE,EAAE,KAAK,IAAI;AAAA,cAC/D,QAAQ;AAAA,cACR,eAAe,EAAE,aAAa;AAAA,YAChC,CAAC;AAAA,UACL;AAAA,QACF;AAAA,MACF;AAEA,4BAAsB,MAAM;AAC5B,aAAO;AAAA,IACT;AAAA,IACA,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,oBAAoB,OAAO,cAAc;AAC/C,oBAAkB,UAAU;AAE5B,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,YAAY;AAChB,UAAM,MAAM,YAAY;AACtB,YAAM,YAAa,MAAM,gBAAgB,UAAU,KAAM;AAAA,QACvD,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,QAAQ,CAAC;AAAA,MACX;AACA,UAAI,WAAW;AACb;AAAA,MACF;AACA,2BAAqB,SAAS;AAAA,IAChC;AACA,SAAK,IAAI;AACT,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AAIzB,YAAU,MAAM;AACd,QAAI,CAAC,uBAAuB,CAAC,aAAa,SAAS;AACjD;AAAA,IACF;AACA,WAAO,aAAa;AAAA,EACtB,GAAG,CAAC,gBAAgB,qBAAqB,YAAY,CAAC;AAItD,YAAU,MAAM;AACd,QACE,CAAC,uBACD,CAAC,aAAa,WACd,CAAC,kBAAkB,SACnB;AACA;AAAA,IACF;AACA,WAAO,aAAa;AAAA,EACtB,GAAG,CAAC,MAAM,WAAW,qBAAqB,YAAY,CAAC;AAEvD,SAAO;AACT;",
+  "sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\n\nimport {\n  NativeValidityStateKeys,\n  ValidationError,\n  type ValidationState,\n} from './types.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\n\n/**\n * Returns a wrapped `emitValidationState` that always merges current custom\n * error messages into every emitted state. Also fires when the set of custom\n * errors changes (added or removed), using `getBaseState` to determine the\n * underlying native/Strato errors at that point.\n * @internal\n */\nexport function useCustomMessageEmitter(\n  emitValidationState: ((state: ValidationState) => void) | undefined,\n  getBaseState?: () => ValidationState | Promise<ValidationState>,\n): (state: ValidationState) => ValidationState {\n  const { state } = useFormFieldMessagesContext();\n\n  // Stable primitive dep: detects add/remove/swap by ID and message text changes.\n  const customErrorKey = state.customMessages\n    .filter((m) => m.variant === 'error')\n    .map((m) => `${m.id}:${state.customMessageTexts?.[m.id] ?? ''}`)\n    .sort((a, b) => a.localeCompare(b))\n    .join(',');\n\n  // Read via ref so callbacks always see current values without re-creating.\n  const customMessagesRef = useRef(state.customMessages);\n  customMessagesRef.current = state.customMessages;\n\n  const customMessageTextsRef = useRef(state.customMessageTexts);\n  customMessageTextsRef.current = state.customMessageTexts;\n\n  const formControlIdRef = useRef(state.formControlId);\n  formControlIdRef.current = state.formControlId;\n\n  const isTouchedRef = useRef(state.isTouched);\n  isTouchedRef.current = state.isTouched;\n\n  const getBaseStateRef = useRef(getBaseState);\n  getBaseStateRef.current = getBaseState;\n\n  // Wrapped emitter: merges current custom errors into every emitted state so\n  // that onChange/onBlur calls never silently drop an active custom error.\n  // Returns the merged state so callers (e.g. validateAsync) can return it\n  // directly instead of the raw pre-merge state.\n  const emitWithCustomErrors = useCallback(\n    (validationState: ValidationState): ValidationState => {\n      const customErrors = customMessagesRef.current.filter(\n        (m) => m.variant === 'error',\n      );\n\n      // native/customError is set via setCustomValidity and is already\n      // represented by our explicit custom entries \u2014 exclude to avoid doubling.\n      const baseErrors = validationState.errors.filter(\n        (e) => !e.validityStateKey.equals(NativeValidityStateKeys.customError),\n      );\n\n      // Prefer the form control ID from native errors (already knows the right\n      // input element). Fall back to the context-registered form-control id\n      // when no native error carries one.\n      const baseControlId =\n        baseErrors.find((e) => e.formControlId !== undefined)?.formControlId ??\n        formControlIdRef.current;\n\n      const merged: ValidationState = {\n        ...validationState,\n        errors: [\n          ...baseErrors,\n          ...customErrors.map(\n            (m) =>\n              new ValidationError(customMessageTextsRef.current?.[m.id] ?? '', {\n                source: 'custom',\n                formControlId: m.controlId ?? baseControlId,\n              }),\n          ),\n        ],\n      };\n\n      emitValidationState?.(merged);\n      return merged;\n    },\n    [emitValidationState],\n  );\n\n  const customErrorKeyRef = useRef(customErrorKey);\n  customErrorKeyRef.current = customErrorKey;\n\n  const scheduleEmit = useCallback(() => {\n    let cancelled = false;\n    const run = async () => {\n      const baseState = (await getBaseStateRef.current?.()) ?? {\n        status: 'done' as const,\n        trigger: 'manual' as const,\n        errors: [],\n      };\n      if (cancelled) {\n        return;\n      }\n      emitWithCustomErrors(baseState);\n    };\n    void run();\n    return () => {\n      cancelled = true;\n    };\n  }, [emitWithCustomErrors]);\n\n  // Fires when the custom error set changes (add, remove, swap) so the consumer\n  // always gets an up-to-date state without a value change being required.\n  useEffect(() => {\n    if (!emitValidationState || !isTouchedRef.current) {\n      return;\n    }\n    return scheduleEmit();\n  }, [customErrorKey, emitValidationState, scheduleEmit]);\n\n  // Fires when isTouched flips to true while custom errors are already pending,\n  // covering the case where errors were set before the field was ever blurred.\n  useEffect(() => {\n    if (\n      !emitValidationState ||\n      !isTouchedRef.current ||\n      !customErrorKeyRef.current\n    ) {\n      return;\n    }\n    return scheduleEmit();\n  }, [state.isTouched, emitValidationState, scheduleEmit]);\n\n  return emitWithCustomErrors;\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,WAAW,cAAc;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mCAAmC;AASrC,SAAS,wBACd,qBACA,cAC6C;AAC7C,QAAM,EAAE,MAAM,IAAI,4BAA4B;AAG9C,QAAM,iBAAiB,MAAM,eAC1B,OAAO,CAAC,MAAM,EAAE,YAAY,OAAO,EACnC,IAAI,CAAC,MAAM,GAAG,EAAE,EAAE,IAAI,MAAM,qBAAqB,EAAE,EAAE,KAAK,EAAE,EAAE,EAC9D,KAAK,CAAC,GAAG,MAAM,EAAE,cAAc,CAAC,CAAC,EACjC,KAAK,GAAG;AAGX,QAAM,oBAAoB,OAAO,MAAM,cAAc;AACrD,oBAAkB,UAAU,MAAM;AAElC,QAAM,wBAAwB,OAAO,MAAM,kBAAkB;AAC7D,wBAAsB,UAAU,MAAM;AAEtC,QAAM,mBAAmB,OAAO,MAAM,aAAa;AACnD,mBAAiB,UAAU,MAAM;AAEjC,QAAM,eAAe,OAAO,MAAM,SAAS;AAC3C,eAAa,UAAU,MAAM;AAE7B,QAAM,kBAAkB,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAM1B,QAAM,uBAAuB;AAAA,IAC3B,CAAC,oBAAsD;AACrD,YAAM,eAAe,kBAAkB,QAAQ;AAAA,QAC7C,CAAC,MAAM,EAAE,YAAY;AAAA,MACvB;AAIA,YAAM,aAAa,gBAAgB,OAAO;AAAA,QACxC,CAAC,MAAM,CAAC,EAAE,iBAAiB,OAAO,wBAAwB,WAAW;AAAA,MACvE;AAKA,YAAM,gBACJ,WAAW,KAAK,CAAC,MAAM,EAAE,kBAAkB,MAAS,GAAG,iBACvD,iBAAiB;AAEnB,YAAM,SAA0B;AAAA,QAC9B,GAAG;AAAA,QACH,QAAQ;AAAA,UACN,GAAG;AAAA,UACH,GAAG,aAAa;AAAA,YACd,CAAC,MACC,IAAI,gBAAgB,sBAAsB,UAAU,EAAE,EAAE,KAAK,IAAI;AAAA,cAC/D,QAAQ;AAAA,cACR,eAAe,EAAE,aAAa;AAAA,YAChC,CAAC;AAAA,UACL;AAAA,QACF;AAAA,MACF;AAEA,4BAAsB,MAAM;AAC5B,aAAO;AAAA,IACT;AAAA,IACA,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,oBAAoB,OAAO,cAAc;AAC/C,oBAAkB,UAAU;AAE5B,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,YAAY;AAChB,UAAM,MAAM,YAAY;AACtB,YAAM,YAAa,MAAM,gBAAgB,UAAU,KAAM;AAAA,QACvD,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,QAAQ,CAAC;AAAA,MACX;AACA,UAAI,WAAW;AACb;AAAA,MACF;AACA,2BAAqB,SAAS;AAAA,IAChC;AACA,SAAK,IAAI;AACT,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AAIzB,YAAU,MAAM;AACd,QAAI,CAAC,uBAAuB,CAAC,aAAa,SAAS;AACjD;AAAA,IACF;AACA,WAAO,aAAa;AAAA,EACtB,GAAG,CAAC,gBAAgB,qBAAqB,YAAY,CAAC;AAItD,YAAU,MAAM;AACd,QACE,CAAC,uBACD,CAAC,aAAa,WACd,CAAC,kBAAkB,SACnB;AACA;AAAA,IACF;AACA,WAAO,aAAa;AAAA,EACtB,GAAG,CAAC,MAAM,WAAW,qBAAqB,YAAY,CAAC;AAEvD,SAAO;AACT;",
   "names": []
 }

package/esm/layouts/app-header/AppHeader.css

@@ -1,4 +1,4 @@
-._8j2khp0-3-8-0 {
+._8j2khp0-3-9-1 {
   position: relative;
   display: flex;
   align-items: center;

package/esm/layouts/app-header/AppHeader.sty.js

@@ -1,5 +1,5 @@
 import "./AppHeader.css";
-var header = "_8j2khp0-3-8-0";
+var header = "_8j2khp0-3-9-1";
 export {
   header
 };

package/esm/layouts/app-header/AppHeader.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/AppHeader.css.ts"],
-  "sourcesContent": ["import './AppHeader.css';\nexport var header = '_8j2khp0-3-8-0';"],
+  "sourcesContent": ["import './AppHeader.css';\nexport var header = '_8j2khp0-3-9-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/app-header/Navigation.css

@@ -1,13 +1,13 @@
-._swz1ff2-3-8-0 {
+._swz1ff2-3-9-1 {
   position: relative;
 }
-._swz1ff2-3-8-0:is(._swz1ff0-3-8-0,.active):not(._swz1ff1-3-8-0) {
+._swz1ff2-3-9-1:is(._swz1ff0-3-9-1,.active):not(._swz1ff1-3-9-1) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff2-3-8-0:is(._swz1ff0-3-8-0,.active):not(._swz1ff1-3-8-0):hover {
+._swz1ff2-3-9-1:is(._swz1ff0-3-9-1,.active):not(._swz1ff1-3-9-1):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff2-3-8-0:is(._swz1ff0-3-8-0,.active)::after {
+._swz1ff2-3-9-1:is(._swz1ff0-3-9-1,.active)::after {
   content: "";
   position: absolute;
   width: 20px;
@@ -19,16 +19,16 @@
   transform: translateX(-50%) translateY(calc(var(--dt-spacings-size-2, 2px) * -1));
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff3-3-8-0 {
+._swz1ff3-3-9-1 {
   position: relative;
 }
-._swz1ff3-3-8-0:is(._swz1ff0-3-8-0,.active):not(._swz1ff1-3-8-0) {
+._swz1ff3-3-9-1:is(._swz1ff0-3-9-1,.active):not(._swz1ff1-3-9-1) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._swz1ff3-3-8-0:is(._swz1ff0-3-8-0,.active):not(._swz1ff1-3-8-0):hover {
+._swz1ff3-3-9-1:is(._swz1ff0-3-9-1,.active):not(._swz1ff1-3-9-1):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._swz1ff3-3-8-0:is(._swz1ff0-3-8-0,.active)::after {
+._swz1ff3-3-9-1:is(._swz1ff0-3-9-1,.active)::after {
   content: "";
   position: absolute;
   width: var(--dt-spacings-size-2, 2px);
@@ -39,6 +39,6 @@
   transform: translate(4px);
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._swz1ff4-3-8-0 {
+._swz1ff4-3-9-1 {
   min-width: max-content;
 }

package/esm/layouts/app-header/Navigation.sty.js

@@ -1,9 +1,9 @@
 import "./Navigation.css";
-var button = "_swz1ff2-3-8-0";
-var inlineNav = "_swz1ff4-3-8-0";
-var isDisabled = "_swz1ff1-3-8-0";
-var isSelected = "_swz1ff0-3-8-0";
-var menuLink = "_swz1ff3-3-8-0";
+var button = "_swz1ff2-3-9-1";
+var inlineNav = "_swz1ff4-3-9-1";
+var isDisabled = "_swz1ff1-3-9-1";
+var isSelected = "_swz1ff0-3-9-1";
+var menuLink = "_swz1ff3-3-9-1";
 export {
   button,
   inlineNav,

package/esm/layouts/app-header/Navigation.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/app-header/Navigation.css.ts"],
-  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-8-0';\nexport var inlineNav = '_swz1ff4-3-8-0';\nexport var isDisabled = '_swz1ff1-3-8-0';\nexport var isSelected = '_swz1ff0-3-8-0';\nexport var menuLink = '_swz1ff3-3-8-0';"],
+  "sourcesContent": ["import './Navigation.css';\nexport var button = '_swz1ff2-3-9-1';\nexport var inlineNav = '_swz1ff4-3-9-1';\nexport var isDisabled = '_swz1ff1-3-9-1';\nexport var isSelected = '_swz1ff0-3-9-1';\nexport var menuLink = '_swz1ff3-3-9-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,IAAI,aAAa;AACjB,IAAI,WAAW;",
   "names": []
 }

package/esm/layouts/app-header/action-group/ActionButton.css

@@ -1,4 +1,4 @@
-._otmjah0-3-8-0 {
+._otmjah0-3-9-1 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -11,17 +11,17 @@
   cursor: pointer;
   max-width: unset;
 }
-._otmjah0-3-8-0:hover {
+._otmjah0-3-9-1:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   text-decoration: none;
 }
-._otmjah0-3-8-0:active {
+._otmjah0-3-9-1:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
   text-decoration: none;
 }
-._otmjah0-3-8-0:after {
+._otmjah0-3-9-1:after {
   content: " ";
   width: 16px;
   height: 2px;
@@ -34,50 +34,50 @@
   transform: translateX(-50%) translateY(var(--dt-spacings-size-0, 0));
   transition: width var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1)), opacity var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1)), transform var(--dt-animations-slide-out-duration-fast, 150ms) var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
 }
-._otmjah1-3-8-0._otmjah1-3-8-0 {
+._otmjah1-3-9-1._otmjah1-3-9-1 {
   gap: var(--dt-spacings-size-8, 8px);
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }
-._otmjah2-3-8-0._otmjah2-3-8-0 {
+._otmjah2-3-9-1._otmjah2-3-9-1 {
   gap: var(--dt-spacings-size-6, 6px);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._otmjah3-3-8-0 {
+._otmjah3-3-9-1 {
   cursor: default;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._otmjah3-3-8-0:hover {
+._otmjah3-3-9-1:hover {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: inherit;
   text-decoration: none;
 }
-._otmjah4-3-8-0.active {
+._otmjah4-3-9-1.active {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._otmjah4-3-8-0._otmjah3-3-8-0.active {
+._otmjah4-3-9-1._otmjah3-3-9-1.active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
 }
-._otmjah4-3-8-0:not(._otmjah3-3-8-0).active:hover {
+._otmjah4-3-9-1:not(._otmjah3-3-9-1).active:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
   text-decoration: none;
 }
-._otmjah4-3-8-0:not([role="menuitem"]).active:active {
+._otmjah4-3-9-1:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
   text-decoration: none;
 }
-._otmjah4-3-8-0._otmjah3-3-8-0._otmjah4-3-8-0:not([role="menuitem"]).active:active {
+._otmjah4-3-9-1._otmjah3-3-9-1._otmjah4-3-9-1:not([role="menuitem"]).active:active {
   color: var(--dt-colors-text-primary-disabled, #595a7d80);
   background-color: inherit;
 }
-._otmjah4-3-8-0.active::after {
+._otmjah4-3-9-1.active::after {
   content: " ";
   width: 20px;
   height: 2px;
@@ -90,10 +90,10 @@
   transform: translateX(-50%) translateY(calc(var(--dt-spacings-size-2, 2px) * -1));
   transition: width var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), opacity var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1)), transform var(--dt-animations-slide-in-duration-fast, 200ms) var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._otmjah4-3-8-0._otmjah3-3-8-0.active::after {
+._otmjah4-3-9-1._otmjah3-3-9-1.active::after {
   background-color: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._otmjah4-3-8-0[role="menuitem"].active::after {
+._otmjah4-3-9-1[role="menuitem"].active::after {
   display: block;
   height: calc(100% - 2 * var(--dt-spacings-size-6, 6px));
   width: var(--dt-spacings-size-2, 2px);
@@ -102,7 +102,7 @@
   transform: translate(4px);
   bottom: unset;
 }
-._otmjah4-3-8-0 a {
+._otmjah4-3-9-1 a {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);

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

@@ -1,8 +1,8 @@
 import "./ActionButton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var disabled = "_otmjah3-3-8-0";
-var navItem = _7a468({ defaultClassName: "_otmjah0-3-8-0", variantClassNames: { density: { "default": "_otmjah1-3-8-0", condensed: "_otmjah2-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var navItemSelectionStyle = "_otmjah4-3-8-0";
+var disabled = "_otmjah3-3-9-1";
+var navItem = _7a468({ defaultClassName: "_otmjah0-3-9-1", variantClassNames: { density: { "default": "_otmjah1-3-9-1", condensed: "_otmjah2-3-9-1" } }, defaultVariants: {}, compoundVariants: [] });
+var navItemSelectionStyle = "_otmjah4-3-9-1";
 export {
   disabled,
   navItem,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionButton.css.ts"],
-  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-8-0';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-8-0',variantClassNames:{density:{'default':'_otmjah1-3-8-0',condensed:'_otmjah2-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-8-0';"],
+  "sourcesContent": ["import './ActionButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabled = '_otmjah3-3-9-1';\nexport var navItem = _7a468({defaultClassName:'_otmjah0-3-9-1',variantClassNames:{density:{'default':'_otmjah1-3-9-1',condensed:'_otmjah2-3-9-1'}},defaultVariants:{},compoundVariants:[]});\nexport var navItemSelectionStyle = '_otmjah4-3-9-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,WAAW;AACf,IAAI,UAAU,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,WAAU,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnL,IAAI,wBAAwB;",
   "names": []
 }

package/esm/layouts/app-header/action-group/ActionGroup.css

@@ -1,4 +1,4 @@
-._1d2ks7u0-3-8-0 {
+._1d2ks7u0-3-9-1 {
   position: absolute;
   visibility: hidden;
   z-index: -1;

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

@@ -1,5 +1,5 @@
 import "./ActionGroup.css";
-var actionGroupHiddenItemCSS = "_1d2ks7u0-3-8-0";
+var actionGroupHiddenItemCSS = "_1d2ks7u0-3-9-1";
 export {
   actionGroupHiddenItemCSS
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/action-group/ActionGroup.css.ts"],
-  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-8-0';"],
+  "sourcesContent": ["import './ActionGroup.css';\nexport var actionGroupHiddenItemCSS = '_1d2ks7u0-3-9-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,2BAA2B;",
   "names": []
 }

package/esm/layouts/app-header/action-group/NavItem.css

@@ -1,13 +1,13 @@
-._bf74pw2-3-8-0 {
+._bf74pw2-3-9-1 {
   position: relative;
 }
-._bf74pw2-3-8-0._bf74pw0-3-8-0:not(._bf74pw1-3-8-0), ._bf74pw2-3-8-0.active:not(._bf74pw1-3-8-0) {
+._bf74pw2-3-9-1._bf74pw0-3-9-1:not(._bf74pw1-3-9-1), ._bf74pw2-3-9-1.active:not(._bf74pw1-3-9-1) {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._bf74pw2-3-8-0._bf74pw0-3-8-0:not(._bf74pw1-3-8-0):hover, ._bf74pw2-3-8-0.active:not(._bf74pw1-3-8-0):hover {
+._bf74pw2-3-9-1._bf74pw0-3-9-1:not(._bf74pw1-3-9-1):hover, ._bf74pw2-3-9-1.active:not(._bf74pw1-3-9-1):hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._bf74pw2-3-8-0._bf74pw0-3-8-0::after, ._bf74pw2-3-8-0.active::after {
+._bf74pw2-3-9-1._bf74pw0-3-9-1::after, ._bf74pw2-3-9-1.active::after {
   content: "";
   position: absolute;
   width: 20px;

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

@@ -1,7 +1,7 @@
 import "./NavItem.css";
-var button = "_bf74pw2-3-8-0";
-var isDisabled = "_bf74pw1-3-8-0";
-var isSelected = "_bf74pw0-3-8-0";
+var button = "_bf74pw2-3-9-1";
+var isDisabled = "_bf74pw1-3-9-1";
+var isSelected = "_bf74pw0-3-9-1";
 export {
   button,
   isDisabled,

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

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

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

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

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

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

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

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

package/esm/layouts/container/Container.css

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

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

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

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

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

package/esm/layouts/divider/Divider.css

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

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

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

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

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