npm - @dynatrace/strato-components - Versions diffs - 3.1.1 → 3.2.0 - Mend

@dynatrace/strato-components 3.1.1 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2959) hide show

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

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

package/esm/forms/calendar/components/CalendarItem.css CHANGED Viewed

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

package/esm/forms/calendar/components/CalendarItem.js CHANGED Viewed

@@ -4,11 +4,7 @@ import {
   forwardRef,
   useMemo
 } from "react";
-import {
-  calendarButtonCSS,
-  currentIndicator,
-  outOfScopeDay
-} from "./CalendarItem.sty.js";
+import * as itemStyles from "./CalendarItem.sty.js";
 import { Button } from "../../../buttons/button/Button.js";
 import { useFormFieldContext } from "../../forms-core/hooks/useFormFieldContext.js";
 import { useCalendarContext } from "../hooks/useCalendarContext.js";
@@ -39,7 +35,7 @@ const CalendarItem = /* @__PURE__ */ forwardRef(
       }
       return "default";
     }, [view, isSelected, isCurrent]);
-    const currentStyle = view !== "day" && isCurrent ? currentIndicator : "";
+    const currentStyle = view !== "day" && isCurrent ? itemStyles.currentIndicator : "";
     const selectionHandler = !isDisabled && !disabled && !readOnly ? {
       onClick,
       onKeyDown: (event) => {
@@ -57,8 +53,8 @@ const CalendarItem = /* @__PURE__ */ forwardRef(
         ref,
         "aria-label": ariaLabel,
         ...remainingProps,
-        className: clsx(calendarButtonCSS, currentStyle, {
-          [outOfScopeDay]: !isCurrentMonthDay && highlightColor === "neutral" && !(disabled || isDisabled || ariaDisabled)
+        className: clsx(itemStyles.calendarButton, currentStyle, {
+          [itemStyles.outOfScopeDay]: !isCurrentMonthDay && highlightColor === "neutral" && !(disabled || isDisabled || ariaDisabled)
         }),
         color: highlightColor,
         disabled: disabled || isDisabled,

package/esm/forms/calendar/components/CalendarItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/CalendarItem.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useMemo,\n  ComponentPropsWithRef,\n  MouseEventHandler as ReactMouseEventHandler,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport {\n  calendarButtonCSS,\n  currentIndicator,\n  outOfScopeDay,\n} from './CalendarItem.sty.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useCalendarContext } from '../hooks/useCalendarContext.js';\nimport type { CalendarViewType } from '../types/shared-types.js';\n\n//#region types\n/** @internal */\ninterface CalendarButtonProps extends ComponentPropsWithRef<'div'> {\n  /** Controls the disabled state. */\n  disabled?: boolean;\n  /** Whether the calendar button is focused. */\n  focused?: boolean;\n}\n\ntype CalendarDayButtonProps = {\n  isCurrentMonthDay?: boolean;\n  isOnlySelected?: boolean;\n};\n\n/** @internal */\nexport interface ViewItem {\n  /** The localized aria label of the view item. */\n  ariaLabel: string;\n  /** The tabindex attribute of the view item. */\n  tabIndex: 0 | -1;\n  /** Whether this is the current view item (i.e. today, current month, current year). */\n  isCurrent: boolean;\n  /** Whether the item is disabled. */\n  isDisabled?: boolean;\n  /** Color used for the highlighting. */\n  highlightColor?: 'neutral' | 'primary' | 'critical';\n  /** Whether the view item is actually selected. */\n  isSelected?: boolean;\n  /** Whether a complete date or timeframe was selected. */\n  isIncompleteSelection?: boolean;\n  /** Event listener for clicks on the view item. */\n  onClick: () => void;\n  /** Event listener for complex hover styles on range selection. */\n  rangeInteractionProps?: {\n    onMouseEnter?: ReactMouseEventHandler<HTMLElement>;\n    onMouseLeave?: ReactMouseEventHandler<HTMLElement>;\n  };\n  /** How the item should be highlighted. */\n  highlightType?: 'first' | 'last' | 'inbetween' | 'same';\n  /** What kind of selection outline should be used. */\n  selectionVariant?:\n    | 'absolute'\n    | 'relative'\n    | 'absolute-relative'\n    | 'relative-absolute';\n}\n\n/** @internal */\ntype CalendarItemProps = ViewItem &\n  CalendarButtonProps & {\n    isInRange?: boolean;\n    view: CalendarViewType;\n  } & CalendarDayButtonProps;\n//#endregion\n\n/** @internal */\nexport const CalendarItem = /* @__PURE__ */ forwardRef(\n  (\n    {\n      children,\n      isCurrent = false,\n      highlightColor = 'neutral',\n      onClick,\n      isSelected = false,\n      isDisabled = false,\n      isCurrentMonthDay = true,\n      view,\n      ariaLabel,\n      ...remainingProps\n    }: CalendarItemProps,\n    ref: typeof remainingProps.ref,\n  ) => {\n    const { disabled, ariaDisabled } = useFormFieldContext();\n    const { readOnly } = useCalendarContext();\n\n    const variant = useMemo(() => {\n      // The day doesn't rely on the button background color styles.\n      if (view === 'day') {\n        return 'default';\n      }\n\n      if (isSelected) {\n        return 'accent';\n      }\n\n      if (isCurrent) {\n        return 'emphasized';\n      }\n\n      return 'default';\n    }, [view, isSelected, isCurrent]);\n\n    const currentStyle = view !== 'day' && isCurrent ? currentIndicator : '';\n\n    const selectionHandler =\n      !isDisabled && !disabled && !readOnly\n        ? {\n            onClick,\n            onKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => {\n              const { code } = event;\n\n              if (code === 'Space' || code === 'Enter') {\n                event.preventDefault();\n                onClick?.();\n              }\n            },\n          }\n        : {};\n\n    return (\n      <Button\n        as=\"div\"\n        ref={ref}\n        aria-label={ariaLabel}\n        {...remainingProps}\n        className={clsx(calendarButtonCSS, currentStyle, {\n          [outOfScopeDay]:\n            !isCurrentMonthDay &&\n            highlightColor === 'neutral' &&\n            !(disabled || isDisabled || ariaDisabled),\n        })}\n        color={highlightColor}\n        disabled={disabled || isDisabled}\n        aria-disabled={ariaDisabled}\n        variant={variant}\n        {...selectionHandler}\n      >\n        {children}\n      </Button>\n    );\n  },\n);\n\n(\n  CalendarItem as typeof CalendarItem & {\n    displayName: string;\n  }\n).displayName = 'CalendarBodyDateButton';\n"],
-  "mappings": "AAiIM;AAjIN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AA2D5B,MAAM,eAA+B;AAAA,EAC1C,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,UAAM,EAAE,SAAS,IAAI,mBAAmB;AAExC,UAAM,UAAU,QAAQ,MAAM;AAE5B,UAAI,SAAS,OAAO;AAClB,eAAO;AAAA,MACT;AAEA,UAAI,YAAY;AACd,eAAO;AAAA,MACT;AAEA,UAAI,WAAW;AACb,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,IACT,GAAG,CAAC,MAAM,YAAY,SAAS,CAAC;AAEhC,UAAM,eAAe,SAAS,SAAS,YAAY,mBAAmB;AAEtE,UAAM,mBACJ,CAAC,cAAc,CAAC,YAAY,CAAC,WACzB;AAAA,MACE;AAAA,MACA,WAAW,CAAC,UAA8C;AACxD,cAAM,EAAE,KAAK,IAAI;AAEjB,YAAI,SAAS,WAAW,SAAS,SAAS;AACxC,gBAAM,eAAe;AACrB,oBAAU;AAAA,QACZ;AAAA,MACF;AAAA,IACF,IACA,CAAC;AAEP,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QACA,cAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW,KAAK,mBAAmB,cAAc;AAAA,UAC/C,CAAC,aAAa,GACZ,CAAC,qBACD,mBAAmB,aACnB,EAAE,YAAY,cAAc;AAAA,QAChC,CAAC;AAAA,QACD,OAAO;AAAA,QACP,UAAU,YAAY;AAAA,QACtB,iBAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAGE,aAGA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useMemo,\n  ComponentPropsWithRef,\n  MouseEventHandler as ReactMouseEventHandler,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport * as itemStyles from './CalendarItem.sty.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useCalendarContext } from '../hooks/useCalendarContext.js';\nimport type { CalendarViewType } from '../types/shared-types.js';\n\n//#region types\n/** @internal */\ninterface CalendarButtonProps extends ComponentPropsWithRef<'div'> {\n  /** Controls the disabled state. */\n  disabled?: boolean;\n  /** Whether the calendar button is focused. */\n  focused?: boolean;\n}\n\ntype CalendarDayButtonProps = {\n  isCurrentMonthDay?: boolean;\n  isOnlySelected?: boolean;\n};\n\n/** @internal */\nexport interface ViewItem {\n  /** The localized aria label of the view item. */\n  ariaLabel: string;\n  /** The tabindex attribute of the view item. */\n  tabIndex: 0 | -1;\n  /** Whether this is the current view item (i.e. today, current month, current year). */\n  isCurrent: boolean;\n  /** Whether the item is disabled. */\n  isDisabled?: boolean;\n  /** Color used for the highlighting. */\n  highlightColor?: 'neutral' | 'primary' | 'critical';\n  /** Whether the view item is actually selected. */\n  isSelected?: boolean;\n  /** Whether a complete date or timeframe was selected. */\n  isIncompleteSelection?: boolean;\n  /** Event listener for clicks on the view item. */\n  onClick: () => void;\n  /** Event listener for complex hover styles on range selection. */\n  rangeInteractionProps?: {\n    onMouseEnter?: ReactMouseEventHandler<HTMLElement>;\n    onMouseLeave?: ReactMouseEventHandler<HTMLElement>;\n  };\n  /** How the item should be highlighted. */\n  highlightType?: 'first' | 'last' | 'inbetween' | 'same';\n  /** What kind of selection outline should be used. */\n  selectionVariant?:\n    | 'absolute'\n    | 'relative'\n    | 'absolute-relative'\n    | 'relative-absolute';\n}\n\n/** @internal */\ntype CalendarItemProps = ViewItem &\n  CalendarButtonProps & {\n    isInRange?: boolean;\n    view: CalendarViewType;\n  } & CalendarDayButtonProps;\n//#endregion\n\n/** @internal */\nexport const CalendarItem = /* @__PURE__ */ forwardRef(\n  (\n    {\n      children,\n      isCurrent = false,\n      highlightColor = 'neutral',\n      onClick,\n      isSelected = false,\n      isDisabled = false,\n      isCurrentMonthDay = true,\n      view,\n      ariaLabel,\n      ...remainingProps\n    }: CalendarItemProps,\n    ref: typeof remainingProps.ref,\n  ) => {\n    const { disabled, ariaDisabled } = useFormFieldContext();\n    const { readOnly } = useCalendarContext();\n\n    const variant = useMemo(() => {\n      // The day doesn't rely on the button background color styles.\n      if (view === 'day') {\n        return 'default';\n      }\n\n      if (isSelected) {\n        return 'accent';\n      }\n\n      if (isCurrent) {\n        return 'emphasized';\n      }\n\n      return 'default';\n    }, [view, isSelected, isCurrent]);\n\n    const currentStyle =\n      view !== 'day' && isCurrent ? itemStyles.currentIndicator : '';\n\n    const selectionHandler =\n      !isDisabled && !disabled && !readOnly\n        ? {\n            onClick,\n            onKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => {\n              const { code } = event;\n\n              if (code === 'Space' || code === 'Enter') {\n                event.preventDefault();\n                onClick?.();\n              }\n            },\n          }\n        : {};\n\n    return (\n      <Button\n        as=\"div\"\n        ref={ref}\n        aria-label={ariaLabel}\n        {...remainingProps}\n        className={clsx(itemStyles.calendarButton, currentStyle, {\n          [itemStyles.outOfScopeDay]:\n            !isCurrentMonthDay &&\n            highlightColor === 'neutral' &&\n            !(disabled || isDisabled || ariaDisabled),\n        })}\n        color={highlightColor}\n        disabled={disabled || isDisabled}\n        aria-disabled={ariaDisabled}\n        variant={variant}\n        {...selectionHandler}\n      >\n        {children}\n      </Button>\n    );\n  },\n);\n\n(\n  CalendarItem as typeof CalendarItem & {\n    displayName: string;\n  }\n).displayName = 'CalendarBodyDateButton';\n"],
+  "mappings": "AA8HM;AA9HN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAEP,YAAY,gBAAgB;AAC5B,SAAS,cAAc;AACvB,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AA2D5B,MAAM,eAA+B;AAAA,EAC1C,CACE;AAAA,IACE;AAAA,IACA,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,UAAM,EAAE,SAAS,IAAI,mBAAmB;AAExC,UAAM,UAAU,QAAQ,MAAM;AAE5B,UAAI,SAAS,OAAO;AAClB,eAAO;AAAA,MACT;AAEA,UAAI,YAAY;AACd,eAAO;AAAA,MACT;AAEA,UAAI,WAAW;AACb,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,IACT,GAAG,CAAC,MAAM,YAAY,SAAS,CAAC;AAEhC,UAAM,eACJ,SAAS,SAAS,YAAY,WAAW,mBAAmB;AAE9D,UAAM,mBACJ,CAAC,cAAc,CAAC,YAAY,CAAC,WACzB;AAAA,MACE;AAAA,MACA,WAAW,CAAC,UAA8C;AACxD,cAAM,EAAE,KAAK,IAAI;AAEjB,YAAI,SAAS,WAAW,SAAS,SAAS;AACxC,gBAAM,eAAe;AACrB,oBAAU;AAAA,QACZ;AAAA,MACF;AAAA,IACF,IACA,CAAC;AAEP,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QACA,cAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW,KAAK,WAAW,gBAAgB,cAAc;AAAA,UACvD,CAAC,WAAW,aAAa,GACvB,CAAC,qBACD,mBAAmB,aACnB,EAAE,YAAY,cAAc;AAAA,QAChC,CAAC;AAAA,QACD,OAAO;AAAA,QACP,UAAU,YAAY;AAAA,QACtB,iBAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAGE,aAGA,cAAc;",
   "names": []
 }

package/esm/forms/calendar/components/CalendarItem.sty.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import "./CalendarItem.css";
-var calendarButtonCSS = "_1basjc2-3-1-1";
-var calendarHeaderButtonCSS = "_1basjc3-3-1-1";
-var currentIndicator = "_1basjc1-3-1-1";
-var outOfScopeDay = "_1basjc0-3-1-1";
+var calendarButton = "_1basjc2-3-2-0";
+var currentIndicator = "_1basjc1-3-2-0";
+var headerButton = "_1basjc3-3-2-0";
+var outOfScopeDay = "_1basjc0-3-2-0";
 export {
-  calendarButtonCSS,
-  calendarHeaderButtonCSS,
+  calendarButton,
   currentIndicator,
+  headerButton,
   outOfScopeDay
 };
 //# sourceMappingURL=CalendarItem.sty.js.map

package/esm/forms/calendar/components/CalendarItem.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/CalendarItem.css.ts"],
-  "sourcesContent": ["import './CalendarItem.css';\nexport var calendarButtonCSS = '_1basjc2-3-1-1';\nexport var calendarHeaderButtonCSS = '_1basjc3-3-1-1';\nexport var currentIndicator = '_1basjc1-3-1-1';\nexport var outOfScopeDay = '_1basjc0-3-1-1';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,0BAA0B;AAC9B,IAAI,mBAAmB;AACvB,IAAI,gBAAgB;",
+  "sourcesContent": ["import './CalendarItem.css';\nexport var calendarButton = '_1basjc2-3-2-0';\nexport var currentIndicator = '_1basjc1-3-2-0';\nexport var headerButton = '_1basjc3-3-2-0';\nexport var outOfScopeDay = '_1basjc0-3-2-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,mBAAmB;AACvB,IAAI,eAAe;AACnB,IAAI,gBAAgB;",
   "names": []
 }

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

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

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

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

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

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

package/esm/forms/calendar/components/Day.js CHANGED Viewed

@@ -67,6 +67,7 @@ const Day = ({ date, isCurrentMonthDay = true, position }) => {
           "aria-selected": isSelected,
           onClick,
           view: "day",
+          "data-dt-name": "SelectDay",
           children: [
             date.getDate(),
             /* @__PURE__ */ jsx(

package/esm/forms/calendar/components/Day.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/Day.tsx"],
-  "sourcesContent": ["import { TZDate } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { useRef } from 'react';\n\nimport {\n  calendarClearBgCSS,\n  calendarFieldCSS,\n  calendarRangeFieldCSS,\n} from '../Calendar.sty.js';\nimport { CalendarItem } from './CalendarItem.js';\nimport { CalendarOutlineIcon } from './CalendarOutlineIcon.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useDay } from '../hooks/useDay.js';\nimport { NUMBER_OF_WEEKDAYS } from '../types/calendarConfiguration.js';\n\n/** @internal */\ninterface DayProps {\n  /** The day it represents. */\n  date: TZDate;\n  /** Whether the day is part of the current month */\n  isCurrentMonthDay?: boolean;\n  /** Position in the calendar grid 1 is first day and 7 the last */\n  position: number;\n}\n\n/**\n * Day component\n * Renders one single day of a calendar month\n * @internal\n */\nexport const Day = ({ date, isCurrentMonthDay = true, position }: DayProps) => {\n  // Reference of the day button, needed to pass to the hook for proper focus management\n  const itemRef = useRef<HTMLDivElement>(null);\n  const isLastInRow = position % NUMBER_OF_WEEKDAYS === 0;\n  const isFirstInRow = position % NUMBER_OF_WEEKDAYS === 1;\n\n  const {\n    ariaLabel,\n    tabIndex,\n    isCurrent,\n    onClick,\n    isDisabled,\n    rangeInteractionProps,\n    highlightColor,\n    highlightType,\n    isSelected,\n    isIncompleteSelection,\n    selectionVariant,\n  } = useDay({\n    date,\n    itemRef,\n  });\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const { state } = useFormFieldMessagesContext();\n\n  const validatedHighlightColor =\n    state.showError && highlightColor === 'primary'\n      ? 'critical'\n      : highlightColor;\n\n  return (\n    <td\n      role=\"presentation\"\n      className={clsx(\n        calendarFieldCSS({\n          color: validatedHighlightColor,\n          isDisabled: isDisabled || disabled || ariaDisabled,\n          isIncompleteSelection: isIncompleteSelection,\n        }),\n        highlightType && highlightType !== 'same'\n          ? calendarRangeFieldCSS({\n              rangeKind: highlightType,\n            })\n          : '',\n        isSelected ? calendarClearBgCSS : '',\n      )}\n      {...rangeInteractionProps}\n    >\n      <CalendarItem\n        ref={itemRef}\n        className=\"calendar-button calendar-body-button\"\n        isDisabled={isDisabled || disabled}\n        isCurrent={isCurrent}\n        isSelected={isSelected}\n        highlightColor={validatedHighlightColor}\n        isCurrentMonthDay={isCurrentMonthDay}\n        tabIndex={tabIndex}\n        ariaLabel={ariaLabel}\n        role=\"gridcell\"\n        aria-selected={isSelected}\n        onClick={onClick}\n        view=\"day\"\n      >\n        {date.getDate()}\n        <CalendarOutlineIcon\n          isCurrent={isCurrent}\n          variant={selectionVariant}\n          highlightType={\n            (isFirstInRow && highlightType === 'last') ||\n            (isLastInRow && highlightType === 'first')\n              ? undefined\n              : highlightType\n          }\n        />\n      </CalendarItem>\n    </td>\n  );\n};\n\nDay['displayName'] = 'Day';\n"],
-  "mappings": "AA+EM,SAgBE,KAhBF;AA9EN,OAAO,UAAU;AACjB,SAAS,cAAc;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,cAAc;AACvB,SAAS,0BAA0B;AAiB5B,MAAM,MAAM,CAAC,EAAE,MAAM,oBAAoB,MAAM,SAAS,MAAgB;AAE7E,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,cAAc,WAAW,uBAAuB;AACtD,QAAM,eAAe,WAAW,uBAAuB;AAEvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,OAAO;AAAA,IACT;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,QAAM,EAAE,MAAM,IAAI,4BAA4B;AAE9C,QAAM,0BACJ,MAAM,aAAa,mBAAmB,YAClC,aACA;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT,iBAAiB;AAAA,UACf,OAAO;AAAA,UACP,YAAY,cAAc,YAAY;AAAA,UACtC;AAAA,QACF,CAAC;AAAA,QACD,iBAAiB,kBAAkB,SAC/B,sBAAsB;AAAA,UACpB,WAAW;AAAA,QACb,CAAC,IACD;AAAA,QACJ,aAAa,qBAAqB;AAAA,MACpC;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV,YAAY,cAAc;AAAA,UAC1B;AAAA,UACA;AAAA,UACA,gBAAgB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,iBAAe;AAAA,UACf;AAAA,UACA,MAAK;AAAA,UAEJ;AAAA,iBAAK,QAAQ;AAAA,YACd;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,SAAS;AAAA,gBACT,eACG,gBAAgB,kBAAkB,UAClC,eAAe,kBAAkB,UAC9B,SACA;AAAA;AAAA,YAER;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAI,aAAa,IAAI;",
+  "sourcesContent": ["import { TZDate } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { useRef } from 'react';\n\nimport {\n  calendarClearBgCSS,\n  calendarFieldCSS,\n  calendarRangeFieldCSS,\n} from '../Calendar.sty.js';\nimport { CalendarItem } from './CalendarItem.js';\nimport { CalendarOutlineIcon } from './CalendarOutlineIcon.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useDay } from '../hooks/useDay.js';\nimport { NUMBER_OF_WEEKDAYS } from '../types/calendarConfiguration.js';\n\n/** @internal */\ninterface DayProps {\n  /** The day it represents. */\n  date: TZDate;\n  /** Whether the day is part of the current month */\n  isCurrentMonthDay?: boolean;\n  /** Position in the calendar grid 1 is first day and 7 the last */\n  position: number;\n}\n\n/**\n * Day component\n * Renders one single day of a calendar month\n * @internal\n */\nexport const Day = ({ date, isCurrentMonthDay = true, position }: DayProps) => {\n  // Reference of the day button, needed to pass to the hook for proper focus management\n  const itemRef = useRef<HTMLDivElement>(null);\n  const isLastInRow = position % NUMBER_OF_WEEKDAYS === 0;\n  const isFirstInRow = position % NUMBER_OF_WEEKDAYS === 1;\n\n  const {\n    ariaLabel,\n    tabIndex,\n    isCurrent,\n    onClick,\n    isDisabled,\n    rangeInteractionProps,\n    highlightColor,\n    highlightType,\n    isSelected,\n    isIncompleteSelection,\n    selectionVariant,\n  } = useDay({\n    date,\n    itemRef,\n  });\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const { state } = useFormFieldMessagesContext();\n\n  const validatedHighlightColor =\n    state.showError && highlightColor === 'primary'\n      ? 'critical'\n      : highlightColor;\n\n  return (\n    <td\n      role=\"presentation\"\n      className={clsx(\n        calendarFieldCSS({\n          color: validatedHighlightColor,\n          isDisabled: isDisabled || disabled || ariaDisabled,\n          isIncompleteSelection: isIncompleteSelection,\n        }),\n        highlightType && highlightType !== 'same'\n          ? calendarRangeFieldCSS({\n              rangeKind: highlightType,\n            })\n          : '',\n        isSelected ? calendarClearBgCSS : '',\n      )}\n      {...rangeInteractionProps}\n    >\n      <CalendarItem\n        ref={itemRef}\n        className=\"calendar-button calendar-body-button\"\n        isDisabled={isDisabled || disabled}\n        isCurrent={isCurrent}\n        isSelected={isSelected}\n        highlightColor={validatedHighlightColor}\n        isCurrentMonthDay={isCurrentMonthDay}\n        tabIndex={tabIndex}\n        ariaLabel={ariaLabel}\n        role=\"gridcell\"\n        aria-selected={isSelected}\n        onClick={onClick}\n        view=\"day\"\n        data-dt-name=\"SelectDay\"\n      >\n        {date.getDate()}\n        <CalendarOutlineIcon\n          isCurrent={isCurrent}\n          variant={selectionVariant}\n          highlightType={\n            (isFirstInRow && highlightType === 'last') ||\n            (isLastInRow && highlightType === 'first')\n              ? undefined\n              : highlightType\n          }\n        />\n      </CalendarItem>\n    </td>\n  );\n};\n\nDay['displayName'] = 'Day';\n"],
+  "mappings": "AA+EM,SAiBE,KAjBF;AA9EN,OAAO,UAAU;AACjB,SAAS,cAAc;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,cAAc;AACvB,SAAS,0BAA0B;AAiB5B,MAAM,MAAM,CAAC,EAAE,MAAM,oBAAoB,MAAM,SAAS,MAAgB;AAE7E,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,cAAc,WAAW,uBAAuB;AACtD,QAAM,eAAe,WAAW,uBAAuB;AAEvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,OAAO;AAAA,IACT;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,QAAM,EAAE,MAAM,IAAI,4BAA4B;AAE9C,QAAM,0BACJ,MAAM,aAAa,mBAAmB,YAClC,aACA;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT,iBAAiB;AAAA,UACf,OAAO;AAAA,UACP,YAAY,cAAc,YAAY;AAAA,UACtC;AAAA,QACF,CAAC;AAAA,QACD,iBAAiB,kBAAkB,SAC/B,sBAAsB;AAAA,UACpB,WAAW;AAAA,QACb,CAAC,IACD;AAAA,QACJ,aAAa,qBAAqB;AAAA,MACpC;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV,YAAY,cAAc;AAAA,UAC1B;AAAA,UACA;AAAA,UACA,gBAAgB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,iBAAe;AAAA,UACf;AAAA,UACA,MAAK;AAAA,UACL,gBAAa;AAAA,UAEZ;AAAA,iBAAK,QAAQ;AAAA,YACd;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,SAAS;AAAA,gBACT,eACG,gBAAgB,kBAAkB,UAClC,eAAe,kBAAkB,UAC9B,SACA;AAAA;AAAA,YAER;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAI,aAAa,IAAI;",
   "names": []
 }

package/esm/forms/calendar/components/Month.js CHANGED Viewed

@@ -36,6 +36,7 @@ const Month = ({ date }) => {
           ariaLabel,
           view: "month",
           onClick,
+          "data-dt-name": "SelectMonth",
           children: formatDate(date, {
             month: "short"
           })

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

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

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

@@ -36,6 +36,7 @@ const Year = ({ date }) => {
           ariaLabel,
           onClick,
           view: "year",
+          "data-dt-name": "SelectYear",
           children: formatDate(date, { year: "numeric" })
         }
       )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/Year.tsx"],
-  "sourcesContent": ["import { TZDate } from '@date-fns/tz';\nimport { useRef } from 'react';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { calendarFieldCSS } from '../Calendar.sty.js';\nimport { CalendarItem } from './CalendarItem.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useYear } from '../hooks/useYear.js';\n\n/** @internal */\nexport const Year = ({ date }: { date: TZDate }) => {\n  // Reference of the year button, needed to pass to the hook for proper focus management\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const { ariaLabel, tabIndex, isCurrent, isSelected, onClick, isDisabled } =\n    useYear({\n      date,\n      itemRef,\n    });\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const highlightColor = isSelected ? 'primary' : 'neutral';\n\n  return (\n    <td\n      role=\"presentation\"\n      className={calendarFieldCSS({\n        color: highlightColor,\n        isDisabled: isDisabled || disabled || ariaDisabled,\n      })}\n    >\n      <CalendarItem\n        ref={itemRef}\n        className=\"calendar-button calendar-body-button\"\n        isCurrent={isCurrent}\n        isSelected={isSelected}\n        isDisabled={isDisabled || disabled}\n        highlightColor={highlightColor}\n        tabIndex={tabIndex}\n        role=\"gridcell\"\n        aria-selected={!!isSelected}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        view=\"year\"\n      >\n        {formatDate(date, { year: 'numeric' })}\n      </CalendarItem>\n    </td>\n  );\n};\n\nYear['displayName'] = 'Year';\n"],
-  "mappings": "AA+BM;AA9BN,SAAS,cAAc;AAEvB,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,eAAe;AAGjB,MAAM,OAAO,CAAC,EAAE,KAAK,MAAwB;AAElD,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,EAAE,WAAW,UAAU,WAAW,YAAY,SAAS,WAAW,IACtE,QAAQ;AAAA,IACN;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,QAAM,iBAAiB,aAAa,YAAY;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,iBAAiB;AAAA,QAC1B,OAAO;AAAA,QACP,YAAY,cAAc,YAAY;AAAA,MACxC,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,YAAY,cAAc;AAAA,UAC1B;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UAEJ,qBAAW,MAAM,EAAE,MAAM,UAAU,CAAC;AAAA;AAAA,MACvC;AAAA;AAAA,EACF;AAEJ;AAEA,KAAK,aAAa,IAAI;",
+  "sourcesContent": ["import { TZDate } from '@date-fns/tz';\nimport { useRef } from 'react';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { calendarFieldCSS } from '../Calendar.sty.js';\nimport { CalendarItem } from './CalendarItem.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useYear } from '../hooks/useYear.js';\n\n/** @internal */\nexport const Year = ({ date }: { date: TZDate }) => {\n  // Reference of the year button, needed to pass to the hook for proper focus management\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  const { ariaLabel, tabIndex, isCurrent, isSelected, onClick, isDisabled } =\n    useYear({\n      date,\n      itemRef,\n    });\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const highlightColor = isSelected ? 'primary' : 'neutral';\n\n  return (\n    <td\n      role=\"presentation\"\n      className={calendarFieldCSS({\n        color: highlightColor,\n        isDisabled: isDisabled || disabled || ariaDisabled,\n      })}\n    >\n      <CalendarItem\n        ref={itemRef}\n        className=\"calendar-button calendar-body-button\"\n        isCurrent={isCurrent}\n        isSelected={isSelected}\n        isDisabled={isDisabled || disabled}\n        highlightColor={highlightColor}\n        tabIndex={tabIndex}\n        role=\"gridcell\"\n        aria-selected={!!isSelected}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        view=\"year\"\n        data-dt-name=\"SelectYear\"\n      >\n        {formatDate(date, { year: 'numeric' })}\n      </CalendarItem>\n    </td>\n  );\n};\n\nYear['displayName'] = 'Year';\n"],
+  "mappings": "AA+BM;AA9BN,SAAS,cAAc;AAEvB,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,eAAe;AAGjB,MAAM,OAAO,CAAC,EAAE,KAAK,MAAwB;AAElD,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,EAAE,WAAW,UAAU,WAAW,YAAY,SAAS,WAAW,IACtE,QAAQ;AAAA,IACN;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,EAAE,UAAU,aAAa,IAAI,oBAAoB;AACvD,QAAM,iBAAiB,aAAa,YAAY;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,iBAAiB;AAAA,QAC1B,OAAO;AAAA,QACP,YAAY,cAAc,YAAY;AAAA,MACxC,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,YAAY,cAAc;AAAA,UAC1B;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,gBAAa;AAAA,UAEZ,qBAAW,MAAM,EAAE,MAAM,UAAU,CAAC;AAAA;AAAA,MACvC;AAAA;AAAA,EACF;AAEJ;AAEA,KAAK,aAAa,IAAI;",
   "names": []
 }

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

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

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

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

package/esm/forms/checkbox/Checkbox.css CHANGED Viewed

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

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

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

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

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

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

@@ -71,6 +71,7 @@ const DateSelector = forwardRef(
           ...overlayTriggerProps,
           size: "condensed",
           color: error ? "critical" : "neutral",
+          "data-dt-name": "ShowCalendar",
           children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(CalendarIcon, {}) })
         }
       ),

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

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