boreal-ui 0.0.31 → 0.0.32

package/dist/core/PopOver-BnOcfrAC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopOver-BnOcfrAC.js","sources":["../../src/components/PopOver/PopOverBase.tsx","../../src/components/PopOver/core/PopOver.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, JSX, useMemo, useId } from \"react\";\r\nimport { BasePopoverProps } from \"./PopOver.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BasePopover: React.FC<BasePopoverProps> = ({\r\n  trigger,\r\n  content,\r\n  placement = \"bottom\",\r\n  theme = getDefaultTheme(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  state = \"\",\r\n  className = \"\",\r\n  role = \"dialog\",\r\n  \"data-testid\": testId = \"popover\",\r\n  classMap,\r\n}): JSX.Element => {\r\n  const [open, setOpen] = useState(false);\r\n  const [dynamicPlacement, setDynamicPlacement] = useState(placement);\r\n  const popoverRef = useRef<HTMLDivElement>(null);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n  const uid = useId();\r\n  const contentId = `${uid}-content`;\r\n  const labelId = `${uid}-label`;\r\n\r\n  type PopupRole = \"dialog\" | \"menu\" | \"tooltip\";\r\n  const VALID_ROLES: PopupRole[] = [\"dialog\", \"menu\", \"tooltip\"];\r\n\r\n  function asValidRole(r?: string): PopupRole | undefined {\r\n    return (VALID_ROLES as readonly string[]).includes(r ?? \"\")\r\n      ? (r as PopupRole)\r\n      : undefined;\r\n  }\r\n\r\n  const popupRole = asValidRole(role);\r\n\r\n  const ariaHasPopup: React.AriaAttributes[\"aria-haspopup\"] =\r\n    role === \"dialog\" ? \"dialog\" : role === \"menu\" ? \"menu\" : undefined;\r\n\r\n  const triggerAria =\r\n    role === \"tooltip\"\r\n      ? { \"aria-describedby\": contentId }\r\n      : {\r\n          ...(ariaHasPopup ? { \"aria-haspopup\": ariaHasPopup } : {}),\r\n          \"aria-expanded\": open,\r\n          \"aria-controls\": contentId,\r\n        };\r\n\r\n  const toggleOpen = () => setOpen((prev) => !prev);\r\n  const close = () => {\r\n    setOpen(false);\r\n    setDynamicPlacement(placement);\r\n    triggerRef.current?.focus();\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    const handleClickOutside = (event: MouseEvent) => {\r\n      const t = event.target as Node;\r\n      if (popoverRef.current?.contains(t)) return;\r\n      if (triggerRef.current?.contains(t as Node)) return;\r\n      close();\r\n    };\r\n    document.addEventListener(\"mousedown\", handleClickOutside);\r\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n  }, [open, placement]);\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && close();\r\n    const onReflow = () => setDynamicPlacement((p) => p);\r\n    document.addEventListener(\"keydown\", onKey);\r\n    window.addEventListener(\"resize\", onReflow, { passive: true });\r\n    window.addEventListener(\"scroll\", onReflow, { passive: true });\r\n    return () => {\r\n      document.removeEventListener(\"keydown\", onKey);\r\n      window.removeEventListener(\"resize\", onReflow);\r\n      window.removeEventListener(\"scroll\", onReflow);\r\n    };\r\n  }, [open]);\r\n\r\n  useEffect(() => {\r\n    if (!open || !popoverRef.current || !triggerRef.current) return;\r\n\r\n    const triggerRect = triggerRef.current.getBoundingClientRect();\r\n    const popoverEl = popoverRef.current;\r\n\r\n    const vw = window.innerWidth;\r\n    const vh = window.innerHeight;\r\n    const spaceAbove = triggerRect.top;\r\n    const spaceBelow = vh - triggerRect.bottom;\r\n    const spaceLeft = triggerRect.left;\r\n    const spaceRight = vw - triggerRect.right;\r\n\r\n    popoverEl.style.transform = \"\";\r\n    popoverEl.style.left = \"\";\r\n    popoverEl.style.right = \"\";\r\n    popoverEl.style.top = \"\";\r\n    popoverEl.style.bottom = \"\";\r\n\r\n    let newPlacement = placement;\r\n    if (placement === \"top\" && popoverEl.offsetHeight > spaceAbove)\r\n      newPlacement = \"bottom\";\r\n    else if (placement === \"bottom\" && popoverEl.offsetHeight > spaceBelow)\r\n      newPlacement = \"top\";\r\n    else if (placement === \"left\" && popoverEl.offsetWidth > spaceLeft)\r\n      newPlacement = \"right\";\r\n    else if (placement === \"right\" && popoverEl.offsetWidth > spaceRight)\r\n      newPlacement = \"left\";\r\n\r\n    setDynamicPlacement(newPlacement);\r\n\r\n    requestAnimationFrame(() => {\r\n      const rect = popoverEl.getBoundingClientRect();\r\n      let dx = 0;\r\n      let dy = 0;\r\n      const pad = 8;\r\n\r\n      if (rect.left < pad) dx = pad - rect.left;\r\n      else if (rect.right > vw - pad) dx = vw - pad - rect.right;\r\n\r\n      if (rect.top < pad) dy = pad - rect.top;\r\n      else if (rect.bottom > vh - pad) dy = vh - pad - rect.bottom;\r\n\r\n      if (dx !== 0 || dy !== 0) {\r\n        const tx = dx !== 0 ? `translateX(${dx}px)` : \"\";\r\n        const ty = dy !== 0 ? `translateY(${dy}px)` : \"\";\r\n        popoverEl.style.transform = `${tx} ${ty}`.trim();\r\n      }\r\n    });\r\n  }, [open, placement, dynamicPlacement]);\r\n\r\n  const popoverContentClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.popover,\r\n        classMap[dynamicPlacement],\r\n        classMap[theme],\r\n        classMap[state],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className\r\n      ),\r\n    [classMap, dynamicPlacement, rounding, shadow, theme, state, className]\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    const el = popoverRef.current;\r\n    if (!el) return;\r\n    const focusable = el.querySelector<HTMLElement>(\r\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\r\n    );\r\n    (focusable ?? el).focus();\r\n  }, [open]);\r\n\r\n  return (\r\n    <div\r\n      className={combineClassNames(classMap.container, className)}\r\n      data-testid={testId}\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        className={classMap.trigger}\r\n        onClick={toggleOpen}\r\n        aria-label=\"Toggle popover\"\r\n        ref={triggerRef}\r\n        data-testid={`${testId}-trigger`}\r\n        {...triggerAria}\r\n      >\r\n        {trigger}\r\n      </button>\r\n\r\n      {open && (\r\n        <div\r\n          ref={popoverRef}\r\n          id={contentId}\r\n          role={popupRole}\r\n          aria-labelledby={labelId}\r\n          className={popoverContentClass}\r\n          data-testid={`${testId}-content`}\r\n          tabIndex={popupRole === \"tooltip\" ? undefined : -1}\r\n        >\r\n          <span id={labelId} className={classMap.srOnly ?? \"sr_only\"}>\r\n            Popover Content\r\n          </span>\r\n          {content}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nBasePopover.displayName = \"BasePopover\";\r\nexport default BasePopover;\r\n","import React from \"react\";\r\nimport BasePopover from \"../PopOverBase\";\r\nimport \"./PopOver.scss\";\r\nimport { PopoverProps } from \"../PopOver.types\";\r\n\r\nconst classes = {\r\n  container: \"popover_container\",\r\n  trigger: \"popover_trigger\",\r\n  popover: \"popover\",\r\n\r\n  top: \"popover_top\",\r\n  bottom: \"popover_bottom\",\r\n  left: \"popover_left\",\r\n  right: \"popover_right\",\r\n\r\n  primary: \"popover_primary\",\r\n  secondary: \"popover_secondary\",\r\n  tertiary: \"popover_tertiary\",\r\n  quaternary: \"popover_quaternary\",\r\n\r\n  success: \"popover_success\",\r\n  error: \"popover_error\",\r\n  warning: \"popover_warning\",\r\n\r\n  clear: \"popover_clear\",\r\n\r\n  shadowNone: \"popover_shadow-None\",\r\n  shadowLight: \"popover_shadow-Light\",\r\n  shadowMedium: \"popover_shadow-Medium\",\r\n  shadowStrong: \"popover_shadow-Strong\",\r\n  shadowIntense: \"popover_shadow-Intense\",\r\n\r\n  roundNone: \"popover_round-None\",\r\n  roundSmall: \"popover_round-Small\",\r\n  roundMedium: \"popover_round-Medium\",\r\n  roundLarge: \"popover_round-Large\",\r\n};\r\n\r\nconst Popover: React.FC<PopoverProps> = (props) => {\r\n  return <BasePopover {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Popover;\r\n"],"names":[],"mappings":"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"}

package/dist/core/PopOver-Gy7Gn9LW.cjs

@@ -0,0 +1,202 @@
+"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 BasePopover = ({
+  trigger,
+  content,
+  placement = "bottom",
+  theme = borealStyleConfig.getDefaultTheme(),
+  rounding = borealStyleConfig.getDefaultRounding(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  state = "",
+  className = "",
+  role = "dialog",
+  "data-testid": testId = "popover",
+  classMap
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const [dynamicPlacement, setDynamicPlacement] = React.useState(placement);
+  const popoverRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const uid = React.useId();
+  const contentId = `${uid}-content`;
+  const labelId = `${uid}-label`;
+  const VALID_ROLES = ["dialog", "menu", "tooltip"];
+  function asValidRole(r) {
+    return VALID_ROLES.includes(r ?? "") ? r : void 0;
+  }
+  const popupRole = asValidRole(role);
+  const ariaHasPopup = role === "dialog" ? "dialog" : role === "menu" ? "menu" : void 0;
+  const triggerAria = role === "tooltip" ? { "aria-describedby": contentId } : {
+    ...ariaHasPopup ? { "aria-haspopup": ariaHasPopup } : {},
+    "aria-expanded": open,
+    "aria-controls": contentId
+  };
+  const toggleOpen = () => setOpen((prev) => !prev);
+  const close = () => {
+    var _a;
+    setOpen(false);
+    setDynamicPlacement(placement);
+    (_a = triggerRef.current) == null ? void 0 : _a.focus();
+  };
+  React.useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const t = event.target;
+      if ((_a = popoverRef.current) == null ? void 0 : _a.contains(t)) return;
+      if ((_b = triggerRef.current) == null ? void 0 : _b.contains(t)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, placement]);
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && close();
+    const onReflow = () => setDynamicPlacement((p) => p);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("resize", onReflow, { passive: true });
+    window.addEventListener("scroll", onReflow, { passive: true });
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("resize", onReflow);
+      window.removeEventListener("scroll", onReflow);
+    };
+  }, [open]);
+  React.useEffect(() => {
+    if (!open || !popoverRef.current || !triggerRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popoverEl = popoverRef.current;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const spaceAbove = triggerRect.top;
+    const spaceBelow = vh - triggerRect.bottom;
+    const spaceLeft = triggerRect.left;
+    const spaceRight = vw - triggerRect.right;
+    popoverEl.style.transform = "";
+    popoverEl.style.left = "";
+    popoverEl.style.right = "";
+    popoverEl.style.top = "";
+    popoverEl.style.bottom = "";
+    let newPlacement = placement;
+    if (placement === "top" && popoverEl.offsetHeight > spaceAbove)
+      newPlacement = "bottom";
+    else if (placement === "bottom" && popoverEl.offsetHeight > spaceBelow)
+      newPlacement = "top";
+    else if (placement === "left" && popoverEl.offsetWidth > spaceLeft)
+      newPlacement = "right";
+    else if (placement === "right" && popoverEl.offsetWidth > spaceRight)
+      newPlacement = "left";
+    setDynamicPlacement(newPlacement);
+    requestAnimationFrame(() => {
+      const rect = popoverEl.getBoundingClientRect();
+      let dx = 0;
+      let dy = 0;
+      const pad = 8;
+      if (rect.left < pad) dx = pad - rect.left;
+      else if (rect.right > vw - pad) dx = vw - pad - rect.right;
+      if (rect.top < pad) dy = pad - rect.top;
+      else if (rect.bottom > vh - pad) dy = vh - pad - rect.bottom;
+      if (dx !== 0 || dy !== 0) {
+        const tx = dx !== 0 ? `translateX(${dx}px)` : "";
+        const ty = dy !== 0 ? `translateY(${dy}px)` : "";
+        popoverEl.style.transform = `${tx} ${ty}`.trim();
+      }
+    });
+  }, [open, placement, dynamicPlacement]);
+  const popoverContentClass = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.popover,
+      classMap[dynamicPlacement],
+      classMap[theme],
+      classMap[state],
+      shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize.capitalize(rounding)}`],
+      className
+    ),
+    [classMap, dynamicPlacement, rounding, shadow, theme, state, className]
+  );
+  React.useEffect(() => {
+    if (!open) return;
+    const el = popoverRef.current;
+    if (!el) return;
+    const focusable = el.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    (focusable ?? el).focus();
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames.combineClassNames(classMap.container, className),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: classMap.trigger,
+            onClick: toggleOpen,
+            "aria-label": "Toggle popover",
+            ref: triggerRef,
+            "data-testid": `${testId}-trigger`,
+            ...triggerAria,
+            children: trigger
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: popoverRef,
+            id: contentId,
+            role: popupRole,
+            "aria-labelledby": labelId,
+            className: popoverContentClass,
+            "data-testid": `${testId}-content`,
+            tabIndex: popupRole === "tooltip" ? void 0 : -1,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: classMap.srOnly ?? "sr_only", children: "Popover Content" }),
+              content
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+BasePopover.displayName = "BasePopover";
+const classes = {
+  container: "popover_container",
+  trigger: "popover_trigger",
+  popover: "popover",
+  top: "popover_top",
+  bottom: "popover_bottom",
+  left: "popover_left",
+  right: "popover_right",
+  primary: "popover_primary",
+  secondary: "popover_secondary",
+  tertiary: "popover_tertiary",
+  quaternary: "popover_quaternary",
+  success: "popover_success",
+  error: "popover_error",
+  warning: "popover_warning",
+  clear: "popover_clear",
+  shadowNone: "popover_shadow-None",
+  shadowLight: "popover_shadow-Light",
+  shadowMedium: "popover_shadow-Medium",
+  shadowStrong: "popover_shadow-Strong",
+  shadowIntense: "popover_shadow-Intense",
+  roundNone: "popover_round-None",
+  roundSmall: "popover_round-Small",
+  roundMedium: "popover_round-Medium",
+  roundLarge: "popover_round-Large"
+};
+const Popover = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BasePopover, { ...props, classMap: classes });
+};
+exports.Popover = Popover;
+//# sourceMappingURL=PopOver-Gy7Gn9LW.cjs.map

package/dist/core/PopOver-Gy7Gn9LW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopOver-Gy7Gn9LW.cjs","sources":["../../src/components/PopOver/PopOverBase.tsx","../../src/components/PopOver/core/PopOver.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, JSX, useMemo, useId } from \"react\";\r\nimport { BasePopoverProps } from \"./PopOver.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BasePopover: React.FC<BasePopoverProps> = ({\r\n  trigger,\r\n  content,\r\n  placement = \"bottom\",\r\n  theme = getDefaultTheme(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  state = \"\",\r\n  className = \"\",\r\n  role = \"dialog\",\r\n  \"data-testid\": testId = \"popover\",\r\n  classMap,\r\n}): JSX.Element => {\r\n  const [open, setOpen] = useState(false);\r\n  const [dynamicPlacement, setDynamicPlacement] = useState(placement);\r\n  const popoverRef = useRef<HTMLDivElement>(null);\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n  const uid = useId();\r\n  const contentId = `${uid}-content`;\r\n  const labelId = `${uid}-label`;\r\n\r\n  type PopupRole = \"dialog\" | \"menu\" | \"tooltip\";\r\n  const VALID_ROLES: PopupRole[] = [\"dialog\", \"menu\", \"tooltip\"];\r\n\r\n  function asValidRole(r?: string): PopupRole | undefined {\r\n    return (VALID_ROLES as readonly string[]).includes(r ?? \"\")\r\n      ? (r as PopupRole)\r\n      : undefined;\r\n  }\r\n\r\n  const popupRole = asValidRole(role);\r\n\r\n  const ariaHasPopup: React.AriaAttributes[\"aria-haspopup\"] =\r\n    role === \"dialog\" ? \"dialog\" : role === \"menu\" ? \"menu\" : undefined;\r\n\r\n  const triggerAria =\r\n    role === \"tooltip\"\r\n      ? { \"aria-describedby\": contentId }\r\n      : {\r\n          ...(ariaHasPopup ? { \"aria-haspopup\": ariaHasPopup } : {}),\r\n          \"aria-expanded\": open,\r\n          \"aria-controls\": contentId,\r\n        };\r\n\r\n  const toggleOpen = () => setOpen((prev) => !prev);\r\n  const close = () => {\r\n    setOpen(false);\r\n    setDynamicPlacement(placement);\r\n    triggerRef.current?.focus();\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    const handleClickOutside = (event: MouseEvent) => {\r\n      const t = event.target as Node;\r\n      if (popoverRef.current?.contains(t)) return;\r\n      if (triggerRef.current?.contains(t as Node)) return;\r\n      close();\r\n    };\r\n    document.addEventListener(\"mousedown\", handleClickOutside);\r\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n  }, [open, placement]);\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && close();\r\n    const onReflow = () => setDynamicPlacement((p) => p);\r\n    document.addEventListener(\"keydown\", onKey);\r\n    window.addEventListener(\"resize\", onReflow, { passive: true });\r\n    window.addEventListener(\"scroll\", onReflow, { passive: true });\r\n    return () => {\r\n      document.removeEventListener(\"keydown\", onKey);\r\n      window.removeEventListener(\"resize\", onReflow);\r\n      window.removeEventListener(\"scroll\", onReflow);\r\n    };\r\n  }, [open]);\r\n\r\n  useEffect(() => {\r\n    if (!open || !popoverRef.current || !triggerRef.current) return;\r\n\r\n    const triggerRect = triggerRef.current.getBoundingClientRect();\r\n    const popoverEl = popoverRef.current;\r\n\r\n    const vw = window.innerWidth;\r\n    const vh = window.innerHeight;\r\n    const spaceAbove = triggerRect.top;\r\n    const spaceBelow = vh - triggerRect.bottom;\r\n    const spaceLeft = triggerRect.left;\r\n    const spaceRight = vw - triggerRect.right;\r\n\r\n    popoverEl.style.transform = \"\";\r\n    popoverEl.style.left = \"\";\r\n    popoverEl.style.right = \"\";\r\n    popoverEl.style.top = \"\";\r\n    popoverEl.style.bottom = \"\";\r\n\r\n    let newPlacement = placement;\r\n    if (placement === \"top\" && popoverEl.offsetHeight > spaceAbove)\r\n      newPlacement = \"bottom\";\r\n    else if (placement === \"bottom\" && popoverEl.offsetHeight > spaceBelow)\r\n      newPlacement = \"top\";\r\n    else if (placement === \"left\" && popoverEl.offsetWidth > spaceLeft)\r\n      newPlacement = \"right\";\r\n    else if (placement === \"right\" && popoverEl.offsetWidth > spaceRight)\r\n      newPlacement = \"left\";\r\n\r\n    setDynamicPlacement(newPlacement);\r\n\r\n    requestAnimationFrame(() => {\r\n      const rect = popoverEl.getBoundingClientRect();\r\n      let dx = 0;\r\n      let dy = 0;\r\n      const pad = 8;\r\n\r\n      if (rect.left < pad) dx = pad - rect.left;\r\n      else if (rect.right > vw - pad) dx = vw - pad - rect.right;\r\n\r\n      if (rect.top < pad) dy = pad - rect.top;\r\n      else if (rect.bottom > vh - pad) dy = vh - pad - rect.bottom;\r\n\r\n      if (dx !== 0 || dy !== 0) {\r\n        const tx = dx !== 0 ? `translateX(${dx}px)` : \"\";\r\n        const ty = dy !== 0 ? `translateY(${dy}px)` : \"\";\r\n        popoverEl.style.transform = `${tx} ${ty}`.trim();\r\n      }\r\n    });\r\n  }, [open, placement, dynamicPlacement]);\r\n\r\n  const popoverContentClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.popover,\r\n        classMap[dynamicPlacement],\r\n        classMap[theme],\r\n        classMap[state],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className\r\n      ),\r\n    [classMap, dynamicPlacement, rounding, shadow, theme, state, className]\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    const el = popoverRef.current;\r\n    if (!el) return;\r\n    const focusable = el.querySelector<HTMLElement>(\r\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\r\n    );\r\n    (focusable ?? el).focus();\r\n  }, [open]);\r\n\r\n  return (\r\n    <div\r\n      className={combineClassNames(classMap.container, className)}\r\n      data-testid={testId}\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        className={classMap.trigger}\r\n        onClick={toggleOpen}\r\n        aria-label=\"Toggle popover\"\r\n        ref={triggerRef}\r\n        data-testid={`${testId}-trigger`}\r\n        {...triggerAria}\r\n      >\r\n        {trigger}\r\n      </button>\r\n\r\n      {open && (\r\n        <div\r\n          ref={popoverRef}\r\n          id={contentId}\r\n          role={popupRole}\r\n          aria-labelledby={labelId}\r\n          className={popoverContentClass}\r\n          data-testid={`${testId}-content`}\r\n          tabIndex={popupRole === \"tooltip\" ? undefined : -1}\r\n        >\r\n          <span id={labelId} className={classMap.srOnly ?? \"sr_only\"}>\r\n            Popover Content\r\n          </span>\r\n          {content}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nBasePopover.displayName = \"BasePopover\";\r\nexport default BasePopover;\r\n","import React from \"react\";\r\nimport BasePopover from \"../PopOverBase\";\r\nimport \"./PopOver.scss\";\r\nimport { PopoverProps } from \"../PopOver.types\";\r\n\r\nconst classes = {\r\n  container: \"popover_container\",\r\n  trigger: \"popover_trigger\",\r\n  popover: \"popover\",\r\n\r\n  top: \"popover_top\",\r\n  bottom: \"popover_bottom\",\r\n  left: \"popover_left\",\r\n  right: \"popover_right\",\r\n\r\n  primary: \"popover_primary\",\r\n  secondary: \"popover_secondary\",\r\n  tertiary: \"popover_tertiary\",\r\n  quaternary: \"popover_quaternary\",\r\n\r\n  success: \"popover_success\",\r\n  error: \"popover_error\",\r\n  warning: \"popover_warning\",\r\n\r\n  clear: \"popover_clear\",\r\n\r\n  shadowNone: \"popover_shadow-None\",\r\n  shadowLight: \"popover_shadow-Light\",\r\n  shadowMedium: \"popover_shadow-Medium\",\r\n  shadowStrong: \"popover_shadow-Strong\",\r\n  shadowIntense: \"popover_shadow-Intense\",\r\n\r\n  roundNone: \"popover_round-None\",\r\n  roundSmall: \"popover_round-Small\",\r\n  roundMedium: \"popover_round-Medium\",\r\n  roundLarge: \"popover_round-Large\",\r\n};\r\n\r\nconst Popover: React.FC<PopoverProps> = (props) => {\r\n  return <BasePopover {...props} classMap={classes} />;\r\n};\r\n\r\nexport default Popover;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","useState","useRef","useId","useEffect","useMemo","combineClassNames","capitalize","jsxs","jsx"],"mappings":"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"}

package/dist/core/PopOver.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const PopOver = require("./PopOver-BdZXa2hs.cjs");
+const PopOver = require("./PopOver-Gy7Gn9LW.cjs");
 module.exports = PopOver.Popover;
 //# sourceMappingURL=PopOver.cjs.js.map

package/dist/core/PopOver.js

@@ -1,4 +1,4 @@
-import { P } from "./PopOver-C6AnRNop.js";
+import { P } from "./PopOver-BnOcfrAC.js";
 export {
   P as default
 };

package/dist/core/{ProgressBar-CuIHF5N0.js → ProgressBar-BAbEjBvm.js}

@@ -17,7 +17,9 @@ const BaseProgressBar = ({
   "data-testid": testId = "progressbar",
   classMap
 }) => {
-  const value = Math.round(progress);
+  const numeric = Number(progress);
+  const clamped = Number.isFinite(numeric) ? Math.min(100, Math.max(0, numeric)) : 0;
+  const value = Math.round(clamped);
   const wrapperClass = useMemo(
     () => combineClassNames(
       classMap.container,
@@ -33,11 +35,11 @@ const BaseProgressBar = ({
       classMap.bar,
       classMap[theme],
       classMap[state],
-      animated ? classMap.animated : "",
+      animated && classMap.animated,
       rounding && classMap[`round${capitalize(rounding)}`],
-      indeterminate ? classMap.indeterminate : ""
+      indeterminate && classMap.indeterminate
     ),
-    [classMap, theme, state, rounding, indeterminate]
+    [classMap, theme, state, rounding, indeterminate, animated]
   );
   return /* @__PURE__ */ jsx(
     "div",
@@ -47,21 +49,22 @@ const BaseProgressBar = ({
       "aria-label": ariaLabel,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuenow": !indeterminate ? value : void 0,
-      "aria-valuetext": !indeterminate ? `${value}% complete` : "Loading",
+      "aria-valuenow": indeterminate ? void 0 : value,
+      "aria-valuetext": indeterminate ? "Loading" : `${value}% complete`,
       "aria-busy": indeterminate || void 0,
       "data-testid": testId,
       children: /* @__PURE__ */ jsx(
         "div",
         {
           className: barClass,
-          style: { width: indeterminate ? "100%" : `${value}%` },
+          style: { width: indeterminate ? void 0 : `${value}%` },
           "data-testid": `${testId}-bar`
         }
       )
     }
   );
 };
+BaseProgressBar.displayName = "BaseProgressBar";
 const classes = {
   container: "progress_container",
   bar: "progress_bar",
@@ -96,4 +99,4 @@ const ProgressBar = (props) => {
 export {
   ProgressBar as P
 };
-//# sourceMappingURL=ProgressBar-CuIHF5N0.js.map
+//# sourceMappingURL=ProgressBar-BAbEjBvm.js.map

package/dist/core/ProgressBar-BAbEjBvm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar-BAbEjBvm.js","sources":["../../src/components/ProgressBar/ProgressBarBase.tsx","../../src/components/ProgressBar/core/ProgressBar.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\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\nimport { BaseProgressBarProps } from \"./ProgressBar.types\";\r\n\r\nconst BaseProgressBar: React.FC<BaseProgressBarProps> = ({\r\n  progress = 0,\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  size = getDefaultSize(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  animated = true,\r\n  indeterminate = false,\r\n  className = \"\",\r\n  ariaLabel = \"Progress\",\r\n  \"data-testid\": testId = \"progressbar\",\r\n  classMap,\r\n}) => {\r\n  const numeric = Number(progress);\r\n  const clamped = Number.isFinite(numeric)\r\n    ? Math.min(100, Math.max(0, numeric))\r\n    : 0;\r\n  const value = Math.round(clamped);\r\n\r\n  const wrapperClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.container,\r\n        classMap[size],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className\r\n      ),\r\n    [classMap, size, shadow, rounding, className]\r\n  );\r\n\r\n  const barClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.bar,\r\n        classMap[theme],\r\n        classMap[state],\r\n        animated && classMap.animated,\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        indeterminate && classMap.indeterminate\r\n      ),\r\n    [classMap, theme, state, rounding, indeterminate, animated]\r\n  );\r\n\r\n  return (\r\n    <div\r\n      className={wrapperClass}\r\n      role=\"progressbar\"\r\n      aria-label={ariaLabel}\r\n      aria-valuemin={0}\r\n      aria-valuemax={100}\r\n      aria-valuenow={indeterminate ? undefined : value}\r\n      aria-valuetext={indeterminate ? \"Loading\" : `${value}% complete`}\r\n      aria-busy={indeterminate || undefined}\r\n      data-testid={testId}\r\n    >\r\n      <div\r\n        className={barClass}\r\n        style={{ width: indeterminate ? undefined : `${value}%` }}\r\n        data-testid={`${testId}-bar`}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nBaseProgressBar.displayName = \"BaseProgressBar\";\r\nexport default BaseProgressBar;\r\n","import React from \"react\";\r\nimport BaseProgressBar from \"../ProgressBarBase\";\r\nimport \"./ProgressBar.scss\";\r\nimport { ProgressBarProps } from \"../ProgressBar.types\";\r\n\r\nconst classes = {\r\n  container: \"progress_container\",\r\n  bar: \"progress_bar\",\r\n\r\n  primary: \"progress_primary\",\r\n  secondary: \"progress_secondary\",\r\n  tertiary: \"progress_tertiary\",\r\n  quaternary: \"progress_quaternary\",\r\n\r\n  success: \"progress_success\",\r\n  error: \"progress_error\",\r\n  warning: \"progress_warning\",\r\n\r\n  clear: \"progress_clear\",\r\n\r\n  xs: \"progress_xs\",\r\n  xl: \"progress_xl\",\r\n  small: \"progress_small\",\r\n  medium: \"progress_medium\",\r\n  large: \"progress_large\",\r\n\r\n  shadowNone: \"progress_shadow-None\",\r\n  shadowLight: \"progress_shadow-Light\",\r\n  shadowMedium: \"progress_shadow-Medium\",\r\n  shadowStrong: \"progress_shadow-Strong\",\r\n  shadowIntense: \"progress_shadow-Intense\",\r\n\r\n  roundNone: \"progress_round-None\",\r\n  roundSmall: \"progress_round-Small\",\r\n  roundMedium: \"progress_round-Medium\",\r\n  roundLarge: \"progress_round-Large\",\r\n\r\n  animated: \"progress_animated\",\r\n  indeterminate: \"progress_indeterminate\",\r\n};\r\n\r\nconst ProgressBar: React.FC<ProgressBarProps> = (props) => {\r\n  return <BaseProgressBar {...props} classMap={classes} />;\r\n};\r\n\r\nexport default ProgressBar;\r\n"],"names":[],"mappings":";;;;;AAWA,MAAM,kBAAkD,CAAC;AAAA,EACvD,WAAW;AAAA,EACX,QAAQ,gBAAA;AAAA,EACR,QAAQ;AAAA,EACR,OAAO,eAAA;AAAA,EACP,WAAW,mBAAA;AAAA,EACX,SAAS,iBAAA;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe,SAAS;AAAA,EACxB;AACF,MAAM;AACJ,QAAM,UAAU,OAAO,QAAQ;AAC/B,QAAM,UAAU,OAAO,SAAS,OAAO,IACnC,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAClC;AACJ,QAAM,QAAQ,KAAK,MAAM,OAAO;AAEhC,QAAM,eAAe;AAAA,IACnB,MACE;AAAA,MACE,SAAS;AAAA,MACT,SAAS,IAAI;AAAA,MACb,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,MAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,MACnD;AAAA,IAAA;AAAA,IAEJ,CAAC,UAAU,MAAM,QAAQ,UAAU,SAAS;AAAA,EAAA;AAG9C,QAAM,WAAW;AAAA,IACf,MACE;AAAA,MACE,SAAS;AAAA,MACT,SAAS,KAAK;AAAA,MACd,SAAS,KAAK;AAAA,MACd,YAAY,SAAS;AAAA,MACrB,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,MACnD,iBAAiB,SAAS;AAAA,IAAA;AAAA,IAE9B,CAAC,UAAU,OAAO,OAAO,UAAU,eAAe,QAAQ;AAAA,EAAA;AAG5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,gBAAgB,SAAY;AAAA,MAC3C,kBAAgB,gBAAgB,YAAY,GAAG,KAAK;AAAA,MACpD,aAAW,iBAAiB;AAAA,MAC5B,eAAa;AAAA,MAEb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,UACX,OAAO,EAAE,OAAO,gBAAgB,SAAY,GAAG,KAAK,IAAA;AAAA,UACpD,eAAa,GAAG,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACxB;AAAA,EAAA;AAGN;AAEA,gBAAgB,cAAc;ACxE9B,MAAM,UAAU;AAAA,EACd,WAAW;AAAA,EACX,KAAK;AAAA,EAEL,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EAET,OAAO;AAAA,EAEP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EAEP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AAAA,EAEZ,UAAU;AAAA,EACV,eAAe;AACjB;AAEA,MAAM,cAA0C,CAAC,UAAU;AACzD,SAAO,oBAAC,iBAAA,EAAiB,GAAG,OAAO,UAAU,SAAS;AACxD;"}

package/dist/core/{ProgressBar-PiSFvLwa.cjs → ProgressBar-QkROTKv6.cjs}

@@ -18,7 +18,9 @@ const BaseProgressBar = ({
   "data-testid": testId = "progressbar",
   classMap
 }) => {
-  const value = Math.round(progress);
+  const numeric = Number(progress);
+  const clamped = Number.isFinite(numeric) ? Math.min(100, Math.max(0, numeric)) : 0;
+  const value = Math.round(clamped);
   const wrapperClass = React.useMemo(
     () => classNames.combineClassNames(
       classMap.container,
@@ -34,11 +36,11 @@ const BaseProgressBar = ({
       classMap.bar,
       classMap[theme],
       classMap[state],
-      animated ? classMap.animated : "",
+      animated && classMap.animated,
       rounding && classMap[`round${capitalize.capitalize(rounding)}`],
-      indeterminate ? classMap.indeterminate : ""
+      indeterminate && classMap.indeterminate
     ),
-    [classMap, theme, state, rounding, indeterminate]
+    [classMap, theme, state, rounding, indeterminate, animated]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -48,21 +50,22 @@ const BaseProgressBar = ({
       "aria-label": ariaLabel,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuenow": !indeterminate ? value : void 0,
-      "aria-valuetext": !indeterminate ? `${value}% complete` : "Loading",
+      "aria-valuenow": indeterminate ? void 0 : value,
+      "aria-valuetext": indeterminate ? "Loading" : `${value}% complete`,
       "aria-busy": indeterminate || void 0,
       "data-testid": testId,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: barClass,
-          style: { width: indeterminate ? "100%" : `${value}%` },
+          style: { width: indeterminate ? void 0 : `${value}%` },
           "data-testid": `${testId}-bar`
         }
       )
     }
   );
 };
+BaseProgressBar.displayName = "BaseProgressBar";
 const classes = {
   container: "progress_container",
   bar: "progress_bar",
@@ -95,4 +98,4 @@ const ProgressBar = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(BaseProgressBar, { ...props, classMap: classes });
 };
 exports.ProgressBar = ProgressBar;
-//# sourceMappingURL=ProgressBar-PiSFvLwa.cjs.map
+//# sourceMappingURL=ProgressBar-QkROTKv6.cjs.map

package/dist/core/ProgressBar-QkROTKv6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar-QkROTKv6.cjs","sources":["../../src/components/ProgressBar/ProgressBarBase.tsx","../../src/components/ProgressBar/core/ProgressBar.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\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\nimport { BaseProgressBarProps } from \"./ProgressBar.types\";\r\n\r\nconst BaseProgressBar: React.FC<BaseProgressBarProps> = ({\r\n  progress = 0,\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  size = getDefaultSize(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  animated = true,\r\n  indeterminate = false,\r\n  className = \"\",\r\n  ariaLabel = \"Progress\",\r\n  \"data-testid\": testId = \"progressbar\",\r\n  classMap,\r\n}) => {\r\n  const numeric = Number(progress);\r\n  const clamped = Number.isFinite(numeric)\r\n    ? Math.min(100, Math.max(0, numeric))\r\n    : 0;\r\n  const value = Math.round(clamped);\r\n\r\n  const wrapperClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.container,\r\n        classMap[size],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        className\r\n      ),\r\n    [classMap, size, shadow, rounding, className]\r\n  );\r\n\r\n  const barClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.bar,\r\n        classMap[theme],\r\n        classMap[state],\r\n        animated && classMap.animated,\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        indeterminate && classMap.indeterminate\r\n      ),\r\n    [classMap, theme, state, rounding, indeterminate, animated]\r\n  );\r\n\r\n  return (\r\n    <div\r\n      className={wrapperClass}\r\n      role=\"progressbar\"\r\n      aria-label={ariaLabel}\r\n      aria-valuemin={0}\r\n      aria-valuemax={100}\r\n      aria-valuenow={indeterminate ? undefined : value}\r\n      aria-valuetext={indeterminate ? \"Loading\" : `${value}% complete`}\r\n      aria-busy={indeterminate || undefined}\r\n      data-testid={testId}\r\n    >\r\n      <div\r\n        className={barClass}\r\n        style={{ width: indeterminate ? undefined : `${value}%` }}\r\n        data-testid={`${testId}-bar`}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nBaseProgressBar.displayName = \"BaseProgressBar\";\r\nexport default BaseProgressBar;\r\n","import React from \"react\";\r\nimport BaseProgressBar from \"../ProgressBarBase\";\r\nimport \"./ProgressBar.scss\";\r\nimport { ProgressBarProps } from \"../ProgressBar.types\";\r\n\r\nconst classes = {\r\n  container: \"progress_container\",\r\n  bar: \"progress_bar\",\r\n\r\n  primary: \"progress_primary\",\r\n  secondary: \"progress_secondary\",\r\n  tertiary: \"progress_tertiary\",\r\n  quaternary: \"progress_quaternary\",\r\n\r\n  success: \"progress_success\",\r\n  error: \"progress_error\",\r\n  warning: \"progress_warning\",\r\n\r\n  clear: \"progress_clear\",\r\n\r\n  xs: \"progress_xs\",\r\n  xl: \"progress_xl\",\r\n  small: \"progress_small\",\r\n  medium: \"progress_medium\",\r\n  large: \"progress_large\",\r\n\r\n  shadowNone: \"progress_shadow-None\",\r\n  shadowLight: \"progress_shadow-Light\",\r\n  shadowMedium: \"progress_shadow-Medium\",\r\n  shadowStrong: \"progress_shadow-Strong\",\r\n  shadowIntense: \"progress_shadow-Intense\",\r\n\r\n  roundNone: \"progress_round-None\",\r\n  roundSmall: \"progress_round-Small\",\r\n  roundMedium: \"progress_round-Medium\",\r\n  roundLarge: \"progress_round-Large\",\r\n\r\n  animated: \"progress_animated\",\r\n  indeterminate: \"progress_indeterminate\",\r\n};\r\n\r\nconst ProgressBar: React.FC<ProgressBarProps> = (props) => {\r\n  return <BaseProgressBar {...props} classMap={classes} />;\r\n};\r\n\r\nexport default ProgressBar;\r\n"],"names":["getDefaultTheme","getDefaultSize","getDefaultRounding","getDefaultShadow","useMemo","combineClassNames","capitalize","jsx"],"mappings":";;;;;;AAWA,MAAM,kBAAkD,CAAC;AAAA,EACvD,WAAW;AAAA,EACX,QAAQA,kBAAAA,gBAAA;AAAA,EACR,QAAQ;AAAA,EACR,OAAOC,kBAAAA,eAAA;AAAA,EACP,WAAWC,kBAAAA,mBAAA;AAAA,EACX,SAASC,kBAAAA,iBAAA;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe,SAAS;AAAA,EACxB;AACF,MAAM;AACJ,QAAM,UAAU,OAAO,QAAQ;AAC/B,QAAM,UAAU,OAAO,SAAS,OAAO,IACnC,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAClC;AACJ,QAAM,QAAQ,KAAK,MAAM,OAAO;AAEhC,QAAM,eAAeC,MAAAA;AAAAA,IACnB,MACEC,WAAAA;AAAAA,MACE,SAAS;AAAA,MACT,SAAS,IAAI;AAAA,MACb,UAAU,SAAS,SAASC,WAAAA,WAAW,MAAM,CAAC,EAAE;AAAA,MAChD,YAAY,SAAS,QAAQA,WAAAA,WAAW,QAAQ,CAAC,EAAE;AAAA,MACnD;AAAA,IAAA;AAAA,IAEJ,CAAC,UAAU,MAAM,QAAQ,UAAU,SAAS;AAAA,EAAA;AAG9C,QAAM,WAAWF,MAAAA;AAAAA,IACf,MACEC,WAAAA;AAAAA,MACE,SAAS;AAAA,MACT,SAAS,KAAK;AAAA,MACd,SAAS,KAAK;AAAA,MACd,YAAY,SAAS;AAAA,MACrB,YAAY,SAAS,QAAQC,WAAAA,WAAW,QAAQ,CAAC,EAAE;AAAA,MACnD,iBAAiB,SAAS;AAAA,IAAA;AAAA,IAE9B,CAAC,UAAU,OAAO,OAAO,UAAU,eAAe,QAAQ;AAAA,EAAA;AAG5D,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,gBAAgB,SAAY;AAAA,MAC3C,kBAAgB,gBAAgB,YAAY,GAAG,KAAK;AAAA,MACpD,aAAW,iBAAiB;AAAA,MAC5B,eAAa;AAAA,MAEb,UAAAA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,UACX,OAAO,EAAE,OAAO,gBAAgB,SAAY,GAAG,KAAK,IAAA;AAAA,UACpD,eAAa,GAAG,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACxB;AAAA,EAAA;AAGN;AAEA,gBAAgB,cAAc;ACxE9B,MAAM,UAAU;AAAA,EACd,WAAW;AAAA,EACX,KAAK;AAAA,EAEL,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EAET,OAAO;AAAA,EAEP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EAEP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AAAA,EAEZ,UAAU;AAAA,EACV,eAAe;AACjB;AAEA,MAAM,cAA0C,CAAC,UAAU;AACzD,SAAOA,2BAAAA,IAAC,iBAAA,EAAiB,GAAG,OAAO,UAAU,SAAS;AACxD;;"}

package/dist/core/ProgressBar.cjs.js

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

package/dist/core/ProgressBar.js

@@ -1,4 +1,4 @@
-import { P } from "./ProgressBar-CuIHF5N0.js";
+import { P } from "./ProgressBar-BAbEjBvm.js";
 export {
   P as default
 };

package/dist/core/{RadioButton-DTPBlw1t.js → RadioButton-B8QehL7o.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { forwardRef, useMemo } from "react";
+import React, { forwardRef, useId, useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
 import { d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
@@ -9,27 +9,31 @@ const BaseRadioButton = forwardRef(
     value,
     checked,
     onChange,
+    name,
     theme = getDefaultTheme(),
     rounding = getDefaultRounding(),
     shadow = getDefaultShadow(),
     state = "",
     disabled = false,
     className = "",
+    id,
     "data-testid": testId = "radio-button",
     classMap,
     ...props
   }, ref) => {
+    const uid = useId();
+    const inputId = id ?? `${testId}-input-${uid}`;
+    const labelId = `${testId}-label-${uid}`;
     const handleChange = (e) => {
-      if (!disabled) {
-        onChange(e.target.value);
-      }
+      if (disabled) return;
+      if (e.target.checked) onChange(e.target.value);
     };
     const wrapperClasses = useMemo(
       () => combineClassNames(
         classMap.wrapper,
         classMap[theme],
         classMap[state],
-        disabled ? classMap.disabled : "",
+        disabled && classMap.disabled,
         className
       ),
       [classMap, theme, state, disabled, className]
@@ -42,42 +46,50 @@ const BaseRadioButton = forwardRef(
       ),
       [classMap, rounding, shadow]
     );
-    const labelId = `${testId}-label`;
-    return /* @__PURE__ */ jsxs("label", { className: wrapperClasses, "data-testid": `${testId}-wrapper`, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          type: "radio",
-          id: `${testId}-input`,
-          className: classMap.input,
-          value,
-          checked,
-          onChange: handleChange,
-          disabled,
-          "aria-labelledby": labelId,
-          "data-testid": testId,
-          ...props
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: radioClasses,
-          "aria-hidden": "true",
-          "data-testid": `${testId}-circle`
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          id: labelId,
-          className: classMap.label,
-          "data-testid": `${testId}-label`,
-          children: label
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: wrapperClasses,
+        "data-testid": `${testId}-wrapper`,
+        htmlFor: inputId,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              id: inputId,
+              name,
+              className: classMap.input,
+              value,
+              checked,
+              onChange: handleChange,
+              disabled,
+              "aria-labelledby": label ? labelId : void 0,
+              "data-testid": testId,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: radioClasses,
+              "aria-hidden": "true",
+              "data-testid": `${testId}-circle`
+            }
+          ),
+          label && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: labelId,
+              className: classMap.label,
+              "data-testid": `${testId}-label`,
+              children: label
+            }
+          )
+        ]
+      }
+    );
   }
 );
 BaseRadioButton.displayName = "BaseRadioButton";
@@ -112,4 +124,4 @@ RadioButton.displayName = "RadioButton";
 export {
   RadioButton as R
 };
-//# sourceMappingURL=RadioButton-DTPBlw1t.js.map
+//# sourceMappingURL=RadioButton-B8QehL7o.js.map

package/dist/core/RadioButton-B8QehL7o.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton-B8QehL7o.js","sources":["../../src/components/RadioButton/RadioButtonBase.tsx","../../src/components/RadioButton/core/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useId } from \"react\";\r\nimport { BaseRadioButtonProps } from \"./RadioButton.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseRadioButton = forwardRef<HTMLInputElement, BaseRadioButtonProps>(\r\n  (\r\n    {\r\n      label,\r\n      value,\r\n      checked,\r\n      onChange,\r\n      name,\r\n      theme = getDefaultTheme(),\r\n      rounding = getDefaultRounding(),\r\n      shadow = getDefaultShadow(),\r\n      state = \"\",\r\n      disabled = false,\r\n      className = \"\",\r\n      id,\r\n      \"data-testid\": testId = \"radio-button\",\r\n      classMap,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const uid = useId();\r\n    const inputId = id ?? `${testId}-input-${uid}`;\r\n    const labelId = `${testId}-label-${uid}`;\r\n\r\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n      if (disabled) return;\r\n      if (e.target.checked) onChange(e.target.value);\r\n    };\r\n\r\n    const wrapperClasses = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.wrapper,\r\n          classMap[theme],\r\n          classMap[state],\r\n          disabled && classMap.disabled,\r\n          className\r\n        ),\r\n      [classMap, theme, state, disabled, className]\r\n    );\r\n\r\n    const radioClasses = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.circle,\r\n          shadow && classMap[`shadow${capitalize(shadow)}`],\r\n          rounding && classMap[`round${capitalize(rounding)}`]\r\n        ),\r\n      [classMap, rounding, shadow]\r\n    );\r\n\r\n    return (\r\n      <label\r\n        className={wrapperClasses}\r\n        data-testid={`${testId}-wrapper`}\r\n        htmlFor={inputId}\r\n      >\r\n        <input\r\n          ref={ref}\r\n          type=\"radio\"\r\n          id={inputId}\r\n          name={name}\r\n          className={classMap.input}\r\n          value={value}\r\n          checked={checked}\r\n          onChange={handleChange}\r\n          disabled={disabled}\r\n          aria-labelledby={label ? labelId : undefined}\r\n          data-testid={testId}\r\n          {...props}\r\n        />\r\n        <span\r\n          className={radioClasses}\r\n          aria-hidden=\"true\"\r\n          data-testid={`${testId}-circle`}\r\n        />\r\n        {label && (\r\n          <span\r\n            id={labelId}\r\n            className={classMap.label}\r\n            data-testid={`${testId}-label`}\r\n          >\r\n            {label}\r\n          </span>\r\n        )}\r\n      </label>\r\n    );\r\n  }\r\n);\r\n\r\nBaseRadioButton.displayName = \"BaseRadioButton\";\r\nexport default BaseRadioButton;\r\n","import React from \"react\";\r\nimport BaseRadioButton from \"../RadioButtonBase\";\r\nimport \"./RadioButton.scss\";\r\nimport { RadioButtonProps } from \"../RadioButton.types\";\r\n\r\nconst classes = {\r\n  wrapper: \"radio_wrapper\",\r\n  input: \"radio_input\",\r\n  circle: \"radio_circle\",\r\n  label: \"radio_label\",\r\n  disabled: \"radio_disabled\",\r\n\r\n  primary: \"radio_primary\",\r\n  secondary: \"radio_secondary\",\r\n  tertiary: \"radio_tertiary\",\r\n  quaternary: \"radio_quaternary\",\r\n\r\n  success: \"radio_success\",\r\n  error: \"radio_error\",\r\n  warning: \"radio_warning\",\r\n\r\n  clear: \"radio_clear\",\r\n\r\n  shadowNone: \"radio_shadow-None\",\r\n  shadowLight: \"radio_shadow-Light\",\r\n  shadowMedium: \"radio_shadow-Medium\",\r\n  shadowStrong: \"radio_shadow-Strong\",\r\n  shadowIntense: \"radio_shadow-Intense\",\r\n\r\n  roundNone: \"radio_round-None\",\r\n  roundSmall: \"radio_round-Small\",\r\n  roundMedium: \"radio_round-Medium\",\r\n  roundLarge: \"radio_round-Large\",\r\n};\r\n\r\nconst RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(\r\n  (props, ref) => <BaseRadioButton {...props} ref={ref} classMap={classes} />\r\n);\r\n\r\nRadioButton.displayName = \"RadioButton\";\r\nexport default RadioButton;\r\n"],"names":[],"mappings":";;;;;AAUA,MAAM,kBAAkB;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,gBAAA;AAAA,IACR,WAAW,mBAAA;AAAA,IACX,SAAS,iBAAA;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA,eAAe,SAAS;AAAA,IACxB;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,MAAM,MAAA;AACZ,UAAM,UAAU,MAAM,GAAG,MAAM,UAAU,GAAG;AAC5C,UAAM,UAAU,GAAG,MAAM,UAAU,GAAG;AAEtC,UAAM,eAAe,CAAC,MAA2C;AAC/D,UAAI,SAAU;AACd,UAAI,EAAE,OAAO,QAAS,UAAS,EAAE,OAAO,KAAK;AAAA,IAC/C;AAEA,UAAM,iBAAiB;AAAA,MACrB,MACE;AAAA,QACE,SAAS;AAAA,QACT,SAAS,KAAK;AAAA,QACd,SAAS,KAAK;AAAA,QACd,YAAY,SAAS;AAAA,QACrB;AAAA,MAAA;AAAA,MAEJ,CAAC,UAAU,OAAO,OAAO,UAAU,SAAS;AAAA,IAAA;AAG9C,UAAM,eAAe;AAAA,MACnB,MACE;AAAA,QACE,SAAS;AAAA,QACT,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,QAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,MAAA;AAAA,MAEvD,CAAC,UAAU,UAAU,MAAM;AAAA,IAAA;AAG7B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,eAAa,GAAG,MAAM;AAAA,QACtB,SAAS;AAAA,QAET,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,MAAK;AAAA,cACL,IAAI;AAAA,cACJ;AAAA,cACA,WAAW,SAAS;AAAA,cACpB;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV;AAAA,cACA,mBAAiB,QAAQ,UAAU;AAAA,cACnC,eAAa;AAAA,cACZ,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEN;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,cACX,eAAY;AAAA,cACZ,eAAa,GAAG,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAEvB,SACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW,SAAS;AAAA,cACpB,eAAa,GAAG,MAAM;AAAA,cAErB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,gBAAgB,cAAc;AChG9B,MAAM,UAAU;AAAA,EACd,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA,EAEV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EAET,OAAO;AAAA,EAEP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EAEf,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AACd;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAO,QAAQ,oBAAC,mBAAiB,GAAG,OAAO,KAAU,UAAU,QAAA,CAAS;AAC3E;AAEA,YAAY,cAAc;"}