@dynatrace/strato-components 0.85.32 → 0.85.41

package/buttons/button/Button.js

@@ -44,8 +44,10 @@ var import_ProgressCircle = require("../../content/progress/ProgressCircle.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useFocusRing = require("../../core/styles/useFocusRing.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
+var import_parse_boolean = require("../../core/utils/parse-boolean.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
 var import_Grid = require("../../layouts/grid/Grid.js");
+var import_InputGroup_css = require("../../layouts/input-group/InputGroup.sty.js");
 var import_field_css = require("../../styles/field.sty.js");
 function getButtonSlots(children) {
   const slots = {};
@@ -67,7 +69,7 @@ function getButtonSlots(children) {
           break;
       }
     } else {
-      if (child) {
+      if (child !== null && child !== void 0) {
         slots.freeform ??= [];
         slots.freeform.push(child);
       }
@@ -102,7 +104,7 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
       ...remainingProps
     } = props;
     const slots = getButtonSlots(children);
-    const ariaDisabled = ariaDisabledProp === true || ariaDisabledProp === "true";
+    const ariaDisabled = (0, import_parse_boolean.parseBoolean)(ariaDisabledProp);
     const nativeDisabledOrLoading = (0, import_react.useMemo)(
       () => loading ? true : disabled,
       [disabled, loading]
@@ -180,6 +182,7 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
               readOnly
             }),
             focusClassName,
+            import_InputGroup_css.inputGroupChildCSS,
             {
               [`${import_Button_css.buttonWidthsCSS.content}`]: width === "content",
               [`${import_Button_css.buttonWidthsCSS.full}`]: width === "full"
@@ -211,7 +214,8 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
             [`${import_Button_css.buttonWidthsCSS.content}`]: width === "content",
             [`${import_Button_css.buttonWidthsCSS.full}`]: width === "full"
           },
-          focusClassName
+          focusClassName,
+          import_InputGroup_css.inputGroupChildCSS
         ),
         style: {
           width: width !== "content" && width !== "full" ? width : void 0,

package/core/components/app-root/AppRoot.d.ts

@@ -1,6 +1,6 @@
 import React, { type PropsWithChildren } from 'react';
 import 'wicg-inert';
-import './AppRoot.css.js';
+import './AppRoot.sty.js';
 import { type DataTestId } from '../../types/data-props.js';
 import { type MaskingProps } from '../../types/masking-props.js';
 import { type StylingProps } from '../../types/styling-props.js';

package/core/index.d.ts

@@ -27,3 +27,4 @@ export { roleVariants } from './types/role-variant.js';
 export type { RoleVariantType } from './types/role-variant.js';
 export { uuidv4 as _uuidv4 } from './utils/uuidv4.js';
 export { isStringChildren as _isStringChildren } from './utils/_is-string-children.js';
+export { parseBoolean as _parseBoolean } from './utils/parse-boolean.js';

package/core/index.js

@@ -28,6 +28,7 @@ __export(core_exports, {
   _isFocusable: () => import_is_focusable.isFocusable,
   _isStringChildren: () => import_is_string_children.isStringChildren,
   _mergeProps: () => import_merge_props.mergeProps,
+  _parseBoolean: () => import_parse_boolean.parseBoolean,
   _useAriaLabelingProps: () => import_useAriaLabelingProps.useAriaLabelingProps,
   _useFocusContext: () => import_useFocusContext.useFocusContext,
   _useId: () => import_useId.useId,
@@ -55,3 +56,4 @@ var import_useSafeForwardProps = require("./hooks/useSafeForwardProps.js");
 var import_role_variant = require("./types/role-variant.js");
 var import_uuidv4 = require("./utils/uuidv4.js");
 var import_is_string_children = require("./utils/_is-string-children.js");
+var import_parse_boolean = require("./utils/parse-boolean.js");

package/core/utils/parse-boolean.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Converts a `Booleanish` value to `boolean` or `undefined`.
+ *
+ * Booleanish is used by react to type attributes like `aria-disabled`
+ *
+ * @internal
+ * @see {@link https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L27 | `Booleanish` from @types/react}
+ */
+export declare function parseBoolean(booleanish: boolean | 'true' | 'false' | undefined): boolean | undefined;

package/core/utils/parse-boolean.js

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var parse_boolean_exports = {};
+__export(parse_boolean_exports, {
+  parseBoolean: () => parseBoolean
+});
+module.exports = __toCommonJS(parse_boolean_exports);
+function parseBoolean(booleanish) {
+  if (booleanish === void 0) {
+    return;
+  }
+  if (typeof booleanish === "boolean") {
+    return booleanish;
+  }
+  return booleanish === "true";
+}

package/esm/buttons/button/Button.js

@@ -13,8 +13,10 @@ import { ProgressCircle } from "../../content/progress/ProgressCircle.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { mergeProps } from "../../core/utils/merge-props.js";
+import { parseBoolean } from "../../core/utils/parse-boolean.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { Grid } from "../../layouts/grid/Grid.js";
+import { inputGroupChildCSS } from "../../layouts/input-group/InputGroup.sty.js";
 import { fieldColorsCSS } from "../../styles/field.sty.js";
 function getButtonSlots(children) {
   const slots = {};
@@ -36,7 +38,7 @@ function getButtonSlots(children) {
           break;
       }
     } else {
-      if (child) {
+      if (child !== null && child !== void 0) {
         slots.freeform ??= [];
         slots.freeform.push(child);
       }
@@ -71,7 +73,7 @@ const _Button = /* @__PURE__ */ forwardRef(
       ...remainingProps
     } = props;
     const slots = getButtonSlots(children);
-    const ariaDisabled = ariaDisabledProp === true || ariaDisabledProp === "true";
+    const ariaDisabled = parseBoolean(ariaDisabledProp);
     const nativeDisabledOrLoading = useMemo(
       () => loading ? true : disabled,
       [disabled, loading]
@@ -149,6 +151,7 @@ const _Button = /* @__PURE__ */ forwardRef(
               readOnly
             }),
             focusClassName,
+            inputGroupChildCSS,
             {
               [`${buttonWidthsCSS.content}`]: width === "content",
               [`${buttonWidthsCSS.full}`]: width === "full"
@@ -180,7 +183,8 @@ const _Button = /* @__PURE__ */ forwardRef(
             [`${buttonWidthsCSS.content}`]: width === "content",
             [`${buttonWidthsCSS.full}`]: width === "full"
           },
-          focusClassName
+          focusClassName,
+          inputGroupChildCSS
         ),
         style: {
           width: width !== "content" && width !== "full" ? width : void 0,

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 React, {\n  type ElementType,\n  type MouseEventHandler,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n  useMemo,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { buttonCSS, buttonLoadingCSS, buttonWidthsCSS } 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 { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport {\n  type AriaDisabledProps,\n  type AriaLabelingProps,\n} from '../../core/types/a11y-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 { Flex } from '../../layouts/flex/Flex.js';\nimport { Grid } from '../../layouts/grid/Grid.js';\nimport { fieldColorsCSS } from '../../styles/field.sty.js';\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  /**\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  // eslint-disable-next-line @typescript-eslint/ban-types\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 and the button is disabled.\n   * @defaultValue false\n   */\n  loading?: boolean;\n\n  /**\n   * Determines whether the element is in read-only mode.\n   * @defaultValue false\n   */\n  readOnly?: 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  React.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) {\n        slots.freeform ??= [];\n        slots.freeform.push(child);\n      }\n    }\n  });\n\n  return slots;\n}\n\nexport const _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      readOnly,\n      as,\n      ...remainingProps\n    }: ButtonProps<E> = props;\n    const slots = getButtonSlots(children);\n\n    const ariaDisabled =\n      ariaDisabledProp === true || ariaDisabledProp === 'true';\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 { focusProps, focusClassName } = useFocusRing({\n      variant: !disabledOrLoading ? color : 'neutral',\n      disabled: nativeDisabledOrLoading,\n    });\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\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: nativeDisabledOrLoading && !ariaDisabled,\n      id: propId,\n      type,\n      ...ariaLabelingProps,\n      'aria-disabled': ariaDisabledProp,\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 remainingProps type is too complex due to the\n        // polymorphic inheritance.\n        remainingProps as Record<string, unknown>,\n        focusProps,\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          {...buttonMergedProps}\n          className={clsx(\n            consumerClassName,\n            fieldColorsCSS({ variant, color, disabled: disabledOrLoading }),\n            buttonCSS({\n              disabled: disabledOrLoading,\n              textAlign,\n              size,\n              readOnly,\n            }),\n            focusClassName,\n            {\n              [`${buttonWidthsCSS.content}`]: width === 'content',\n              [`${buttonWidthsCSS.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        className={clsx(\n          consumerClassName,\n          fieldColorsCSS({\n            variant,\n            color,\n            disabled: disabledOrLoading || ariaDisabled,\n          }),\n          buttonCSS({\n            disabled: disabledOrLoading || ariaDisabled,\n            textAlign,\n            size,\n            readOnly,\n          }),\n          {\n            [`${buttonWidthsCSS.content}`]: width === 'content',\n            [`${buttonWidthsCSS.full}`]: width === 'full',\n          },\n          focusClassName,\n        )}\n        style={{\n          width: width !== 'content' && width !== 'full' ? width : undefined,\n          ...consumerStyle,\n        }}\n        {...buttonMergedProps}\n      >\n        {loading && (\n          <div className={buttonLoadingCSS}>\n            <ProgressCircle\n              size=\"small\"\n              variant={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 = 'Button';\n\n/**\n * Buttons allow users to trigger actions or events\n * with a single click anywhere within the button container.\n * Users can also trigger a button 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 React, {\n  type ElementType,\n  type MouseEventHandler,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n  useMemo,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { buttonCSS, buttonLoadingCSS, buttonWidthsCSS } 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 { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport {\n  type AriaDisabledProps,\n  type AriaLabelingProps,\n} from '../../core/types/a11y-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 { inputGroupChildCSS } from '../../layouts/input-group/InputGroup.sty.js';\nimport { fieldColorsCSS } from '../../styles/field.sty.js';\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  /**\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  // eslint-disable-next-line @typescript-eslint/ban-types\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 and the button is disabled.\n   * @defaultValue false\n   */\n  loading?: boolean;\n\n  /**\n   * Determines whether the element is in read-only mode.\n   * @defaultValue false\n   */\n  readOnly?: 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  React.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\nexport const _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      readOnly,\n      as,\n      ...remainingProps\n    }: ButtonProps<E> = props;\n    const slots = getButtonSlots(children);\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 { focusProps, focusClassName } = useFocusRing({\n      variant: !disabledOrLoading ? color : 'neutral',\n      disabled: nativeDisabledOrLoading,\n    });\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\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: nativeDisabledOrLoading && !ariaDisabled,\n      id: propId,\n      type,\n      ...ariaLabelingProps,\n      'aria-disabled': ariaDisabledProp,\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 remainingProps type is too complex due to the\n        // polymorphic inheritance.\n        remainingProps as Record<string, unknown>,\n        focusProps,\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          {...buttonMergedProps}\n          className={clsx(\n            consumerClassName,\n            fieldColorsCSS({ variant, color, disabled: disabledOrLoading }),\n            buttonCSS({\n              disabled: disabledOrLoading,\n              textAlign,\n              size,\n              readOnly,\n            }),\n            focusClassName,\n            inputGroupChildCSS,\n            {\n              [`${buttonWidthsCSS.content}`]: width === 'content',\n              [`${buttonWidthsCSS.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        className={clsx(\n          consumerClassName,\n          fieldColorsCSS({\n            variant,\n            color,\n            disabled: disabledOrLoading || ariaDisabled,\n          }),\n          buttonCSS({\n            disabled: disabledOrLoading || ariaDisabled,\n            textAlign,\n            size,\n            readOnly,\n          }),\n          {\n            [`${buttonWidthsCSS.content}`]: width === 'content',\n            [`${buttonWidthsCSS.full}`]: width === 'full',\n          },\n          focusClassName,\n          inputGroupChildCSS,\n        )}\n        style={{\n          width: width !== 'content' && width !== 'full' ? width : undefined,\n          ...consumerStyle,\n        }}\n        {...buttonMergedProps}\n      >\n        {loading && (\n          <div className={buttonLoadingCSS}>\n            <ProgressCircle\n              size=\"small\"\n              variant={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 = 'Button';\n\n/**\n * Buttons allow users to trigger actions or events\n * with a single click anywhere within the button container.\n * Users can also trigger a button 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/core/components/app-root/AppRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/core/components/app-root/AppRoot.tsx"],
-  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport React, {\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { IntlProvider, type MessageFormatElement } from 'react-intl';\n\nimport 'wicg-inert';\nimport { getLanguage, getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport './AppRoot.sty.js';\nimport { useCurrentTheme } from '../../hooks/useCurrentTheme.js';\nimport { FocusProvider } from '../../providers/FocusProvider.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport { type MaskingProps } from '../../types/masking-props.js';\nimport { type StylingProps } from '../../types/styling-props.js';\n\n/**\n * Gets the href value set in the <base> element to prefix fetches correctly.\n * Will always end with a `/` value\n */\nfunction getBaseHref(): string {\n  const baseElement = document.querySelector('base');\n  const href = baseElement?.href ?? '/';\n  return href.endsWith('/') ? href : `${href}/`;\n}\n\n/**\n * AppRoot component props.\n * @public\n */\nexport type AppRootProps = PropsWithChildren<\n  DataTestId & StylingProps & MaskingProps\n>;\n\nconst defaultLanguage = 'en';\n\n/**\n * In order to have all the providers in place for rendering overlays, applying\n * global styles or internationalization, you need to wrap your app in the\n * `AppRoot`. If you're using the `dt-app` to create your app, this is\n * automatically taken care of and you can start working on your app without\n * further ado.\n * @public\n */\nexport const AppRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, AppRootProps>(\n  (props, forwardedRef) => {\n    const {\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId = 'app-root',\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n    } = props;\n\n    /** Messages that are used for the translation. */\n    const [messages, setMessages] = useState<\n      Record<string, string> | Record<string, MessageFormatElement[]>\n    >({});\n\n    const { children } = props;\n\n    const theme = useCurrentTheme();\n    const language = getLanguage();\n    let timezone = getTimezone();\n    try {\n      new Intl.DateTimeFormat(language, { timeZone: timezone });\n    } catch (error) {\n      // If the passed timezone is not valid, we can fall back to the browsers\n      // configured one.\n      timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    }\n\n    /** Inject the font link into the head */\n    useLayoutEffect(() => {\n      // As we should not use @import within the createGlobalStyles\n      // https://styled-components.com/docs/faqs#note-regarding-css-import-and-createglobalstyle\n      // and we need to inject the fonts at run time to decouple font usage\n      // from the cli build / deployment\n      // we will inject the link tag here in the root on initial load.\n      const link = document.createElement('link');\n\n      link.rel = 'stylesheet';\n      link.href = 'https://dt-cdn.net/fonts/fonts-v004.css';\n      document.head.appendChild(link);\n      return () => {\n        document.head.removeChild(link);\n      };\n    }, []);\n\n    /**\n     * Synchronize the [data-theme] attribute to the root of the document\n     * to have the design tokens defined in the cascade.\n     */\n    useLayoutEffect(() => {\n      if (document !== undefined) {\n        document.documentElement.setAttribute('data-theme', theme);\n      }\n    }, [theme]);\n\n    useEffect(() => {\n      if (language === 'en') {\n        // Don't fetch translations for 'en' to avoid an additional render cycle.\n        // The default messages are in english already.\n        return;\n      }\n\n      fetch(`${getBaseHref()}lang/${language}.json`)\n        .then((res) => {\n          return res.json();\n        })\n        .then((receivedMessages) => {\n          setMessages(receivedMessages);\n        })\n        .catch(() => {\n          // Only set messages to a new empty object if the previous messages were not empty.\n          // `setMessages({})` would make react believe that this is a new object and, hence, re-render.\n          // By just returning `prev` if the messages were already empty, we can avoid the additional render.\n          setMessages((prev) => (isEmpty(prev) ? prev : {}));\n        });\n    }, [language]);\n\n    return (\n      <div\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-theme={theme}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <IntlProvider\n          locale={language}\n          timeZone={timezone}\n          messages={messages}\n          defaultLocale={defaultLanguage}\n        >\n          <FocusProvider>{children}</FocusProvider>\n        </IntlProvider>\n      </div>\n    );\n  },\n);\n\n(AppRoot as typeof AppRoot & { displayName: string }).displayName = 'AppRoot';\n"],
-  "mappings": "AAAA,SAAS,eAAe;AACxB,OAAO;AAAA,EAEL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAA+C;AAExD,OAAO;AACP,SAAS,aAAa,mBAAmB;AAEzC,OAAO;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAS9B,SAAS,cAAsB;AAC7B,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,OAAO,aAAa,QAAQ;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI;AAC5C;AAUA,MAAM,kBAAkB;AAUjB,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe,aAAa;AAAA,MAC5B,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,IACtB,IAAI;AAGJ,UAAM,CAAC,UAAU,WAAW,IAAI,SAE9B,CAAC,CAAC;AAEJ,UAAM,EAAE,SAAS,IAAI;AAErB,UAAM,QAAQ,gBAAgB;AAC9B,UAAM,WAAW,YAAY;AAC7B,QAAI,WAAW,YAAY;AAC3B,QAAI;AACF,UAAI,KAAK,eAAe,UAAU,EAAE,UAAU,SAAS,CAAC;AAAA,IAC1D,SAAS,OAAO;AAGd,iBAAW,KAAK,eAAe,EAAE,gBAAgB,EAAE;AAAA,IACrD;AAGA,oBAAgB,MAAM;AAMpB,YAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAK,MAAM;AACX,WAAK,OAAO;AACZ,eAAS,KAAK,YAAY,IAAI;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF,GAAG,CAAC,CAAC;AAML,oBAAgB,MAAM;AACpB,UAAI,aAAa,QAAW;AAC1B,iBAAS,gBAAgB,aAAa,cAAc,KAAK;AAAA,MAC3D;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,cAAU,MAAM;AACd,UAAI,aAAa,MAAM;AAGrB;AAAA,MACF;AAEA,YAAM,GAAG,YAAY,CAAC,QAAQ,QAAQ,OAAO,EAC1C,KAAK,CAAC,QAAQ;AACb,eAAO,IAAI,KAAK;AAAA,MAClB,CAAC,EACA,KAAK,CAAC,qBAAqB;AAC1B,oBAAY,gBAAgB;AAAA,MAC9B,CAAC,EACA,MAAM,MAAM;AAIX,oBAAY,CAAC,SAAU,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAE;AAAA,MACnD,CAAC;AAAA,IACL,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACP,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA;AAAA,MAElB;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU;AAAA,UACV;AAAA,UACA,eAAe;AAAA;AAAA,QAEf,oCAAC,qBAAe,QAAS;AAAA,MAC3B;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,QAAqD,cAAc;",
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport React, {\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { IntlProvider, type MessageFormatElement } from 'react-intl';\n\nimport 'wicg-inert';\nimport { getLanguage, getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport './AppRoot.sty.js';\nimport { useCurrentTheme } from '../../hooks/useCurrentTheme.js';\nimport { FocusProvider } from '../../providers/FocusProvider.js';\nimport { type DataTestId } from '../../types/data-props.js';\nimport { type MaskingProps } from '../../types/masking-props.js';\nimport { type StylingProps } from '../../types/styling-props.js';\n\n/**\n * Gets the href value set in the <base> element to prefix fetches correctly.\n * Will always end with a `/` value\n */\nfunction getBaseHref(): string {\n  const baseElement = document.querySelector('base');\n  const href = baseElement?.href ?? '/';\n  return href.endsWith('/') ? href : `${href}/`;\n}\n\n/**\n * AppRoot component props.\n * @public\n */\nexport type AppRootProps = PropsWithChildren<\n  DataTestId & StylingProps & MaskingProps\n>;\n\nconst defaultLanguage = 'en';\n\n/**\n * In order to have all the providers in place for rendering overlays, applying\n * global styles or internationalization, you need to wrap your app in the\n * `AppRoot`. If you're using the `dt-app` to create your app, this is\n * automatically taken care of and you can start working on your app without\n * further ado.\n * @public\n */\nexport const AppRoot = /* @__PURE__ */ forwardRef<HTMLDivElement, AppRootProps>(\n  (props, forwardedRef) => {\n    const {\n      style: consumerStyle,\n      className: consumerClassName,\n      'data-testid': dataTestId = 'app-root',\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n    } = props;\n\n    /** Messages that are used for the translation. */\n    const [messages, setMessages] = useState<\n      Record<string, string> | Record<string, MessageFormatElement[]>\n    >({});\n\n    const { children } = props;\n\n    const theme = useCurrentTheme();\n    const language = getLanguage();\n    let timezone = getTimezone();\n    try {\n      new Intl.DateTimeFormat(language, { timeZone: timezone });\n    } catch (error) {\n      // If the passed timezone is not valid, we can fall back to the browsers\n      // configured one.\n      timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n    }\n\n    /** Inject the font link into the head */\n    useLayoutEffect(() => {\n      // Right now the font css file is not automatically injected into\n      // the app index.html file. And as there are no static ways to @import\n      // css with vanilla extract, we need to inject the link here.\n      const link = document.createElement('link');\n\n      link.rel = 'stylesheet';\n      link.href = 'https://dt-cdn.net/fonts/fonts-v004.css';\n      document.head.appendChild(link);\n      return () => {\n        document.head.removeChild(link);\n      };\n    }, []);\n\n    /**\n     * Synchronize the [data-theme] attribute to the root of the document\n     * to have the design tokens defined in the cascade.\n     */\n    useLayoutEffect(() => {\n      if (document !== undefined) {\n        document.documentElement.setAttribute('data-theme', theme);\n      }\n    }, [theme]);\n\n    useEffect(() => {\n      if (language === 'en') {\n        // Don't fetch translations for 'en' to avoid an additional render cycle.\n        // The default messages are in english already.\n        return;\n      }\n\n      fetch(`${getBaseHref()}lang/${language}.json`)\n        .then((res) => {\n          return res.json();\n        })\n        .then((receivedMessages) => {\n          setMessages(receivedMessages);\n        })\n        .catch(() => {\n          // Only set messages to a new empty object if the previous messages were not empty.\n          // `setMessages({})` would make react believe that this is a new object and, hence, re-render.\n          // By just returning `prev` if the messages were already empty, we can avoid the additional render.\n          setMessages((prev) => (isEmpty(prev) ? prev : {}));\n        });\n    }, [language]);\n\n    return (\n      <div\n        ref={forwardedRef}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-theme={theme}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <IntlProvider\n          locale={language}\n          timeZone={timezone}\n          messages={messages}\n          defaultLocale={defaultLanguage}\n        >\n          <FocusProvider>{children}</FocusProvider>\n        </IntlProvider>\n      </div>\n    );\n  },\n);\n\n(AppRoot as typeof AppRoot & { displayName: string }).displayName = 'AppRoot';\n"],
+  "mappings": "AAAA,SAAS,eAAe;AACxB,OAAO;AAAA,EAEL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAA+C;AAExD,OAAO;AACP,SAAS,aAAa,mBAAmB;AAEzC,OAAO;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAS9B,SAAS,cAAsB;AAC7B,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,OAAO,aAAa,QAAQ;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI;AAC5C;AAUA,MAAM,kBAAkB;AAUjB,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe,aAAa;AAAA,MAC5B,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,IACtB,IAAI;AAGJ,UAAM,CAAC,UAAU,WAAW,IAAI,SAE9B,CAAC,CAAC;AAEJ,UAAM,EAAE,SAAS,IAAI;AAErB,UAAM,QAAQ,gBAAgB;AAC9B,UAAM,WAAW,YAAY;AAC7B,QAAI,WAAW,YAAY;AAC3B,QAAI;AACF,UAAI,KAAK,eAAe,UAAU,EAAE,UAAU,SAAS,CAAC;AAAA,IAC1D,SAAS,OAAO;AAGd,iBAAW,KAAK,eAAe,EAAE,gBAAgB,EAAE;AAAA,IACrD;AAGA,oBAAgB,MAAM;AAIpB,YAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAK,MAAM;AACX,WAAK,OAAO;AACZ,eAAS,KAAK,YAAY,IAAI;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF,GAAG,CAAC,CAAC;AAML,oBAAgB,MAAM;AACpB,UAAI,aAAa,QAAW;AAC1B,iBAAS,gBAAgB,aAAa,cAAc,KAAK;AAAA,MAC3D;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,cAAU,MAAM;AACd,UAAI,aAAa,MAAM;AAGrB;AAAA,MACF;AAEA,YAAM,GAAG,YAAY,CAAC,QAAQ,QAAQ,OAAO,EAC1C,KAAK,CAAC,QAAQ;AACb,eAAO,IAAI,KAAK;AAAA,MAClB,CAAC,EACA,KAAK,CAAC,qBAAqB;AAC1B,oBAAY,gBAAgB;AAAA,MAC9B,CAAC,EACA,MAAM,MAAM;AAIX,oBAAY,CAAC,SAAU,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAE;AAAA,MACnD,CAAC;AAAA,IACL,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACP,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA;AAAA,MAElB;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,UAAU;AAAA,UACV;AAAA,UACA,eAAe;AAAA;AAAA,QAEf,oCAAC,qBAAe,QAAS;AAAA,MAC3B;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,QAAqD,cAAc;",
   "names": []
 }

package/esm/core/index.js

@@ -22,6 +22,7 @@ import { useSafeForwardProps } from "./hooks/useSafeForwardProps.js";
 import { roleVariants } from "./types/role-variant.js";
 import { uuidv4 } from "./utils/uuidv4.js";
 import { isStringChildren } from "./utils/_is-string-children.js";
+import { parseBoolean } from "./utils/parse-boolean.js";
 export {
   AppRoot,
   FocusProvider as _FocusProvider,
@@ -34,6 +35,7 @@ export {
   isFocusable as _isFocusable,
   isStringChildren as _isStringChildren,
   mergeProps as _mergeProps,
+  parseBoolean as _parseBoolean,
   useAriaLabelingProps as _useAriaLabelingProps,
   useFocusContext as _useFocusContext,
   useId as _useId,

package/esm/core/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/core/index.ts"],
-  "sourcesContent": ["export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';\nexport {\n  FocusScope as _FocusScope,\n  type FocusScopeProps as _FocusScopeProps,\n} from './components/focus-scope/FocusScope.js';\n\nexport { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';\n\nexport { useCurrentTheme } from './hooks/useCurrentTheme.js';\nexport { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';\nexport {\n  FocusProvider as _FocusProvider,\n  type Modality as _Modality,\n} from './providers/FocusProvider.js';\nexport type { MaskingProps } from './types/masking-props.js';\nexport type { DataTestId } from './types/data-props.js';\nexport type { StylingProps } from './types/styling-props.js';\nexport type { WithChildren } from './types/with-children.js';\nexport type {\n  PolymorphOwnProps,\n  PolymorphProps,\n  PolymorphicComponentProps,\n} from './types/polymorph.js';\n\nexport { attemptFocus as _attemptFocus } from './utils/focus-management/attempt-focus.js';\nexport { focusFirstDescendant as _focusFirstDescendant } from './utils/focus-management/focus-first-descendant.js';\nexport { getFirstFocusableChild as _getFirstFocusableChild } from './utils/focus-management/get-first-focusable-child.js';\nexport { getLastFocusableChild as _getLastFocusableChild } from './utils/focus-management/get-last-focusable-child.js';\nexport { isFocusable as _isFocusable } from './utils/focus-management/is-focusable.js';\nexport { isBrowser as _isBrowser } from './utils/isBrowser.js';\nexport {\n  mergeProps as _mergeProps,\n  type NullToObject as _NullToObject,\n  type TupleTypes as _TupleTypes,\n  type UnionToIntersection as _UnionToIntersection,\n} from './utils/merge-props.js';\nexport { type _HeadingLevel, type _HeadingTag } from './types/heading.js';\nexport { useAriaLabelingProps as _useAriaLabelingProps } from './hooks/useAriaLabelingProps.js';\nexport { useId as _useId } from './hooks/useId.js';\nexport { useSafeForwardProps as _useSafeForwardProps } from './hooks/useSafeForwardProps.js';\nexport type { UseSafeForwardReturnProps as _UseSafeForwardReturnProps } from './hooks/useSafeForwardProps.js';\nexport type {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} from './types/a11y-props.js';\nexport type { DOMProps } from './types/dom.js';\nexport { roleVariants } from './types/role-variant.js';\nexport type { RoleVariantType } from './types/role-variant.js';\nexport { uuidv4 as _uuidv4 } from './utils/uuidv4.js';\nexport { isStringChildren as _isStringChildren } from './utils/_is-string-children.js';\n"],
-  "mappings": "AAAA,SAAS,eAAkC;AAC3C;AAAA,EACgB;AAAA,OAET;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EACmB;AAAA,OAEZ;AAWP,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;AAEP,SAAiC,4BAA6B;AAC9D,SAAkB,aAAc;AAChC,SAAgC,2BAA4B;AAO5D,SAAS,oBAAoB;AAE7B,SAAmB,cAAe;AAClC,SAA6B,wBAAyB;",
+  "sourcesContent": ["export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';\nexport {\n  FocusScope as _FocusScope,\n  type FocusScopeProps as _FocusScopeProps,\n} from './components/focus-scope/FocusScope.js';\n\nexport { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';\n\nexport { useCurrentTheme } from './hooks/useCurrentTheme.js';\nexport { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';\nexport {\n  FocusProvider as _FocusProvider,\n  type Modality as _Modality,\n} from './providers/FocusProvider.js';\nexport type { MaskingProps } from './types/masking-props.js';\nexport type { DataTestId } from './types/data-props.js';\nexport type { StylingProps } from './types/styling-props.js';\nexport type { WithChildren } from './types/with-children.js';\nexport type {\n  PolymorphOwnProps,\n  PolymorphProps,\n  PolymorphicComponentProps,\n} from './types/polymorph.js';\n\nexport { attemptFocus as _attemptFocus } from './utils/focus-management/attempt-focus.js';\nexport { focusFirstDescendant as _focusFirstDescendant } from './utils/focus-management/focus-first-descendant.js';\nexport { getFirstFocusableChild as _getFirstFocusableChild } from './utils/focus-management/get-first-focusable-child.js';\nexport { getLastFocusableChild as _getLastFocusableChild } from './utils/focus-management/get-last-focusable-child.js';\nexport { isFocusable as _isFocusable } from './utils/focus-management/is-focusable.js';\nexport { isBrowser as _isBrowser } from './utils/isBrowser.js';\nexport {\n  mergeProps as _mergeProps,\n  type NullToObject as _NullToObject,\n  type TupleTypes as _TupleTypes,\n  type UnionToIntersection as _UnionToIntersection,\n} from './utils/merge-props.js';\nexport { type _HeadingLevel, type _HeadingTag } from './types/heading.js';\nexport { useAriaLabelingProps as _useAriaLabelingProps } from './hooks/useAriaLabelingProps.js';\nexport { useId as _useId } from './hooks/useId.js';\nexport { useSafeForwardProps as _useSafeForwardProps } from './hooks/useSafeForwardProps.js';\nexport type { UseSafeForwardReturnProps as _UseSafeForwardReturnProps } from './hooks/useSafeForwardProps.js';\nexport type {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} from './types/a11y-props.js';\nexport type { DOMProps } from './types/dom.js';\nexport { roleVariants } from './types/role-variant.js';\nexport type { RoleVariantType } from './types/role-variant.js';\nexport { uuidv4 as _uuidv4 } from './utils/uuidv4.js';\nexport { isStringChildren as _isStringChildren } from './utils/_is-string-children.js';\nexport { parseBoolean as _parseBoolean } from './utils/parse-boolean.js';\n"],
+  "mappings": "AAAA,SAAS,eAAkC;AAC3C;AAAA,EACgB;AAAA,OAET;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EACmB;AAAA,OAEZ;AAWP,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;AAEP,SAAiC,4BAA6B;AAC9D,SAAkB,aAAc;AAChC,SAAgC,2BAA4B;AAO5D,SAAS,oBAAoB;AAE7B,SAAmB,cAAe;AAClC,SAA6B,wBAAyB;AACtD,SAAyB,oBAAqB;",
   "names": []
 }

package/esm/core/utils/parse-boolean.js

@@ -0,0 +1,13 @@
+function parseBoolean(booleanish) {
+  if (booleanish === void 0) {
+    return;
+  }
+  if (typeof booleanish === "boolean") {
+    return booleanish;
+  }
+  return booleanish === "true";
+}
+export {
+  parseBoolean
+};
+//# sourceMappingURL=parse-boolean.js.map

package/esm/core/utils/parse-boolean.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/utils/parse-boolean.ts"],
+  "sourcesContent": ["/**\n * Converts a `Booleanish` value to `boolean` or `undefined`.\n *\n * Booleanish is used by react to type attributes like `aria-disabled`\n *\n * @internal\n * @see {@link https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L27 | `Booleanish` from @types/react}\n */\nexport function parseBoolean(\n  booleanish: boolean | 'true' | 'false' | undefined,\n): boolean | undefined {\n  if (booleanish === undefined) {\n    return;\n  }\n  if (typeof booleanish === 'boolean') {\n    return booleanish;\n  }\n  return booleanish === 'true';\n}\n"],
+  "mappings": "AAQO,SAAS,aACd,YACqB;AACrB,MAAI,eAAe,QAAW;AAC5B;AAAA,EACF;AACA,MAAI,OAAO,eAAe,WAAW;AACnC,WAAO;AAAA,EACT;AACA,SAAO,eAAe;AACxB;",
+  "names": []
+}

package/esm/layouts/index.js

@@ -5,12 +5,18 @@ import { Container } from "./container/Container.js";
 import { Surface } from "./surface/Surface.js";
 import { surfaceBorderRadius } from "./surface/variables.sty.js";
 import { useBreakpoint } from "./hooks/useBreakpoint.js";
+import {
+  inputGroupChildCSS,
+  inputGroupCSS
+} from "./input-group/InputGroup.sty.js";
 export {
   Container,
   Divider,
   Flex,
   Grid,
   Surface,
+  inputGroupCSS as _inputGroupCSS,
+  inputGroupChildCSS as _inputGroupChildCSS,
   surfaceBorderRadius as _surfaceBorderRadius,
   useBreakpoint
 };

package/esm/layouts/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/layouts/index.ts"],
-  "sourcesContent": ["export { Flex, type FlexOwnProps, type FlexProps } from './flex/Flex.js';\nexport { Grid, type GridOwnProps, type GridProps } from './grid/Grid.js';\nexport { Divider } from './divider/Divider.js';\nexport type { DividerProps } from './divider/Divider.js';\nexport { Container } from './container/Container.js';\nexport type {\n  ContainerOwnProps,\n  ContainerProps,\n} from './container/Container.js';\nexport type { LayoutSizeCSS } from './types/layout.types.js';\nexport { Surface } from './surface/Surface.js';\nexport type { SurfaceOwnProps, SurfaceProps } from './surface/Surface.js';\nexport { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.sty.js';\nexport { useBreakpoint } from './hooks/useBreakpoint.js';\n"],
-  "mappings": "AAAA,SAAS,YAA+C;AACxD,SAAS,YAA+C;AACxD,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAM1B,SAAS,eAAe;AAExB,SAAgC,2BAA4B;AAC5D,SAAS,qBAAqB;",
+  "sourcesContent": ["export { Flex, type FlexOwnProps, type FlexProps } from './flex/Flex.js';\nexport { Grid, type GridOwnProps, type GridProps } from './grid/Grid.js';\nexport { Divider } from './divider/Divider.js';\nexport type { DividerProps } from './divider/Divider.js';\nexport { Container } from './container/Container.js';\nexport type {\n  ContainerOwnProps,\n  ContainerProps,\n} from './container/Container.js';\nexport type { LayoutSizeCSS } from './types/layout.types.js';\nexport { Surface } from './surface/Surface.js';\nexport type { SurfaceOwnProps, SurfaceProps } from './surface/Surface.js';\nexport { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.sty.js';\nexport { useBreakpoint } from './hooks/useBreakpoint.js';\nexport {\n  inputGroupChildCSS as _inputGroupChildCSS,\n  inputGroupCSS as _inputGroupCSS,\n} from './input-group/InputGroup.sty.js';\n"],
+  "mappings": "AAAA,SAAS,YAA+C;AACxD,SAAS,YAA+C;AACxD,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAM1B,SAAS,eAAe;AAExB,SAAgC,2BAA4B;AAC5D,SAAS,qBAAqB;AAC9B;AAAA,EACwB;AAAA,EACL;AAAA,OACZ;",
   "names": []
 }

package/esm/layouts/input-group/InputGroup.css

@@ -0,0 +1,8 @@
+.InputGroup_inputGroupCSS__1x4bl8z0 > *:not(:last-child) .InputGroup_inputGroupChildCSS__1x4bl8z1, .InputGroup_inputGroupCSS__1x4bl8z0 > .InputGroup_inputGroupChildCSS__1x4bl8z1:not(:last-child), .InputGroup_inputGroupCSS__1x4bl8z0 > *:not(:last-child) .cm-editor {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.InputGroup_inputGroupCSS__1x4bl8z0 > *:not(:first-child) .InputGroup_inputGroupChildCSS__1x4bl8z1, .InputGroup_inputGroupCSS__1x4bl8z0 > .InputGroup_inputGroupChildCSS__1x4bl8z1:not(:first-child), .InputGroup_inputGroupCSS__1x4bl8z0 > *:not(:first-child) .cm-editor {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

package/esm/layouts/input-group/InputGroup.sty.js

@@ -0,0 +1,8 @@
+import "./InputGroup.css";
+var inputGroupCSS = "InputGroup_inputGroupCSS__1x4bl8z0";
+var inputGroupChildCSS = "InputGroup_inputGroupChildCSS__1x4bl8z1";
+export {
+  inputGroupCSS,
+  inputGroupChildCSS
+};
+//# sourceMappingURL=InputGroup.sty.js.map

package/esm/layouts/input-group/InputGroup.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/layouts/input-group/InputGroup.css.ts"],
+  "sourcesContent": ["import './InputGroup.css';\nexport var inputGroupCSS = 'InputGroup_inputGroupCSS__1x4bl8z0';\nexport var inputGroupChildCSS = 'InputGroup_inputGroupChildCSS__1x4bl8z1';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,qBAAqB;",
+  "names": []
+}

package/esm/styles/index.js

@@ -26,6 +26,7 @@ import {
 import { extract } from "./extract-util.js";
 import { globalSprinkles } from "./safe-sprinkles.js";
 import { textStyleCSS } from "./textStyle.sty.js";
+import { internalSprinkles } from "./sprinkles.sty.js";
 export {
   extract as _extract,
   getGapSprinkles as _getGapSprinkles,
@@ -33,6 +34,7 @@ export {
   getLayoutSizeStyles as _getLayoutSizeStyles,
   getSpacingSprinkles as _getSpacingSprinkles,
   globalSprinkles as _globalSprinkles,
+  internalSprinkles as _internalSprinkles,
   textStyleCSS as _textStyleCSS,
   alignContentPositionProps,
   alignItemsPositionProps,

package/esm/styles/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styles/index.ts"],
-  "sourcesContent": ["export type { FlexItemStyleProps, FlexStyleProps } from './getFlexStyles.js';\nexport type { GridItemStyleProps, GridStyleProps } from './getGridStyles.js';\nexport {\n  type GridFlexPositionProps,\n  getGridFlexPositionSprinkles as _getGridFlexPositionSprinkles,\n} from './getGridFlexPositionSprinkles.js';\nexport {\n  type GapProps,\n  getGapSprinkles as _getGapSprinkles,\n} from './getGapSprinkles.js';\nexport {\n  type SpacingProps,\n  type DefaultSpacingProps as _DefaultSpacingProps,\n  getSpacingSprinkles as _getSpacingSprinkles,\n} from './getSpacingSprinkles.js';\nexport {\n  type LayoutSizeProps,\n  getLayoutSizeStyles as _getLayoutSizeStyles,\n} from './getLayoutSizeStyles.js';\nexport {\n  alignContentPositionProps,\n  alignItemsPositionProps,\n  alignSelfPositionProps,\n  justifyContentPositionProps,\n  justifyItemsPositionProps,\n  justifySelfPositionProps,\n  marginProperties,\n  placeContentPositionProps,\n  placeItemsPositionProps,\n  placeSelfPositionProps,\n  spacingProperties,\n} from './sprinkle-properties.js';\nexport type {\n  AlignContentPositionProps,\n  AlignItemsPositionProps,\n  AlignSelfPositionProps,\n  JustifyContentPositionProps,\n  JustifyItemsPositionProps,\n  JustifySelfPositionProps,\n  MarginProperties,\n  PlaceContentPositionProps,\n  PlaceItemsPositionProps,\n  PlaceSelfPositionProps,\n  SpacingProperties,\n} from './sprinkle-properties.js';\nexport { extract as _extract } from './extract-util.js';\nexport { globalSprinkles as _globalSprinkles } from './safe-sprinkles.js';\nexport { textStyleCSS as _textStyleCSS } from './textStyle.sty.js';\n"],
-  "mappings": "AAEA;AAAA,EAEkC;AAAA,OAC3B;AACP;AAAA,EAEqB;AAAA,OACd;AACP;AAAA,EAGyB;AAAA,OAClB;AACP;AAAA,EAEyB;AAAA,OAClB;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAcP,SAAoB,eAAgB;AACpC,SAA4B,uBAAwB;AACpD,SAAyB,oBAAqB;",
+  "sourcesContent": ["export type { FlexItemStyleProps, FlexStyleProps } from './getFlexStyles.js';\nexport type { GridItemStyleProps, GridStyleProps } from './getGridStyles.js';\nexport {\n  type GridFlexPositionProps,\n  getGridFlexPositionSprinkles as _getGridFlexPositionSprinkles,\n} from './getGridFlexPositionSprinkles.js';\nexport {\n  type GapProps,\n  getGapSprinkles as _getGapSprinkles,\n} from './getGapSprinkles.js';\nexport {\n  type SpacingProps,\n  type DefaultSpacingProps as _DefaultSpacingProps,\n  getSpacingSprinkles as _getSpacingSprinkles,\n} from './getSpacingSprinkles.js';\nexport {\n  type LayoutSizeProps,\n  getLayoutSizeStyles as _getLayoutSizeStyles,\n} from './getLayoutSizeStyles.js';\nexport {\n  alignContentPositionProps,\n  alignItemsPositionProps,\n  alignSelfPositionProps,\n  justifyContentPositionProps,\n  justifyItemsPositionProps,\n  justifySelfPositionProps,\n  marginProperties,\n  placeContentPositionProps,\n  placeItemsPositionProps,\n  placeSelfPositionProps,\n  spacingProperties,\n} from './sprinkle-properties.js';\nexport type {\n  AlignContentPositionProps,\n  AlignItemsPositionProps,\n  AlignSelfPositionProps,\n  JustifyContentPositionProps,\n  JustifyItemsPositionProps,\n  JustifySelfPositionProps,\n  MarginProperties,\n  PlaceContentPositionProps,\n  PlaceItemsPositionProps,\n  PlaceSelfPositionProps,\n  SpacingProperties,\n} from './sprinkle-properties.js';\nexport { extract as _extract } from './extract-util.js';\nexport { globalSprinkles as _globalSprinkles } from './safe-sprinkles.js';\nexport { textStyleCSS as _textStyleCSS } from './textStyle.sty.js';\nexport { internalSprinkles as _internalSprinkles } from './sprinkles.sty.js';\n"],
+  "mappings": "AAEA;AAAA,EAEkC;AAAA,OAC3B;AACP;AAAA,EAEqB;AAAA,OACd;AACP;AAAA,EAGyB;AAAA,OAClB;AACP;AAAA,EAEyB;AAAA,OAClB;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAcP,SAAoB,eAAgB;AACpC,SAA4B,uBAAwB;AACpD,SAAyB,oBAAqB;AAC9C,SAA8B,yBAA0B;",
   "names": []
 }

package/layouts/index.d.ts

@@ -7,5 +7,6 @@ export type { ContainerOwnProps, ContainerProps, } from './container/Container.j
 export type { LayoutSizeCSS } from './types/layout.types.js';
 export { Surface } from './surface/Surface.js';
 export type { SurfaceOwnProps, SurfaceProps } from './surface/Surface.js';
-export { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.css.js';
+export { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.sty.js';
 export { useBreakpoint } from './hooks/useBreakpoint.js';
+export { inputGroupChildCSS as _inputGroupChildCSS, inputGroupCSS as _inputGroupCSS, } from './input-group/InputGroup.sty.js';

package/layouts/index.js

@@ -22,6 +22,8 @@ __export(layouts_exports, {
   Flex: () => import_Flex.Flex,
   Grid: () => import_Grid.Grid,
   Surface: () => import_Surface.Surface,
+  _inputGroupCSS: () => import_InputGroup_css.inputGroupCSS,
+  _inputGroupChildCSS: () => import_InputGroup_css.inputGroupChildCSS,
   _surfaceBorderRadius: () => import_variables_css.surfaceBorderRadius,
   useBreakpoint: () => import_useBreakpoint.useBreakpoint
 });
@@ -33,3 +35,4 @@ var import_Container = require("./container/Container.js");
 var import_Surface = require("./surface/Surface.js");
 var import_variables_css = require("./surface/variables.sty.js");
 var import_useBreakpoint = require("./hooks/useBreakpoint.js");
+var import_InputGroup_css = require("./input-group/InputGroup.sty.js");

package/layouts/input-group/InputGroup.css

@@ -0,0 +1,8 @@
+.InputGroup_inputGroupCSS__1x4bl8z0 > *:not(:last-child) .InputGroup_inputGroupChildCSS__1x4bl8z1, .InputGroup_inputGroupCSS__1x4bl8z0 > .InputGroup_inputGroupChildCSS__1x4bl8z1:not(:last-child), .InputGroup_inputGroupCSS__1x4bl8z0 > *:not(:last-child) .cm-editor {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.InputGroup_inputGroupCSS__1x4bl8z0 > *:not(:first-child) .InputGroup_inputGroupChildCSS__1x4bl8z1, .InputGroup_inputGroupCSS__1x4bl8z0 > .InputGroup_inputGroupChildCSS__1x4bl8z1:not(:first-child), .InputGroup_inputGroupCSS__1x4bl8z0 > *:not(:first-child) .cm-editor {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

package/layouts/input-group/InputGroup.sty.d.ts

@@ -0,0 +1,4 @@
+/** @internal */
+export declare const inputGroupCSS: string;
+/** @internal */
+export declare const inputGroupChildCSS: string;

package/layouts/input-group/InputGroup.sty.js

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var InputGroup_css_exports = {};
+__export(InputGroup_css_exports, {
+  inputGroupCSS: () => inputGroupCSS,
+  inputGroupChildCSS: () => inputGroupChildCSS
+});
+module.exports = __toCommonJS(InputGroup_css_exports);
+var import_InputGroup_css_ts_vanilla = require("./InputGroup.css");
+var inputGroupCSS = "InputGroup_inputGroupCSS__1x4bl8z0";
+var inputGroupChildCSS = "InputGroup_inputGroupChildCSS__1x4bl8z1";

package/layouts/surface/variables.sty.d.ts

@@ -1 +1,2 @@
+/** @internal */
 export declare const surfaceBorderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynatrace/strato-components",
-  "version": "0.85.32",
+  "version": "0.85.41",
   "private": false,
   "license": "Apache-2.0",
   "lang": "lang/uncompiled",
@@ -81,8 +81,8 @@
     "@vanilla-extract/sprinkles": "^1.6.3",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
-    "wicg-inert": "^3.1.2",
     "use-resize-observer": "^9.1.0",
+    "wicg-inert": "^3.1.2",
     "@dynatrace/strato-design-tokens": "0.20.40",
     "@dynatrace/strato-icons": "0.39.2"
   },

package/styles/index.d.ts

@@ -8,4 +8,5 @@ export { alignContentPositionProps, alignItemsPositionProps, alignSelfPositionPr
 export type { AlignContentPositionProps, AlignItemsPositionProps, AlignSelfPositionProps, JustifyContentPositionProps, JustifyItemsPositionProps, JustifySelfPositionProps, MarginProperties, PlaceContentPositionProps, PlaceItemsPositionProps, PlaceSelfPositionProps, SpacingProperties, } from './sprinkle-properties.js';
 export { extract as _extract } from './extract-util.js';
 export { globalSprinkles as _globalSprinkles } from './safe-sprinkles.js';
-export { textStyleCSS as _textStyleCSS } from './textStyle.css.js';
+export { textStyleCSS as _textStyleCSS } from './textStyle.sty.js';
+export { internalSprinkles as _internalSprinkles } from './sprinkles.sty.js';

package/styles/index.js

@@ -23,6 +23,7 @@ __export(styles_exports, {
   _getLayoutSizeStyles: () => import_getLayoutSizeStyles.getLayoutSizeStyles,
   _getSpacingSprinkles: () => import_getSpacingSprinkles.getSpacingSprinkles,
   _globalSprinkles: () => import_safe_sprinkles.globalSprinkles,
+  _internalSprinkles: () => import_sprinkles_css.internalSprinkles,
   _textStyleCSS: () => import_textStyle_css.textStyleCSS,
   alignContentPositionProps: () => import_sprinkle_properties.alignContentPositionProps,
   alignItemsPositionProps: () => import_sprinkle_properties.alignItemsPositionProps,
@@ -45,3 +46,4 @@ var import_sprinkle_properties = require("./sprinkle-properties.js");
 var import_extract_util = require("./extract-util.js");
 var import_safe_sprinkles = require("./safe-sprinkles.js");
 var import_textStyle_css = require("./textStyle.sty.js");
+var import_sprinkles_css = require("./sprinkles.sty.js");

package/styles/safe-sprinkles.d.ts

@@ -1,4 +1,4 @@
-import { internalSprinkles } from './sprinkles.css.js';
+import { internalSprinkles } from './sprinkles.sty.js';
 /**
  * global sprinkles
  * @internal

package/testing/mocks/table-virtualization-mock.js

@@ -27,13 +27,16 @@ var import_offset_height_mock = require("./offset-height-mock.js");
 function setupTableVirtualizationMock(containerHeight = 15e3) {
   (0, import_bounding_client_rect_mock.setupGetBoundingClientRectMock)(function() {
     if (this.classList.contains("strato-table-header-group")) {
-      return (0, import_dom_rect_mock.createDOMRect)(0, 32);
+      return (0, import_dom_rect_mock.createDOMRect)(1e3, 32);
     }
     if (this.classList.contains("strato-table-virtualization-container")) {
-      return (0, import_dom_rect_mock.createDOMRect)(0, containerHeight);
+      return (0, import_dom_rect_mock.createDOMRect)(1e3, containerHeight);
     }
     if (this.classList.contains("strato-table-row")) {
-      return (0, import_dom_rect_mock.createDOMRect)(0, 56);
+      return (0, import_dom_rect_mock.createDOMRect)(1e3, 56);
+    }
+    if (this.classList.contains("strato-table-header-cell") || this.classList.contains("strato-table-cell")) {
+      return (0, import_dom_rect_mock.createDOMRect)(100, 32);
     }
     return null;
   });