boreal-ui 0.0.72 → 0.0.74

package/dist/next/MetricBox-CeONzyEu.cjs

@@ -0,0 +1,206 @@
+"use strict";
+const require$$2 = require("react/jsx-runtime");
+const React = require("react");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
+const BaseMetricBox = ({
+  title: title2,
+  value: value2,
+  icon: Icon,
+  subtext: subtext2,
+  theme = borealStyleConfig.getDefaultTheme(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  rounding = borealStyleConfig.getDefaultRounding(),
+  state = "",
+  outline: outline2 = false,
+  align = "center",
+  size = borealStyleConfig.getDefaultSize(),
+  className = "",
+  role,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-live": ariaLive,
+  "aria-atomic": ariaAtomic,
+  decorativeIcon = true,
+  iconAriaLabel,
+  "data-testid": testId = "metric-box",
+  classMap
+}) => {
+  const uid = React.useId();
+  const titleId = title2 ? `${testId}-title-${uid}` : void 0;
+  const subtextId = subtext2 ? `${testId}-subtext-${uid}` : void 0;
+  const wrapperClass = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.wrapper,
+      outline2 && classMap.outline,
+      classMap[theme],
+      classMap[state],
+      classMap[size],
+      classMap[align],
+      shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize.capitalize(rounding)}`],
+      className
+    ),
+    [classMap, theme, state, size, align, outline2, shadow, rounding, className]
+  );
+  const valueLabel = title2 && value2 != null ? `${value2} ${title2}` : String(value2 ?? "");
+  const resolvedRole = role ?? (title2 ? "region" : void 0);
+  const resolvedAriaLabelledBy = ariaLabelledBy ?? (title2 ? titleId : void 0);
+  const resolvedAriaDescribedBy = ariaDescribedBy ?? (subtext2 ? subtextId : void 0);
+  return /* @__PURE__ */ require$$2.jsxs(
+    "div",
+    {
+      className: wrapperClass,
+      role: resolvedRole,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabel ? void 0 : resolvedAriaLabelledBy,
+      "aria-describedby": resolvedAriaDescribedBy,
+      "aria-live": ariaLive,
+      "aria-atomic": ariaAtomic,
+      "data-testid": testId,
+      children: [
+        Icon && /* @__PURE__ */ require$$2.jsx(
+          "div",
+          {
+            className: classMap.icon,
+            "data-testid": `${testId}-icon`,
+            "aria-hidden": decorativeIcon ? true : void 0,
+            children: /* @__PURE__ */ require$$2.jsx(
+              Icon,
+              {
+                "aria-hidden": decorativeIcon ? true : void 0,
+                "aria-label": !decorativeIcon ? iconAriaLabel : void 0,
+                focusable: false
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ require$$2.jsxs("div", { className: classMap.content, children: [
+          title2 && /* @__PURE__ */ require$$2.jsx(
+            "h3",
+            {
+              id: titleId,
+              className: classMap.title,
+              "data-testid": `${testId}-title`,
+              children: title2
+            }
+          ),
+          /* @__PURE__ */ require$$2.jsx(
+            "div",
+            {
+              className: classMap.value,
+              "data-testid": `${testId}-value`,
+              "aria-label": valueLabel,
+              children: value2
+            }
+          ),
+          subtext2 && /* @__PURE__ */ require$$2.jsx(
+            "div",
+            {
+              id: subtextId,
+              className: classMap.subtext,
+              "data-testid": `${testId}-subtext`,
+              children: subtext2
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+BaseMetricBox.displayName = "BaseMetricBox";
+const noScroll = "_noScroll_b5wc9_109";
+const errorMessage = "_errorMessage_b5wc9_110";
+const loadingContainer = "_loadingContainer_b5wc9_111";
+const hideScrollbar = "_hideScrollbar_b5wc9_103";
+const sr_only = "_sr_only_b5wc9_112";
+const wrapper = "_wrapper_b5wc9_637";
+const icon = "_icon_b5wc9_674";
+const content = "_content_b5wc9_691";
+const title = "_title_b5wc9_704";
+const value = "_value_b5wc9_723";
+const subtext = "_subtext_b5wc9_741";
+const left = "_left_b5wc9_756";
+const right = "_right_b5wc9_761";
+const roundNone = "_roundNone_b5wc9_766";
+const roundSmall = "_roundSmall_b5wc9_770";
+const roundMedium = "_roundMedium_b5wc9_774";
+const roundLarge = "_roundLarge_b5wc9_778";
+const roundFull = "_roundFull_b5wc9_782";
+const shadowNone = "_shadowNone_b5wc9_786";
+const shadowLight = "_shadowLight_b5wc9_790";
+const shadowMedium = "_shadowMedium_b5wc9_794";
+const shadowStrong = "_shadowStrong_b5wc9_798";
+const shadowIntense = "_shadowIntense_b5wc9_802";
+const primary = "_primary_b5wc9_806";
+const outline = "_outline_b5wc9_814";
+const secondary = "_secondary_b5wc9_828";
+const tertiary = "_tertiary_b5wc9_850";
+const quaternary = "_quaternary_b5wc9_872";
+const clear = "_clear_b5wc9_894";
+const success = "_success_b5wc9_916";
+const error = "_error_b5wc9_110";
+const warning = "_warning_b5wc9_960";
+const xs = "_xs_b5wc9_987";
+const small = "_small_b5wc9_1000";
+const medium = "_medium_b5wc9_1013";
+const large = "_large_b5wc9_1026";
+const xl = "_xl_b5wc9_1039";
+const spin = "_spin_b5wc9_1";
+const pulse = "_pulse_b5wc9_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  wrapper,
+  icon,
+  content,
+  title,
+  value,
+  subtext,
+  left,
+  right,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  primary,
+  outline,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  success,
+  error,
+  warning,
+  xs,
+  small,
+  medium,
+  large,
+  xl,
+  "fade-in": "_fade-in_b5wc9_1",
+  "slide-up": "_slide-up_b5wc9_1",
+  "spin-3d": "_spin-3d_b5wc9_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_b5wc9_1",
+  "progress-grow": "_progress-grow_b5wc9_1",
+  "indeterminate-move": "_indeterminate-move_b5wc9_1",
+  "skeleton-loading": "_skeleton-loading_b5wc9_1"
+};
+const MetricBox = (props) => {
+  return /* @__PURE__ */ require$$2.jsx(BaseMetricBox, { ...props, classMap: styles });
+};
+MetricBox.displayName = "MetricBox";
+exports.MetricBox = MetricBox;
+//# sourceMappingURL=MetricBox-CeONzyEu.cjs.map

package/dist/next/MetricBox-CeONzyEu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricBox-CeONzyEu.cjs","sources":["../../src/components/MetricBox/MetricBoxBase.tsx","../../src/components/MetricBox/next/MetricBox.tsx"],"sourcesContent":["import React, { useMemo, useId } from \"react\";\r\nimport { BaseMetricBoxProps } from \"./MetricBox.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseMetricBox: React.FC<BaseMetricBoxProps> = ({\r\n  title,\r\n  value,\r\n  icon: Icon,\r\n  subtext,\r\n  theme = getDefaultTheme(),\r\n  shadow = getDefaultShadow(),\r\n  rounding = getDefaultRounding(),\r\n  state = \"\",\r\n  outline = false,\r\n  align = \"center\",\r\n  size = getDefaultSize(),\r\n  className = \"\",\r\n  role,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-live\": ariaLive,\r\n  \"aria-atomic\": ariaAtomic,\r\n  decorativeIcon = true,\r\n  iconAriaLabel,\r\n  \"data-testid\": testId = \"metric-box\",\r\n  classMap,\r\n}) => {\r\n  const uid = useId();\r\n\r\n  const titleId = title ? `${testId}-title-${uid}` : undefined;\r\n  const subtextId = subtext ? `${testId}-subtext-${uid}` : undefined;\r\n\r\n  const wrapperClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.wrapper,\r\n        outline && classMap.outline,\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n        classMap[align],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className,\r\n      ),\r\n    [classMap, theme, state, size, align, outline, shadow, rounding, className],\r\n  );\r\n\r\n  const valueLabel =\r\n    title && value != null ? `${value} ${title}` : String(value ?? \"\");\r\n\r\n  const resolvedRole = role ?? (title ? \"region\" : undefined);\r\n  const resolvedAriaLabelledBy =\r\n    ariaLabelledBy ?? (title ? titleId : undefined);\r\n  const resolvedAriaDescribedBy =\r\n    ariaDescribedBy ?? (subtext ? subtextId : undefined);\r\n\r\n  return (\r\n    <div\r\n      className={wrapperClass}\r\n      role={resolvedRole}\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={ariaLabel ? undefined : resolvedAriaLabelledBy}\r\n      aria-describedby={resolvedAriaDescribedBy}\r\n      aria-live={ariaLive}\r\n      aria-atomic={ariaAtomic}\r\n      data-testid={testId}\r\n    >\r\n      {Icon && (\r\n        <div\r\n          className={classMap.icon}\r\n          data-testid={`${testId}-icon`}\r\n          aria-hidden={decorativeIcon ? true : undefined}\r\n        >\r\n          <Icon\r\n            aria-hidden={decorativeIcon ? true : undefined}\r\n            aria-label={!decorativeIcon ? iconAriaLabel : undefined}\r\n            focusable={false}\r\n          />\r\n        </div>\r\n      )}\r\n\r\n      <div className={classMap.content}>\r\n        {title && (\r\n          <h3\r\n            id={titleId}\r\n            className={classMap.title}\r\n            data-testid={`${testId}-title`}\r\n          >\r\n            {title}\r\n          </h3>\r\n        )}\r\n\r\n        <div\r\n          className={classMap.value}\r\n          data-testid={`${testId}-value`}\r\n          aria-label={valueLabel}\r\n        >\r\n          {value}\r\n        </div>\r\n\r\n        {subtext && (\r\n          <div\r\n            id={subtextId}\r\n            className={classMap.subtext}\r\n            data-testid={`${testId}-subtext`}\r\n          >\r\n            {subtext}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nBaseMetricBox.displayName = \"BaseMetricBox\";\r\nexport default BaseMetricBox;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseMetricBox from \"../MetricBoxBase\";\r\nimport styles from \"./MetricBox.module.scss\";\r\nimport { MetricBoxProps } from \"../MetricBox.types\";\r\n\r\nconst MetricBox: React.FC<MetricBoxProps> = (props) => {\r\n  return <BaseMetricBox {...props} classMap={styles} />;\r\n};\r\nMetricBox.displayName = \"MetricBox\";\r\nexport default MetricBox;\r\n"],"names":["title","value","subtext","getDefaultTheme","getDefaultShadow","getDefaultRounding","outline","getDefaultSize","useId","useMemo","combineClassNames","capitalize","jsxs","jsx"],"mappings":"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"}

package/dist/next/MetricBox-D9-RmZoy.js

@@ -0,0 +1,207 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { d as getDefaultTheme, b as getDefaultShadow, a as getDefaultRounding, c as getDefaultSize } from "./boreal-style-config-DsaRlxmw.js";
+const BaseMetricBox = ({
+  title: title2,
+  value: value2,
+  icon: Icon,
+  subtext: subtext2,
+  theme = getDefaultTheme(),
+  shadow = getDefaultShadow(),
+  rounding = getDefaultRounding(),
+  state = "",
+  outline: outline2 = false,
+  align = "center",
+  size = getDefaultSize(),
+  className = "",
+  role,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-live": ariaLive,
+  "aria-atomic": ariaAtomic,
+  decorativeIcon = true,
+  iconAriaLabel,
+  "data-testid": testId = "metric-box",
+  classMap
+}) => {
+  const uid = useId();
+  const titleId = title2 ? `${testId}-title-${uid}` : void 0;
+  const subtextId = subtext2 ? `${testId}-subtext-${uid}` : void 0;
+  const wrapperClass = useMemo(
+    () => combineClassNames(
+      classMap.wrapper,
+      outline2 && classMap.outline,
+      classMap[theme],
+      classMap[state],
+      classMap[size],
+      classMap[align],
+      shadow && classMap[`shadow${capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize(rounding)}`],
+      className
+    ),
+    [classMap, theme, state, size, align, outline2, shadow, rounding, className]
+  );
+  const valueLabel = title2 && value2 != null ? `${value2} ${title2}` : String(value2 ?? "");
+  const resolvedRole = role ?? (title2 ? "region" : void 0);
+  const resolvedAriaLabelledBy = ariaLabelledBy ?? (title2 ? titleId : void 0);
+  const resolvedAriaDescribedBy = ariaDescribedBy ?? (subtext2 ? subtextId : void 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: wrapperClass,
+      role: resolvedRole,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabel ? void 0 : resolvedAriaLabelledBy,
+      "aria-describedby": resolvedAriaDescribedBy,
+      "aria-live": ariaLive,
+      "aria-atomic": ariaAtomic,
+      "data-testid": testId,
+      children: [
+        Icon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classMap.icon,
+            "data-testid": `${testId}-icon`,
+            "aria-hidden": decorativeIcon ? true : void 0,
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                "aria-hidden": decorativeIcon ? true : void 0,
+                "aria-label": !decorativeIcon ? iconAriaLabel : void 0,
+                focusable: false
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: classMap.content, children: [
+          title2 && /* @__PURE__ */ jsx(
+            "h3",
+            {
+              id: titleId,
+              className: classMap.title,
+              "data-testid": `${testId}-title`,
+              children: title2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classMap.value,
+              "data-testid": `${testId}-value`,
+              "aria-label": valueLabel,
+              children: value2
+            }
+          ),
+          subtext2 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: subtextId,
+              className: classMap.subtext,
+              "data-testid": `${testId}-subtext`,
+              children: subtext2
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+BaseMetricBox.displayName = "BaseMetricBox";
+const noScroll = "_noScroll_b5wc9_109";
+const errorMessage = "_errorMessage_b5wc9_110";
+const loadingContainer = "_loadingContainer_b5wc9_111";
+const hideScrollbar = "_hideScrollbar_b5wc9_103";
+const sr_only = "_sr_only_b5wc9_112";
+const wrapper = "_wrapper_b5wc9_637";
+const icon = "_icon_b5wc9_674";
+const content = "_content_b5wc9_691";
+const title = "_title_b5wc9_704";
+const value = "_value_b5wc9_723";
+const subtext = "_subtext_b5wc9_741";
+const left = "_left_b5wc9_756";
+const right = "_right_b5wc9_761";
+const roundNone = "_roundNone_b5wc9_766";
+const roundSmall = "_roundSmall_b5wc9_770";
+const roundMedium = "_roundMedium_b5wc9_774";
+const roundLarge = "_roundLarge_b5wc9_778";
+const roundFull = "_roundFull_b5wc9_782";
+const shadowNone = "_shadowNone_b5wc9_786";
+const shadowLight = "_shadowLight_b5wc9_790";
+const shadowMedium = "_shadowMedium_b5wc9_794";
+const shadowStrong = "_shadowStrong_b5wc9_798";
+const shadowIntense = "_shadowIntense_b5wc9_802";
+const primary = "_primary_b5wc9_806";
+const outline = "_outline_b5wc9_814";
+const secondary = "_secondary_b5wc9_828";
+const tertiary = "_tertiary_b5wc9_850";
+const quaternary = "_quaternary_b5wc9_872";
+const clear = "_clear_b5wc9_894";
+const success = "_success_b5wc9_916";
+const error = "_error_b5wc9_110";
+const warning = "_warning_b5wc9_960";
+const xs = "_xs_b5wc9_987";
+const small = "_small_b5wc9_1000";
+const medium = "_medium_b5wc9_1013";
+const large = "_large_b5wc9_1026";
+const xl = "_xl_b5wc9_1039";
+const spin = "_spin_b5wc9_1";
+const pulse = "_pulse_b5wc9_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  wrapper,
+  icon,
+  content,
+  title,
+  value,
+  subtext,
+  left,
+  right,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  primary,
+  outline,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  success,
+  error,
+  warning,
+  xs,
+  small,
+  medium,
+  large,
+  xl,
+  "fade-in": "_fade-in_b5wc9_1",
+  "slide-up": "_slide-up_b5wc9_1",
+  "spin-3d": "_spin-3d_b5wc9_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_b5wc9_1",
+  "progress-grow": "_progress-grow_b5wc9_1",
+  "indeterminate-move": "_indeterminate-move_b5wc9_1",
+  "skeleton-loading": "_skeleton-loading_b5wc9_1"
+};
+const MetricBox = (props) => {
+  return /* @__PURE__ */ jsx(BaseMetricBox, { ...props, classMap: styles });
+};
+MetricBox.displayName = "MetricBox";
+export {
+  MetricBox as M
+};
+//# sourceMappingURL=MetricBox-D9-RmZoy.js.map

package/dist/next/MetricBox-D9-RmZoy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricBox-D9-RmZoy.js","sources":["../../src/components/MetricBox/MetricBoxBase.tsx","../../src/components/MetricBox/next/MetricBox.tsx"],"sourcesContent":["import React, { useMemo, useId } from \"react\";\r\nimport { BaseMetricBoxProps } from \"./MetricBox.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseMetricBox: React.FC<BaseMetricBoxProps> = ({\r\n  title,\r\n  value,\r\n  icon: Icon,\r\n  subtext,\r\n  theme = getDefaultTheme(),\r\n  shadow = getDefaultShadow(),\r\n  rounding = getDefaultRounding(),\r\n  state = \"\",\r\n  outline = false,\r\n  align = \"center\",\r\n  size = getDefaultSize(),\r\n  className = \"\",\r\n  role,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-live\": ariaLive,\r\n  \"aria-atomic\": ariaAtomic,\r\n  decorativeIcon = true,\r\n  iconAriaLabel,\r\n  \"data-testid\": testId = \"metric-box\",\r\n  classMap,\r\n}) => {\r\n  const uid = useId();\r\n\r\n  const titleId = title ? `${testId}-title-${uid}` : undefined;\r\n  const subtextId = subtext ? `${testId}-subtext-${uid}` : undefined;\r\n\r\n  const wrapperClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.wrapper,\r\n        outline && classMap.outline,\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n        classMap[align],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className,\r\n      ),\r\n    [classMap, theme, state, size, align, outline, shadow, rounding, className],\r\n  );\r\n\r\n  const valueLabel =\r\n    title && value != null ? `${value} ${title}` : String(value ?? \"\");\r\n\r\n  const resolvedRole = role ?? (title ? \"region\" : undefined);\r\n  const resolvedAriaLabelledBy =\r\n    ariaLabelledBy ?? (title ? titleId : undefined);\r\n  const resolvedAriaDescribedBy =\r\n    ariaDescribedBy ?? (subtext ? subtextId : undefined);\r\n\r\n  return (\r\n    <div\r\n      className={wrapperClass}\r\n      role={resolvedRole}\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={ariaLabel ? undefined : resolvedAriaLabelledBy}\r\n      aria-describedby={resolvedAriaDescribedBy}\r\n      aria-live={ariaLive}\r\n      aria-atomic={ariaAtomic}\r\n      data-testid={testId}\r\n    >\r\n      {Icon && (\r\n        <div\r\n          className={classMap.icon}\r\n          data-testid={`${testId}-icon`}\r\n          aria-hidden={decorativeIcon ? true : undefined}\r\n        >\r\n          <Icon\r\n            aria-hidden={decorativeIcon ? true : undefined}\r\n            aria-label={!decorativeIcon ? iconAriaLabel : undefined}\r\n            focusable={false}\r\n          />\r\n        </div>\r\n      )}\r\n\r\n      <div className={classMap.content}>\r\n        {title && (\r\n          <h3\r\n            id={titleId}\r\n            className={classMap.title}\r\n            data-testid={`${testId}-title`}\r\n          >\r\n            {title}\r\n          </h3>\r\n        )}\r\n\r\n        <div\r\n          className={classMap.value}\r\n          data-testid={`${testId}-value`}\r\n          aria-label={valueLabel}\r\n        >\r\n          {value}\r\n        </div>\r\n\r\n        {subtext && (\r\n          <div\r\n            id={subtextId}\r\n            className={classMap.subtext}\r\n            data-testid={`${testId}-subtext`}\r\n          >\r\n            {subtext}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nBaseMetricBox.displayName = \"BaseMetricBox\";\r\nexport default BaseMetricBox;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseMetricBox from \"../MetricBoxBase\";\r\nimport styles from \"./MetricBox.module.scss\";\r\nimport { MetricBoxProps } from \"../MetricBox.types\";\r\n\r\nconst MetricBox: React.FC<MetricBoxProps> = (props) => {\r\n  return <BaseMetricBox {...props} classMap={styles} />;\r\n};\r\nMetricBox.displayName = \"MetricBox\";\r\nexport default MetricBox;\r\n"],"names":["title","value","subtext","outline"],"mappings":"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"}

package/dist/next/MetricBox.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const MetricBox = require("./MetricBox-CrUuF7Ib.cjs");
+const MetricBox = require("./MetricBox-CeONzyEu.cjs");
 module.exports = MetricBox.MetricBox;
 //# sourceMappingURL=MetricBox.cjs.js.map

package/dist/next/MetricBox.js

@@ -1,4 +1,4 @@
-import { M } from "./MetricBox-CDiRiG0K.js";
+import { M } from "./MetricBox-D9-RmZoy.js";
 export {
   M as default
 };