boreal-ui 0.0.1

package/dist/next/MessagePopup-BL_Tp51e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagePopup-BL_Tp51e.js","sources":["../../src/components/MessagePopUp/MessagePopupBase.tsx","../../src/components/MessagePopUp/next/MessagePopup.tsx"],"sourcesContent":["import React, {\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n  useId,\r\n  KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { MessagePopupProps } from \"./MessagePopup.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface BaseMessagePopupProps extends MessagePopupProps {\r\n  Button: React.ComponentType<any>;\r\n  IconButton: React.ComponentType<any>;\r\n  classMap: Record<string, string>;\r\n}\r\n\r\nconst BaseMessagePopup: React.FC<BaseMessagePopupProps> = ({\r\n  message,\r\n  onClose,\r\n  onConfirm,\r\n  onCancel,\r\n  controlsRounding = getDefaultRounding(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  confirmText = \"Confirm\",\r\n  cancelText = \"Cancel\",\r\n  className = \"\",\r\n  \"data-testid\": testId = \"message-popup\",\r\n  Button,\r\n  IconButton,\r\n  classMap,\r\n}) => {\r\n  const [isMounted, setIsMounted] = useState(false);\r\n  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n  const dialogRef = useRef<HTMLDivElement>(null);\r\n  const firstButtonRef = useRef<HTMLButtonElement>(null);\r\n  const messageId = useId();\r\n\r\n  useEffect(() => {\r\n    setIsMounted(true);\r\n    let portal = document.getElementById(\"popup-portal\");\r\n    if (!portal) {\r\n      portal = document.createElement(\"div\");\r\n      portal.id = \"popup-portal\";\r\n      document.body.appendChild(portal);\r\n    }\r\n    setPortalElement(portal);\r\n    document.body.classList.add(\"no-scroll\");\r\n\r\n    const handleEscape = (e: globalThis.KeyboardEvent) => {\r\n      if (e.key === \"Escape\") onClose();\r\n    };\r\n\r\n    document.addEventListener(\"keydown\", handleEscape);\r\n    return () => {\r\n      document.body.classList.remove(\"no-scroll\");\r\n      document.removeEventListener(\"keydown\", handleEscape);\r\n    };\r\n  }, [onClose]);\r\n\r\n  useEffect(() => {\r\n    setTimeout(() => {\r\n      firstButtonRef.current?.focus();\r\n    }, 10);\r\n  }, [isMounted]);\r\n\r\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key !== \"Tab\") return;\r\n\r\n    const focusableEls = dialogRef.current?.querySelectorAll<HTMLElement>(\r\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\r\n    );\r\n    if (!focusableEls || focusableEls.length === 0) return;\r\n\r\n    const first = focusableEls[0];\r\n    const last = focusableEls[focusableEls.length - 1];\r\n\r\n    if (e.shiftKey && document.activeElement === first) {\r\n      e.preventDefault();\r\n      last.focus();\r\n    } else if (!e.shiftKey && document.activeElement === last) {\r\n      e.preventDefault();\r\n      first.focus();\r\n    }\r\n  };\r\n\r\n  if (!isMounted || !portalElement) return null;\r\n\r\n  const wrapperClass = combineClassNames(\r\n    classMap.wrapper,\r\n    shadow && classMap[`shadow${capitalize(shadow)}`],\r\n    rounding && classMap[`round${capitalize(rounding)}`],\r\n    className\r\n  );\r\n\r\n  return ReactDOM.createPortal(\r\n    <div\r\n      className={wrapperClass}\r\n      onClick={onClose}\r\n      role=\"presentation\"\r\n      data-testid={testId}\r\n    >\r\n      <div\r\n        className={classMap.content}\r\n        onClick={(e) => e.stopPropagation()}\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby={messageId}\r\n        tabIndex={-1}\r\n        ref={dialogRef}\r\n        onKeyDown={handleKeyDown}\r\n        data-testid={`${testId}-dialog`}\r\n      >\r\n        <IconButton\r\n          className={classMap.close}\r\n          onClick={onClose}\r\n          aria-label=\"Close popup\"\r\n          icon={CloseIcon}\r\n          state=\"error\"\r\n          size=\"small\"\r\n          data-testid={`${testId}-close`}\r\n        />\r\n        <h2\r\n          id={messageId}\r\n          className={classMap.message}\r\n          data-testid={`${testId}-message`}\r\n        >\r\n          {message}\r\n        </h2>\r\n        <div className={classMap.actions} data-testid={`${testId}-actions`}>\r\n          {onConfirm && (\r\n            <Button\r\n              className={classMap.confirm}\r\n              state=\"success\"\r\n              onClick={onConfirm}\r\n              ref={firstButtonRef}\r\n              rounding={controlsRounding}\r\n              type=\"button\"\r\n              data-testid={`${testId}-confirm`}\r\n            >\r\n              {confirmText}\r\n            </Button>\r\n          )}\r\n          {onCancel && (\r\n            <Button\r\n              className={classMap.cancel}\r\n              state=\"warning\"\r\n              onClick={onCancel}\r\n              type=\"button\"\r\n              data-testid={`${testId}-cancel`}\r\n            >\r\n              {cancelText}\r\n            </Button>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </div>,\r\n    portalElement\r\n  );\r\n};\r\n\r\nexport default BaseMessagePopup;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseMessagePopup from \"../MessagePopupBase\";\r\nimport { Button, IconButton } from \"../../../index.next\";\r\nimport styles from \"./MessagePopup.module.scss\";\r\nimport { MessagePopupProps } from \"../MessagePopup.types\";\r\n\r\nconst MessagePopup: React.FC<MessagePopupProps> = (props) => {\r\n  return (\r\n    <BaseMessagePopup\r\n      {...props}\r\n      Button={Button}\r\n      IconButton={IconButton}\r\n      classMap={styles}\r\n    />\r\n  );\r\n};\r\n\r\nexport default MessagePopup;\r\n"],"names":["message","Button","IconButton"],"mappings":"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"}

package/dist/next/MessagePopup-DuXLVt2z.cjs

@@ -0,0 +1,201 @@
+"use strict";
+const require$$2 = require("react/jsx-runtime");
+const React = require("react");
+const ReactDOM = require("react-dom");
+const CloseIcon = require("./CloseIcon-7hy4qJ9o.cjs");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
+const Button = require("./Button-DUh0L7vy.cjs");
+const IconButton = require("./IconButton-mY_E1gsn.cjs");
+const BaseMessagePopup = ({
+  message: message2,
+  onClose,
+  onConfirm,
+  onCancel,
+  controlsRounding = borealStyleConfig.getDefaultRounding(),
+  rounding = borealStyleConfig.getDefaultRounding(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  className = "",
+  "data-testid": testId = "message-popup",
+  Button: Button2,
+  IconButton: IconButton2,
+  classMap
+}) => {
+  const [isMounted, setIsMounted] = React.useState(false);
+  const [portalElement, setPortalElement] = React.useState(null);
+  const dialogRef = React.useRef(null);
+  const firstButtonRef = React.useRef(null);
+  const messageId = React.useId();
+  React.useEffect(() => {
+    setIsMounted(true);
+    let portal = document.getElementById("popup-portal");
+    if (!portal) {
+      portal = document.createElement("div");
+      portal.id = "popup-portal";
+      document.body.appendChild(portal);
+    }
+    setPortalElement(portal);
+    document.body.classList.add("no-scroll");
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.body.classList.remove("no-scroll");
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose]);
+  React.useEffect(() => {
+    setTimeout(() => {
+      var _a;
+      (_a = firstButtonRef.current) == null ? void 0 : _a.focus();
+    }, 10);
+  }, [isMounted]);
+  const handleKeyDown = (e) => {
+    var _a;
+    if (e.key !== "Tab") return;
+    const focusableEls = (_a = dialogRef.current) == null ? void 0 : _a.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (!focusableEls || focusableEls.length === 0) return;
+    const first = focusableEls[0];
+    const last = focusableEls[focusableEls.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+  if (!isMounted || !portalElement) return null;
+  const wrapperClass = classNames.combineClassNames(
+    classMap.wrapper,
+    shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+    rounding && classMap[`round${capitalize.capitalize(rounding)}`],
+    className
+  );
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ require$$2.jsx(
+      "div",
+      {
+        className: wrapperClass,
+        onClick: onClose,
+        role: "presentation",
+        "data-testid": testId,
+        children: /* @__PURE__ */ require$$2.jsxs(
+          "div",
+          {
+            className: classMap.content,
+            onClick: (e) => e.stopPropagation(),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": messageId,
+            tabIndex: -1,
+            ref: dialogRef,
+            onKeyDown: handleKeyDown,
+            "data-testid": `${testId}-dialog`,
+            children: [
+              /* @__PURE__ */ require$$2.jsx(
+                IconButton2,
+                {
+                  className: classMap.close,
+                  onClick: onClose,
+                  "aria-label": "Close popup",
+                  icon: CloseIcon.CloseIcon,
+                  state: "error",
+                  size: "small",
+                  "data-testid": `${testId}-close`
+                }
+              ),
+              /* @__PURE__ */ require$$2.jsx(
+                "h2",
+                {
+                  id: messageId,
+                  className: classMap.message,
+                  "data-testid": `${testId}-message`,
+                  children: message2
+                }
+              ),
+              /* @__PURE__ */ require$$2.jsxs("div", { className: classMap.actions, "data-testid": `${testId}-actions`, children: [
+                onConfirm && /* @__PURE__ */ require$$2.jsx(
+                  Button2,
+                  {
+                    className: classMap.confirm,
+                    state: "success",
+                    onClick: onConfirm,
+                    ref: firstButtonRef,
+                    rounding: controlsRounding,
+                    type: "button",
+                    "data-testid": `${testId}-confirm`,
+                    children: confirmText
+                  }
+                ),
+                onCancel && /* @__PURE__ */ require$$2.jsx(
+                  Button2,
+                  {
+                    className: classMap.cancel,
+                    state: "warning",
+                    onClick: onCancel,
+                    type: "button",
+                    "data-testid": `${testId}-cancel`,
+                    children: cancelText
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    portalElement
+  );
+};
+const wrapper = "_wrapper_3lgva_68";
+const content = "_content_3lgva_82";
+const close = "_close_3lgva_91";
+const message = "_message_3lgva_98";
+const actions = "_actions_3lgva_105";
+const roundNone = "_roundNone_3lgva_112";
+const roundSmall = "_roundSmall_3lgva_116";
+const roundMedium = "_roundMedium_3lgva_120";
+const roundLarge = "_roundLarge_3lgva_124";
+const roundFull = "_roundFull_3lgva_128";
+const shadowNone = "_shadowNone_3lgva_132";
+const shadowLight = "_shadowLight_3lgva_136";
+const shadowMedium = "_shadowMedium_3lgva_140";
+const shadowStrong = "_shadowStrong_3lgva_144";
+const shadowIntense = "_shadowIntense_3lgva_148";
+const styles = {
+  wrapper,
+  content,
+  close,
+  message,
+  actions,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense
+};
+const MessagePopup = (props) => {
+  return /* @__PURE__ */ require$$2.jsx(
+    BaseMessagePopup,
+    {
+      ...props,
+      Button: Button.Button,
+      IconButton: IconButton.IconButton,
+      classMap: styles
+    }
+  );
+};
+exports.MessagePopup = MessagePopup;
+//# sourceMappingURL=MessagePopup-DuXLVt2z.cjs.map

package/dist/next/MessagePopup-DuXLVt2z.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagePopup-DuXLVt2z.cjs","sources":["../../src/components/MessagePopUp/MessagePopupBase.tsx","../../src/components/MessagePopUp/next/MessagePopup.tsx"],"sourcesContent":["import React, {\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n  useId,\r\n  KeyboardEvent,\r\n} from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { MessagePopupProps } from \"./MessagePopup.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nexport interface BaseMessagePopupProps extends MessagePopupProps {\r\n  Button: React.ComponentType<any>;\r\n  IconButton: React.ComponentType<any>;\r\n  classMap: Record<string, string>;\r\n}\r\n\r\nconst BaseMessagePopup: React.FC<BaseMessagePopupProps> = ({\r\n  message,\r\n  onClose,\r\n  onConfirm,\r\n  onCancel,\r\n  controlsRounding = getDefaultRounding(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  confirmText = \"Confirm\",\r\n  cancelText = \"Cancel\",\r\n  className = \"\",\r\n  \"data-testid\": testId = \"message-popup\",\r\n  Button,\r\n  IconButton,\r\n  classMap,\r\n}) => {\r\n  const [isMounted, setIsMounted] = useState(false);\r\n  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n  const dialogRef = useRef<HTMLDivElement>(null);\r\n  const firstButtonRef = useRef<HTMLButtonElement>(null);\r\n  const messageId = useId();\r\n\r\n  useEffect(() => {\r\n    setIsMounted(true);\r\n    let portal = document.getElementById(\"popup-portal\");\r\n    if (!portal) {\r\n      portal = document.createElement(\"div\");\r\n      portal.id = \"popup-portal\";\r\n      document.body.appendChild(portal);\r\n    }\r\n    setPortalElement(portal);\r\n    document.body.classList.add(\"no-scroll\");\r\n\r\n    const handleEscape = (e: globalThis.KeyboardEvent) => {\r\n      if (e.key === \"Escape\") onClose();\r\n    };\r\n\r\n    document.addEventListener(\"keydown\", handleEscape);\r\n    return () => {\r\n      document.body.classList.remove(\"no-scroll\");\r\n      document.removeEventListener(\"keydown\", handleEscape);\r\n    };\r\n  }, [onClose]);\r\n\r\n  useEffect(() => {\r\n    setTimeout(() => {\r\n      firstButtonRef.current?.focus();\r\n    }, 10);\r\n  }, [isMounted]);\r\n\r\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key !== \"Tab\") return;\r\n\r\n    const focusableEls = dialogRef.current?.querySelectorAll<HTMLElement>(\r\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\r\n    );\r\n    if (!focusableEls || focusableEls.length === 0) return;\r\n\r\n    const first = focusableEls[0];\r\n    const last = focusableEls[focusableEls.length - 1];\r\n\r\n    if (e.shiftKey && document.activeElement === first) {\r\n      e.preventDefault();\r\n      last.focus();\r\n    } else if (!e.shiftKey && document.activeElement === last) {\r\n      e.preventDefault();\r\n      first.focus();\r\n    }\r\n  };\r\n\r\n  if (!isMounted || !portalElement) return null;\r\n\r\n  const wrapperClass = combineClassNames(\r\n    classMap.wrapper,\r\n    shadow && classMap[`shadow${capitalize(shadow)}`],\r\n    rounding && classMap[`round${capitalize(rounding)}`],\r\n    className\r\n  );\r\n\r\n  return ReactDOM.createPortal(\r\n    <div\r\n      className={wrapperClass}\r\n      onClick={onClose}\r\n      role=\"presentation\"\r\n      data-testid={testId}\r\n    >\r\n      <div\r\n        className={classMap.content}\r\n        onClick={(e) => e.stopPropagation()}\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby={messageId}\r\n        tabIndex={-1}\r\n        ref={dialogRef}\r\n        onKeyDown={handleKeyDown}\r\n        data-testid={`${testId}-dialog`}\r\n      >\r\n        <IconButton\r\n          className={classMap.close}\r\n          onClick={onClose}\r\n          aria-label=\"Close popup\"\r\n          icon={CloseIcon}\r\n          state=\"error\"\r\n          size=\"small\"\r\n          data-testid={`${testId}-close`}\r\n        />\r\n        <h2\r\n          id={messageId}\r\n          className={classMap.message}\r\n          data-testid={`${testId}-message`}\r\n        >\r\n          {message}\r\n        </h2>\r\n        <div className={classMap.actions} data-testid={`${testId}-actions`}>\r\n          {onConfirm && (\r\n            <Button\r\n              className={classMap.confirm}\r\n              state=\"success\"\r\n              onClick={onConfirm}\r\n              ref={firstButtonRef}\r\n              rounding={controlsRounding}\r\n              type=\"button\"\r\n              data-testid={`${testId}-confirm`}\r\n            >\r\n              {confirmText}\r\n            </Button>\r\n          )}\r\n          {onCancel && (\r\n            <Button\r\n              className={classMap.cancel}\r\n              state=\"warning\"\r\n              onClick={onCancel}\r\n              type=\"button\"\r\n              data-testid={`${testId}-cancel`}\r\n            >\r\n              {cancelText}\r\n            </Button>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </div>,\r\n    portalElement\r\n  );\r\n};\r\n\r\nexport default BaseMessagePopup;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport BaseMessagePopup from \"../MessagePopupBase\";\r\nimport { Button, IconButton } from \"../../../index.next\";\r\nimport styles from \"./MessagePopup.module.scss\";\r\nimport { MessagePopupProps } from \"../MessagePopup.types\";\r\n\r\nconst MessagePopup: React.FC<MessagePopupProps> = (props) => {\r\n  return (\r\n    <BaseMessagePopup\r\n      {...props}\r\n      Button={Button}\r\n      IconButton={IconButton}\r\n      classMap={styles}\r\n    />\r\n  );\r\n};\r\n\r\nexport default MessagePopup;\r\n"],"names":["message","getDefaultRounding","getDefaultShadow","Button","IconButton","useState","useRef","useId","useEffect","combineClassNames","capitalize","jsx","jsxs","CloseIcon"],"mappings":"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"}

package/dist/next/MetricBox-Dtkrwrtw.cjs

@@ -0,0 +1,175 @@
+"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-Rr5d5Qts.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 = "",
+  "data-testid": testId = "metric-box",
+  classMap
+}) => {
+  const titleId = `${testId}-title`;
+  const valueId = `${testId}-value`;
+  const subtextId = subtext2 ? `${testId}-subtext` : 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]
+  );
+  return /* @__PURE__ */ require$$2.jsxs(
+    "div",
+    {
+      className: wrapperClass,
+      role: "region",
+      "aria-labelledby": titleId,
+      "aria-describedby": subtextId,
+      "data-testid": testId,
+      children: [
+        Icon && /* @__PURE__ */ require$$2.jsx("div", { className: classMap.icon, "data-testid": `${testId}-icon`, children: /* @__PURE__ */ require$$2.jsx(Icon, { "aria-hidden": "true", focusable: "false" }) }),
+        /* @__PURE__ */ require$$2.jsxs("div", { className: classMap.content, children: [
+          /* @__PURE__ */ require$$2.jsx(
+            "h3",
+            {
+              id: titleId,
+              className: classMap.title,
+              "data-testid": `${testId}-title`,
+              children: title2
+            }
+          ),
+          /* @__PURE__ */ require$$2.jsx(
+            "div",
+            {
+              id: valueId,
+              className: classMap.value,
+              "data-testid": `${testId}-value`,
+              "aria-label": `${value2} ${title2}`,
+              children: value2
+            }
+          ),
+          subtext2 && /* @__PURE__ */ require$$2.jsx(
+            "div",
+            {
+              id: subtextId,
+              className: classMap.subtext,
+              "data-testid": `${testId}-subtext`,
+              children: subtext2
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const noScroll = "_noScroll_1g5rs_91";
+const errorMessage = "_errorMessage_1g5rs_92";
+const loadingContainer = "_loadingContainer_1g5rs_93";
+const hideScrollbar = "_hideScrollbar_1g5rs_85";
+const sr_only = "_sr_only_1g5rs_94";
+const wrapper = "_wrapper_1g5rs_479";
+const primary = "_primary_1g5rs_498";
+const outline = "_outline_1g5rs_501";
+const icon = "_icon_1g5rs_505";
+const secondary = "_secondary_1g5rs_508";
+const tertiary = "_tertiary_1g5rs_518";
+const quaternary = "_quaternary_1g5rs_528";
+const clear = "_clear_1g5rs_538";
+const title = "_title_1g5rs_542";
+const subtext = "_subtext_1g5rs_545";
+const success = "_success_1g5rs_555";
+const error = "_error_1g5rs_92";
+const warning = "_warning_1g5rs_575";
+const content = "_content_1g5rs_593";
+const value = "_value_1g5rs_603";
+const left = "_left_1g5rs_607";
+const right = "_right_1g5rs_611";
+const xs = "_xs_1g5rs_615";
+const small = "_small_1g5rs_630";
+const medium = "_medium_1g5rs_645";
+const large = "_large_1g5rs_660";
+const xl = "_xl_1g5rs_675";
+const roundNone = "_roundNone_1g5rs_696";
+const roundSmall = "_roundSmall_1g5rs_700";
+const roundMedium = "_roundMedium_1g5rs_704";
+const roundLarge = "_roundLarge_1g5rs_708";
+const roundFull = "_roundFull_1g5rs_712";
+const shadowNone = "_shadowNone_1g5rs_716";
+const shadowLight = "_shadowLight_1g5rs_720";
+const shadowMedium = "_shadowMedium_1g5rs_724";
+const shadowStrong = "_shadowStrong_1g5rs_728";
+const shadowIntense = "_shadowIntense_1g5rs_732";
+const spin = "_spin_1g5rs_1";
+const pulse = "_pulse_1g5rs_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  wrapper,
+  primary,
+  outline,
+  icon,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  title,
+  subtext,
+  success,
+  error,
+  warning,
+  content,
+  value,
+  left,
+  right,
+  xs,
+  small,
+  medium,
+  large,
+  xl,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_1g5rs_1",
+  "slide-up": "_slide-up_1g5rs_1",
+  "spin-3d": "_spin-3d_1g5rs_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_1g5rs_1",
+  "progress-grow": "_progress-grow_1g5rs_1",
+  "indeterminate-move": "_indeterminate-move_1g5rs_1",
+  "skeleton-loading": "_skeleton-loading_1g5rs_1"
+};
+const MetricBox = (props) => {
+  return /* @__PURE__ */ require$$2.jsx(BaseMetricBox, { ...props, classMap: styles });
+};
+exports.MetricBox = MetricBox;
+//# sourceMappingURL=MetricBox-Dtkrwrtw.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricBox-Dtkrwrtw.cjs","sources":["../../src/components/MetricBox/MetricBoxBase.tsx","../../src/components/MetricBox/next/MetricBox.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { MetricBoxProps } 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\nexport interface BaseMetricBoxProps extends MetricBoxProps {\r\n  classMap: Record<string, string>;\r\n}\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  \"data-testid\": testId = \"metric-box\",\r\n  classMap,\r\n}) => {\r\n  const titleId = `${testId}-title`;\r\n  const valueId = `${testId}-value`;\r\n  const subtextId = subtext ? `${testId}-subtext` : 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  return (\r\n    <div\r\n      className={wrapperClass}\r\n      role=\"region\"\r\n      aria-labelledby={titleId}\r\n      aria-describedby={subtextId}\r\n      data-testid={testId}\r\n    >\r\n      {Icon && (\r\n        <div className={classMap.icon} data-testid={`${testId}-icon`}>\r\n          <Icon aria-hidden=\"true\" focusable=\"false\" />\r\n        </div>\r\n      )}\r\n\r\n      <div className={classMap.content}>\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        <div\r\n          id={valueId}\r\n          className={classMap.value}\r\n          data-testid={`${testId}-value`}\r\n          aria-label={`${value} ${title}`}\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\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\n\r\nexport default MetricBox;\r\n"],"names":["title","value","subtext","getDefaultTheme","getDefaultShadow","getDefaultRounding","outline","getDefaultSize","useMemo","combineClassNames","capitalize","jsxs","jsx"],"mappings":";;;;;;AAeA,MAAM,gBAA8C,CAAC;AAAA,EACnD,OAAAA;AAAA,EACA,OAAAC;AAAA,EACA,MAAM;AAAA,EACN,SAAAC;AAAA,EACA,QAAQC,kBAAAA,gBAAgB;AAAA,EACxB,SAASC,kBAAAA,iBAAiB;AAAA,EAC1B,WAAWC,kBAAAA,mBAAmB;AAAA,EAC9B,QAAQ;AAAA,EACR,SAAAC,WAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAOC,kBAAAA,eAAe;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe,SAAS;AAAA,EACxB;AACF,MAAM;AACE,QAAA,UAAU,GAAG,MAAM;AACnB,QAAA,UAAU,GAAG,MAAM;AACzB,QAAM,YAAYL,WAAU,GAAG,MAAM,aAAa;AAElD,QAAM,eAAeM,MAAA;AAAA,IACnB,MACEC,WAAA;AAAA,MACE,SAAS;AAAA,MACTH,YAAW,SAAS;AAAA,MACpB,SAAS,KAAK;AAAA,MACd,SAAS,KAAK;AAAA,MACd,SAAS,IAAI;AAAA,MACb,SAAS,KAAK;AAAA,MACd,UAAU,SAAS,SAASI,WAAAA,WAAW,MAAM,CAAC,EAAE;AAAA,MAChD,YAAY,SAAS,QAAQA,WAAAA,WAAW,QAAQ,CAAC,EAAE;AAAA,MACnD;AAAA,IACF;AAAA,IACF,CAAC,UAAU,OAAO,OAAO,MAAM,OAAOJ,UAAS,QAAQ,UAAU,SAAS;AAAA,EAC5E;AAGE,SAAAK,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MAEZ,UAAA;AAAA,QAAA,QACEC,2BAAAA,IAAA,OAAA,EAAI,WAAW,SAAS,MAAM,eAAa,GAAG,MAAM,SACnD,yCAAC,MAAK,EAAA,eAAY,QAAO,WAAU,QAAQ,CAAA,GAC7C;AAAA,QAGDD,2BAAA,KAAA,OAAA,EAAI,WAAW,SAAS,SACvB,UAAA;AAAA,UAAAC,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW,SAAS;AAAA,cACpB,eAAa,GAAG,MAAM;AAAA,cAErB,UAAAZ;AAAA,YAAA;AAAA,UACH;AAAA,UAEAY,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW,SAAS;AAAA,cACpB,eAAa,GAAG,MAAM;AAAA,cACtB,cAAY,GAAGX,MAAK,IAAID,MAAK;AAAA,cAE5B,UAAAC;AAAA,YAAA;AAAA,UACH;AAAA,UAECC,YACCU,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW,SAAS;AAAA,cACpB,eAAa,GAAG,MAAM;AAAA,cAErB,UAAAV;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxFM,MAAA,YAAsC,CAAC,UAAU;AACrD,SAAQU,2BAAAA,IAAA,eAAA,EAAe,GAAG,OAAO,UAAU,QAAQ;AACrD;;"}

package/dist/next/MetricBox-rxFYolH_.js

@@ -0,0 +1,176 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { a as getDefaultRounding, b as getDefaultShadow, c as getDefaultSize, d as getDefaultTheme } from "./boreal-style-config-BILmxkZG.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 = "",
+  "data-testid": testId = "metric-box",
+  classMap
+}) => {
+  const titleId = `${testId}-title`;
+  const valueId = `${testId}-value`;
+  const subtextId = subtext2 ? `${testId}-subtext` : 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]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: wrapperClass,
+      role: "region",
+      "aria-labelledby": titleId,
+      "aria-describedby": subtextId,
+      "data-testid": testId,
+      children: [
+        Icon && /* @__PURE__ */ jsx("div", { className: classMap.icon, "data-testid": `${testId}-icon`, children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", focusable: "false" }) }),
+        /* @__PURE__ */ jsxs("div", { className: classMap.content, children: [
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              id: titleId,
+              className: classMap.title,
+              "data-testid": `${testId}-title`,
+              children: title2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: valueId,
+              className: classMap.value,
+              "data-testid": `${testId}-value`,
+              "aria-label": `${value2} ${title2}`,
+              children: value2
+            }
+          ),
+          subtext2 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: subtextId,
+              className: classMap.subtext,
+              "data-testid": `${testId}-subtext`,
+              children: subtext2
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const noScroll = "_noScroll_1g5rs_91";
+const errorMessage = "_errorMessage_1g5rs_92";
+const loadingContainer = "_loadingContainer_1g5rs_93";
+const hideScrollbar = "_hideScrollbar_1g5rs_85";
+const sr_only = "_sr_only_1g5rs_94";
+const wrapper = "_wrapper_1g5rs_479";
+const primary = "_primary_1g5rs_498";
+const outline = "_outline_1g5rs_501";
+const icon = "_icon_1g5rs_505";
+const secondary = "_secondary_1g5rs_508";
+const tertiary = "_tertiary_1g5rs_518";
+const quaternary = "_quaternary_1g5rs_528";
+const clear = "_clear_1g5rs_538";
+const title = "_title_1g5rs_542";
+const subtext = "_subtext_1g5rs_545";
+const success = "_success_1g5rs_555";
+const error = "_error_1g5rs_92";
+const warning = "_warning_1g5rs_575";
+const content = "_content_1g5rs_593";
+const value = "_value_1g5rs_603";
+const left = "_left_1g5rs_607";
+const right = "_right_1g5rs_611";
+const xs = "_xs_1g5rs_615";
+const small = "_small_1g5rs_630";
+const medium = "_medium_1g5rs_645";
+const large = "_large_1g5rs_660";
+const xl = "_xl_1g5rs_675";
+const roundNone = "_roundNone_1g5rs_696";
+const roundSmall = "_roundSmall_1g5rs_700";
+const roundMedium = "_roundMedium_1g5rs_704";
+const roundLarge = "_roundLarge_1g5rs_708";
+const roundFull = "_roundFull_1g5rs_712";
+const shadowNone = "_shadowNone_1g5rs_716";
+const shadowLight = "_shadowLight_1g5rs_720";
+const shadowMedium = "_shadowMedium_1g5rs_724";
+const shadowStrong = "_shadowStrong_1g5rs_728";
+const shadowIntense = "_shadowIntense_1g5rs_732";
+const spin = "_spin_1g5rs_1";
+const pulse = "_pulse_1g5rs_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  wrapper,
+  primary,
+  outline,
+  icon,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  title,
+  subtext,
+  success,
+  error,
+  warning,
+  content,
+  value,
+  left,
+  right,
+  xs,
+  small,
+  medium,
+  large,
+  xl,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_1g5rs_1",
+  "slide-up": "_slide-up_1g5rs_1",
+  "spin-3d": "_spin-3d_1g5rs_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_1g5rs_1",
+  "progress-grow": "_progress-grow_1g5rs_1",
+  "indeterminate-move": "_indeterminate-move_1g5rs_1",
+  "skeleton-loading": "_skeleton-loading_1g5rs_1"
+};
+const MetricBox = (props) => {
+  return /* @__PURE__ */ jsx(BaseMetricBox, { ...props, classMap: styles });
+};
+export {
+  MetricBox as M
+};
+//# sourceMappingURL=MetricBox-rxFYolH_.js.map

package/dist/next/MetricBox-rxFYolH_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricBox-rxFYolH_.js","sources":["../../src/components/MetricBox/MetricBoxBase.tsx","../../src/components/MetricBox/next/MetricBox.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { MetricBoxProps } 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\nexport interface BaseMetricBoxProps extends MetricBoxProps {\r\n  classMap: Record<string, string>;\r\n}\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  \"data-testid\": testId = \"metric-box\",\r\n  classMap,\r\n}) => {\r\n  const titleId = `${testId}-title`;\r\n  const valueId = `${testId}-value`;\r\n  const subtextId = subtext ? `${testId}-subtext` : 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  return (\r\n    <div\r\n      className={wrapperClass}\r\n      role=\"region\"\r\n      aria-labelledby={titleId}\r\n      aria-describedby={subtextId}\r\n      data-testid={testId}\r\n    >\r\n      {Icon && (\r\n        <div className={classMap.icon} data-testid={`${testId}-icon`}>\r\n          <Icon aria-hidden=\"true\" focusable=\"false\" />\r\n        </div>\r\n      )}\r\n\r\n      <div className={classMap.content}>\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        <div\r\n          id={valueId}\r\n          className={classMap.value}\r\n          data-testid={`${testId}-value`}\r\n          aria-label={`${value} ${title}`}\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\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\n\r\nexport default MetricBox;\r\n"],"names":["title","value","subtext","outline"],"mappings":";;;;;AAeA,MAAM,gBAA8C,CAAC;AAAA,EACnD,OAAAA;AAAA,EACA,OAAAC;AAAA,EACA,MAAM;AAAA,EACN,SAAAC;AAAA,EACA,QAAQ,gBAAgB;AAAA,EACxB,SAAS,iBAAiB;AAAA,EAC1B,WAAW,mBAAmB;AAAA,EAC9B,QAAQ;AAAA,EACR,SAAAC,WAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO,eAAe;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe,SAAS;AAAA,EACxB;AACF,MAAM;AACE,QAAA,UAAU,GAAG,MAAM;AACnB,QAAA,UAAU,GAAG,MAAM;AACzB,QAAM,YAAYD,WAAU,GAAG,MAAM,aAAa;AAElD,QAAM,eAAe;AAAA,IACnB,MACE;AAAA,MACE,SAAS;AAAA,MACTC,YAAW,SAAS;AAAA,MACpB,SAAS,KAAK;AAAA,MACd,SAAS,KAAK;AAAA,MACd,SAAS,IAAI;AAAA,MACb,SAAS,KAAK;AAAA,MACd,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,MAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,MACnD;AAAA,IACF;AAAA,IACF,CAAC,UAAU,OAAO,OAAO,MAAM,OAAOA,UAAS,QAAQ,UAAU,SAAS;AAAA,EAC5E;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MAEZ,UAAA;AAAA,QAAA,QACE,oBAAA,OAAA,EAAI,WAAW,SAAS,MAAM,eAAa,GAAG,MAAM,SACnD,8BAAC,MAAK,EAAA,eAAY,QAAO,WAAU,QAAQ,CAAA,GAC7C;AAAA,QAGD,qBAAA,OAAA,EAAI,WAAW,SAAS,SACvB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW,SAAS;AAAA,cACpB,eAAa,GAAG,MAAM;AAAA,cAErB,UAAAH;AAAA,YAAA;AAAA,UACH;AAAA,UAEA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW,SAAS;AAAA,cACpB,eAAa,GAAG,MAAM;AAAA,cACtB,cAAY,GAAGC,MAAK,IAAID,MAAK;AAAA,cAE5B,UAAAC;AAAA,YAAA;AAAA,UACH;AAAA,UAECC,YACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW,SAAS;AAAA,cACpB,eAAa,GAAG,MAAM;AAAA,cAErB,UAAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxFM,MAAA,YAAsC,CAAC,UAAU;AACrD,SAAQ,oBAAA,eAAA,EAAe,GAAG,OAAO,UAAU,QAAQ;AACrD;"}

package/dist/next/MetricBox.cjs.js

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

package/dist/next/MetricBox.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricBox.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/next/MetricBox.js

@@ -0,0 +1,5 @@
+import { M } from "./MetricBox-rxFYolH_.js";
+export {
+  M as default
+};
+//# sourceMappingURL=MetricBox.js.map

package/dist/next/MetricBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricBox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}