@dynatrace/strato-components 0.84.21 → 0.84.42

package/core/types/heading.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 heading_exports = {};
+module.exports = __toCommonJS(heading_exports);

package/core/types/masking-props.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @public
+ * Props defining the masking of data in Session Replay. They are applied to the component's root node. */
+export interface MaskingProps {
+    /** Determines whether masking is enabled and the data is replaced with asterisks. */
+    'data-dtrum-mask'?: boolean;
+    /** Determines whether masking is disabled and the data is shown. */
+    'data-dtrum-allow'?: boolean;
+}

package/core/types/masking-props.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 masking_props_exports = {};
+module.exports = __toCommonJS(masking_props_exports);

package/core/types/polymorph.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, ElementType } from 'react';
+/**
+ * @public
+ * Props type to use with your own to add the as polymorphing prop */
+export type PolymorphOwnProps<E extends ElementType = ElementType> = {
+    /**
+     * The element type / component used to render
+     * e.g. when `a` is used an anchor tag is created and the component
+     * accepts all props a native anchor also accepts, e.g. a `href` tag.
+     * Custom components with their own props are also supported, e.g. a `Link`
+     * from a router.
+     */
+    as?: E;
+};
+/**
+ * @public
+ *  Combine the props that come from the underlying ElementType and from your own types and omit naming duplicates */
+export type PolymorphProps<E extends ElementType> = PolymorphOwnProps<E> & Omit<ComponentProps<E>, keyof PolymorphOwnProps>;
+/**
+ *  @public
+ *  Uniontype for the elementtypes polymorph props and your own props P */
+export type PolymorphicComponentProps<E extends ElementType, P> = P & PolymorphProps<E>;
+declare module 'react' {
+    function forwardRef<T, P = unknown>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}

package/core/types/polymorph.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 polymorph_exports = {};
+module.exports = __toCommonJS(polymorph_exports);

package/core/types/styling-props.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import type { CSSProperties } from 'react';
 /**
+ * @public
  * Collection of component styling props including `style` and `className` types.
  */
 export interface StylingProps {
@@ -14,5 +15,5 @@ export interface StylingProps {
      *
      * Be aware that overriding certain styles may result in unexpected behavior!
      */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 }

package/core/types/with-children.d.ts

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react';
-/** Helper type to add children to props */
+/**
+ * @public
+ * Helper type to add children to props
+ */
 export interface WithChildren {
     /** Children provided to the component. */
     children?: ReactNode;

package/core/utils/colorUtils.css

@@ -0,0 +1,80 @@
+.colorUtils_colorUtilsCSS_color_critical__k096v44 {
+  --vars_text__k096v40: var(--dt-colors-text-critical-default, #b80031);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-default, #b80031);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-default, #f1cdcf);
+}
+.colorUtils_colorUtilsCSS_color_neutral__k096v45 {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-default, #2b2a58);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-default, #2b2a58);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-default, #d2d3e1);
+}
+.colorUtils_colorUtilsCSS_color_primary__k096v46 {
+  --vars_text__k096v40: var(--dt-colors-text-primary-default, #454cc9);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-default, #454cc9);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-default, #ccd3f3);
+}
+.colorUtils_colorUtilsCSS_color_success__k096v47 {
+  --vars_text__k096v40: var(--dt-colors-text-success-default, #2c6360);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-default, #2c6360);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-default, #cad6d7);
+}
+.colorUtils_colorUtilsCSS_color_warning__k096v48 {
+  --vars_text__k096v40: var(--dt-colors-text-warning-default, #805100);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-default, #805100);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-default, #f4e5d5);
+}
+.colorUtils_colorUtilsCSS_color_onAccent__k096v49 {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+}
+.colorUtils_colorUtilsCSS_compound_0__k096v4e {
+  --vars_text__k096v40: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-accent, #454cc9);
+}
+.colorUtils_colorUtilsCSS_compound_1__k096v4f {
+  --vars_text__k096v40: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-accent, #2c6360);
+}
+.colorUtils_colorUtilsCSS_compound_2__k096v4g {
+  --vars_text__k096v40: var(--dt-colors-text-warning-on-accent-default, #272025);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-on-accent-default, #272025);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-accent, #805100);
+}
+.colorUtils_colorUtilsCSS_compound_3__k096v4h {
+  --vars_text__k096v40: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-accent, #b80031);
+}
+.colorUtils_colorUtilsCSS_compound_4__k096v4i {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-accent, #545587);
+}
+.colorUtils_colorUtilsCSS_compound_5__k096v4j {
+  --vars_text__k096v40: var(--dt-colors-text-primary-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-primary-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-primary-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_6__k096v4k {
+  --vars_text__k096v40: var(--dt-colors-text-success-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-success-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-success-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_7__k096v4l {
+  --vars_text__k096v40: var(--dt-colors-text-warning-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-warning-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-warning-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_8__k096v4m {
+  --vars_text__k096v40: var(--dt-colors-text-critical-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-critical-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-critical-disabled, #d2d3e180);
+}
+.colorUtils_colorUtilsCSS_compound_9__k096v4n {
+  --vars_text__k096v40: var(--dt-colors-text-neutral-disabled, #54558780);
+  --vars_icon__k096v41: var(--dt-colors-icon-neutral-disabled, #54558780);
+  --vars_borderColor__k096v42: var(--dt-colors-border-neutral-disabled, #d2d3e180);
+}

package/core/utils/colorUtils.sty.d.ts

@@ -0,0 +1,48 @@
+declare const vars: {
+    text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    icon: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const colorUtilsCSS: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        critical: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        neutral: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        primary: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        success: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+        onAccent: {
+            vars: {
+                [x: string]: string;
+            };
+        };
+    };
+    variant: {
+        default: {};
+        accent: {};
+    };
+    disabled: {
+        true: {};
+        false: {};
+    };
+}>;
+export { vars as colorUtilsVars };

package/core/utils/colorUtils.sty.js

@@ -0,0 +1,27 @@
+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 colorUtils_css_exports = {};
+__export(colorUtils_css_exports, {
+  colorUtilsCSS: () => colorUtilsCSS,
+  colorUtilsVars: () => colorUtilsVars
+});
+module.exports = __toCommonJS(colorUtils_css_exports);
+var import_colorUtils_css_ts_vanilla = require("./colorUtils.css");
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "colorUtils__k096v43", variantClassNames: { color: { critical: "colorUtils_colorUtilsCSS_color_critical__k096v44", neutral: "colorUtils_colorUtilsCSS_color_neutral__k096v45", primary: "colorUtils_colorUtilsCSS_color_primary__k096v46", success: "colorUtils_colorUtilsCSS_color_success__k096v47", warning: "colorUtils_colorUtilsCSS_color_warning__k096v48", onAccent: "colorUtils_colorUtilsCSS_color_onAccent__k096v49" }, variant: { "default": "colorUtils_colorUtilsCSS_variant_default__k096v4a", accent: "colorUtils_colorUtilsCSS_variant_accent__k096v4b" }, disabled: { true: "colorUtils_colorUtilsCSS_disabled_true__k096v4c", false: "colorUtils_colorUtilsCSS_disabled_false__k096v4d" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_0__k096v4e"], [{ color: "success", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_1__k096v4f"], [{ color: "warning", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_2__k096v4g"], [{ color: "critical", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_3__k096v4h"], [{ color: "neutral", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_4__k096v4i"], [{ color: "primary", disabled: true }, "colorUtils_colorUtilsCSS_compound_5__k096v4j"], [{ color: "success", disabled: true }, "colorUtils_colorUtilsCSS_compound_6__k096v4k"], [{ color: "warning", disabled: true }, "colorUtils_colorUtilsCSS_compound_7__k096v4l"], [{ color: "critical", disabled: true }, "colorUtils_colorUtilsCSS_compound_8__k096v4m"], [{ color: "neutral", disabled: true }, "colorUtils_colorUtilsCSS_compound_9__k096v4n"]] });
+var colorUtilsVars = { text: "var(--vars_text__k096v40)", icon: "var(--vars_icon__k096v41)", borderColor: "var(--vars_borderColor__k096v42)" };

package/esm/core/components/app-root/AppRoot.js

@@ -22,7 +22,9 @@ const AppRoot = /* @__PURE__ */ forwardRef(
     const {
       style: consumerStyle,
       className: consumerClassName,
-      "data-testid": dataTestId = "app-root"
+      "data-testid": dataTestId = "app-root",
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow
     } = props;
     const [messages, setMessages] = useState({});
     const { children } = props;
@@ -67,7 +69,9 @@ const AppRoot = /* @__PURE__ */ forwardRef(
         "data-testid": dataTestId,
         className: consumerClassName,
         style: consumerStyle,
-        "data-theme": theme
+        "data-theme": theme,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow
       },
       /* @__PURE__ */ React.createElement(
         IntlProvider,

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 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/** AppRoot component props. */\nexport type AppRootProps = PropsWithChildren<DataTestId & StylingProps>;\n\nconst defaultLanguage = 'en';\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 */\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    } = 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      >\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;AAQ9B,SAAS,cAAsB;AAC7B,QAAM,cAAc,SAAS,cAAc,MAAM;AACjD,QAAM,OAAO,aAAa,QAAQ;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG,IAAI;AAC5C;AAKA,MAAM,kBAAkB;AAQjB,MAAM,UAA0B;AAAA,EACrC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe,aAAa;AAAA,IAC9B,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;AAAA,MAEZ;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 * @public\n * AppRoot component props.\n */\nexport type AppRootProps = PropsWithChildren<\n  DataTestId & StylingProps & MaskingProps\n>;\n\nconst defaultLanguage = 'en';\n\n/**\n * @public\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 */\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;",
   "names": []
 }

package/esm/core/contexts/FocusContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/contexts/FocusContext.tsx"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nimport { Modality } from '../providers/FocusProvider.js';\n\n/**\n * Defines the contents of the FocusContext.\n * @internal\n */\nexport type FocusContextProps = {\n  backgroundInertness?: boolean;\n  modality: Modality;\n  setBackgroundInertness: (value: boolean) => void;\n};\n\n/**\n * @internal\n *\n * This context keeps all information needed for proper focus management.\n * @param modality - currently used pointer device\n * @param backgroundInertness - if the background (behind overlays) is currently inert (inactive)\n * @param setBackgroundInertness - updates the backgrounds active status\n */\nexport const FocusContext = createContext<FocusContextProps>({\n  modality: 'unknown',\n  backgroundInertness: undefined,\n  setBackgroundInertness: (value) => null,\n});\n"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { Modality } from '../providers/FocusProvider.js';\n\n/**\n * Defines the contents of the FocusContext.\n * @internal\n */\nexport type FocusContextProps = {\n  backgroundInertness?: boolean;\n  modality: Modality;\n  setBackgroundInertness: (value: boolean) => void;\n};\n\n/**\n * @internal\n *\n * This context keeps all information needed for proper focus management.\n * @param modality - currently used pointer device\n * @param backgroundInertness - if the background (behind overlays) is currently inert (inactive)\n * @param setBackgroundInertness - updates the backgrounds active status\n */\nexport const FocusContext = createContext<FocusContextProps>({\n  modality: 'unknown',\n  backgroundInertness: undefined,\n  setBackgroundInertness: (value) => null,\n});\n"],
   "mappings": "AAAA,SAAS,qBAAqB;AAsBvB,MAAM,eAAe,cAAiC;AAAA,EAC3D,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,wBAAwB,CAAC,UAAU;AACrC,CAAC;",
   "names": []
 }

package/esm/core/hooks/useCurrentTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/hooks/useCurrentTheme.tsx"],
-  "sourcesContent": ["import { useEffect, useMemo, useState } from 'react';\n\nimport { getTheme } from '@dynatrace-sdk/user-preferences';\n\nimport { isBrowser } from '../utils/isBrowser.js';\n\n/** Returns the current theme based on sdk-setting or browsers preferred color-scheme */\nexport function useCurrentTheme(): 'light' | 'dark' {\n  const sdkTheme = useMemo(() => {\n    return getTheme();\n  }, []);\n\n  if (sdkTheme === 'dark' || sdkTheme === 'light') {\n    return sdkTheme;\n  }\n\n  if (!isBrowser) {\n    return 'light';\n  }\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const themeQuery = useMemo(\n    () => window && window.matchMedia('(prefers-color-scheme: dark)'),\n    [],\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const [currentTheme, setCurrentTheme] = useState<'light' | 'dark'>(\n    themeQuery.matches ? 'dark' : 'light',\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  useEffect(() => {\n    const handlePrefersColorSchemeChange = () => {\n      const prefersDark = themeQuery.matches;\n      setCurrentTheme(prefersDark ? 'dark' : 'light');\n    };\n\n    themeQuery.addEventListener('change', handlePrefersColorSchemeChange);\n    return () => {\n      themeQuery.removeEventListener('change', handlePrefersColorSchemeChange);\n    };\n  }, [themeQuery]);\n\n  return currentTheme;\n}\n"],
-  "mappings": "AAAA,SAAS,WAAW,SAAS,gBAAgB;AAE7C,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAGnB,SAAS,kBAAoC;AAClD,QAAM,WAAW,QAAQ,MAAM;AAC7B,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,MAAI,aAAa,UAAU,aAAa,SAAS;AAC/C,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAKA,QAAM,aAAa;AAAA,IACjB,MAAM,UAAU,OAAO,WAAW,8BAA8B;AAAA,IAChE,CAAC;AAAA,EACH;AAKA,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,WAAW,UAAU,SAAS;AAAA,EAChC;AAKA,YAAU,MAAM;AACd,UAAM,iCAAiC,MAAM;AAC3C,YAAM,cAAc,WAAW;AAC/B,sBAAgB,cAAc,SAAS,OAAO;AAAA,IAChD;AAEA,eAAW,iBAAiB,UAAU,8BAA8B;AACpE,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,8BAA8B;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;",
+  "sourcesContent": ["import { useEffect, useMemo, useState } from 'react';\n\nimport { getTheme } from '@dynatrace-sdk/user-preferences';\n\nimport { isBrowser } from '../utils/isBrowser.js';\n\n/**\n * @public\n * Returns the current theme based on sdk-setting or browsers preferred color-scheme\n */\nexport function useCurrentTheme(): 'light' | 'dark' {\n  const sdkTheme = useMemo(() => {\n    return getTheme();\n  }, []);\n\n  if (sdkTheme === 'dark' || sdkTheme === 'light') {\n    return sdkTheme;\n  }\n\n  if (!isBrowser) {\n    return 'light';\n  }\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const themeQuery = useMemo(\n    () => window && window.matchMedia('(prefers-color-scheme: dark)'),\n    [],\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const [currentTheme, setCurrentTheme] = useState<'light' | 'dark'>(\n    themeQuery.matches ? 'dark' : 'light',\n  );\n\n  // suppressing the rules of hooks because the sdkTheme is a constant that cannot\n  // change through the applications' lifecycle.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  useEffect(() => {\n    const handlePrefersColorSchemeChange = () => {\n      const prefersDark = themeQuery.matches;\n      setCurrentTheme(prefersDark ? 'dark' : 'light');\n    };\n\n    themeQuery.addEventListener('change', handlePrefersColorSchemeChange);\n    return () => {\n      themeQuery.removeEventListener('change', handlePrefersColorSchemeChange);\n    };\n  }, [themeQuery]);\n\n  return currentTheme;\n}\n"],
+  "mappings": "AAAA,SAAS,WAAW,SAAS,gBAAgB;AAE7C,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAMnB,SAAS,kBAAoC;AAClD,QAAM,WAAW,QAAQ,MAAM;AAC7B,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,MAAI,aAAa,UAAU,aAAa,SAAS;AAC/C,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAKA,QAAM,aAAa;AAAA,IACjB,MAAM,UAAU,OAAO,WAAW,8BAA8B;AAAA,IAChE,CAAC;AAAA,EACH;AAKA,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,WAAW,UAAU,SAAS;AAAA,EAChC;AAKA,YAAU,MAAM;AACd,UAAM,iCAAiC,MAAM;AAC3C,YAAM,cAAc,WAAW;AAC/B,sBAAgB,cAAc,SAAS,OAAO;AAAA,IAChD;AAEA,eAAW,iBAAiB,UAAU,8BAA8B;AACpE,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,8BAA8B;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;",
   "names": []
 }

package/esm/core/hooks/useFontsUpdated.js

@@ -0,0 +1,33 @@
+import { isEqual } from "lodash-es";
+import { useRef, useState } from "react";
+function _useFontsUpdated(callback) {
+  const [fontsUpdated, setFontsUpdated] = useState(false);
+  const prevFontFamilies = useRef();
+  const fontFamilies = [];
+  const firstRender = useRef(true);
+  if (document.fonts) {
+    if (firstRender.current) {
+      const loadedFontFamilies = [];
+      document.fonts.forEach(
+        (fontFace) => loadedFontFamilies.push(`${fontFace.family} ${fontFace.weight}`)
+      );
+      prevFontFamilies.current = loadedFontFamilies;
+      firstRender.current = false;
+    }
+    document.fonts.ready.then((fontFaceSet) => {
+      fontFaceSet.forEach(
+        (fontFace) => fontFamilies.push(`${fontFace.family} ${fontFace.weight}`)
+      );
+      if (!isEqual(prevFontFamilies.current, fontFamilies)) {
+        prevFontFamilies.current = fontFamilies;
+        callback?.();
+        setFontsUpdated(true);
+      }
+    });
+  }
+  return fontsUpdated;
+}
+export {
+  _useFontsUpdated
+};
+//# sourceMappingURL=useFontsUpdated.js.map

package/esm/core/hooks/useFontsUpdated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/hooks/useFontsUpdated.ts"],
+  "sourcesContent": ["import { isEqual } from 'lodash-es';\nimport { useRef, useState } from 'react';\n\n/**\n * Hook that checks if the initially loaded fonts were updated.\n * Used to trigger remeasuring in the DataTable (autoWidth) and TextEllipsis once all fonts are loaded.\n *\n * @param callback - optionally pass a function to be executed once when the fonts were updated\n * @returns boolean whether the fonts have changed\n * @internal\n */\nexport function _useFontsUpdated(callback?: () => void): boolean {\n  const [fontsUpdated, setFontsUpdated] = useState(false);\n  const prevFontFamilies = useRef<string[]>();\n  const fontFamilies: string[] = [];\n  const firstRender = useRef(true);\n\n  if (document.fonts) {\n    // gather the font families that are already loaded\n    if (firstRender.current) {\n      const loadedFontFamilies: string[] = [];\n      document.fonts.forEach((fontFace: FontFace) =>\n        loadedFontFamilies.push(`${fontFace.family} ${fontFace.weight}`),\n      );\n      prevFontFamilies.current = loadedFontFamilies;\n      firstRender.current = false;\n    }\n\n    document.fonts.ready.then((fontFaceSet: FontFaceSet) => {\n      fontFaceSet.forEach((fontFace: FontFace) =>\n        fontFamilies.push(`${fontFace.family} ${fontFace.weight}`),\n      );\n\n      if (!isEqual(prevFontFamilies.current, fontFamilies)) {\n        prevFontFamilies.current = fontFamilies;\n        callback?.();\n        setFontsUpdated(true);\n      }\n    });\n  }\n\n  return fontsUpdated;\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AACxB,SAAS,QAAQ,gBAAgB;AAU1B,SAAS,iBAAiB,UAAgC;AAC/D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,mBAAmB,OAAiB;AAC1C,QAAM,eAAyB,CAAC;AAChC,QAAM,cAAc,OAAO,IAAI;AAE/B,MAAI,SAAS,OAAO;AAElB,QAAI,YAAY,SAAS;AACvB,YAAM,qBAA+B,CAAC;AACtC,eAAS,MAAM;AAAA,QAAQ,CAAC,aACtB,mBAAmB,KAAK,GAAG,SAAS,MAAM,IAAI,SAAS,MAAM,EAAE;AAAA,MACjE;AACA,uBAAiB,UAAU;AAC3B,kBAAY,UAAU;AAAA,IACxB;AAEA,aAAS,MAAM,MAAM,KAAK,CAAC,gBAA6B;AACtD,kBAAY;AAAA,QAAQ,CAAC,aACnB,aAAa,KAAK,GAAG,SAAS,MAAM,IAAI,SAAS,MAAM,EAAE;AAAA,MAC3D;AAEA,UAAI,CAAC,QAAQ,iBAAiB,SAAS,YAAY,GAAG;AACpD,yBAAiB,UAAU;AAC3B,mBAAW;AACX,wBAAgB,IAAI;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
+  "names": []
+}

package/esm/core/hooks/useMergeRefs.js

@@ -0,0 +1,16 @@
+import { useCallback } from "react";
+function useMergeRefs(refs) {
+  return useCallback((value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== void 0 && ref !== null) {
+        ref.current = value;
+      }
+    }
+  }, refs);
+}
+export {
+  useMergeRefs
+};
+//# sourceMappingURL=useMergeRefs.js.map

package/esm/core/hooks/useMergeRefs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/hooks/useMergeRefs.ts"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\n\n/**\n * If you have multiple references (e.g. from different hooks) you need to apply to\n * the same element, you can use the `useMergeRefs` hook to combine them into one\n * reference.\n */\nexport function useMergeRefs<T = unknown>(\n  refs: Array<\n    | React.MutableRefObject<T>\n    | React.LegacyRef<T>\n    | React.Dispatch<React.SetStateAction<T | null>>\n    | undefined\n  >,\n): React.RefCallback<T> {\n  return useCallback((value) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref !== undefined && ref !== null) {\n        (ref as React.MutableRefObject<T | null>).current = value;\n      }\n    }\n  }, refs); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],
+  "mappings": "AAAA,SAAgB,mBAAmB;AAO5B,SAAS,aACd,MAMsB;AACtB,SAAO,YAAY,CAAC,UAAU;AAC5B,eAAW,OAAO,MAAM;AACtB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,KAAK;AAAA,MACX,WAAW,QAAQ,UAAa,QAAQ,MAAM;AAC5C,QAAC,IAAyC,UAAU;AAAA,MACtD;AAAA,IACF;AAAA,EACF,GAAG,IAAI;AACT;",
+  "names": []
+}

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 { DataTestId } from './types/data-props.js';\nexport type { StylingProps } from './types/styling-props.js';\nexport type { WithChildren } from './types/with-children.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';\n"],
-  "mappings": "AAAA,SAAS,eAAkC;AAC3C;AAAA,EACgB;AAAA,OAET;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EACmB;AAAA,OAEZ;AAKP,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;",
+  "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';\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';\n\nexport type { AriaLabelingProps } from './types/a11y-props.js';\nexport type { DOMProps } from './types/dom.js';\nexport type {\n  PolymorphicComponentProps,\n  PolymorphProps,\n  PolymorphOwnProps,\n} from './types/polymorph.js';\nexport { type _HeadingLevel, type _HeadingTag } from './types/heading.js';\n"],
+  "mappings": "AAAA,SAAS,eAAkC;AAC3C;AAAA,EACgB;AAAA,OAET;AAIP,SAAS,uBAAuB;AAChC,SAA4B,uBAAwB;AACpD;AAAA,EACmB;AAAA,OAEZ;AAMP,SAAyB,oBAAqB;AAC9C,SAAiC,4BAA6B;AAC9D,SAAmC,8BAA+B;AAClE,SAAkC,6BAA8B;AAChE,SAAwB,mBAAoB;AAC5C,SAAsB,iBAAkB;AACxC;AAAA,EACgB;AAAA,OAIT;",
   "names": []
 }

package/esm/core/styles/focusRing.css

@@ -0,0 +1,88 @@
+.focusRing_focusRingCSS__z2r50s3 {
+  outline: none;
+}
+.focusRing_focusRingCSS__z2r50s3:focus-visible {
+  outline: none;
+}
+.focusRing_focusRingCSS_minimal_true__z2r50s4 {
+  border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--outerShadow__z2r50s0);
+  background-color: var(--backgroundColor__z2r50s2);
+}
+.focusRing_focusRingCSS_minimal_false__z2r50s5.focusRing_focusRingCSS_minimal_false__z2r50s5 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--outerShadow__z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--innerShadow__z2r50s1);
+}
+.focusRing_focusRingCSS_variant_neutral__z2r50s6 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
+  --innerShadow__z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+.focusRing_focusRingCSS_variant_primary__z2r50s7 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
+  --innerShadow__z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+.focusRing_focusRingCSS_variant_success__z2r50s8 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
+  --innerShadow__z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+.focusRing_focusRingCSS_variant_warning__z2r50s9 {
+  --outerShadow__z2r50s0: var(--dt-colors-border-warning-accent, #805100);
+  --innerShadow__z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+.focusRing_focusRingCSS_variant_critical__z2r50sa {
+  --outerShadow__z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
+  --innerShadow__z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+.focusRing_focusRingCSS_variant_onAccent__z2r50sb {
+  --outerShadow__z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --innerShadow__z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
+}
+.focusRing_focusRingFocusWithinCSS__z2r50sc:focus-within {
+  outline: none;
+  :focus-visible {
+    outline: none;
+  }
+}
+.focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd:focus-within {
+  border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--outerShadow__z2r50s0);
+  background-color: var(--backgroundColor__z2r50s2);
+}
+.focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--outerShadow__z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--innerShadow__z2r50s1);
+}
+.focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf {
+  --outerShadow__z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
+  --innerShadow__z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
+}
+.focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg {
+  --outerShadow__z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
+  --innerShadow__z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
+}
+.focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh {
+  --outerShadow__z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
+  --innerShadow__z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
+}
+.focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si {
+  --outerShadow__z2r50s0: var(--dt-colors-border-warning-accent, #805100);
+  --innerShadow__z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
+}
+.focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj {
+  --outerShadow__z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
+  --innerShadow__z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
+}
+.focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk {
+  --outerShadow__z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --innerShadow__z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
+  --backgroundColor__z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
+}

package/esm/core/styles/focusRing.sty.js

@@ -0,0 +1,9 @@
+import "./focusRing.css";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var focusRingCSS = _7a468({ defaultClassName: "focusRing_focusRingCSS__z2r50s3", variantClassNames: { minimal: { true: "focusRing_focusRingCSS_minimal_true__z2r50s4", false: "focusRing_focusRingCSS_minimal_false__z2r50s5" }, variant: { neutral: "focusRing_focusRingCSS_variant_neutral__z2r50s6", primary: "focusRing_focusRingCSS_variant_primary__z2r50s7", success: "focusRing_focusRingCSS_variant_success__z2r50s8", warning: "focusRing_focusRingCSS_variant_warning__z2r50s9", critical: "focusRing_focusRingCSS_variant_critical__z2r50sa", onAccent: "focusRing_focusRingCSS_variant_onAccent__z2r50sb" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithinCSS = _7a468({ defaultClassName: "focusRing_focusRingFocusWithinCSS__z2r50sc", variantClassNames: { minimal: { true: "focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd", false: "focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se" }, variant: { neutral: "focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf", primary: "focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg", success: "focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh", warning: "focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si", critical: "focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj", onAccent: "focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  focusRingCSS,
+  focusRingFocusWithinCSS
+};
+//# sourceMappingURL=focusRing.sty.js.map

package/esm/core/styles/focusRing.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/core/styles/focusRing.css.ts"],
+  "sourcesContent": ["import './focusRing.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var focusRingCSS = _7a468({defaultClassName:'focusRing_focusRingCSS__z2r50s3',variantClassNames:{minimal:{true:'focusRing_focusRingCSS_minimal_true__z2r50s4',false:'focusRing_focusRingCSS_minimal_false__z2r50s5'},variant:{neutral:'focusRing_focusRingCSS_variant_neutral__z2r50s6',primary:'focusRing_focusRingCSS_variant_primary__z2r50s7',success:'focusRing_focusRingCSS_variant_success__z2r50s8',warning:'focusRing_focusRingCSS_variant_warning__z2r50s9',critical:'focusRing_focusRingCSS_variant_critical__z2r50sa',onAccent:'focusRing_focusRingCSS_variant_onAccent__z2r50sb'}},defaultVariants:{},compoundVariants:[]});\nexport var focusRingFocusWithinCSS = _7a468({defaultClassName:'focusRing_focusRingFocusWithinCSS__z2r50sc',variantClassNames:{minimal:{true:'focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd',false:'focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se'},variant:{neutral:'focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf',primary:'focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg',success:'focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh',warning:'focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si',critical:'focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj',onAccent:'focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk'}},defaultVariants:{},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mCAAkC,mBAAkB,EAAC,SAAQ,EAAC,MAAK,gDAA+C,OAAM,gDAA+C,GAAE,SAAQ,EAAC,SAAQ,mDAAkD,SAAQ,mDAAkD,SAAQ,mDAAkD,SAAQ,mDAAkD,UAAS,oDAAmD,UAAS,mDAAkD,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvmB,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,8CAA6C,mBAAkB,EAAC,SAAQ,EAAC,MAAK,2DAA0D,OAAM,2DAA0D,GAAE,SAAQ,EAAC,SAAQ,8DAA6D,SAAQ,8DAA6D,SAAQ,8DAA6D,SAAQ,8DAA6D,UAAS,+DAA8D,UAAS,8DAA6D,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "names": []
+}