@dynatrace/strato-components 3.11.1 → 3.11.2

package/esm/buttons/button/Button.css

@@ -1,13 +1,13 @@
-._10kgnsa0-3-11-1 {
+._10kgnsa0-3-11-2 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: none;
-  background: var(--_bx32h3-3-11-1);
-  box-shadow: var(--_bx32h4-3-11-1);
-  color: var(--_bx32h0-3-11-1);
+  background: var(--_bx32h3-3-11-2);
+  box-shadow: var(--_bx32h4-3-11-2);
+  color: var(--_bx32h0-3-11-2);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -24,38 +24,38 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, box-shadow, transform;
 }
-._10kgnsa1-3-11-1 {
+._10kgnsa1-3-11-2 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-11-1 {
+._10kgnsa2-3-11-2 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-11-1 {
+._10kgnsa3-3-11-2 {
   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);
   gap: var(--dt-spacings-size-2, 2px);
 }
-._10kgnsa4-3-11-1 {
+._10kgnsa4-3-11-2 {
   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);
   gap: var(--dt-spacings-size-4, 4px);
 }
-._10kgnsa5-3-11-1 {
+._10kgnsa5-3-11-2 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-11-1 {
+._10kgnsa6-3-11-2 {
   width: 100%;
 }
-._10kgnsa7-3-11-1 {
+._10kgnsa7-3-11-2 {
   width: fit-content;
 }
-._10kgnsa8-3-11-1 {
+._10kgnsa8-3-11-2 {
   position: absolute;
   top: 0;
   left: 0;
@@ -67,19 +67,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-11-1 ._10kgnsa9-3-11-1:not(:has(svg:only-child)) {
+._10kgnsa3-3-11-2 ._10kgnsa9-3-11-2:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-11-1 ._10kgnsa9-3-11-1:not(:has(svg:only-child)) {
+._10kgnsa4-3-11-2 ._10kgnsa9-3-11-2:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-11-1 {
+._10kgnsab-3-11-2 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/esm/buttons/button/Button.js

@@ -6,7 +6,6 @@ import {
   useMemo
 } from "react";
 import { useIntl } from "react-intl";
-import { isElement } from "react-is";
 import * as styles from "./Button.sty.js";
 import { Label } from "./Label.js";
 import { Prefix } from "./Prefix.js";
@@ -15,6 +14,7 @@ import { ProgressCircle } from "../../content/progress/ProgressCircle.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { focusRingStatic } from "../../core/styles/focusRingStatic.sty.js";
+import { isSlot } from "../../core/utils/is-slot.js";
 import { mergeProps } from "../../core/utils/merge-props.js";
 import { parseBoolean } from "../../core/utils/parse-boolean.js";
 import { Flex } from "../../layouts/flex/Flex.js";
@@ -24,22 +24,12 @@ const COMPONENT_NAME = "Button";
 function getButtonSlots(children) {
   const slots = {};
   Children.forEach(children, (child) => {
-    if (isElement(child)) {
-      switch (child.type) {
-        case Suffix:
-          slots.suffix = child;
-          break;
-        case Prefix:
-          slots.prefix = child;
-          break;
-        case Label:
-          slots.label = child;
-          break;
-        default:
-          slots.freeform ??= [];
-          slots.freeform.push(child);
-          break;
-      }
+    if (isSlot(child, Suffix)) {
+      slots.suffix = child;
+    } else if (isSlot(child, Prefix)) {
+      slots.prefix = child;
+    } else if (isSlot(child, Label)) {
+      slots.label = child;
     } else {
       if (child !== null && child !== void 0) {
         slots.freeform ??= [];

package/esm/buttons/button/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/button/Button.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport * as CSS from 'csstype';\nimport {\n  Children,\n  type ElementType,\n  forwardRef,\n  type MouseEventHandler,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport * as styles from './Button.sty.js';\nimport { Label } from './Label.js';\nimport { Prefix } from './Prefix.js';\nimport { Suffix } from './Suffix.js';\nimport { ProgressCircle } from '../../content/progress/ProgressCircle.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport {\n  type AriaDisabledProps,\n  type AriaLabelingProps,\n} from '../../core/types/a11y-props.js';\nimport { type BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { parseBoolean } from '../../core/utils/parse-boolean.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Grid } from '../../layouts/grid/Grid.js';\nimport { fieldTokens } from '../../styles/field.sty.js';\n\nconst COMPONENT_NAME = 'Button';\n\n//#region Typings\n\n/**\n * Accepted properties for the Button.\n * @public\n */\nexport interface ButtonOwnProps\n  extends AriaLabelingProps,\n    AriaDisabledProps,\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * If a button is disabled e.g. it cannot be interacted with.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Different variants have different styles.\n   * @defaultValue 'default'\n   */\n  variant?: 'default' | 'emphasized' | 'accent';\n\n  /**\n   * The HTML button type.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n   * @defaultValue 'button'\n   */\n  type?: 'button' | 'reset' | 'submit';\n\n  /** Called when the button is interacted with. */\n  onClick?: MouseEventHandler;\n\n  /**\n   * The width of the button.\n   * @defaultValue 'content'\n   */\n  width?: 'content' | 'full' | CSS.Property.Width<string & {}>;\n\n  /**\n   * The color of the button. This should be chosen based on the context\n   * the button is used in.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'critical' | 'warning';\n\n  /**\n   * Controls the text alignment inside the button. Only affects the button\n   * if the width is not set to 'content'.\n   * @defaultValue 'center'\n   */\n  textAlign?: 'center' | 'start';\n\n  /**\n   * The size of the button.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'condensed';\n\n  /**\n   * The current loading state of the button. If true, a loading icon is shown, the button stays in the tab order with aria-disabled=true,\n   * and its busy state is signalled via aria-busy=true.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type ButtonProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  ButtonOwnProps\n>;\n\ntype ButtonSlots = {\n  label?: ReactNode;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  freeform?: ReactNode[];\n};\n\n//#endregion\n\n/**\n * Iterates over child nodes to extract specific component slots.\n * @public\n */\nexport default function getButtonSlots(children: ReactNode) {\n  const slots: ButtonSlots = {};\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Suffix:\n          slots.suffix = child;\n          break;\n        case Prefix:\n          slots.prefix = child;\n          break;\n        case Label:\n          slots.label = child;\n          break;\n        default:\n          slots.freeform ??= [];\n          slots.freeform.push(child);\n          break;\n      }\n    } else {\n      if (child !== null && child !== undefined) {\n        slots.freeform ??= [];\n        slots.freeform.push(child);\n      }\n    }\n  });\n\n  return slots;\n}\n\nconst _Button: <E extends ElementType = 'button'>(\n  props: ButtonProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(props: ButtonProps<E>, ref: typeof props.ref) => {\n    const {\n      children,\n      variant = 'default',\n      disabled,\n      'aria-disabled': ariaDisabledProp,\n      required,\n      id: propId,\n      type = 'button',\n      onClick,\n      ariaLabel,\n      width = 'content',\n      color = 'neutral',\n      textAlign = 'center',\n      size = 'default',\n      loading = false,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      as,\n      ...remainingProps\n    }: ButtonProps<E> = props;\n    const slots = getButtonSlots(children);\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaDisabled = parseBoolean(ariaDisabledProp);\n\n    const nativeDisabledOrLoading = useMemo(\n      () => (loading ? true : disabled),\n      [disabled, loading],\n    );\n    const disabledOrLoading = useMemo(\n      () => nativeDisabledOrLoading || ariaDisabled,\n      [ariaDisabled, nativeDisabledOrLoading],\n    );\n\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n\n    const handleButtonClick: MouseEventHandler<HTMLElement> = (event) => {\n      if (nativeDisabledOrLoading) {\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      onClick?.(event);\n    };\n\n    const buttonProps = {\n      ref,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      required,\n      disabled: disabled && !ariaDisabled,\n      id: propId,\n      type,\n      ...ariaLabelingProps,\n      'aria-disabled': loading ? true : ariaDisabledProp,\n      'aria-busy': loading,\n      onClick: handleButtonClick,\n    };\n\n    // Propagation needs to be disabled on the disabled button because\n    // it would still trigger actions on parents that would listen to it.\n    // For example the menu or the useOverlay hook.\n    const disabledPropagationProps = {\n      onPointerDown(evt: PointerEvent) {\n        if (nativeDisabledOrLoading) {\n          evt.preventDefault();\n          evt.stopPropagation();\n        }\n      },\n      onPointerUp(evt: PointerEvent) {\n        if (nativeDisabledOrLoading) {\n          evt.preventDefault();\n          evt.stopPropagation();\n        }\n      },\n    };\n\n    const hasChildren = children || children === 0;\n\n    const buttonMergedProps = {\n      ...mergeProps(\n        buttonProps,\n        disabledPropagationProps,\n        // Need to cast this one as the inference of mergeProps would generate\n        // a not allowed overlap. The restProps type is too complex due to the\n        // polymorphic inheritance.\n        restProps as Record<string, unknown>,\n        behavioralTrackingProps,\n      ),\n    };\n\n    const intl = useIntl();\n\n    // Make the component polymorphic\n    const Component = as || 'button';\n\n    // Render a void element if no children are set and it's not loading (so self-closing polymorphed tags won't break)\n    if (!hasChildren) {\n      return (\n        <Component\n          data-dt-component={COMPONENT_NAME}\n          {...buttonMergedProps}\n          className={clsx(\n            consumerClassName,\n            'strato-inputgroup',\n            fieldTokens({ variant, color, disabled: disabledOrLoading }),\n            styles.button({\n              disabled: disabledOrLoading,\n              textAlign,\n              size,\n            }),\n            focusRingStatic({\n              when: 'focus-visible',\n              color,\n              disabled,\n            }),\n            {\n              [`${styles.widths.content}`]: width === 'content',\n              [`${styles.widths.full}`]: width === 'full',\n            },\n          )}\n          style={{\n            width: width !== 'content' && width !== 'full' ? width : undefined,\n          }}\n        />\n      );\n    }\n\n    return (\n      <Component\n        data-dt-component={COMPONENT_NAME}\n        className={clsx(\n          consumerClassName,\n          'strato-inputgroup',\n          fieldTokens({\n            variant,\n            color,\n            disabled: disabledOrLoading || ariaDisabled,\n          }),\n          styles.button({\n            disabled: disabledOrLoading || ariaDisabled,\n            textAlign,\n            size,\n          }),\n          {\n            [`${styles.widths.content}`]: width === 'content',\n            [`${styles.widths.full}`]: width === 'full',\n          },\n          focusRingStatic({\n            when: 'focus-visible',\n            color,\n            disabled,\n          }),\n        )}\n        style={{\n          width: width !== 'content' && width !== 'full' ? width : undefined,\n          ...consumerStyle,\n        }}\n        {...buttonMergedProps}\n      >\n        {loading && (\n          <div className={styles.loading}>\n            <ProgressCircle\n              size=\"small\"\n              color={color}\n              aria-label={intl.formatMessage({\n                defaultMessage: 'Loading',\n                id: 'cycz+bYG+VH7Of4e',\n                description: 'Label for the loading state.',\n              })}\n            />\n          </div>\n        )}\n        <Grid\n          gap={size === 'default' ? 4 : 2}\n          grid=\"auto / auto-flow auto\"\n          width=\"100%\"\n          maxWidth=\"100%\"\n          alignItems=\"center\"\n          justifyContent={textAlign === 'start' ? 'space-between' : 'center'}\n          style={{\n            visibility: loading ? 'hidden' : undefined,\n          }}\n        >\n          {textAlign === 'start' ? (\n            <Flex minWidth={0} gap={size === 'default' ? 4 : 2}>\n              {slots.prefix}\n              {slots.label}\n              {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n            </Flex>\n          ) : (\n            <>\n              {slots.prefix}\n              {slots.label}\n              {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n            </>\n          )}\n          {slots.suffix}\n        </Grid>\n      </Component>\n    );\n  },\n);\n\n(_Button as typeof _Button & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Buttons let users trigger actions or events\n * with a single click, or by pressing\n * `Enter` or `Space` while the button has focus.\n * @public\n */\nexport const Button = Object.assign(_Button, {\n  Suffix,\n  Prefix,\n  Label,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport * as CSS from 'csstype';\nimport {\n  Children,\n  type ElementType,\n  forwardRef,\n  type MouseEventHandler,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './Button.sty.js';\nimport { Label } from './Label.js';\nimport { Prefix } from './Prefix.js';\nimport { Suffix } from './Suffix.js';\nimport { ProgressCircle } from '../../content/progress/ProgressCircle.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport {\n  type AriaDisabledProps,\n  type AriaLabelingProps,\n} from '../../core/types/a11y-props.js';\nimport { type BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { parseBoolean } from '../../core/utils/parse-boolean.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Grid } from '../../layouts/grid/Grid.js';\nimport { fieldTokens } from '../../styles/field.sty.js';\n\nconst COMPONENT_NAME = 'Button';\n\n//#region Typings\n\n/**\n * Accepted properties for the Button.\n * @public\n */\nexport interface ButtonOwnProps\n  extends\n    AriaLabelingProps,\n    AriaDisabledProps,\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * If a button is disabled e.g. it cannot be interacted with.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Different variants have different styles.\n   * @defaultValue 'default'\n   */\n  variant?: 'default' | 'emphasized' | 'accent';\n\n  /**\n   * The HTML button type.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n   * @defaultValue 'button'\n   */\n  type?: 'button' | 'reset' | 'submit';\n\n  /** Called when the button is interacted with. */\n  onClick?: MouseEventHandler;\n\n  /**\n   * The width of the button.\n   * @defaultValue 'content'\n   */\n  width?: 'content' | 'full' | CSS.Property.Width<string & {}>;\n\n  /**\n   * The color of the button. This should be chosen based on the context\n   * the button is used in.\n   * @defaultValue 'neutral'\n   */\n  color?: 'primary' | 'neutral' | 'success' | 'critical' | 'warning';\n\n  /**\n   * Controls the text alignment inside the button. Only affects the button\n   * if the width is not set to 'content'.\n   * @defaultValue 'center'\n   */\n  textAlign?: 'center' | 'start';\n\n  /**\n   * The size of the button.\n   * @defaultValue 'default'\n   */\n  size?: 'default' | 'condensed';\n\n  /**\n   * The current loading state of the button. If true, a loading icon is shown, the button stays in the tab order with aria-disabled=true,\n   * and its busy state is signalled via aria-busy=true.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type ButtonProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  ButtonOwnProps\n>;\n\ntype ButtonSlots = {\n  label?: ReactNode;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  freeform?: ReactNode[];\n};\n\n//#endregion\n\n/**\n * Iterates over child nodes to extract specific component slots.\n * @public\n */\nexport default function getButtonSlots(children: ReactNode) {\n  const slots: ButtonSlots = {};\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, Suffix)) {\n      slots.suffix = child;\n    } else if (isSlot(child, Prefix)) {\n      slots.prefix = child;\n    } else if (isSlot(child, Label)) {\n      slots.label = child;\n    } else {\n      if (child !== null && child !== undefined) {\n        slots.freeform ??= [];\n        slots.freeform.push(child);\n      }\n    }\n  });\n\n  return slots;\n}\n\nconst _Button: <E extends ElementType = 'button'>(\n  props: ButtonProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(props: ButtonProps<E>, ref: typeof props.ref) => {\n    const {\n      children,\n      variant = 'default',\n      disabled,\n      'aria-disabled': ariaDisabledProp,\n      required,\n      id: propId,\n      type = 'button',\n      onClick,\n      ariaLabel,\n      width = 'content',\n      color = 'neutral',\n      textAlign = 'center',\n      size = 'default',\n      loading = false,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      as,\n      ...remainingProps\n    }: ButtonProps<E> = props;\n    const slots = getButtonSlots(children);\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaDisabled = parseBoolean(ariaDisabledProp);\n\n    const nativeDisabledOrLoading = useMemo(\n      () => (loading ? true : disabled),\n      [disabled, loading],\n    );\n    const disabledOrLoading = useMemo(\n      () => nativeDisabledOrLoading || ariaDisabled,\n      [ariaDisabled, nativeDisabledOrLoading],\n    );\n\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n\n    const handleButtonClick: MouseEventHandler<HTMLElement> = (event) => {\n      if (nativeDisabledOrLoading) {\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      onClick?.(event);\n    };\n\n    const buttonProps = {\n      ref,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      required,\n      disabled: disabled && !ariaDisabled,\n      id: propId,\n      type,\n      ...ariaLabelingProps,\n      'aria-disabled': loading ? true : ariaDisabledProp,\n      'aria-busy': loading,\n      onClick: handleButtonClick,\n    };\n\n    // Propagation needs to be disabled on the disabled button because\n    // it would still trigger actions on parents that would listen to it.\n    // For example the menu or the useOverlay hook.\n    const disabledPropagationProps = {\n      onPointerDown(evt: PointerEvent) {\n        if (nativeDisabledOrLoading) {\n          evt.preventDefault();\n          evt.stopPropagation();\n        }\n      },\n      onPointerUp(evt: PointerEvent) {\n        if (nativeDisabledOrLoading) {\n          evt.preventDefault();\n          evt.stopPropagation();\n        }\n      },\n    };\n\n    const hasChildren = children || children === 0;\n\n    const buttonMergedProps = {\n      ...mergeProps(\n        buttonProps,\n        disabledPropagationProps,\n        // Need to cast this one as the inference of mergeProps would generate\n        // a not allowed overlap. The restProps type is too complex due to the\n        // polymorphic inheritance.\n        restProps as Record<string, unknown>,\n        behavioralTrackingProps,\n      ),\n    };\n\n    const intl = useIntl();\n\n    // Make the component polymorphic\n    const Component = as || 'button';\n\n    // Render a void element if no children are set and it's not loading (so self-closing polymorphed tags won't break)\n    if (!hasChildren) {\n      return (\n        <Component\n          data-dt-component={COMPONENT_NAME}\n          {...buttonMergedProps}\n          className={clsx(\n            consumerClassName,\n            'strato-inputgroup',\n            fieldTokens({ variant, color, disabled: disabledOrLoading }),\n            styles.button({\n              disabled: disabledOrLoading,\n              textAlign,\n              size,\n            }),\n            focusRingStatic({\n              when: 'focus-visible',\n              color,\n              disabled,\n            }),\n            {\n              [`${styles.widths.content}`]: width === 'content',\n              [`${styles.widths.full}`]: width === 'full',\n            },\n          )}\n          style={{\n            width: width !== 'content' && width !== 'full' ? width : undefined,\n          }}\n        />\n      );\n    }\n\n    return (\n      <Component\n        data-dt-component={COMPONENT_NAME}\n        className={clsx(\n          consumerClassName,\n          'strato-inputgroup',\n          fieldTokens({\n            variant,\n            color,\n            disabled: disabledOrLoading || ariaDisabled,\n          }),\n          styles.button({\n            disabled: disabledOrLoading || ariaDisabled,\n            textAlign,\n            size,\n          }),\n          {\n            [`${styles.widths.content}`]: width === 'content',\n            [`${styles.widths.full}`]: width === 'full',\n          },\n          focusRingStatic({\n            when: 'focus-visible',\n            color,\n            disabled,\n          }),\n        )}\n        style={{\n          width: width !== 'content' && width !== 'full' ? width : undefined,\n          ...consumerStyle,\n        }}\n        {...buttonMergedProps}\n      >\n        {loading && (\n          <div className={styles.loading}>\n            <ProgressCircle\n              size=\"small\"\n              color={color}\n              aria-label={intl.formatMessage({\n                defaultMessage: 'Loading',\n                id: 'cycz+bYG+VH7Of4e',\n                description: 'Label for the loading state.',\n              })}\n            />\n          </div>\n        )}\n        <Grid\n          gap={size === 'default' ? 4 : 2}\n          grid=\"auto / auto-flow auto\"\n          width=\"100%\"\n          maxWidth=\"100%\"\n          alignItems=\"center\"\n          justifyContent={textAlign === 'start' ? 'space-between' : 'center'}\n          style={{\n            visibility: loading ? 'hidden' : undefined,\n          }}\n        >\n          {textAlign === 'start' ? (\n            <Flex minWidth={0} gap={size === 'default' ? 4 : 2}>\n              {slots.prefix}\n              {slots.label}\n              {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n            </Flex>\n          ) : (\n            <>\n              {slots.prefix}\n              {slots.label}\n              {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n            </>\n          )}\n          {slots.suffix}\n        </Grid>\n      </Component>\n    );\n  },\n);\n\n(_Button as typeof _Button & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Buttons let users trigger actions or events\n * with a single click, or by pressing\n * `Enter` or `Space` while the button has focus.\n * @public\n */\nexport const Button = Object.assign(_Button, {\n  Suffix,\n  Prefix,\n  Label,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/buttons/button/Button.sty.js

@@ -3,10 +3,10 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Button.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var button = _7a468({ defaultClassName: "_10kgnsa0-3-11-1", variantClassNames: { textAlign: { start: "_10kgnsa1-3-11-1", center: "_10kgnsa2-3-11-1" }, size: { condensed: "_10kgnsa3-3-11-1", "default": "_10kgnsa4-3-11-1" }, disabled: { true: "_10kgnsa5-3-11-1" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var label = _7a468({ defaultClassName: "_10kgnsa9-3-11-1", variantClassNames: { textual: { true: "_oqqp1n0-3-11-1", false: "_10kgnsab-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
-var loading = "_10kgnsa8-3-11-1";
-var widths = { full: "_10kgnsa6-3-11-1", content: "_10kgnsa7-3-11-1" };
+var button = _7a468({ defaultClassName: "_10kgnsa0-3-11-2", variantClassNames: { textAlign: { start: "_10kgnsa1-3-11-2", center: "_10kgnsa2-3-11-2" }, size: { condensed: "_10kgnsa3-3-11-2", "default": "_10kgnsa4-3-11-2" }, disabled: { true: "_10kgnsa5-3-11-2" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var label = _7a468({ defaultClassName: "_10kgnsa9-3-11-2", variantClassNames: { textual: { true: "_oqqp1n0-3-11-2", false: "_10kgnsab-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var loading = "_10kgnsa8-3-11-2";
+var widths = { full: "_10kgnsa6-3-11-2", content: "_10kgnsa7-3-11-2" };
 export {
   button,
   label,

package/esm/buttons/button/Button.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/button/Button.css.ts"],
-  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-3-11-1',variantClassNames:{textAlign:{start:'_10kgnsa1-3-11-1',center:'_10kgnsa2-3-11-1'},size:{condensed:'_10kgnsa3-3-11-1','default':'_10kgnsa4-3-11-1'},disabled:{true:'_10kgnsa5-3-11-1'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsa9-3-11-1',variantClassNames:{textual:{true:'_oqqp1n0-3-11-1',false:'_10kgnsab-3-11-1'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa8-3-11-1';\nexport var widths = {full:'_10kgnsa6-3-11-1',content:'_10kgnsa7-3-11-1'};"],
+  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-3-11-2',variantClassNames:{textAlign:{start:'_10kgnsa1-3-11-2',center:'_10kgnsa2-3-11-2'},size:{condensed:'_10kgnsa3-3-11-2','default':'_10kgnsa4-3-11-2'},disabled:{true:'_10kgnsa5-3-11-2'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsa9-3-11-2',variantClassNames:{textual:{true:'_oqqp1n0-3-11-2',false:'_10kgnsab-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa8-3-11-2';\nexport var widths = {full:'_10kgnsa6-3-11-2',content:'_10kgnsa7-3-11-2'};"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,SAAS,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,WAAU,EAAC,OAAM,oBAAmB,QAAO,mBAAkB,GAAE,MAAK,EAAC,WAAU,oBAAmB,WAAU,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,UAAS,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvU,IAAI,QAAQ,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,mBAAkB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7K,IAAI,UAAU;AACd,IAAI,SAAS,EAAC,MAAK,oBAAmB,SAAQ,mBAAkB;",
   "names": []
 }

package/esm/buttons/intent-button/IntentButton.css

@@ -1,3 +1,3 @@
-._1xe9ern0-3-11-1 {
+._1xe9ern0-3-11-2 {
   opacity: 0.5;
 }

package/esm/buttons/intent-button/IntentButton.sty.js

@@ -1,5 +1,5 @@
 import "./IntentButton.css";
-var disabledAppIconOpacity = "_1xe9ern0-3-11-1";
+var disabledAppIconOpacity = "_1xe9ern0-3-11-2";
 export {
   disabledAppIconOpacity
 };

package/esm/buttons/intent-button/IntentButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/intent-button/IntentButton.css.ts"],
-  "sourcesContent": ["import './IntentButton.css';\nexport var disabledAppIconOpacity = '_1xe9ern0-3-11-1';"],
+  "sourcesContent": ["import './IntentButton.css';\nexport var disabledAppIconOpacity = '_1xe9ern0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,yBAAyB;",
   "names": []
 }

package/esm/buttons/notify-button/NotifyButton.css

@@ -1,10 +1,10 @@
-._1j9pkom0-3-11-1 {
+._1j9pkom0-3-11-2 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-16, 16px);
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-16, 16px);
 }
-._1j9pkom1-3-11-1 {
+._1j9pkom1-3-11-2 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-6, 6px);

package/esm/buttons/notify-button/NotifyButton.js

@@ -1,6 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children, forwardRef, useMemo } from "react";
-import { isElement } from "react-is";
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useMemo
+} from "react";
 import { Content } from "./components/Content.js";
 import { NotifyButtonTrigger } from "./components/Trigger.js";
 import { NotifyButtonContext } from "./contexts/NotifyButtonContext.js";
@@ -8,7 +12,8 @@ import * as styles from "./NotifyButton.sty.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useId } from "../../core/hooks/useId.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
-import { isDev } from "../../core/utils/is-node-environment.js";
+import { isSlot } from "../../core/utils/is-slot.js";
+import { devLog } from "../../core/utils/logging.js";
 import { mergeProps } from "../../core/utils/merge-props.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { Content as NotificationSettingsContent } from "../../notifications/notification-settings/components/Content.js";
@@ -21,22 +26,14 @@ const COMPONENT_NAME = "NotifyButton";
 function getContentSlot(children) {
   let content;
   Children.forEach(children, (child) => {
-    if (isElement(child)) {
-      switch (child.type) {
-        case Content:
-          content = child;
-          break;
-        default: {
-          if (isDev()) {
-            console.warn("Only Content is a valid child of the NotifyButton.");
-          }
-          break;
-        }
+    if (isValidElement(child)) {
+      if (isSlot(child, Content)) {
+        content = child;
+      } else if (child) {
+        devLog("The used child is not supported by the NotifyButton.");
       }
     } else if (child) {
-      if (isDev()) {
-        console.warn("The used child is not supported by the NotifyButton.");
-      }
+      devLog("The used child is not supported by the NotifyButton.");
     }
   });
   return content;

package/esm/buttons/notify-button/NotifyButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/notify-button/NotifyButton.tsx"],
-  "sourcesContent": ["import { Children, forwardRef, useMemo, type ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport { Content } from './components/Content.js';\nimport { NotifyButtonTrigger } from './components/Trigger.js';\nimport { NotifyButtonContext } from './contexts/NotifyButtonContext.js';\nimport type { NotifyButtonProps } from './notify-button-types.js';\nimport * as styles from './NotifyButton.sty.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Content as NotificationSettingsContent } from '../../notifications/notification-settings/components/Content.js';\nimport { NotificationPermissionInfo } from '../../notifications/notification-settings/components/PermissionInfo.js';\nimport { NotificationToggleButton } from '../../notifications/notification-settings/components/ToggleButton.js';\nimport { NotificationProvider } from '../../notifications/notification-settings/NotificationSettings.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\n\nconst COMPONENT_NAME = 'NotifyButton';\n\n/** Iterates over child nodes to extract the content component slot. */\nfunction getContentSlot(children: ReactNode) {\n  let content: ReactNode;\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Content:\n          content = child;\n          break;\n        default: {\n          if (isDev()) {\n            // eslint-disable-next-line no-console\n            console.warn('Only Content is a valid child of the NotifyButton.');\n          }\n          break;\n        }\n      }\n    } else if (child) {\n      if (isDev()) {\n        // eslint-disable-next-line no-console\n        console.warn('The used child is not supported by the NotifyButton.');\n      }\n    }\n  });\n\n  return content;\n}\n\n/**\n * NotifyButton component\n */\nconst RootNotifyButton = forwardRef<HTMLButtonElement, NotifyButtonProps>(\n  (props, ref) => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      disabled,\n      size = 'default',\n      variant = 'default',\n      type,\n      config,\n      readOnly,\n      showLabel = false,\n      ...remainingProps\n    }: NotifyButtonProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const overlayAriaLabelledBy = useId();\n\n    const {\n      targetRef,\n      triggerRef,\n      overlayRef,\n      overlayProps,\n      overlayState,\n      overlayTriggerProps,\n    } = useOverlayWithTrigger({\n      placement: 'bottom-start',\n      placementFallbacks: [\n        'bottom-start',\n        'bottom-end',\n        'top-start',\n        'top-end',\n      ],\n      offset: 4,\n      disabled: disabled || readOnly,\n      'aria-labelledby': overlayAriaLabelledBy,\n    });\n    const rootRef = useMergeRefs([ref, triggerRef, targetRef]);\n    const contentSlot = useMemo(() => getContentSlot(children), [children]);\n\n    const notifyButtonContextValue = useMemo(\n      () => ({\n        closeOverlay: overlayState.close,\n        overlayAriaLabelledBy,\n      }),\n      [overlayAriaLabelledBy, overlayState.close],\n    );\n\n    return (\n      <NotifyButtonContext.Provider value={notifyButtonContextValue}>\n        <NotificationProvider type={type} config={config}>\n          <NotifyButtonTrigger\n            ref={rootRef}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            className={consumerClassName}\n            style={consumerStyle}\n            disabled={disabled}\n            size={size}\n            variant={variant}\n            showLabel={showLabel}\n            triggerProps={overlayTriggerProps}\n            aria-disabled={readOnly}\n            {...mergeProps(restProps, behavioralTrackingProps)}\n            data-dt-component={COMPONENT_NAME}\n          />\n          <Overlay\n            ref={overlayRef}\n            isOpen={overlayState.isOpen}\n            className={styles.overlay}\n            overlayProps={overlayProps}\n          >\n            <Flex flexDirection=\"column\" gap={12}>\n              {contentSlot ?? <NotificationSettingsContent />}\n              <Flex alignItems=\"center\">\n                <NotificationToggleButton />\n                <NotificationPermissionInfo />\n              </Flex>\n            </Flex>\n          </Overlay>\n        </NotificationProvider>\n      </NotifyButtonContext.Provider>\n    );\n  },\n);\n\n(\n  RootNotifyButton as typeof RootNotifyButton & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `NotifyButton` lets users turn notifications about resource updates on or off. Common use cases include notifications about updates to saved filters, workflows, or entities. Users will be notified via e-mail.\n * @public\n */\nexport const NotifyButton = Object.assign(RootNotifyButton, {\n  Content,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  isValidElement,\n  useMemo,\n  type ReactNode,\n} from 'react';\n\nimport { Content } from './components/Content.js';\nimport { NotifyButtonTrigger } from './components/Trigger.js';\nimport { NotifyButtonContext } from './contexts/NotifyButtonContext.js';\nimport type { NotifyButtonProps } from './notify-button-types.js';\nimport * as styles from './NotifyButton.sty.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Content as NotificationSettingsContent } from '../../notifications/notification-settings/components/Content.js';\nimport { NotificationPermissionInfo } from '../../notifications/notification-settings/components/PermissionInfo.js';\nimport { NotificationToggleButton } from '../../notifications/notification-settings/components/ToggleButton.js';\nimport { NotificationProvider } from '../../notifications/notification-settings/NotificationSettings.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\n\nconst COMPONENT_NAME = 'NotifyButton';\n\n/** Iterates over child nodes to extract the content component slot. */\nfunction getContentSlot(children: ReactNode) {\n  let content: ReactNode;\n\n  Children.forEach(children, (child) => {\n    if (isValidElement(child)) {\n      if (isSlot(child, Content)) {\n        content = child;\n      } else if (child) {\n        devLog('The used child is not supported by the NotifyButton.');\n      }\n    } else if (child) {\n      devLog('The used child is not supported by the NotifyButton.');\n    }\n  });\n\n  return content;\n}\n\n/**\n * NotifyButton component\n */\nconst RootNotifyButton = forwardRef<HTMLButtonElement, NotifyButtonProps>(\n  (props, ref) => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      disabled,\n      size = 'default',\n      variant = 'default',\n      type,\n      config,\n      readOnly,\n      showLabel = false,\n      ...remainingProps\n    }: NotifyButtonProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const overlayAriaLabelledBy = useId();\n\n    const {\n      targetRef,\n      triggerRef,\n      overlayRef,\n      overlayProps,\n      overlayState,\n      overlayTriggerProps,\n    } = useOverlayWithTrigger({\n      placement: 'bottom-start',\n      placementFallbacks: [\n        'bottom-start',\n        'bottom-end',\n        'top-start',\n        'top-end',\n      ],\n      offset: 4,\n      disabled: disabled || readOnly,\n      'aria-labelledby': overlayAriaLabelledBy,\n    });\n    const rootRef = useMergeRefs([ref, triggerRef, targetRef]);\n    const contentSlot = useMemo(() => getContentSlot(children), [children]);\n\n    const notifyButtonContextValue = useMemo(\n      () => ({\n        closeOverlay: overlayState.close,\n        overlayAriaLabelledBy,\n      }),\n      [overlayAriaLabelledBy, overlayState.close],\n    );\n\n    return (\n      <NotifyButtonContext.Provider value={notifyButtonContextValue}>\n        <NotificationProvider type={type} config={config}>\n          <NotifyButtonTrigger\n            ref={rootRef}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            className={consumerClassName}\n            style={consumerStyle}\n            disabled={disabled}\n            size={size}\n            variant={variant}\n            showLabel={showLabel}\n            triggerProps={overlayTriggerProps}\n            aria-disabled={readOnly}\n            {...mergeProps(restProps, behavioralTrackingProps)}\n            data-dt-component={COMPONENT_NAME}\n          />\n          <Overlay\n            ref={overlayRef}\n            isOpen={overlayState.isOpen}\n            className={styles.overlay}\n            overlayProps={overlayProps}\n          >\n            <Flex flexDirection=\"column\" gap={12}>\n              {contentSlot ?? <NotificationSettingsContent />}\n              <Flex alignItems=\"center\">\n                <NotificationToggleButton />\n                <NotificationPermissionInfo />\n              </Flex>\n            </Flex>\n          </Overlay>\n        </NotificationProvider>\n      </NotifyButtonContext.Provider>\n    );\n  },\n);\n\n(\n  RootNotifyButton as typeof RootNotifyButton & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `NotifyButton` lets users turn notifications about resource updates on or off. Common use cases include notifications about updates to saved filters, workflows, or entities. Users will be notified via e-mail.\n * @public\n */\nexport const NotifyButton = Object.assign(RootNotifyButton, {\n  Content,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/buttons/notify-button/NotifyButton.sty.js

@@ -1,6 +1,6 @@
 import "./NotifyButton.css";
-var overlay = "_1j9pkom0-3-11-1";
-var toast = "_1j9pkom1-3-11-1";
+var overlay = "_1j9pkom0-3-11-2";
+var toast = "_1j9pkom1-3-11-2";
 export {
   overlay,
   toast

package/esm/buttons/notify-button/NotifyButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/notify-button/NotifyButton.css.ts"],
-  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-11-1';\nexport var toast = '_1j9pkom1-3-11-1';"],
+  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-11-2';\nexport var toast = '_1j9pkom1-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,QAAQ;",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css

@@ -1,9 +1,9 @@
-._1wi8enr0-3-11-1 {
+._1wi8enr0-3-11-2 {
   cursor: crosshair;
   overflow: visible;
   z-index: 1;
 }
-._1wi8enr1-3-11-1 {
+._1wi8enr1-3-11-2 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./CategoricalBarChartInspectOverlay.css";
-var crosshairLayout = "_1wi8enr0-3-11-1 _13lzg4k0-3-11-1";
-var dataPointLayout = "_1wi8enr1-3-11-1 _13lzg4k0-3-11-1";
+var crosshairLayout = "_1wi8enr0-3-11-2 _13lzg4k0-3-11-2";
+var dataPointLayout = "_1wi8enr1-3-11-2 _13lzg4k0-3-11-2";
 export {
   crosshairLayout,
   dataPointLayout

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-11-1 _13lzg4k0-3-11-1';\nexport var dataPointLayout = '_1wi8enr1-3-11-1 _13lzg4k0-3-11-1';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-11-2 _13lzg4k0-3-11-2';\nexport var dataPointLayout = '_1wi8enr1-3-11-2 _13lzg4k0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.css

@@ -1,3 +1,3 @@
-._145zb630-3-11-1 {
+._145zb630-3-11-2 {
   position: relative;
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsAtom.css";
-var wrapper = "_145zb630-3-11-1";
+var wrapper = "_145zb630-3-11-2";
 export {
   wrapper
 };

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/AnnotationsAtom.css.ts"],
-  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-11-1';"],
+  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css

@@ -1,4 +1,4 @@
-._1yc349j0-3-11-1 {
+._1yc349j0-3-11-2 {
   position: absolute;
   top: 0;
   left: 0;

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsCanvasLayout.css";
-var canvasContainer = "_1yc349j0-3-11-1";
+var canvasContainer = "_1yc349j0-3-11-2";
 export {
   canvasContainer
 };

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css.ts"],
-  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-11-1';"],
+  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/hooks/use-build-icons-data-uri.js

@@ -1,12 +1,12 @@
 import {
   createElement,
+  isValidElement,
   useCallback,
   useEffect,
   useRef,
   useState
 } from "react";
 import { createRoot } from "react-dom/client";
-import { isElement } from "react-is";
 const getDataUri = (stringElement) => {
   return ["data:image/svg+xml;utf-8", stringElement].join(",");
 };
@@ -46,7 +46,7 @@ const useBuildIconsDataUri = (icons) => {
       const nextIconImages = /* @__PURE__ */ new Map();
       for (let i = 0; i < icons.length; i++) {
         const [icon, color] = icons[i];
-        if (isElement(icon)) {
+        if (isValidElement(icon)) {
           const svgNode = svgElements[i];
           if (!svgNode) {
             break;

package/esm/charts/core/components/annotations/components/canvas/hooks/use-build-icons-data-uri.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/hooks/use-build-icons-data-uri.ts"],
-  "sourcesContent": ["import {\n  createElement,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\nimport { isElement } from 'react-is';\n\nconst getDataUri = (stringElement: string) => {\n  return ['data:image/svg+xml;utf-8', stringElement].join(',');\n};\n\nconst loadImage = (svgString: string): Promise<HTMLImageElement> => {\n  const img = new Image();\n  img.src = getDataUri(svgString);\n\n  return new Promise((resolve) => {\n    img.onload = () => {\n      resolve(img);\n    };\n  });\n};\n\nconst serializeColoredSvg = (svgNode: SVGElement, color: string): string => {\n  svgNode.setAttribute('width', '16');\n  svgNode.setAttribute('height', '16');\n  svgNode.style.color = color;\n  return new XMLSerializer().serializeToString(svgNode);\n};\n\nconst resolveFromCacheOrLoad = async (\n  serializedSvg: string,\n  cache: Map<string, HTMLImageElement>,\n): Promise<HTMLImageElement> => {\n  const cached = cache.get(serializedSvg);\n  if (cached) {\n    return cached;\n  }\n  const image = await loadImage(serializedSvg);\n  cache.set(serializedSvg, image);\n  return image;\n};\n\nexport const useBuildIconsDataUri = (icons: Array<[ReactElement, string]>) => {\n  const [iconImages, setIconImages] = useState(\n    new Map<ReactElement, HTMLImageElement>(),\n  );\n  const fakeDomContainerRef = useRef(document.createElement('div'));\n  const rootRef = useRef<Root | null>(null);\n  const svgImageCacheRef = useRef(new Map<string, HTMLImageElement>());\n\n  const buildIconImages = useCallback(\n    async (svgElements: HTMLCollectionOf<SVGElement>) => {\n      const nextIconImages = new Map<ReactElement, HTMLImageElement>();\n\n      for (let i = 0; i < icons.length; i++) {\n        const [icon, color] = icons[i];\n\n        if (isElement(icon)) {\n          const svgNode = svgElements[i];\n          if (!svgNode) {\n            break;\n          }\n\n          const serialized = serializeColoredSvg(svgNode, color);\n          nextIconImages.set(\n            icon,\n            await resolveFromCacheOrLoad(serialized, svgImageCacheRef.current),\n          );\n        }\n      }\n\n      setIconImages(nextIconImages);\n    },\n    [icons],\n  );\n\n  useEffect(() => {\n    if (!rootRef.current) {\n      rootRef.current = createRoot(fakeDomContainerRef.current);\n    }\n\n    rootRef.current.render(\n      createElement(\n        'div',\n        {\n          ref: (node: HTMLDivElement | null) => {\n            if (node !== null) {\n              void buildIconImages(node.getElementsByTagName('svg'));\n            }\n          },\n        },\n        icons,\n      ),\n    );\n  }, [icons, buildIconImages]);\n\n  return iconImages;\n};\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAA6B;AACtC,SAAS,iBAAiB;AAE1B,MAAM,aAAa,CAAC,kBAA0B;AAC5C,SAAO,CAAC,4BAA4B,aAAa,EAAE,KAAK,GAAG;AAC7D;AAEA,MAAM,YAAY,CAAC,cAAiD;AAClE,QAAM,MAAM,IAAI,MAAM;AACtB,MAAI,MAAM,WAAW,SAAS;AAE9B,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,SAAS,MAAM;AACjB,cAAQ,GAAG;AAAA,IACb;AAAA,EACF,CAAC;AACH;AAEA,MAAM,sBAAsB,CAAC,SAAqB,UAA0B;AAC1E,UAAQ,aAAa,SAAS,IAAI;AAClC,UAAQ,aAAa,UAAU,IAAI;AACnC,UAAQ,MAAM,QAAQ;AACtB,SAAO,IAAI,cAAc,EAAE,kBAAkB,OAAO;AACtD;AAEA,MAAM,yBAAyB,OAC7B,eACA,UAC8B;AAC9B,QAAM,SAAS,MAAM,IAAI,aAAa;AACtC,MAAI,QAAQ;AACV,WAAO;AAAA,EACT;AACA,QAAM,QAAQ,MAAM,UAAU,aAAa;AAC3C,QAAM,IAAI,eAAe,KAAK;AAC9B,SAAO;AACT;AAEO,MAAM,uBAAuB,CAAC,UAAyC;AAC5E,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,oBAAI,IAAoC;AAAA,EAC1C;AACA,QAAM,sBAAsB,OAAO,SAAS,cAAc,KAAK,CAAC;AAChE,QAAM,UAAU,OAAoB,IAAI;AACxC,QAAM,mBAAmB,OAAO,oBAAI,IAA8B,CAAC;AAEnE,QAAM,kBAAkB;AAAA,IACtB,OAAO,gBAA8C;AACnD,YAAM,iBAAiB,oBAAI,IAAoC;AAE/D,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,CAAC,MAAM,KAAK,IAAI,MAAM,CAAC;AAE7B,YAAI,UAAU,IAAI,GAAG;AACnB,gBAAM,UAAU,YAAY,CAAC;AAC7B,cAAI,CAAC,SAAS;AACZ;AAAA,UACF;AAEA,gBAAM,aAAa,oBAAoB,SAAS,KAAK;AACrD,yBAAe;AAAA,YACb;AAAA,YACA,MAAM,uBAAuB,YAAY,iBAAiB,OAAO;AAAA,UACnE;AAAA,QACF;AAAA,MACF;AAEA,oBAAc,cAAc;AAAA,IAC9B;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,SAAS;AACpB,cAAQ,UAAU,WAAW,oBAAoB,OAAO;AAAA,IAC1D;AAEA,YAAQ,QAAQ;AAAA,MACd;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK,CAAC,SAAgC;AACpC,gBAAI,SAAS,MAAM;AACjB,mBAAK,gBAAgB,KAAK,qBAAqB,KAAK,CAAC;AAAA,YACvD;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,eAAe,CAAC;AAE3B,SAAO;AACT;",
+  "sourcesContent": ["import {\n  createElement,\n  isValidElement,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\n\nconst getDataUri = (stringElement: string) => {\n  return ['data:image/svg+xml;utf-8', stringElement].join(',');\n};\n\nconst loadImage = (svgString: string): Promise<HTMLImageElement> => {\n  const img = new Image();\n  img.src = getDataUri(svgString);\n\n  return new Promise((resolve) => {\n    img.onload = () => {\n      resolve(img);\n    };\n  });\n};\n\nconst serializeColoredSvg = (svgNode: SVGElement, color: string): string => {\n  svgNode.setAttribute('width', '16');\n  svgNode.setAttribute('height', '16');\n  svgNode.style.color = color;\n  return new XMLSerializer().serializeToString(svgNode);\n};\n\nconst resolveFromCacheOrLoad = async (\n  serializedSvg: string,\n  cache: Map<string, HTMLImageElement>,\n): Promise<HTMLImageElement> => {\n  const cached = cache.get(serializedSvg);\n  if (cached) {\n    return cached;\n  }\n  const image = await loadImage(serializedSvg);\n  cache.set(serializedSvg, image);\n  return image;\n};\n\nexport const useBuildIconsDataUri = (icons: Array<[ReactElement, string]>) => {\n  const [iconImages, setIconImages] = useState(\n    new Map<ReactElement, HTMLImageElement>(),\n  );\n  const fakeDomContainerRef = useRef(document.createElement('div'));\n  const rootRef = useRef<Root | null>(null);\n  const svgImageCacheRef = useRef(new Map<string, HTMLImageElement>());\n\n  const buildIconImages = useCallback(\n    async (svgElements: HTMLCollectionOf<SVGElement>) => {\n      const nextIconImages = new Map<ReactElement, HTMLImageElement>();\n\n      for (let i = 0; i < icons.length; i++) {\n        const [icon, color] = icons[i];\n\n        if (isValidElement(icon)) {\n          const svgNode = svgElements[i];\n          if (!svgNode) {\n            break;\n          }\n\n          const serialized = serializeColoredSvg(svgNode, color);\n          nextIconImages.set(\n            icon,\n            await resolveFromCacheOrLoad(serialized, svgImageCacheRef.current),\n          );\n        }\n      }\n\n      setIconImages(nextIconImages);\n    },\n    [icons],\n  );\n\n  useEffect(() => {\n    if (!rootRef.current) {\n      rootRef.current = createRoot(fakeDomContainerRef.current);\n    }\n\n    rootRef.current.render(\n      createElement(\n        'div',\n        {\n          ref: (node: HTMLDivElement | null) => {\n            if (node !== null) {\n              void buildIconImages(node.getElementsByTagName('svg'));\n            }\n          },\n        },\n        icons,\n      ),\n    );\n  }, [icons, buildIconImages]);\n\n  return iconImages;\n};\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAA6B;AAEtC,MAAM,aAAa,CAAC,kBAA0B;AAC5C,SAAO,CAAC,4BAA4B,aAAa,EAAE,KAAK,GAAG;AAC7D;AAEA,MAAM,YAAY,CAAC,cAAiD;AAClE,QAAM,MAAM,IAAI,MAAM;AACtB,MAAI,MAAM,WAAW,SAAS;AAE9B,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,SAAS,MAAM;AACjB,cAAQ,GAAG;AAAA,IACb;AAAA,EACF,CAAC;AACH;AAEA,MAAM,sBAAsB,CAAC,SAAqB,UAA0B;AAC1E,UAAQ,aAAa,SAAS,IAAI;AAClC,UAAQ,aAAa,UAAU,IAAI;AACnC,UAAQ,MAAM,QAAQ;AACtB,SAAO,IAAI,cAAc,EAAE,kBAAkB,OAAO;AACtD;AAEA,MAAM,yBAAyB,OAC7B,eACA,UAC8B;AAC9B,QAAM,SAAS,MAAM,IAAI,aAAa;AACtC,MAAI,QAAQ;AACV,WAAO;AAAA,EACT;AACA,QAAM,QAAQ,MAAM,UAAU,aAAa;AAC3C,QAAM,IAAI,eAAe,KAAK;AAC9B,SAAO;AACT;AAEO,MAAM,uBAAuB,CAAC,UAAyC;AAC5E,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,oBAAI,IAAoC;AAAA,EAC1C;AACA,QAAM,sBAAsB,OAAO,SAAS,cAAc,KAAK,CAAC;AAChE,QAAM,UAAU,OAAoB,IAAI;AACxC,QAAM,mBAAmB,OAAO,oBAAI,IAA8B,CAAC;AAEnE,QAAM,kBAAkB;AAAA,IACtB,OAAO,gBAA8C;AACnD,YAAM,iBAAiB,oBAAI,IAAoC;AAE/D,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,CAAC,MAAM,KAAK,IAAI,MAAM,CAAC;AAE7B,YAAI,eAAe,IAAI,GAAG;AACxB,gBAAM,UAAU,YAAY,CAAC;AAC7B,cAAI,CAAC,SAAS;AACZ;AAAA,UACF;AAEA,gBAAM,aAAa,oBAAoB,SAAS,KAAK;AACrD,yBAAe;AAAA,YACb;AAAA,YACA,MAAM,uBAAuB,YAAY,iBAAiB,OAAO;AAAA,UACnE;AAAA,QACF;AAAA,MACF;AAEA,oBAAc,cAAc;AAAA,IAC9B;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,SAAS;AACpB,cAAQ,UAAU,WAAW,oBAAoB,OAAO;AAAA,IAC1D;AAEA,YAAQ,QAAQ;AAAA,MACd;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK,CAAC,SAAgC;AACpC,gBAAI,SAAS,MAAM;AACjB,mBAAK,gBAAgB,KAAK,qBAAqB,KAAK,CAAC;AAAA,YACvD;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,eAAe,CAAC;AAE3B,SAAO;AACT;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/renderers/RangeMarkerRenderer.js

@@ -1,5 +1,4 @@
-import { useCallback } from "react";
-import { isElement } from "react-is";
+import { isValidElement, useCallback } from "react";
 import { MARKER_HALF_WIDTH } from "./value-marker-renderer/constants.js";
 import { useCanvas } from "../../../../canvas/hooks/useCanvas.js";
 import { drawRoundRect } from "../../../../canvas/utils/drawRoundRect.js";
@@ -46,7 +45,7 @@ const RangeMarkerRenderer = (props) => {
       );
       applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);
       ctx.closePath();
-      if (isElement(children)) {
+      if (isValidElement(children)) {
         const iconX = x + width / 2 - MARKER_HALF_WIDTH + MARKER_ICON_OFFSET;
         const iconY = y + MARKER_ICON_OFFSET;
         renderIconContent(ctx, children, iconImages, iconX, iconY);

package/esm/charts/core/components/annotations/components/canvas/renderers/RangeMarkerRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/renderers/RangeMarkerRenderer.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, useCallback } from 'react';\nimport { isElement } from 'react-is';\n\nimport { MARKER_HALF_WIDTH } from './value-marker-renderer/constants.js';\nimport { ValueMarkerRendererProps } from './value-marker-renderer/ValueMarkerRenderer.js';\nimport { useCanvas } from '../../../../canvas/hooks/useCanvas.js';\nimport { drawRoundRect } from '../../../../canvas/utils/drawRoundRect.js';\nimport {\n  MARKER_BORDER_RADIUS,\n  MARKER_ICON_OFFSET,\n  MARKER_OPACITY,\n  MARKER_STROKE_WIDTH,\n} from '../../../constants.js';\nimport { useAnnotationsIconImages } from '../../../hooks/useAnnotationsIconImages.js';\nimport { CANVAS_PIXEL_OFFSET } from '../constants.js';\nimport { applyMarkerStyles } from '../utils/apply-marker-styles.js';\nimport { renderIconContent } from '../utils/render-icon-to-canvas.js';\nimport { renderTextContent } from '../utils/render-text-in-canvas.js';\n\nconst CONTENT_OFFSET_Y = 10;\n\nexport const RangeMarkerRenderer = (\n  props: PropsWithChildren<ValueMarkerRendererProps>,\n) => {\n  const {\n    height,\n    width,\n    x,\n    y,\n    fillColor,\n    children,\n    opacity = MARKER_OPACITY,\n    brightness,\n    strokeColor,\n    symbolColor,\n  } = props;\n\n  const iconImages = useAnnotationsIconImages();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      const rectX = x;\n      const rectY = y - MARKER_STROKE_WIDTH - CANVAS_PIXEL_OFFSET;\n      const rectWidth = width;\n      const rectHeight = height + MARKER_STROKE_WIDTH * 2 - CANVAS_PIXEL_OFFSET;\n\n      drawRoundRect(\n        ctx,\n        rectX,\n        rectY,\n        rectWidth,\n        rectHeight,\n        MARKER_BORDER_RADIUS,\n      );\n      applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);\n      ctx.closePath();\n\n      if (isElement(children)) {\n        const iconX = x + width / 2 - MARKER_HALF_WIDTH + MARKER_ICON_OFFSET;\n        const iconY = y + MARKER_ICON_OFFSET;\n\n        renderIconContent(ctx, children, iconImages, iconX, iconY);\n      } else if (typeof children === 'string') {\n        const textX = x + width / 2;\n        renderTextContent(\n          ctx,\n          children,\n          textX,\n          y + CONTENT_OFFSET_Y,\n          'center',\n          fillColor,\n          symbolColor,\n        );\n      }\n\n      return false;\n    },\n    [\n      x,\n      y,\n      width,\n      height,\n      opacity,\n      brightness,\n      fillColor,\n      strokeColor,\n      children,\n      iconImages,\n      symbolColor,\n    ],\n  );\n\n  useCanvas('annotations-range-marker', draw);\n\n  return null;\n};\n\nRangeMarkerRenderer['displayName'] = 'RangeMarkerRenderer';\n"],
-  "mappings": "AAAA,SAAiC,mBAAmB;AACpD,SAAS,iBAAiB;AAE1B,SAAS,yBAAyB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,mBAAmB;AAElB,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAa,yBAAyB;AAE5C,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AACd,YAAM,QAAQ;AACd,YAAM,QAAQ,IAAI,sBAAsB;AACxC,YAAM,YAAY;AAClB,YAAM,aAAa,SAAS,sBAAsB,IAAI;AAEtD;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,wBAAkB,KAAK,SAAS,YAAY,WAAW,WAAW;AAClE,UAAI,UAAU;AAEd,UAAI,UAAU,QAAQ,GAAG;AACvB,cAAM,QAAQ,IAAI,QAAQ,IAAI,oBAAoB;AAClD,cAAM,QAAQ,IAAI;AAElB,0BAAkB,KAAK,UAAU,YAAY,OAAO,KAAK;AAAA,MAC3D,WAAW,OAAO,aAAa,UAAU;AACvC,cAAM,QAAQ,IAAI,QAAQ;AAC1B;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,4BAA4B,IAAI;AAE1C,SAAO;AACT;AAEA,oBAAoB,aAAa,IAAI;",
+  "sourcesContent": ["import { isValidElement, type PropsWithChildren, useCallback } from 'react';\n\nimport { MARKER_HALF_WIDTH } from './value-marker-renderer/constants.js';\nimport { ValueMarkerRendererProps } from './value-marker-renderer/ValueMarkerRenderer.js';\nimport { useCanvas } from '../../../../canvas/hooks/useCanvas.js';\nimport { drawRoundRect } from '../../../../canvas/utils/drawRoundRect.js';\nimport {\n  MARKER_BORDER_RADIUS,\n  MARKER_ICON_OFFSET,\n  MARKER_OPACITY,\n  MARKER_STROKE_WIDTH,\n} from '../../../constants.js';\nimport { useAnnotationsIconImages } from '../../../hooks/useAnnotationsIconImages.js';\nimport { CANVAS_PIXEL_OFFSET } from '../constants.js';\nimport { applyMarkerStyles } from '../utils/apply-marker-styles.js';\nimport { renderIconContent } from '../utils/render-icon-to-canvas.js';\nimport { renderTextContent } from '../utils/render-text-in-canvas.js';\n\nconst CONTENT_OFFSET_Y = 10;\n\nexport const RangeMarkerRenderer = (\n  props: PropsWithChildren<ValueMarkerRendererProps>,\n) => {\n  const {\n    height,\n    width,\n    x,\n    y,\n    fillColor,\n    children,\n    opacity = MARKER_OPACITY,\n    brightness,\n    strokeColor,\n    symbolColor,\n  } = props;\n\n  const iconImages = useAnnotationsIconImages();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      ctx.beginPath();\n      const rectX = x;\n      const rectY = y - MARKER_STROKE_WIDTH - CANVAS_PIXEL_OFFSET;\n      const rectWidth = width;\n      const rectHeight = height + MARKER_STROKE_WIDTH * 2 - CANVAS_PIXEL_OFFSET;\n\n      drawRoundRect(\n        ctx,\n        rectX,\n        rectY,\n        rectWidth,\n        rectHeight,\n        MARKER_BORDER_RADIUS,\n      );\n      applyMarkerStyles(ctx, opacity, brightness, fillColor, strokeColor);\n      ctx.closePath();\n\n      if (isValidElement(children)) {\n        const iconX = x + width / 2 - MARKER_HALF_WIDTH + MARKER_ICON_OFFSET;\n        const iconY = y + MARKER_ICON_OFFSET;\n\n        renderIconContent(ctx, children, iconImages, iconX, iconY);\n      } else if (typeof children === 'string') {\n        const textX = x + width / 2;\n        renderTextContent(\n          ctx,\n          children,\n          textX,\n          y + CONTENT_OFFSET_Y,\n          'center',\n          fillColor,\n          symbolColor,\n        );\n      }\n\n      return false;\n    },\n    [\n      x,\n      y,\n      width,\n      height,\n      opacity,\n      brightness,\n      fillColor,\n      strokeColor,\n      children,\n      iconImages,\n      symbolColor,\n    ],\n  );\n\n  useCanvas('annotations-range-marker', draw);\n\n  return null;\n};\n\nRangeMarkerRenderer['displayName'] = 'RangeMarkerRenderer';\n"],
+  "mappings": "AAAA,SAAS,gBAAwC,mBAAmB;AAEpE,SAAS,yBAAyB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,mBAAmB;AAElB,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAa,yBAAyB;AAE5C,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,UAAU;AACd,YAAM,QAAQ;AACd,YAAM,QAAQ,IAAI,sBAAsB;AACxC,YAAM,YAAY;AAClB,YAAM,aAAa,SAAS,sBAAsB,IAAI;AAEtD;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,wBAAkB,KAAK,SAAS,YAAY,WAAW,WAAW;AAClE,UAAI,UAAU;AAEd,UAAI,eAAe,QAAQ,GAAG;AAC5B,cAAM,QAAQ,IAAI,QAAQ,IAAI,oBAAoB;AAClD,cAAM,QAAQ,IAAI;AAElB,0BAAkB,KAAK,UAAU,YAAY,OAAO,KAAK;AAAA,MAC3D,WAAW,OAAO,aAAa,UAAU;AACvC,cAAM,QAAQ,IAAI,QAAQ;AAC1B;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAI;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,4BAA4B,IAAI;AAE1C,SAAO;AACT;AAEA,oBAAoB,aAAa,IAAI;",
   "names": []
 }