@dynatrace/strato-components 0.84.51 → 0.85.10

package/esm/content/progress/ProgressBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/progress/ProgressBar.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, { CSSProperties, forwardRef } from 'react';\nimport { isElement } from 'react-is';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\n//  asd\n\nimport { SharedProgressBarPropsContext } from './contexts/SharedProgressBarPropsContext.js';\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport { progressBarFillCSS, progressCSS } from './ProgressBar.sty.js';\nimport { ProgressBarIcon } from './ProgressBarIcon.js';\nimport { ProgressBarLabel } from './ProgressBarLabel.js';\nimport { ProgressBarValue } from './ProgressBarValue.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type RoleVariantType } from '../../core/types/role-variant.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { colorUtilsCSS } from '../../styles/colorUtils.sty.js';\n\n/**\n * Accepted properties for ProgressBar.\n * @public\n */\nexport interface ProgressBarProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * The current value.\n   * @defaultValue 'indeterminate'\n   */\n  value?: number | 'indeterminate';\n  /**\n   * The minimum allowed value.\n   * @defaultValue 0\n   */\n  min?: number;\n  /**\n   * The maximum allowed value.\n   * @defaultValue 100\n   */\n  max?: number;\n  /**\n   * Controls the density of the rendering.\n   * @defaultValue 'default'\n   */\n  density?: 'default' | 'condensed';\n  /**\n   * Controls the appearance of the progress.\n   * @defaultValue 'primary'\n   */\n  variant?: RoleVariantType;\n  /**\n   * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.\n   * By default, the value will be given as a percentage. If the value is not a percentage, you should provide aria-valuetext.\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n   * @defaultValue the value of the progress as percentage.\n   */\n  'aria-valuetext'?: string;\n}\n\ntype ProgressBarSlots = {\n  value?: React.ReactNode;\n  label?: React.ReactNode;\n  icon?: React.ReactNode;\n};\n\nfunction getProgressBarSlots(children: React.ReactNode) {\n  const slots: ProgressBarSlots = {\n    value: null,\n    label: null,\n    icon: null,\n  };\n\n  React.Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case ProgressBarLabel:\n          slots.label = child;\n          break;\n        case ProgressBarIcon:\n          slots.icon = child;\n          break;\n        case ProgressBarValue:\n        default:\n          slots.value = child;\n          break;\n      }\n    } else {\n      if (!slots.value) {\n        slots.value = child;\n      }\n    }\n  });\n\n  return slots;\n}\n\nconst _ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n  (props, forwardedRef) => {\n    const {\n      value: originalValue,\n      max = 100,\n      min = 0,\n      density = 'default',\n      variant = 'primary',\n      children,\n      id: propId,\n      'aria-valuetext': ariaValuetext,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: ProgressBarProps = props;\n\n    const slots = getProgressBarSlots(children);\n    const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(\n      originalValue,\n      min,\n      max,\n      ariaValuetext,\n    );\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n\n    const generatedId = useId({ prefix: 'progress-bar' });\n    const id = propId ?? generatedId;\n\n    if (\n      !slots.label &&\n      !ariaLabelingProps['aria-label'] &&\n      !ariaLabelingProps['aria-labelledby']\n    ) {\n      process.env.NODE_ENV === 'development' &&\n        // eslint-disable-next-line no-console\n        console.warn(\n          'If no label is provided please make sure to provide an aria label on your progressCircle element.',\n        );\n    }\n\n    const progressStyles: CSSProperties = {};\n    if (!isIndeterminate && value !== undefined) {\n      const percentage = (value - min) / (max - min);\n      progressStyles['width'] = `${Math.round(percentage * 100)}%`;\n    }\n\n    return (\n      <SharedProgressBarPropsContext.Provider value={{ id, variant, density }}>\n        {/* TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n        <div\n          className={consumerClassName}\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: Spacings.Size6,\n            width: '100%',\n            ...consumerStyle,\n          }}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          ref={forwardedRef}\n          {...forwardProps}\n        >\n          {/* //TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n          <div\n            style={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              gap: Spacings.Size8,\n            }}\n          >\n            {density === 'condensed' ? (\n              <div\n                style={{\n                  display: 'flex',\n                  justifyContent: 'space-between',\n                  alignItems: 'flex-end',\n                  flex: 1,\n                  gap: Spacings.Size16,\n                  minWidth: 0,\n                }}\n              >\n                {/* //TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n                {slots.label}\n                {density === 'condensed' && slots.value}\n              </div>\n            ) : (\n              slots.label\n            )}\n            {slots.icon}\n          </div>\n          <div\n            className={progressCSS({ size: density, variant })}\n            id={id}\n            {...progressAriaProps}\n            {...ariaLabelingProps}\n          >\n            <div\n              className={clsx(\n                colorUtilsCSS({\n                  color: variant,\n                  variant: variant === 'onAccent' ? 'default' : 'accent',\n                }),\n                progressBarFillCSS({\n                  indeterminate: isIndeterminate,\n                }),\n              )}\n              style={progressStyles}\n            />\n          </div>\n          {density === 'default' && slots.value}\n        </div>\n      </SharedProgressBarPropsContext.Provider>\n    );\n  },\n);\n\n(_ProgressBar as typeof _ProgressBar & { displayName: string }).displayName =\n  'ProgressBar';\n\n/**\n * Use the `ProgressBar` component to show your users that a system operation such as downloading, uploading, or processing is progressing.\n * The `ProgressBar` can be used to visualize determinate or indeterminate progress.\n * @public\n */\nexport const ProgressBar = Object.assign(_ProgressBar, {\n  Value: ProgressBarValue,\n  Label: ProgressBarLabel,\n  Icon: ProgressBarIcon,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { CSSProperties, forwardRef, useId } from 'react';\nimport { isElement } from 'react-is';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { SharedProgressBarPropsContext } from './contexts/SharedProgressBarPropsContext.js';\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport { progressBarFillCSS, progressCSS } from './ProgressBar.sty.js';\nimport { ProgressBarIcon } from './ProgressBarIcon.js';\nimport { ProgressBarLabel } from './ProgressBarLabel.js';\nimport { ProgressBarValue } from './ProgressBarValue.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type RoleVariantType } from '../../core/types/role-variant.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { colorUtilsCSS } from '../../styles/colorUtils.sty.js';\n\n/**\n * Accepted properties for ProgressBar.\n * @public\n */\nexport interface ProgressBarProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * The current value.\n   * @defaultValue 'indeterminate'\n   */\n  value?: number | 'indeterminate';\n  /**\n   * The minimum allowed value.\n   * @defaultValue 0\n   */\n  min?: number;\n  /**\n   * The maximum allowed value.\n   * @defaultValue 100\n   */\n  max?: number;\n  /**\n   * Controls the density of the rendering.\n   * @defaultValue 'default'\n   */\n  density?: 'default' | 'condensed';\n  /**\n   * Controls the appearance of the progress.\n   * @defaultValue 'primary'\n   */\n  variant?: RoleVariantType;\n  /**\n   * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.\n   * By default, the value will be given as a percentage. If the value is not a percentage, you should provide aria-valuetext.\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n   * @defaultValue the value of the progress as percentage.\n   */\n  'aria-valuetext'?: string;\n}\n\ntype ProgressBarSlots = {\n  value?: React.ReactNode;\n  label?: React.ReactNode;\n  icon?: React.ReactNode;\n};\n\nfunction getProgressBarSlots(children: React.ReactNode) {\n  const slots: ProgressBarSlots = {\n    value: null,\n    label: null,\n    icon: null,\n  };\n\n  React.Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case ProgressBarLabel:\n          slots.label = child;\n          break;\n        case ProgressBarIcon:\n          slots.icon = child;\n          break;\n        case ProgressBarValue:\n        default:\n          slots.value = child;\n          break;\n      }\n    } else {\n      if (!slots.value) {\n        slots.value = child;\n      }\n    }\n  });\n\n  return slots;\n}\n\nconst _ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n  (props, forwardedRef) => {\n    const {\n      value: originalValue,\n      max = 100,\n      min = 0,\n      density = 'default',\n      variant = 'primary',\n      children,\n      id: propId,\n      'aria-valuetext': ariaValuetext,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: ProgressBarProps = props;\n\n    const slots = getProgressBarSlots(children);\n    const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(\n      originalValue,\n      min,\n      max,\n      ariaValuetext,\n    );\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n\n    const generatedId = useId();\n    const id = propId ?? generatedId;\n\n    if (\n      !slots.label &&\n      !ariaLabelingProps['aria-label'] &&\n      !ariaLabelingProps['aria-labelledby']\n    ) {\n      process.env.NODE_ENV === 'development' &&\n        // eslint-disable-next-line no-console\n        console.warn(\n          'If no label is provided please make sure to provide an aria label on your progressCircle element.',\n        );\n    }\n\n    const progressStyles: CSSProperties = {};\n    if (!isIndeterminate && value !== undefined) {\n      const percentage = (value - min) / (max - min);\n      progressStyles['width'] = `${Math.round(percentage * 100)}%`;\n    }\n\n    return (\n      <SharedProgressBarPropsContext.Provider value={{ id, variant, density }}>\n        {/* TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n        <div\n          className={consumerClassName}\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: Spacings.Size6,\n            width: '100%',\n            ...consumerStyle,\n          }}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          ref={forwardedRef}\n          {...forwardProps}\n        >\n          {/* //TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n          <div\n            style={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              gap: Spacings.Size8,\n            }}\n          >\n            {density === 'condensed' ? (\n              <div\n                style={{\n                  display: 'flex',\n                  justifyContent: 'space-between',\n                  alignItems: 'flex-end',\n                  flex: 1,\n                  gap: Spacings.Size16,\n                  minWidth: 0,\n                }}\n              >\n                {/* //TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n                {slots.label}\n                {density === 'condensed' && slots.value}\n              </div>\n            ) : (\n              slots.label\n            )}\n            {slots.icon}\n          </div>\n          <div\n            className={progressCSS({ size: density, variant })}\n            id={id}\n            {...progressAriaProps}\n            {...ariaLabelingProps}\n          >\n            <div\n              className={clsx(\n                colorUtilsCSS({\n                  color: variant,\n                  variant: variant === 'onAccent' ? 'default' : 'accent',\n                }),\n                progressBarFillCSS({\n                  indeterminate: isIndeterminate,\n                }),\n              )}\n              style={progressStyles}\n            />\n          </div>\n          {density === 'default' && slots.value}\n        </div>\n      </SharedProgressBarPropsContext.Provider>\n    );\n  },\n);\n\n(_ProgressBar as typeof _ProgressBar & { displayName: string }).displayName =\n  'ProgressBar';\n\n/**\n * Use the `ProgressBar` component to show your users that a system operation such as downloading, uploading, or processing is progressing.\n * The `ProgressBar` can be used to visualize determinate or indeterminate progress.\n * @public\n */\nexport const ProgressBar = Object.assign(_ProgressBar, {\n  Value: ProgressBarValue,\n  Label: ProgressBarLabel,\n  Icon: ProgressBarIcon,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/progress/ProgressCircle.js

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React, { forwardRef } from "react";
+import React, { forwardRef, useId } from "react";
 import { useProgressAriaProps } from "./hooks/useProgressAriaProps.js";
 import {
   progressCircleBackgroundCSS,
@@ -10,7 +10,6 @@ import {
   ProgressCircleSVGCSS
 } from "./ProgressCircle.sty.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
-import { useId } from "../../core/hooks/useId.js";
 import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { colorUtilsCSS } from "../../styles/colorUtils.sty.js";
 import { containerColorsCSS } from "../../styles/container.sty.js";
@@ -46,7 +45,7 @@ const ProgressCircle = forwardRef(
     );
     const ariaLabelingProps = useAriaLabelingProps(remainingProps);
     const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);
-    const generatedId = useId({ prefix: "progress-circle" });
+    const generatedId = useId();
     const id = propId ?? generatedId;
     const circleStyles = {};
     const rootProps = {};

package/esm/content/progress/ProgressCircle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/progress/ProgressCircle.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, { CSSProperties, forwardRef } from 'react';\n\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport {\n  progressCircleBackgroundCSS,\n  progressCircleChildCSS,\n  progressCircleContainerCSS,\n  progressCircleCSS,\n  progressCircleRootCSS,\n  ProgressCircleSVGCSS,\n} from './ProgressCircle.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type RoleVariantType } from '../../core/types/role-variant.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { colorUtilsCSS } from '../../styles/colorUtils.sty.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * Accepted properties for ProgressCircle.\n * @public\n */\nexport interface ProgressCircleProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * The current value.\n   * @defaultValue 'indeterminate'\n   */\n  value?: number | 'indeterminate';\n  /**\n   * The smallest allowed value.\n   * @defaultValue 0\n   */\n  min?: number;\n  /**\n   * The maximum allowed value.\n   * @defaultValue 100\n   */\n  max?: number;\n  /**\n   * Controls the size of the rendered progress.\n   * @defaultValue 'large'\n   */\n  size?: 'small' | 'large';\n  /**\n   * Controls the appearance of the progress.\n   * @defaultValue 'primary'\n   */\n  variant?: RoleVariantType;\n\n  /**\n   * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.\n   * Default the value as percentage will be provided. If the value is not a percentage please provide the aria-valuetext.\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n   * @defaultValue the value of the progress as percentage.\n   */\n  'aria-valuetext'?: string;\n}\n\nconst progressCircleSizes = {\n  small: 20,\n  large: 40,\n};\nconst progressCircleThickness = 5;\n\n/**\n * The `ProgressCircle` component is used to indicate the progress or completion status of a task or process.\n * @public\n * */\nexport const ProgressCircle = forwardRef<HTMLDivElement, ProgressCircleProps>(\n  (props, forwardedRef) => {\n    const {\n      value: originalValue,\n      min = 0,\n      max = 100,\n      size = 'large',\n      variant = 'primary',\n      children,\n      id: propId,\n      'aria-valuetext': ariaValuetext,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: ProgressCircleProps = props;\n\n    const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(\n      originalValue,\n      min,\n      max,\n      ariaValuetext,\n    );\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n\n    const generatedId = useId({ prefix: 'progress-circle' });\n    const id = propId ?? generatedId;\n\n    const circleStyles: CSSProperties = {};\n    const rootProps = {};\n\n    if (!isIndeterminate && value !== undefined) {\n      const circumference =\n        2 *\n        Math.PI *\n        ((progressCircleSizes[size] - progressCircleThickness) / 2);\n      circleStyles['strokeDasharray'] = circumference.toFixed(3);\n      const dashOffset = Number(\n        (((max - value) / max) * circumference).toFixed(3),\n      );\n      circleStyles['strokeDashoffset'] = `${\n        dashOffset >= 0 ? dashOffset : 0\n      }px`;\n    }\n\n    if (\n      !children &&\n      !ariaLabelingProps['aria-label'] &&\n      !ariaLabelingProps['aria-labelledby']\n    ) {\n      process.env.NODE_ENV === 'development' &&\n        // eslint-disable-next-line no-console\n        console.warn(\n          'If no label is provided please make sure to provide an aria label on your progressCircle element.',\n        );\n    }\n\n    return (\n      <div\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(\n          consumerClassName,\n          containerColorsCSS({\n            color: 'neutral',\n            variant: variant === 'onAccent' ? 'accent' : 'default',\n          }),\n          progressCircleContainerCSS({ size }),\n        )}\n        style={consumerStyle}\n        {...forwardProps}\n      >\n        <span\n          id={id}\n          className={clsx(\n            colorUtilsCSS({ color: variant, variant: 'accent' }),\n            progressCircleRootCSS,\n          )}\n          style={{\n            height: `${progressCircleSizes[size]}px`,\n            width: `${progressCircleSizes[size]}px`,\n          }}\n          {...ariaLabelingProps}\n          {...progressAriaProps}\n          {...rootProps}\n        >\n          <svg\n            className={ProgressCircleSVGCSS}\n            viewBox={`0 0 ${progressCircleSizes[size]} ${progressCircleSizes[size]}`}\n            width=\"100%\"\n            height=\"100%\"\n          >\n            <circle\n              fill=\"none\"\n              className={clsx(progressCircleBackgroundCSS({ variant }))}\n              cx={progressCircleSizes[size] / 2}\n              cy={progressCircleSizes[size] / 2}\n              r={(progressCircleSizes[size] - progressCircleThickness) / 2}\n              strokeWidth={progressCircleThickness}\n            />\n            <circle\n              style={circleStyles}\n              className={progressCircleCSS({ indeterminate: isIndeterminate })}\n              fill=\"none\"\n              pathLength={\n                isIndeterminate ? 360 : circleStyles['strokeDasharray']\n              }\n              cx={progressCircleSizes[size] / 2}\n              cy={progressCircleSizes[size] / 2}\n              r={(progressCircleSizes[size] - progressCircleThickness) / 2}\n              strokeWidth={progressCircleThickness}\n            />\n          </svg>\n        </span>\n        {children && (\n          <label\n            className={clsx(\n              progressCircleChildCSS,\n              textStyleCSS({ textStyle: size === 'small' ? 'small' : 'base' }),\n            )}\n            htmlFor={id}\n          >\n            {children}\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\n(\n  ProgressCircle as typeof ProgressCircle & { displayName: string }\n).displayName = 'ProgressCircle';\n"],
-  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAwB,kBAAkB;AAEjD,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAQpC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAgD7B,MAAM,sBAAsB;AAAA,EAC1B,OAAO;AAAA,EACP,OAAO;AACT;AACA,MAAM,0BAA0B;AAMzB,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA,IAAI;AAAA,MACJ,kBAAkB;AAAA,MAClB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAyB;AAEzB,UAAM,EAAE,OAAO,iBAAiB,kBAAkB,IAAI;AAAA,MACpD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,oBAAoB,qBAAqB,cAAc;AAC7D,UAAM,eAAe,oBAAoB,gBAAgB,iBAAiB;AAE1E,UAAM,cAAc,MAAM,EAAE,QAAQ,kBAAkB,CAAC;AACvD,UAAM,KAAK,UAAU;AAErB,UAAM,eAA8B,CAAC;AACrC,UAAM,YAAY,CAAC;AAEnB,QAAI,CAAC,mBAAmB,UAAU,QAAW;AAC3C,YAAM,gBACJ,IACA,KAAK,OACH,oBAAoB,IAAI,IAAI,2BAA2B;AAC3D,mBAAa,iBAAiB,IAAI,cAAc,QAAQ,CAAC;AACzD,YAAM,aAAa;AAAA,UACd,MAAM,SAAS,MAAO,eAAe,QAAQ,CAAC;AAAA,MACnD;AACA,mBAAa,kBAAkB,IAAI,GACjC,cAAc,IAAI,aAAa,CACjC;AAAA,IACF;AAEA,QACE,CAAC,YACD,CAAC,kBAAkB,YAAY,KAC/B,CAAC,kBAAkB,iBAAiB,GACpC;AACA;AAAA,MAEE,QAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,mBAAmB;AAAA,YACjB,OAAO;AAAA,YACP,SAAS,YAAY,aAAa,WAAW;AAAA,UAC/C,CAAC;AAAA,UACD,2BAA2B,EAAE,KAAK,CAAC;AAAA,QACrC;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,YACT,cAAc,EAAE,OAAO,SAAS,SAAS,SAAS,CAAC;AAAA,YACnD;AAAA,UACF;AAAA,UACA,OAAO;AAAA,YACL,QAAQ,GAAG,oBAAoB,IAAI,CAAC;AAAA,YACpC,OAAO,GAAG,oBAAoB,IAAI,CAAC;AAAA,UACrC;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,SAAS,OAAO,oBAAoB,IAAI,CAAC,IAAI,oBAAoB,IAAI,CAAC;AAAA,YACtE,OAAM;AAAA,YACN,QAAO;AAAA;AAAA,UAEP;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAW,KAAK,4BAA4B,EAAE,QAAQ,CAAC,CAAC;AAAA,cACxD,IAAI,oBAAoB,IAAI,IAAI;AAAA,cAChC,IAAI,oBAAoB,IAAI,IAAI;AAAA,cAChC,IAAI,oBAAoB,IAAI,IAAI,2BAA2B;AAAA,cAC3D,aAAa;AAAA;AAAA,UACf;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,WAAW,kBAAkB,EAAE,eAAe,gBAAgB,CAAC;AAAA,cAC/D,MAAK;AAAA,cACL,YACE,kBAAkB,MAAM,aAAa,iBAAiB;AAAA,cAExD,IAAI,oBAAoB,IAAI,IAAI;AAAA,cAChC,IAAI,oBAAoB,IAAI,IAAI;AAAA,cAChC,IAAI,oBAAoB,IAAI,IAAI,2BAA2B;AAAA,cAC3D,aAAa;AAAA;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAAA,MACC,YACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,aAAa,EAAE,WAAW,SAAS,UAAU,UAAU,OAAO,CAAC;AAAA,UACjE;AAAA,UACA,SAAS;AAAA;AAAA,QAER;AAAA,MACH;AAAA,IAEJ;AAAA,EAEJ;AACF;AAGE,eACA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { CSSProperties, forwardRef, useId } from 'react';\n\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport {\n  progressCircleBackgroundCSS,\n  progressCircleChildCSS,\n  progressCircleContainerCSS,\n  progressCircleCSS,\n  progressCircleRootCSS,\n  ProgressCircleSVGCSS,\n} from './ProgressCircle.sty.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type RoleVariantType } from '../../core/types/role-variant.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { colorUtilsCSS } from '../../styles/colorUtils.sty.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * Accepted properties for ProgressCircle.\n * @public\n */\nexport interface ProgressCircleProps\n  extends WithChildren,\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /**\n   * The current value.\n   * @defaultValue 'indeterminate'\n   */\n  value?: number | 'indeterminate';\n  /**\n   * The smallest allowed value.\n   * @defaultValue 0\n   */\n  min?: number;\n  /**\n   * The maximum allowed value.\n   * @defaultValue 100\n   */\n  max?: number;\n  /**\n   * Controls the size of the rendered progress.\n   * @defaultValue 'large'\n   */\n  size?: 'small' | 'large';\n  /**\n   * Controls the appearance of the progress.\n   * @defaultValue 'primary'\n   */\n  variant?: RoleVariantType;\n\n  /**\n   * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.\n   * Default the value as percentage will be provided. If the value is not a percentage please provide the aria-valuetext.\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n   * @defaultValue the value of the progress as percentage.\n   */\n  'aria-valuetext'?: string;\n}\n\nconst progressCircleSizes = {\n  small: 20,\n  large: 40,\n};\nconst progressCircleThickness = 5;\n\n/**\n * The `ProgressCircle` component is used to indicate the progress or completion status of a task or process.\n * @public\n * */\nexport const ProgressCircle = forwardRef<HTMLDivElement, ProgressCircleProps>(\n  (props, forwardedRef) => {\n    const {\n      value: originalValue,\n      min = 0,\n      max = 100,\n      size = 'large',\n      variant = 'primary',\n      children,\n      id: propId,\n      'aria-valuetext': ariaValuetext,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: ProgressCircleProps = props;\n\n    const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(\n      originalValue,\n      min,\n      max,\n      ariaValuetext,\n    );\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n\n    const generatedId = useId();\n    const id = propId ?? generatedId;\n\n    const circleStyles: CSSProperties = {};\n    const rootProps = {};\n\n    if (!isIndeterminate && value !== undefined) {\n      const circumference =\n        2 *\n        Math.PI *\n        ((progressCircleSizes[size] - progressCircleThickness) / 2);\n      circleStyles['strokeDasharray'] = circumference.toFixed(3);\n      const dashOffset = Number(\n        (((max - value) / max) * circumference).toFixed(3),\n      );\n      circleStyles['strokeDashoffset'] = `${\n        dashOffset >= 0 ? dashOffset : 0\n      }px`;\n    }\n\n    if (\n      !children &&\n      !ariaLabelingProps['aria-label'] &&\n      !ariaLabelingProps['aria-labelledby']\n    ) {\n      process.env.NODE_ENV === 'development' &&\n        // eslint-disable-next-line no-console\n        console.warn(\n          'If no label is provided please make sure to provide an aria label on your progressCircle element.',\n        );\n    }\n\n    return (\n      <div\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(\n          consumerClassName,\n          containerColorsCSS({\n            color: 'neutral',\n            variant: variant === 'onAccent' ? 'accent' : 'default',\n          }),\n          progressCircleContainerCSS({ size }),\n        )}\n        style={consumerStyle}\n        {...forwardProps}\n      >\n        <span\n          id={id}\n          className={clsx(\n            colorUtilsCSS({ color: variant, variant: 'accent' }),\n            progressCircleRootCSS,\n          )}\n          style={{\n            height: `${progressCircleSizes[size]}px`,\n            width: `${progressCircleSizes[size]}px`,\n          }}\n          {...ariaLabelingProps}\n          {...progressAriaProps}\n          {...rootProps}\n        >\n          <svg\n            className={ProgressCircleSVGCSS}\n            viewBox={`0 0 ${progressCircleSizes[size]} ${progressCircleSizes[size]}`}\n            width=\"100%\"\n            height=\"100%\"\n          >\n            <circle\n              fill=\"none\"\n              className={clsx(progressCircleBackgroundCSS({ variant }))}\n              cx={progressCircleSizes[size] / 2}\n              cy={progressCircleSizes[size] / 2}\n              r={(progressCircleSizes[size] - progressCircleThickness) / 2}\n              strokeWidth={progressCircleThickness}\n            />\n            <circle\n              style={circleStyles}\n              className={progressCircleCSS({ indeterminate: isIndeterminate })}\n              fill=\"none\"\n              pathLength={\n                isIndeterminate ? 360 : circleStyles['strokeDasharray']\n              }\n              cx={progressCircleSizes[size] / 2}\n              cy={progressCircleSizes[size] / 2}\n              r={(progressCircleSizes[size] - progressCircleThickness) / 2}\n              strokeWidth={progressCircleThickness}\n            />\n          </svg>\n        </span>\n        {children && (\n          <label\n            className={clsx(\n              progressCircleChildCSS,\n              textStyleCSS({ textStyle: size === 'small' ? 'small' : 'base' }),\n            )}\n            htmlFor={id}\n          >\n            {children}\n          </label>\n        )}\n      </div>\n    );\n  },\n);\n\n(\n  ProgressCircle as typeof ProgressCircle & { displayName: string }\n).displayName = 'ProgressCircle';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/index.js

@@ -1,3 +1,4 @@
+export * from "./buttons/index.js";
 export * from "./core/index.js";
 export * from "./content/index.js";
 export * from "./layouts/index.js";

package/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './core/index.js';\nexport * from './content/index.js';\nexport * from './layouts/index.js';\nexport * from './styles/index.js';\nexport * from './typography/index.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './buttons/index.js';\nexport * from './core/index.js';\nexport * from './content/index.js';\nexport * from './layouts/index.js';\nexport * from './styles/index.js';\nexport * from './typography/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/esm/styles/field.css

@@ -0,0 +1,208 @@
+.field_fieldColorsCSS_color_primary__bx32h6 {
+  --vars_text__bx32h0: var(--dt-colors-text-primary-default, #454cc9);
+  --vars_icon__bx32h1: var(--dt-colors-icon-primary-default, #454cc9);
+}
+.field_fieldColorsCSS_color_primary__bx32h6:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-default-hover, #ccd3f3);
+}
+.field_fieldColorsCSS_color_primary__bx32h6:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-default-active, #c3cbf1);
+}
+.field_fieldColorsCSS_color_neutral__bx32h7 {
+  --vars_text__bx32h0: var(--dt-colors-text-neutral-default, #2b2a58);
+  --vars_icon__bx32h1: var(--dt-colors-icon-neutral-default, #2b2a58);
+}
+.field_fieldColorsCSS_color_neutral__bx32h7:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-default-hover, #d2d3e1);
+}
+.field_fieldColorsCSS_color_neutral__bx32h7:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-default-active, #cacbdc);
+}
+.field_fieldColorsCSS_color_success__bx32h8 {
+  --vars_text__bx32h0: var(--dt-colors-text-success-default, #2c6360);
+  --vars_icon__bx32h1: var(--dt-colors-icon-success-default, #2c6360);
+}
+.field_fieldColorsCSS_color_success__bx32h8:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-default-hover, #cad6d7);
+}
+.field_fieldColorsCSS_color_success__bx32h8:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-default-active, #c0cfcf);
+}
+.field_fieldColorsCSS_color_critical__bx32h9 {
+  --vars_text__bx32h0: var(--dt-colors-text-critical-default, #b80031);
+  --vars_icon__bx32h1: var(--dt-colors-icon-critical-default, #b80031);
+}
+.field_fieldColorsCSS_color_critical__bx32h9:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-default-hover, #f1cdcf);
+}
+.field_fieldColorsCSS_color_critical__bx32h9:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-default-active, #f0c4c5);
+}
+.field_fieldColorsCSS_color_warning__bx32ha {
+  --vars_text__bx32h0: var(--dt-colors-text-warning-default, #805100);
+  --vars_icon__bx32h1: var(--dt-colors-icon-warning-default, #805100);
+}
+.field_fieldColorsCSS_color_warning__bx32ha:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-default-hover, #f4e5d5);
+}
+.field_fieldColorsCSS_color_warning__bx32ha:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-default-active, #f5e1cd);
+}
+.field_fieldColorsCSS_variant_default__bx32hb {
+  --vars_background__bx32h3: transparent;
+  --vars_backgroundStatic__bx32h2: transparent;
+}
+.field_fieldColorsCSS_variant_accent__bx32hd {
+  --vars_text__bx32h0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__bx32h1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+}
+.field_fieldColorsCSS_compound_0__bx32he {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+.field_fieldColorsCSS_compound_1__bx32hf {
+  --vars_text__bx32h0: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --vars_icon__bx32h1: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-accent, #474ecf);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-primary-accent, #474ecf);
+}
+.field_fieldColorsCSS_compound_1__bx32hf:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-accent-hover, #3b3ebe);
+}
+.field_fieldColorsCSS_compound_1__bx32hf:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-accent-active, #312cad);
+}
+.field_fieldColorsCSS_compound_2__bx32hg {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+.field_fieldColorsCSS_compound_3__bx32hh {
+  --vars_text__bx32h0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__bx32h1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-accent, #5a5b8c);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-neutral-accent, #5a5b8c);
+}
+.field_fieldColorsCSS_compound_3__bx32hh:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-accent-hover, #4c4d7d);
+}
+.field_fieldColorsCSS_compound_3__bx32hh:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-accent-active, #3f3f6e);
+}
+.field_fieldColorsCSS_compound_4__bx32hi {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+.field_fieldColorsCSS_compound_5__bx32hj {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-accent, #2f6863);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-success-accent, #2f6863);
+}
+.field_fieldColorsCSS_compound_5__bx32hj:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-accent-hover, #1f5a55);
+}
+.field_fieldColorsCSS_compound_5__bx32hj:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-accent-active, #0d4c47);
+}
+.field_fieldColorsCSS_compound_6__bx32hk {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+.field_fieldColorsCSS_compound_7__bx32hl {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-accent, #c4233b);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-critical-accent, #c4233b);
+  --vars_text__bx32h0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --vars_icon__bx32h1: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+}
+.field_fieldColorsCSS_compound_7__bx32hl:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-accent-hover, #b2012d);
+}
+.field_fieldColorsCSS_compound_7__bx32hl:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-accent-active, #a0001f);
+}
+.field_fieldColorsCSS_compound_8__bx32hm {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+.field_fieldColorsCSS_compound_9__bx32hn {
+  --vars_text__bx32h0: var(--dt-colors-text-warning-on-accent-default, #272025);
+  --vars_icon__bx32h1: var(--dt-colors-icon-warning-on-accent-default, #272025);
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-accent, #eca440);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-warning-accent, #eca440);
+}
+.field_fieldColorsCSS_compound_9__bx32hn:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-accent-hover, #fdb452);
+}
+.field_fieldColorsCSS_compound_9__bx32hn:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-accent-active, #ffc56a);
+}
+.field_fieldColorsCSS_compound_10__bx32ho {
+  --vars_text__bx32h0: var(--dt-colors-text-neutral-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-neutral-disabled, #54558780);
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_10__bx32ho:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_10__bx32ho:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_11__bx32hp {
+  --vars_text__bx32h0: var(--dt-colors-text-primary-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-primary-disabled, #54558780);
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-disabled, #dadbe780);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-primary-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_11__bx32hp:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_11__bx32hp:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-primary-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_12__bx32hq {
+  --vars_text__bx32h0: var(--dt-colors-text-warning-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-warning-disabled, #54558780);
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-disabled, #dadbe780);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-warning-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_12__bx32hq:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_12__bx32hq:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-warning-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_13__bx32hr {
+  --vars_text__bx32h0: var(--dt-colors-text-success-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-success-disabled, #54558780);
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-disabled, #dadbe780);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-success-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_13__bx32hr:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_13__bx32hr:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-success-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_14__bx32hs {
+  --vars_text__bx32h0: var(--dt-colors-text-critical-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-critical-disabled, #54558780);
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-disabled, #dadbe780);
+  --vars_backgroundStatic__bx32h2: var(--dt-colors-background-field-critical-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_14__bx32hs:hover {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_14__bx32hs:active {
+  --vars_background__bx32h3: var(--dt-colors-background-field-critical-disabled, #dadbe780);
+}
+.field_fieldColorsCSS_compound_15__bx32ht {
+  --vars_text__bx32h0: var(--dt-colors-text-neutral-disabled, #54558780);
+  --vars_icon__bx32h1: var(--dt-colors-icon-neutral-disabled, #54558780);
+  --vars_background__bx32h3: transparent;
+  --vars_backgroundStatic__bx32h2: transparent;
+}
+.field_fieldColorsCSS_compound_15__bx32ht:hover {
+  --vars_background__bx32h3: transparent;
+}
+.field_fieldColorsCSS_compound_15__bx32ht:active {
+  --vars_background__bx32h3: transparent;
+}

package/esm/styles/field.sty.js

@@ -0,0 +1,9 @@
+import "./field.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var fieldColorVars = { text: "var(--vars_text__bx32h0)", icon: "var(--vars_icon__bx32h1)", backgroundStatic: "var(--vars_backgroundStatic__bx32h2)", background: "var(--vars_background__bx32h3)" };
+var fieldColorsCSS = _7a468({ defaultClassName: "field__bx32h4", variantClassNames: { disabled: { true: "field_fieldColorsCSS_disabled_true__bx32h5" }, color: { primary: "field_fieldColorsCSS_color_primary__bx32h6", neutral: "field_fieldColorsCSS_color_neutral__bx32h7", success: "field_fieldColorsCSS_color_success__bx32h8", critical: "field_fieldColorsCSS_color_critical__bx32h9", warning: "field_fieldColorsCSS_color_warning__bx32ha" }, variant: { "default": "field_fieldColorsCSS_variant_default__bx32hb", emphasized: "field_fieldColorsCSS_variant_emphasized__bx32hc", accent: "field_fieldColorsCSS_variant_accent__bx32hd" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "emphasized" }, "field_fieldColorsCSS_compound_0__bx32he"], [{ color: "primary", variant: "accent" }, "field_fieldColorsCSS_compound_1__bx32hf"], [{ color: "neutral", variant: "emphasized" }, "field_fieldColorsCSS_compound_2__bx32hg"], [{ color: "neutral", variant: "accent" }, "field_fieldColorsCSS_compound_3__bx32hh"], [{ color: "success", variant: "emphasized" }, "field_fieldColorsCSS_compound_4__bx32hi"], [{ color: "success", variant: "accent" }, "field_fieldColorsCSS_compound_5__bx32hj"], [{ color: "critical", variant: "emphasized" }, "field_fieldColorsCSS_compound_6__bx32hk"], [{ color: "critical", variant: "accent" }, "field_fieldColorsCSS_compound_7__bx32hl"], [{ color: "warning", variant: "emphasized" }, "field_fieldColorsCSS_compound_8__bx32hm"], [{ color: "warning", variant: "accent" }, "field_fieldColorsCSS_compound_9__bx32hn"], [{ color: "neutral", disabled: true }, "field_fieldColorsCSS_compound_10__bx32ho"], [{ color: "primary", disabled: true }, "field_fieldColorsCSS_compound_11__bx32hp"], [{ color: "warning", disabled: true }, "field_fieldColorsCSS_compound_12__bx32hq"], [{ color: "success", disabled: true }, "field_fieldColorsCSS_compound_13__bx32hr"], [{ color: "critical", disabled: true }, "field_fieldColorsCSS_compound_14__bx32hs"], [{ variant: "default", disabled: true }, "field_fieldColorsCSS_compound_15__bx32ht"]] });
+export {
+  fieldColorVars,
+  fieldColorsCSS
+};
+//# sourceMappingURL=field.sty.js.map

package/esm/styles/field.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/styles/field.css.ts"],
+  "sourcesContent": ["import './field.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var fieldColorVars = {text:'var(--vars_text__bx32h0)',icon:'var(--vars_icon__bx32h1)',backgroundStatic:'var(--vars_backgroundStatic__bx32h2)',background:'var(--vars_background__bx32h3)'};\nexport var fieldColorsCSS = _7a468({defaultClassName:'field__bx32h4',variantClassNames:{disabled:{true:'field_fieldColorsCSS_disabled_true__bx32h5'},color:{primary:'field_fieldColorsCSS_color_primary__bx32h6',neutral:'field_fieldColorsCSS_color_neutral__bx32h7',success:'field_fieldColorsCSS_color_success__bx32h8',critical:'field_fieldColorsCSS_color_critical__bx32h9',warning:'field_fieldColorsCSS_color_warning__bx32ha'},variant:{'default':'field_fieldColorsCSS_variant_default__bx32hb',emphasized:'field_fieldColorsCSS_variant_emphasized__bx32hc',accent:'field_fieldColorsCSS_variant_accent__bx32hd'}},defaultVariants:{},compoundVariants:[[{color:'primary',variant:'emphasized'},'field_fieldColorsCSS_compound_0__bx32he'],[{color:'primary',variant:'accent'},'field_fieldColorsCSS_compound_1__bx32hf'],[{color:'neutral',variant:'emphasized'},'field_fieldColorsCSS_compound_2__bx32hg'],[{color:'neutral',variant:'accent'},'field_fieldColorsCSS_compound_3__bx32hh'],[{color:'success',variant:'emphasized'},'field_fieldColorsCSS_compound_4__bx32hi'],[{color:'success',variant:'accent'},'field_fieldColorsCSS_compound_5__bx32hj'],[{color:'critical',variant:'emphasized'},'field_fieldColorsCSS_compound_6__bx32hk'],[{color:'critical',variant:'accent'},'field_fieldColorsCSS_compound_7__bx32hl'],[{color:'warning',variant:'emphasized'},'field_fieldColorsCSS_compound_8__bx32hm'],[{color:'warning',variant:'accent'},'field_fieldColorsCSS_compound_9__bx32hn'],[{color:'neutral',disabled:true},'field_fieldColorsCSS_compound_10__bx32ho'],[{color:'primary',disabled:true},'field_fieldColorsCSS_compound_11__bx32hp'],[{color:'warning',disabled:true},'field_fieldColorsCSS_compound_12__bx32hq'],[{color:'success',disabled:true},'field_fieldColorsCSS_compound_13__bx32hr'],[{color:'critical',disabled:true},'field_fieldColorsCSS_compound_14__bx32hs'],[{variant:'default',disabled:true},'field_fieldColorsCSS_compound_15__bx32ht']]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB,EAAC,MAAK,4BAA2B,MAAK,4BAA2B,kBAAiB,wCAAuC,YAAW,iCAAgC;AACzL,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,iBAAgB,mBAAkB,EAAC,UAAS,EAAC,MAAK,6CAA4C,GAAE,OAAM,EAAC,SAAQ,8CAA6C,SAAQ,8CAA6C,SAAQ,8CAA6C,UAAS,+CAA8C,SAAQ,6CAA4C,GAAE,SAAQ,EAAC,WAAU,gDAA+C,YAAW,mDAAkD,QAAO,8CAA6C,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,yCAAyC,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,yCAAyC,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,yCAAyC,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,yCAAyC,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,yCAAyC,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,yCAAyC,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,aAAY,GAAE,yCAAyC,GAAE,CAAC,EAAC,OAAM,YAAW,SAAQ,SAAQ,GAAE,yCAAyC,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,aAAY,GAAE,yCAAyC,GAAE,CAAC,EAAC,OAAM,WAAU,SAAQ,SAAQ,GAAE,yCAAyC,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,0CAA0C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,0CAA0C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,0CAA0C,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,0CAA0C,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,KAAI,GAAE,0CAA0C,GAAE,CAAC,EAAC,SAAQ,WAAU,UAAS,KAAI,GAAE,0CAA0C,CAAC,EAAC,CAAC;",
+  "names": []
+}

package/esm/typography/Code/Code.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/Code/Code.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { codeCSS } from './Code.sty.js';\nimport {\n  type DataTestId,\n  type StylingProps,\n  type WithChildren,\n} from '../../core/index.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\n\n/**\n * The props for the Code component.\n * @public\n */\nexport interface CodeProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {}\n\n/**\n * @public\n * Use the `Code` component to display snippets of code inline. If you want to\n * display a block of code, use the\n * {@link https://developer.dynatrace.com/reference/design-system/preview/content/CodeSnippet/ | `CodeSnippet`}\n * component instead.\n */\nexport const Code = /* @__PURE__ */ forwardRef<HTMLElement, CodeProps>(\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      ...remainingProps\n    } = props;\n    return (\n      <code\n        ref={ref}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(codeCSS, consumerClassName)}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {children}\n      </code>\n    );\n  },\n);\n\n(Code as typeof Code & { displayName: string }).displayName = 'Code';\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { codeCSS } from './Code.sty.js';\nimport {\n  type DataTestId,\n  type StylingProps,\n  type WithChildren,\n} from '../../core/index.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\n\n/**\n * The props for the Code component.\n * @public\n */\nexport interface CodeProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {}\n\n/**\n * @public\n * Use the `Code` component to display snippets of code inline. If you want to\n * display a block of code, use the\n * {@link https://developer.dynatrace.com/design/components-preview/content/CodeSnippet/ | `CodeSnippet`}\n * component instead.\n */\nexport const Code = /* @__PURE__ */ forwardRef<HTMLElement, CodeProps>(\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      ...remainingProps\n    } = props;\n    return (\n      <code\n        ref={ref}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(codeCSS, consumerClassName)}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {children}\n      </code>\n    );\n  },\n);\n\n(Code as typeof Code & { displayName: string }).displayName = 'Code';\n"],
   "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,eAAe;AAyBjB,MAAM,OAAuB;AAAA,EAClC,CAAC,OAAO,QAAQ;AACd,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AACJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,SAAS,iBAAiB;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

package/esm/typography/ExternalLink/ExternalLink.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/ExternalLink/ExternalLink.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef, MouseEventHandler } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ExternalLinkIcon } from '@dynatrace/strato-icons';\n\nimport { externalLinkCSS } from './ExternalLink.sty.js';\nimport {\n  type DataTestId,\n  type StylingProps,\n  type WithChildren,\n  _mergeProps,\n} from '../../core/index.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\n\n/**\n * The props for the ExternalLink component.\n * @public\n */\nexport interface ExternalLinkProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** The href used for the link. */\n  href: string;\n  /** Callback handler called on click. */\n  onClick?: MouseEventHandler;\n}\n\n/**\n * @public\n * Use the `ExternalLink` component to link outside of the\n * Dynatrace platform. For resources within the Dynatrace platform, use the\n * {@link https://developer.dynatrace.com/reference/design-system/preview/typography/Link/ | `Link`}\n * component instead.\n */\nexport const ExternalLink = /* @__PURE__ */ forwardRef<\n  HTMLAnchorElement,\n  ExternalLinkProps\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    ...remainingProps\n  } = props;\n\n  const { focusProps, focusClassName } = useFocusRing({\n    variant: 'primary',\n    isMinimal: true,\n  });\n\n  const intl = useIntl();\n\n  return (\n    <a\n      ref={ref}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(focusClassName, externalLinkCSS, consumerClassName)}\n      style={consumerStyle}\n      {..._mergeProps(remainingProps, focusProps)}\n    >\n      {children}\n      <span>\n        &#65279;\n        <ExternalLinkIcon\n          aria-hidden=\"false\"\n          // https://www.w3.org/WAI/tutorials/images/functional/#example-3-icon-image-conveying-information-within-link-text\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Opening the link in a new window',\n            id: 'JzYy8MUVfPcyf4l5',\n            description:\n              'External link icon that describes the external link icon',\n          })}\n        />\n      </span>\n    </a>\n  );\n});\n\n(ExternalLink as typeof ExternalLink & { displayName: string }).displayName =\n  'ExternalLink';\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef, MouseEventHandler } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ExternalLinkIcon } from '@dynatrace/strato-icons';\n\nimport { externalLinkCSS } from './ExternalLink.sty.js';\nimport {\n  type DataTestId,\n  type StylingProps,\n  type WithChildren,\n  _mergeProps,\n} from '../../core/index.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\n\n/**\n * The props for the ExternalLink component.\n * @public\n */\nexport interface ExternalLinkProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  /** The href used for the link. */\n  href: string;\n  /** Callback handler called on click. */\n  onClick?: MouseEventHandler;\n}\n\n/**\n * @public\n * Use the `ExternalLink` component to link outside of the\n * Dynatrace platform. For resources within the Dynatrace platform, use the\n * {@link https://developer.dynatrace.com/design/components/typography/Link/ | `Link`}\n * component instead.\n */\nexport const ExternalLink = /* @__PURE__ */ forwardRef<\n  HTMLAnchorElement,\n  ExternalLinkProps\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    ...remainingProps\n  } = props;\n\n  const { focusProps, focusClassName } = useFocusRing({\n    variant: 'primary',\n    isMinimal: true,\n  });\n\n  const intl = useIntl();\n\n  return (\n    <a\n      ref={ref}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={clsx(focusClassName, externalLinkCSS, consumerClassName)}\n      style={consumerStyle}\n      {..._mergeProps(remainingProps, focusProps)}\n    >\n      {children}\n      <span>\n        &#65279;\n        <ExternalLinkIcon\n          aria-hidden=\"false\"\n          // https://www.w3.org/WAI/tutorials/images/functional/#example-3-icon-image-conveying-information-within-link-text\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Opening the link in a new window',\n            id: 'JzYy8MUVfPcyf4l5',\n            description:\n              'External link icon that describes the external link icon',\n          })}\n        />\n      </span>\n    </a>\n  );\n});\n\n(ExternalLink as typeof ExternalLink & { displayName: string }).displayName =\n  'ExternalLink';\n"],
   "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAqC;AACrD,SAAS,eAAe;AAExB,SAAS,wBAAwB;AAEjC,SAAS,uBAAuB;AAChC;AAAA,EAIE;AAAA,OACK;AACP,SAAS,oBAAoB;AAyBtB,MAAM,eAA+B,2BAG1C,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,IAClD,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC;AAED,QAAM,OAAO,QAAQ;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW,KAAK,gBAAgB,iBAAiB,iBAAiB;AAAA,MAClE,OAAO;AAAA,MACN,GAAG,YAAY,gBAAgB,UAAU;AAAA;AAAA,IAEzC;AAAA,IACD,oCAAC,cAAK,UAEJ;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QAEZ,cAAY,KAAK,cAAc;AAAA,UAC7B,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aACE;AAAA,QACJ,CAAC;AAAA;AAAA,IACH,CACF;AAAA,EACF;AAEJ,CAAC;AAEA,aAA+D,cAC9D;",
   "names": []
 }

package/esm/typography/Link/Link.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/typography/Link/Link.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport React, { ElementType, forwardRef, ReactElement } from 'react';\n\nimport {\n  type PolymorphicComponentProps,\n  type DataTestId,\n  type StylingProps,\n  type WithChildren,\n  _mergeProps,\n} from '../../core/index.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport { linkCSS } from '../Link/Link.sty.js';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport type LinkProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  WithChildren & StylingProps & DataTestId & MaskingProps\n>;\n\n/**\n * @public\n * Use the `Link` component to navigate to a different page within the application.\n * For external resources in a different domain, use the\n * {@link https://developer.dynatrace.com/reference/design-system/preview/typography/ExternalLink/ | `ExternalLink`}\n * component instead.\n */\nexport const Link: <E extends ElementType = 'a'>(\n  props: LinkProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      as,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    }: LinkProps<E>,\n    ref: typeof remainingProps.ref,\n  ) => {\n    const { focusProps, focusClassName } = useFocusRing({\n      variant: 'primary',\n      isMinimal: true,\n    });\n    const LinkTag = as || 'a';\n\n    return (\n      <LinkTag\n        ref={ref}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(focusClassName, linkCSS, consumerClassName)}\n        style={consumerStyle}\n        {..._mergeProps(\n          // Need to cast this one as the inference of mergeProps would generate\n          // a not allowed overlap. The remainingProps type is too complex due to the\n          // polymorphic inheritance.\n          remainingProps as Record<string, unknown>,\n          focusProps,\n        )}\n      >\n        {children}\n      </LinkTag>\n    );\n  },\n);\n\n(Link as typeof Link & { displayName: string }).displayName = 'Link';\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { ElementType, forwardRef, ReactElement } from 'react';\n\nimport {\n  type PolymorphicComponentProps,\n  type DataTestId,\n  type StylingProps,\n  type WithChildren,\n  _mergeProps,\n} from '../../core/index.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport { linkCSS } from '../Link/Link.sty.js';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport type LinkProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  WithChildren & StylingProps & DataTestId & MaskingProps\n>;\n\n/**\n * @public\n * Use the `Link` component to navigate to a different page within the application.\n * For external resources in a different domain, use the\n * {@link https://developer.dynatrace.com/design/components/typography/ExternalLink/ | `ExternalLink`}\n * component instead.\n */\nexport const Link: <E extends ElementType = 'a'>(\n  props: LinkProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      as,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    }: LinkProps<E>,\n    ref: typeof remainingProps.ref,\n  ) => {\n    const { focusProps, focusClassName } = useFocusRing({\n      variant: 'primary',\n      isMinimal: true,\n    });\n    const LinkTag = as || 'a';\n\n    return (\n      <LinkTag\n        ref={ref}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(focusClassName, linkCSS, consumerClassName)}\n        style={consumerStyle}\n        {..._mergeProps(\n          // Need to cast this one as the inference of mergeProps would generate\n          // a not allowed overlap. The remainingProps type is too complex due to the\n          // polymorphic inheritance.\n          remainingProps as Record<string, unknown>,\n          focusProps,\n        )}\n      >\n        {children}\n      </LinkTag>\n    );\n  },\n);\n\n(Link as typeof Link & { displayName: string }).displayName = 'Link';\n"],
   "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAsB,kBAAgC;AAE7D;AAAA,EAKE;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,eAAe;AAkBjB,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD,SAAS;AAAA,MACT,WAAW;AAAA,IACb,CAAC;AACD,UAAM,UAAU,MAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,gBAAgB,SAAS,iBAAiB;AAAA,QAC1D,OAAO;AAAA,QACN,GAAG;AAAA;AAAA;AAAA;AAAA,UAIF;AAAA,UACA;AAAA,QACF;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

package/index.d.ts

@@ -1,3 +1,4 @@
+export * from './buttons/index.js';
 export * from './core/index.js';
 export * from './content/index.js';
 export * from './layouts/index.js';

package/index.js

@@ -14,6 +14,7 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./buttons/index.js"), module.exports);
 __reExport(src_exports, require("./core/index.js"), module.exports);
 __reExport(src_exports, require("./content/index.js"), module.exports);
 __reExport(src_exports, require("./layouts/index.js"), module.exports);

package/lang/en.json

@@ -10,5 +10,11 @@
       "type": 0,
       "value": "Opening the link in a new window"
     }
+  ],
+  "cycz+bYG+VH7Of4e": [
+    {
+      "type": 0,
+      "value": "Loading"
+    }
   ]
 }

package/lang/uncompiled/en.json

@@ -6,5 +6,9 @@
   "JzYy8MUVfPcyf4l5": {
     "notes": "External link icon that describes the external link icon",
     "translation": "Opening the link in a new window"
+  },
+  "cycz+bYG+VH7Of4e": {
+    "notes": "Label for the loading state.",
+    "translation": "Loading"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynatrace/strato-components",
-  "version": "0.84.51",
+  "version": "0.85.10",
   "private": false,
   "license": "Apache-2.0",
   "lang": "lang/uncompiled",
@@ -19,6 +19,13 @@
       "module": "./esm/index.js",
       "import": "./esm/index.js"
     },
+    "./buttons": {
+      "types": "./buttons/index.d.ts",
+      "require": "./buttons/index.js",
+      "browser": "./esm/buttons/index.js",
+      "module": "./esm/buttons/index.js",
+      "import": "./esm/buttons/index.js"
+    },
     "./content": {
       "types": "./content/index.d.ts",
       "require": "./content/index.js",
@@ -64,28 +71,28 @@
     }
   },
   "dependencies": {
-    "@dynatrace-sdk/units": "^0.13.1",
+    "@dynatrace-sdk/units": "^0.13.2",
     "@dynatrace/devkit": "^0.3.2",
-    "@formatjs/icu-messageformat-parser": "^2.0.18",
+    "@formatjs/icu-messageformat-parser": "^2.7.8",
     "@jest/globals": "^29.7.0",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
     "wicg-inert": "^3.1.2",
     "use-resize-observer": "^9.1.0",
-    "@dynatrace/strato-design-tokens": "0.20.30",
-    "@dynatrace/strato-icons": "0.38.0"
+    "@dynatrace/strato-design-tokens": "0.20.40",
+    "@dynatrace/strato-icons": "0.39.1"
   },
   "peerDependencies": {
-    "@dynatrace-sdk/app-environment": ">= 1.0.0 < 2",
-    "@dynatrace-sdk/error-handlers": ">= 1.0.0 < 2",
-    "@dynatrace-sdk/navigation": ">= 1.0.0 < 2",
-    "@dynatrace-sdk/user-preferences": ">= 1.1.0 < 2",
-    "@testing-library/react": "^12.0.0 || ^14.0.0",
-    "@testing-library/user-event": ">= 13.1.8",
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0",
+    "@dynatrace-sdk/app-environment": "^1.0.0",
+    "@dynatrace-sdk/error-handlers": "^1.0.0",
+    "@dynatrace-sdk/navigation": "^1.0.0",
+    "@dynatrace-sdk/user-preferences": "^1.1.0",
+    "@testing-library/react": "^14.0.0 || ^15.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-intl": "^6.0.8",
-    "react-is": "^17.0.2 || ^18.0.0"
+    "react-is": "^18.0.0"
   },
   "peerDependenciesMeta": {
     "@testing-library/react": {