boreal-ui 0.0.1

package/dist/core/MetricBox-D5Dl19d2.js

@@ -0,0 +1,123 @@
+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,
+  value,
+  icon: Icon,
+  subtext,
+  theme = getDefaultTheme(),
+  shadow = getDefaultShadow(),
+  rounding = getDefaultRounding(),
+  state = "",
+  outline = false,
+  align = "center",
+  size = getDefaultSize(),
+  className = "",
+  "data-testid": testId = "metric-box",
+  classMap
+}) => {
+  const titleId = `${testId}-title`;
+  const valueId = `${testId}-value`;
+  const subtextId = subtext ? `${testId}-subtext` : void 0;
+  const wrapperClass = useMemo(
+    () => combineClassNames(
+      classMap.wrapper,
+      outline && 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, outline, 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: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: valueId,
+              className: classMap.value,
+              "data-testid": `${testId}-value`,
+              "aria-label": `${value} ${title}`,
+              children: value
+            }
+          ),
+          subtext && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: subtextId,
+              className: classMap.subtext,
+              "data-testid": `${testId}-subtext`,
+              children: subtext
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const classes = {
+  wrapper: "metricBox",
+  outline: "metricBox_outline",
+  primary: "metricBox_primary",
+  secondary: "metricBox_secondary",
+  tertiary: "metricBox_tertiary",
+  quaternary: "metricBox_quaternary",
+  success: "metricBox_success",
+  error: "metricBox_error",
+  warning: "metricBox_warning",
+  clear: "metricBox_clear",
+  xs: "metricBox_xs",
+  small: "metricBox_small",
+  medium: "metricBox_medium",
+  large: "metricBox_large",
+  xl: "metricBox_xl",
+  left: "metricBox_left",
+  center: "metricBox_center",
+  right: "metricBox_right",
+  shadowNone: "metricBox_shadow-None",
+  shadowLight: "metricBox_shadow-Light",
+  shadowMedium: "metricBox_shadow-Medium",
+  shadowStrong: "metricBox_shadow-Strong",
+  shadowIntense: "metricBox_shadow-Intense",
+  roundNone: "metricBox_round-None",
+  roundSmall: "metricBox_round-Small",
+  roundMedium: "metricBox_round-Medium",
+  roundLarge: "metricBox_round-Large",
+  icon: "metricBox_icon",
+  content: "metricBox_content",
+  title: "metricBox_title",
+  value: "metricBox_value",
+  subtext: "metricBox_subtext"
+};
+const MetricBox = (props) => {
+  return /* @__PURE__ */ jsx(BaseMetricBox, { ...props, classMap: classes });
+};
+export {
+  MetricBox as M
+};
+//# sourceMappingURL=MetricBox-D5Dl19d2.js.map

package/dist/core/MetricBox-D5Dl19d2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricBox-D5Dl19d2.js","sources":["../../src/components/MetricBox/MetricBoxBase.tsx","../../src/components/MetricBox/core/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","import React from \"react\";\r\nimport BaseMetricBox from \"../MetricBoxBase\";\r\nimport \"./MetricBox.scss\";\r\nimport { MetricBoxProps } from \"../MetricBox.types\";\r\n\r\nconst classes = {\r\n  wrapper: \"metricBox\",\r\n  outline: \"metricBox_outline\",\r\n\r\n  primary: \"metricBox_primary\",\r\n  secondary: \"metricBox_secondary\",\r\n  tertiary: \"metricBox_tertiary\",\r\n  quaternary: \"metricBox_quaternary\",\r\n\r\n  success: \"metricBox_success\",\r\n  error: \"metricBox_error\",\r\n  warning: \"metricBox_warning\",\r\n\r\n  clear: \"metricBox_clear\",\r\n\r\n  xs: \"metricBox_xs\",\r\n  small: \"metricBox_small\",\r\n  medium: \"metricBox_medium\",\r\n  large: \"metricBox_large\",\r\n  xl: \"metricBox_xl\",\r\n\r\n  left: \"metricBox_left\",\r\n  center: \"metricBox_center\",\r\n  right: \"metricBox_right\",\r\n\r\n  shadowNone: \"metricBox_shadow-None\",\r\n  shadowLight: \"metricBox_shadow-Light\",\r\n  shadowMedium: \"metricBox_shadow-Medium\",\r\n  shadowStrong: \"metricBox_shadow-Strong\",\r\n  shadowIntense: \"metricBox_shadow-Intense\",\r\n\r\n  roundNone: \"metricBox_round-None\",\r\n  roundSmall: \"metricBox_round-Small\",\r\n  roundMedium: \"metricBox_round-Medium\",\r\n  roundLarge: \"metricBox_round-Large\",\r\n\r\n  icon: \"metricBox_icon\",\r\n  content: \"metricBox_content\",\r\n  title: \"metricBox_title\",\r\n  value: \"metricBox_value\",\r\n  subtext: \"metricBox_subtext\",\r\n};\r\n\r\nconst MetricBox: React.FC<MetricBoxProps> = (props) => {\r\n  return <BaseMetricBox {...props} classMap={classes} />;\r\n};\r\n\r\nexport default MetricBox;\r\n"],"names":[],"mappings":"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"}

package/dist/core/MetricBox-DjE-rdp0.cjs

@@ -0,0 +1,122 @@
+"use strict";
+const jsxRuntime = 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,
+  value,
+  icon: Icon,
+  subtext,
+  theme = borealStyleConfig.getDefaultTheme(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  rounding = borealStyleConfig.getDefaultRounding(),
+  state = "",
+  outline = false,
+  align = "center",
+  size = borealStyleConfig.getDefaultSize(),
+  className = "",
+  "data-testid": testId = "metric-box",
+  classMap
+}) => {
+  const titleId = `${testId}-title`;
+  const valueId = `${testId}-value`;
+  const subtextId = subtext ? `${testId}-subtext` : void 0;
+  const wrapperClass = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.wrapper,
+      outline && 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, outline, shadow, rounding, className]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: wrapperClass,
+      role: "region",
+      "aria-labelledby": titleId,
+      "aria-describedby": subtextId,
+      "data-testid": testId,
+      children: [
+        Icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classMap.icon, "data-testid": `${testId}-icon`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": "true", focusable: "false" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classMap.content, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              id: titleId,
+              className: classMap.title,
+              "data-testid": `${testId}-title`,
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: valueId,
+              className: classMap.value,
+              "data-testid": `${testId}-value`,
+              "aria-label": `${value} ${title}`,
+              children: value
+            }
+          ),
+          subtext && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: subtextId,
+              className: classMap.subtext,
+              "data-testid": `${testId}-subtext`,
+              children: subtext
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const classes = {
+  wrapper: "metricBox",
+  outline: "metricBox_outline",
+  primary: "metricBox_primary",
+  secondary: "metricBox_secondary",
+  tertiary: "metricBox_tertiary",
+  quaternary: "metricBox_quaternary",
+  success: "metricBox_success",
+  error: "metricBox_error",
+  warning: "metricBox_warning",
+  clear: "metricBox_clear",
+  xs: "metricBox_xs",
+  small: "metricBox_small",
+  medium: "metricBox_medium",
+  large: "metricBox_large",
+  xl: "metricBox_xl",
+  left: "metricBox_left",
+  center: "metricBox_center",
+  right: "metricBox_right",
+  shadowNone: "metricBox_shadow-None",
+  shadowLight: "metricBox_shadow-Light",
+  shadowMedium: "metricBox_shadow-Medium",
+  shadowStrong: "metricBox_shadow-Strong",
+  shadowIntense: "metricBox_shadow-Intense",
+  roundNone: "metricBox_round-None",
+  roundSmall: "metricBox_round-Small",
+  roundMedium: "metricBox_round-Medium",
+  roundLarge: "metricBox_round-Large",
+  icon: "metricBox_icon",
+  content: "metricBox_content",
+  title: "metricBox_title",
+  value: "metricBox_value",
+  subtext: "metricBox_subtext"
+};
+const MetricBox = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseMetricBox, { ...props, classMap: classes });
+};
+exports.MetricBox = MetricBox;
+//# sourceMappingURL=MetricBox-DjE-rdp0.cjs.map

package/dist/core/MetricBox-DjE-rdp0.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricBox-DjE-rdp0.cjs","sources":["../../src/components/MetricBox/MetricBoxBase.tsx","../../src/components/MetricBox/core/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","import React from \"react\";\r\nimport BaseMetricBox from \"../MetricBoxBase\";\r\nimport \"./MetricBox.scss\";\r\nimport { MetricBoxProps } from \"../MetricBox.types\";\r\n\r\nconst classes = {\r\n  wrapper: \"metricBox\",\r\n  outline: \"metricBox_outline\",\r\n\r\n  primary: \"metricBox_primary\",\r\n  secondary: \"metricBox_secondary\",\r\n  tertiary: \"metricBox_tertiary\",\r\n  quaternary: \"metricBox_quaternary\",\r\n\r\n  success: \"metricBox_success\",\r\n  error: \"metricBox_error\",\r\n  warning: \"metricBox_warning\",\r\n\r\n  clear: \"metricBox_clear\",\r\n\r\n  xs: \"metricBox_xs\",\r\n  small: \"metricBox_small\",\r\n  medium: \"metricBox_medium\",\r\n  large: \"metricBox_large\",\r\n  xl: \"metricBox_xl\",\r\n\r\n  left: \"metricBox_left\",\r\n  center: \"metricBox_center\",\r\n  right: \"metricBox_right\",\r\n\r\n  shadowNone: \"metricBox_shadow-None\",\r\n  shadowLight: \"metricBox_shadow-Light\",\r\n  shadowMedium: \"metricBox_shadow-Medium\",\r\n  shadowStrong: \"metricBox_shadow-Strong\",\r\n  shadowIntense: \"metricBox_shadow-Intense\",\r\n\r\n  roundNone: \"metricBox_round-None\",\r\n  roundSmall: \"metricBox_round-Small\",\r\n  roundMedium: \"metricBox_round-Medium\",\r\n  roundLarge: \"metricBox_round-Large\",\r\n\r\n  icon: \"metricBox_icon\",\r\n  content: \"metricBox_content\",\r\n  title: \"metricBox_title\",\r\n  value: \"metricBox_value\",\r\n  subtext: \"metricBox_subtext\",\r\n};\r\n\r\nconst MetricBox: React.FC<MetricBoxProps> = (props) => {\r\n  return <BaseMetricBox {...props} classMap={classes} />;\r\n};\r\n\r\nexport default MetricBox;\r\n"],"names":["getDefaultTheme","getDefaultShadow","getDefaultRounding","getDefaultSize","useMemo","combineClassNames","capitalize","jsxs","jsx"],"mappings":"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"}

package/dist/core/MetricBox.cjs.js

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

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

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

package/dist/core/MetricBox.js

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

package/dist/core/MetricBox.js.map

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

package/dist/core/Modal-BhQJOhWV.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useId, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { C as CloseIcon } from "./CloseIcon-C3eQm4EK.js";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
+import { I as IconButton } from "./IconButton-B6cAP2hY.js";
+const BaseModal = ({
+  className = "",
+  children,
+  rounding = getDefaultRounding(),
+  shadow = getDefaultShadow(),
+  onClose,
+  "data-testid": testId = "modal",
+  IconButton: IconButton2,
+  classMap,
+  portalId = "widget-portal"
+}) => {
+  const [isMounted, setIsMounted] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [portalElement, setPortalElement] = useState(null);
+  const modalRef = useRef(null);
+  const firstFocusable = useRef(null);
+  const id = useId();
+  const labelId = `${id}-label`;
+  const descId = `${id}-desc`;
+  useEffect(() => {
+    setIsMounted(true);
+    let portal = document.getElementById(portalId);
+    if (!portal) {
+      portal = document.createElement("div");
+      portal.id = portalId;
+      document.body.appendChild(portal);
+    }
+    setPortalElement(portal);
+    document.body.classList.add("noScroll");
+    return () => {
+      document.body.classList.remove("noScroll");
+    };
+  }, [portalId]);
+  useEffect(() => {
+    if (isMounted) {
+      requestAnimationFrame(() => {
+        setIsVisible(true);
+        setTimeout(() => {
+          var _a;
+          (_a = modalRef.current) == null ? void 0 : _a.focus();
+        }, 10);
+      });
+    }
+  }, [isMounted]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") onClose();
+    if (e.key === "Tab") trapFocus(e);
+  };
+  const trapFocus = (e) => {
+    var _a;
+    const focusableEls = (_a = modalRef.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) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  const handleClose = () => {
+    setIsVisible(false);
+    setTimeout(() => onClose(), 200);
+  };
+  if (!isMounted || !portalElement) return null;
+  const contentClassName = combineClassNames(
+    classMap.content,
+    className,
+    shadow && classMap[`shadow${capitalize(shadow)}`],
+    rounding && classMap[`round${capitalize(rounding)}`]
+  );
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: combineClassNames(
+          classMap.overlay,
+          isVisible ? classMap.visible : classMap.hidden
+        ),
+        onClick: handleClose,
+        onKeyDown: handleKeyDown,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": labelId,
+        "aria-describedby": descId,
+        tabIndex: -1,
+        ref: modalRef,
+        "data-testid": testId,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: contentClassName,
+            onClick: (e) => e.stopPropagation(),
+            "data-testid": `${testId}-content`,
+            id: descId,
+            children: [
+              /* @__PURE__ */ jsx("h2", { id: labelId, className: "sr-only", children: "Modal Dialog" }),
+              /* @__PURE__ */ jsx(
+                IconButton2,
+                {
+                  ref: firstFocusable,
+                  className: classMap.closeButton,
+                  state: "error",
+                  size: "small",
+                  icon: CloseIcon,
+                  "aria-label": "Close modal",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleClose();
+                  },
+                  title: "Close",
+                  "data-testid": `${testId}-close`
+                }
+              ),
+              children
+            ]
+          }
+        )
+      }
+    ),
+    portalElement
+  );
+};
+const classes = {
+  overlay: "modal_overlay",
+  visible: "modal_visible",
+  hidden: "modal_hidden",
+  content: "modal_content",
+  closeButton: "modal_close_button",
+  shadowNone: "modal_shadow-None",
+  shadowLight: "modal_shadow-Light",
+  shadowMedium: "modal_shadow-Medium",
+  shadowStrong: "modal_shadow-Strong",
+  shadowIntense: "modal_shadow-Intense",
+  roundNone: "modal_round-None",
+  roundSmall: "modal_round-Small",
+  roundMedium: "modal_round-Medium",
+  roundLarge: "modal_round-Large"
+};
+const Modal = (props) => {
+  return /* @__PURE__ */ jsx(BaseModal, { ...props, IconButton, classMap: classes });
+};
+export {
+  Modal as M
+};
+//# sourceMappingURL=Modal-BhQJOhWV.js.map

package/dist/core/Modal-BhQJOhWV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-BhQJOhWV.js","sources":["../../src/components/Modal/ModalBase.tsx","../../src/components/Modal/core/Modal.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 { ModalProps } from \"./Modal.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 BaseModalProps extends ModalProps {\r\n  IconButton: React.ComponentType<any>;\r\n  classMap: Record<string, string>;\r\n  portalId?: string;\r\n}\r\n\r\nconst BaseModal: React.FC<BaseModalProps> = ({\r\n  className = \"\",\r\n  children,\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  onClose,\r\n  \"data-testid\": testId = \"modal\",\r\n  IconButton,\r\n  classMap,\r\n  portalId = \"widget-portal\",\r\n}) => {\r\n  const [isMounted, setIsMounted] = useState(false);\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n\r\n  const modalRef = useRef<HTMLDivElement>(null);\r\n  const firstFocusable = useRef<HTMLButtonElement>(null);\r\n\r\n  const id = useId();\r\n  const labelId = `${id}-label`;\r\n  const descId = `${id}-desc`;\r\n\r\n  useEffect(() => {\r\n    setIsMounted(true);\r\n    let portal = document.getElementById(portalId);\r\n    if (!portal) {\r\n      portal = document.createElement(\"div\");\r\n      portal.id = portalId;\r\n      document.body.appendChild(portal);\r\n    }\r\n    setPortalElement(portal);\r\n    document.body.classList.add(\"noScroll\");\r\n\r\n    return () => {\r\n      document.body.classList.remove(\"noScroll\");\r\n    };\r\n  }, [portalId]);\r\n\r\n  useEffect(() => {\r\n    if (isMounted) {\r\n      requestAnimationFrame(() => {\r\n        setIsVisible(true);\r\n        setTimeout(() => {\r\n          modalRef.current?.focus();\r\n        }, 10);\r\n      });\r\n    }\r\n  }, [isMounted]);\r\n\r\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key === \"Escape\") onClose();\r\n    if (e.key === \"Tab\") trapFocus(e);\r\n  };\r\n\r\n  const trapFocus = (e: KeyboardEvent) => {\r\n    const focusableEls = modalRef.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) {\r\n      if (document.activeElement === first) {\r\n        e.preventDefault();\r\n        last.focus();\r\n      }\r\n    } else {\r\n      if (document.activeElement === last) {\r\n        e.preventDefault();\r\n        first.focus();\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleClose = () => {\r\n    setIsVisible(false);\r\n    setTimeout(() => onClose(), 200);\r\n  };\r\n\r\n  if (!isMounted || !portalElement) return null;\r\n\r\n  const contentClassName = combineClassNames(\r\n    classMap.content,\r\n    className,\r\n    shadow && classMap[`shadow${capitalize(shadow)}`],\r\n    rounding && classMap[`round${capitalize(rounding)}`]\r\n  );\r\n\r\n  return ReactDOM.createPortal(\r\n    <div\r\n      className={combineClassNames(\r\n        classMap.overlay,\r\n        isVisible ? classMap.visible : classMap.hidden\r\n      )}\r\n      onClick={handleClose}\r\n      onKeyDown={handleKeyDown}\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby={labelId}\r\n      aria-describedby={descId}\r\n      tabIndex={-1}\r\n      ref={modalRef}\r\n      data-testid={testId}\r\n    >\r\n      <div\r\n        className={contentClassName}\r\n        onClick={(e) => e.stopPropagation()}\r\n        data-testid={`${testId}-content`}\r\n        id={descId}\r\n      >\r\n        <h2 id={labelId} className=\"sr-only\">\r\n          Modal Dialog\r\n        </h2>\r\n\r\n        <IconButton\r\n          ref={firstFocusable}\r\n          className={classMap.closeButton}\r\n          state=\"error\"\r\n          size=\"small\"\r\n          icon={CloseIcon}\r\n          aria-label=\"Close modal\"\r\n          onClick={(e: React.MouseEvent) => {\r\n            e.stopPropagation();\r\n            handleClose();\r\n          }}\r\n          title=\"Close\"\r\n          data-testid={`${testId}-close`}\r\n        />\r\n\r\n        {children}\r\n      </div>\r\n    </div>,\r\n    portalElement\r\n  );\r\n};\r\n\r\nexport default BaseModal;\r\n","import React from \"react\";\r\nimport BaseModal from \"../ModalBase\";\r\nimport \"./Modal.scss\";\r\nimport IconButton from \"../../IconButton/core/IconButton\";\r\nimport { ModalProps } from \"../Modal.types\";\r\n\r\nconst classes = {\r\n  overlay: \"modal_overlay\",\r\n  visible: \"modal_visible\",\r\n  hidden: \"modal_hidden\",\r\n  content: \"modal_content\",\r\n  closeButton: \"modal_close_button\",\r\n\r\n  shadowNone: \"modal_shadow-None\",\r\n  shadowLight: \"modal_shadow-Light\",\r\n  shadowMedium: \"modal_shadow-Medium\",\r\n  shadowStrong: \"modal_shadow-Strong\",\r\n  shadowIntense: \"modal_shadow-Intense\",\r\n\r\n  roundNone: \"modal_round-None\",\r\n  roundSmall: \"modal_round-Small\",\r\n  roundMedium: \"modal_round-Medium\",\r\n  roundLarge: \"modal_round-Large\",\r\n};\r\n\r\nconst Modal: React.FC<ModalProps> = (props) => {\r\n  return <BaseModal {...props} IconButton={IconButton} classMap={classes} />;\r\n};\r\n\r\nexport default Modal;\r\n"],"names":["IconButton"],"mappings":"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"}

package/dist/core/Modal-CI2snbvk.cjs

@@ -0,0 +1,161 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ReactDOM = require("react-dom");
+const CloseIcon = require("./CloseIcon-DSnN6ggf.cjs");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
+const IconButton = require("./IconButton-BxUXK-xn.cjs");
+const BaseModal = ({
+  className = "",
+  children,
+  rounding = borealStyleConfig.getDefaultRounding(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  onClose,
+  "data-testid": testId = "modal",
+  IconButton: IconButton2,
+  classMap,
+  portalId = "widget-portal"
+}) => {
+  const [isMounted, setIsMounted] = React.useState(false);
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [portalElement, setPortalElement] = React.useState(null);
+  const modalRef = React.useRef(null);
+  const firstFocusable = React.useRef(null);
+  const id = React.useId();
+  const labelId = `${id}-label`;
+  const descId = `${id}-desc`;
+  React.useEffect(() => {
+    setIsMounted(true);
+    let portal = document.getElementById(portalId);
+    if (!portal) {
+      portal = document.createElement("div");
+      portal.id = portalId;
+      document.body.appendChild(portal);
+    }
+    setPortalElement(portal);
+    document.body.classList.add("noScroll");
+    return () => {
+      document.body.classList.remove("noScroll");
+    };
+  }, [portalId]);
+  React.useEffect(() => {
+    if (isMounted) {
+      requestAnimationFrame(() => {
+        setIsVisible(true);
+        setTimeout(() => {
+          var _a;
+          (_a = modalRef.current) == null ? void 0 : _a.focus();
+        }, 10);
+      });
+    }
+  }, [isMounted]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") onClose();
+    if (e.key === "Tab") trapFocus(e);
+  };
+  const trapFocus = (e) => {
+    var _a;
+    const focusableEls = (_a = modalRef.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) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  const handleClose = () => {
+    setIsVisible(false);
+    setTimeout(() => onClose(), 200);
+  };
+  if (!isMounted || !portalElement) return null;
+  const contentClassName = classNames.combineClassNames(
+    classMap.content,
+    className,
+    shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+    rounding && classMap[`round${capitalize.capitalize(rounding)}`]
+  );
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: classNames.combineClassNames(
+          classMap.overlay,
+          isVisible ? classMap.visible : classMap.hidden
+        ),
+        onClick: handleClose,
+        onKeyDown: handleKeyDown,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": labelId,
+        "aria-describedby": descId,
+        tabIndex: -1,
+        ref: modalRef,
+        "data-testid": testId,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: contentClassName,
+            onClick: (e) => e.stopPropagation(),
+            "data-testid": `${testId}-content`,
+            id: descId,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: labelId, className: "sr-only", children: "Modal Dialog" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton2,
+                {
+                  ref: firstFocusable,
+                  className: classMap.closeButton,
+                  state: "error",
+                  size: "small",
+                  icon: CloseIcon.CloseIcon,
+                  "aria-label": "Close modal",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleClose();
+                  },
+                  title: "Close",
+                  "data-testid": `${testId}-close`
+                }
+              ),
+              children
+            ]
+          }
+        )
+      }
+    ),
+    portalElement
+  );
+};
+const classes = {
+  overlay: "modal_overlay",
+  visible: "modal_visible",
+  hidden: "modal_hidden",
+  content: "modal_content",
+  closeButton: "modal_close_button",
+  shadowNone: "modal_shadow-None",
+  shadowLight: "modal_shadow-Light",
+  shadowMedium: "modal_shadow-Medium",
+  shadowStrong: "modal_shadow-Strong",
+  shadowIntense: "modal_shadow-Intense",
+  roundNone: "modal_round-None",
+  roundSmall: "modal_round-Small",
+  roundMedium: "modal_round-Medium",
+  roundLarge: "modal_round-Large"
+};
+const Modal = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseModal, { ...props, IconButton: IconButton.IconButton, classMap: classes });
+};
+exports.Modal = Modal;
+//# sourceMappingURL=Modal-CI2snbvk.cjs.map

package/dist/core/Modal-CI2snbvk.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-CI2snbvk.cjs","sources":["../../src/components/Modal/ModalBase.tsx","../../src/components/Modal/core/Modal.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 { ModalProps } from \"./Modal.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 BaseModalProps extends ModalProps {\r\n  IconButton: React.ComponentType<any>;\r\n  classMap: Record<string, string>;\r\n  portalId?: string;\r\n}\r\n\r\nconst BaseModal: React.FC<BaseModalProps> = ({\r\n  className = \"\",\r\n  children,\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  onClose,\r\n  \"data-testid\": testId = \"modal\",\r\n  IconButton,\r\n  classMap,\r\n  portalId = \"widget-portal\",\r\n}) => {\r\n  const [isMounted, setIsMounted] = useState(false);\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);\r\n\r\n  const modalRef = useRef<HTMLDivElement>(null);\r\n  const firstFocusable = useRef<HTMLButtonElement>(null);\r\n\r\n  const id = useId();\r\n  const labelId = `${id}-label`;\r\n  const descId = `${id}-desc`;\r\n\r\n  useEffect(() => {\r\n    setIsMounted(true);\r\n    let portal = document.getElementById(portalId);\r\n    if (!portal) {\r\n      portal = document.createElement(\"div\");\r\n      portal.id = portalId;\r\n      document.body.appendChild(portal);\r\n    }\r\n    setPortalElement(portal);\r\n    document.body.classList.add(\"noScroll\");\r\n\r\n    return () => {\r\n      document.body.classList.remove(\"noScroll\");\r\n    };\r\n  }, [portalId]);\r\n\r\n  useEffect(() => {\r\n    if (isMounted) {\r\n      requestAnimationFrame(() => {\r\n        setIsVisible(true);\r\n        setTimeout(() => {\r\n          modalRef.current?.focus();\r\n        }, 10);\r\n      });\r\n    }\r\n  }, [isMounted]);\r\n\r\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key === \"Escape\") onClose();\r\n    if (e.key === \"Tab\") trapFocus(e);\r\n  };\r\n\r\n  const trapFocus = (e: KeyboardEvent) => {\r\n    const focusableEls = modalRef.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) {\r\n      if (document.activeElement === first) {\r\n        e.preventDefault();\r\n        last.focus();\r\n      }\r\n    } else {\r\n      if (document.activeElement === last) {\r\n        e.preventDefault();\r\n        first.focus();\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleClose = () => {\r\n    setIsVisible(false);\r\n    setTimeout(() => onClose(), 200);\r\n  };\r\n\r\n  if (!isMounted || !portalElement) return null;\r\n\r\n  const contentClassName = combineClassNames(\r\n    classMap.content,\r\n    className,\r\n    shadow && classMap[`shadow${capitalize(shadow)}`],\r\n    rounding && classMap[`round${capitalize(rounding)}`]\r\n  );\r\n\r\n  return ReactDOM.createPortal(\r\n    <div\r\n      className={combineClassNames(\r\n        classMap.overlay,\r\n        isVisible ? classMap.visible : classMap.hidden\r\n      )}\r\n      onClick={handleClose}\r\n      onKeyDown={handleKeyDown}\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby={labelId}\r\n      aria-describedby={descId}\r\n      tabIndex={-1}\r\n      ref={modalRef}\r\n      data-testid={testId}\r\n    >\r\n      <div\r\n        className={contentClassName}\r\n        onClick={(e) => e.stopPropagation()}\r\n        data-testid={`${testId}-content`}\r\n        id={descId}\r\n      >\r\n        <h2 id={labelId} className=\"sr-only\">\r\n          Modal Dialog\r\n        </h2>\r\n\r\n        <IconButton\r\n          ref={firstFocusable}\r\n          className={classMap.closeButton}\r\n          state=\"error\"\r\n          size=\"small\"\r\n          icon={CloseIcon}\r\n          aria-label=\"Close modal\"\r\n          onClick={(e: React.MouseEvent) => {\r\n            e.stopPropagation();\r\n            handleClose();\r\n          }}\r\n          title=\"Close\"\r\n          data-testid={`${testId}-close`}\r\n        />\r\n\r\n        {children}\r\n      </div>\r\n    </div>,\r\n    portalElement\r\n  );\r\n};\r\n\r\nexport default BaseModal;\r\n","import React from \"react\";\r\nimport BaseModal from \"../ModalBase\";\r\nimport \"./Modal.scss\";\r\nimport IconButton from \"../../IconButton/core/IconButton\";\r\nimport { ModalProps } from \"../Modal.types\";\r\n\r\nconst classes = {\r\n  overlay: \"modal_overlay\",\r\n  visible: \"modal_visible\",\r\n  hidden: \"modal_hidden\",\r\n  content: \"modal_content\",\r\n  closeButton: \"modal_close_button\",\r\n\r\n  shadowNone: \"modal_shadow-None\",\r\n  shadowLight: \"modal_shadow-Light\",\r\n  shadowMedium: \"modal_shadow-Medium\",\r\n  shadowStrong: \"modal_shadow-Strong\",\r\n  shadowIntense: \"modal_shadow-Intense\",\r\n\r\n  roundNone: \"modal_round-None\",\r\n  roundSmall: \"modal_round-Small\",\r\n  roundMedium: \"modal_round-Medium\",\r\n  roundLarge: \"modal_round-Large\",\r\n};\r\n\r\nconst Modal: React.FC<ModalProps> = (props) => {\r\n  return <BaseModal {...props} IconButton={IconButton} classMap={classes} />;\r\n};\r\n\r\nexport default Modal;\r\n"],"names":["getDefaultRounding","getDefaultShadow","IconButton","useState","useRef","useId","useEffect","combineClassNames","capitalize","jsx","jsxs","CloseIcon"],"mappings":"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"}