boreal-ui 0.0.71 → 0.0.73

package/dist/next/{CircularProgress-R9oZ2NqR.cjs → CircularProgress-CzFUYDX1.cjs}

@@ -3,7 +3,7 @@ const require$$2 = require("react/jsx-runtime");
 const React = require("react");
 const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
-const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
 const getColor = (percent) => {
   if (percent <= 0) return "var(--background-color)";
   if (percent <= 40) return "var(--error-color)";
@@ -11,7 +11,7 @@ const getColor = (percent) => {
   return "var(--success-color)";
 };
 const CircularProgressBase = ({
-  rating,
+  value,
   min = 0,
   max = 100,
   label = "Progress",
@@ -22,10 +22,17 @@ const CircularProgressBase = ({
   state = "",
   className = "",
   classMap,
-  "data-testid": testId = "circular-progress"
+  decorative = false,
+  announceInnerValue = false,
+  ariaValueText,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "data-testid": testId = "circular-progress",
+  ...rest
 }) => {
   const range = Math.max(0, max - min);
-  const clamped = Math.min(max, Math.max(min, rating));
+  const clamped = Math.min(max, Math.max(min, value));
   const percent = range === 0 ? 0 : (clamped - min) / range * 100;
   const [displayPercent, setDisplayPercent] = React.useState(0);
   React.useEffect(() => {
@@ -45,17 +52,26 @@ const CircularProgressBase = ({
     [classMap, theme, size, state, shadow, className]
   );
   const valueText = showRaw ? `${clamped}/${max}` : `${displayPercent}%`;
+  const resolvedAriaValueText = ariaValueText ?? (showRaw ? `${clamped} out of ${max}` : `${displayPercent}%`);
+  const accessibleNameProps = decorative ? {} : ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : ariaLabel ? { "aria-label": ariaLabel } : { "aria-label": label };
   return /* @__PURE__ */ require$$2.jsx(
     "div",
     {
       className: combinedClassName,
-      role: "progressbar",
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-valuenow": clamped,
-      "aria-valuetext": valueText,
-      "aria-label": label,
       "data-testid": testId,
+      ...!decorative && {
+        role: "progressbar",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": clamped,
+        "aria-valuetext": resolvedAriaValueText,
+        "aria-describedby": ariaDescribedBy,
+        ...accessibleNameProps
+      },
+      ...decorative && {
+        "aria-hidden": true
+      },
+      ...rest,
       children: /* @__PURE__ */ require$$2.jsx(
         "div",
         {
@@ -73,9 +89,10 @@ const CircularProgressBase = ({
           children: /* @__PURE__ */ require$$2.jsx("div", { className: classMap.inner_circle, children: /* @__PURE__ */ require$$2.jsx(
             "span",
             {
-              className: classMap.rating_text,
-              "aria-live": "polite",
-              "aria-atomic": "true",
+              className: classMap.value_text,
+              "aria-hidden": announceInnerValue ? void 0 : true,
+              "aria-live": announceInnerValue ? "polite" : void 0,
+              "aria-atomic": announceInnerValue ? "true" : void 0,
               children: valueText
             }
           ) })
@@ -85,35 +102,35 @@ const CircularProgressBase = ({
   );
 };
 CircularProgressBase.displayName = "CircularProgressBase";
-const noScroll = "_noScroll_1hymk_109";
-const errorMessage = "_errorMessage_1hymk_110";
-const loadingContainer = "_loadingContainer_1hymk_111";
-const hideScrollbar = "_hideScrollbar_1hymk_103";
-const sr_only = "_sr_only_1hymk_112";
-const circular_progress = "_circular_progress_1hymk_628";
-const circle_border = "_circle_border_1hymk_633";
-const inner_circle = "_inner_circle_1hymk_646";
-const primary = "_primary_1hymk_668";
-const secondary = "_secondary_1hymk_671";
-const tertiary = "_tertiary_1hymk_674";
-const quaternary = "_quaternary_1hymk_677";
-const clear = "_clear_1hymk_680";
-const success = "_success_1hymk_683";
-const error = "_error_1hymk_110";
-const warning = "_warning_1hymk_689";
-const shadowNone = "_shadowNone_1hymk_693";
-const shadowLight = "_shadowLight_1hymk_697";
-const shadowMedium = "_shadowMedium_1hymk_701";
-const shadowStrong = "_shadowStrong_1hymk_705";
-const shadowIntense = "_shadowIntense_1hymk_709";
-const xs = "_xs_1hymk_713";
-const rating_text = "_rating_text_1hymk_729";
-const small = "_small_1hymk_756";
-const medium = "_medium_1hymk_799";
-const large = "_large_1hymk_842";
-const xl = "_xl_1hymk_885";
-const spin = "_spin_1hymk_1";
-const pulse = "_pulse_1hymk_1";
+const noScroll = "_noScroll_1fd21_109";
+const errorMessage = "_errorMessage_1fd21_110";
+const loadingContainer = "_loadingContainer_1fd21_111";
+const hideScrollbar = "_hideScrollbar_1fd21_103";
+const sr_only = "_sr_only_1fd21_112";
+const circular_progress = "_circular_progress_1fd21_637";
+const circle_border = "_circle_border_1fd21_642";
+const inner_circle = "_inner_circle_1fd21_655";
+const primary = "_primary_1fd21_677";
+const secondary = "_secondary_1fd21_680";
+const tertiary = "_tertiary_1fd21_683";
+const quaternary = "_quaternary_1fd21_686";
+const clear = "_clear_1fd21_689";
+const success = "_success_1fd21_692";
+const error = "_error_1fd21_110";
+const warning = "_warning_1fd21_698";
+const shadowNone = "_shadowNone_1fd21_702";
+const shadowLight = "_shadowLight_1fd21_706";
+const shadowMedium = "_shadowMedium_1fd21_710";
+const shadowStrong = "_shadowStrong_1fd21_714";
+const shadowIntense = "_shadowIntense_1fd21_718";
+const xs = "_xs_1fd21_722";
+const value_text = "_value_text_1fd21_738";
+const small = "_small_1fd21_765";
+const medium = "_medium_1fd21_808";
+const large = "_large_1fd21_851";
+const xl = "_xl_1fd21_894";
+const spin = "_spin_1fd21_1";
+const pulse = "_pulse_1fd21_1";
 const styles = {
   noScroll,
   errorMessage,
@@ -137,22 +154,22 @@ const styles = {
   shadowStrong,
   shadowIntense,
   xs,
-  rating_text,
+  value_text,
   small,
   medium,
   large,
   xl,
-  "fade-in": "_fade-in_1hymk_1",
-  "slide-up": "_slide-up_1hymk_1",
-  "spin-3d": "_spin-3d_1hymk_1",
+  "fade-in": "_fade-in_1fd21_1",
+  "slide-up": "_slide-up_1fd21_1",
+  "spin-3d": "_spin-3d_1fd21_1",
   spin,
   pulse,
-  "fade-in-up": "_fade-in-up_1hymk_1",
-  "progress-grow": "_progress-grow_1hymk_1",
-  "indeterminate-move": "_indeterminate-move_1hymk_1",
-  "skeleton-loading": "_skeleton-loading_1hymk_1"
+  "fade-in-up": "_fade-in-up_1fd21_1",
+  "progress-grow": "_progress-grow_1fd21_1",
+  "indeterminate-move": "_indeterminate-move_1fd21_1",
+  "skeleton-loading": "_skeleton-loading_1fd21_1"
 };
 const CircularProgress = (props) => /* @__PURE__ */ require$$2.jsx(CircularProgressBase, { ...props, classMap: styles });
 CircularProgress.displayName = "CircularProgress";
 exports.CircularProgress = CircularProgress;
-//# sourceMappingURL=CircularProgress-R9oZ2NqR.cjs.map
+//# sourceMappingURL=CircularProgress-CzFUYDX1.cjs.map

package/dist/next/CircularProgress-CzFUYDX1.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress-CzFUYDX1.cjs","sources":["../../src/components/CircularProgress/CircularProgressBase.tsx","../../src/components/CircularProgress/next/CircularProgress.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\r\nimport type { CircularProgressBaseProps } from \"./CircularProgress.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst getColor = (percent: number): string => {\r\n  if (percent <= 0) return \"var(--background-color)\";\r\n  if (percent <= 40) return \"var(--error-color)\";\r\n  if (percent <= 70) return \"var(--warning-color)\";\r\n  return \"var(--success-color)\";\r\n};\r\n\r\nconst CircularProgressBase: React.FC<CircularProgressBaseProps> = ({\r\n  value,\r\n  min = 0,\r\n  max = 100,\r\n  label = \"Progress\",\r\n  shadow = getDefaultShadow(),\r\n  showRaw = false,\r\n  size = getDefaultSize(),\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  className = \"\",\r\n  classMap,\r\n  decorative = false,\r\n  announceInnerValue = false,\r\n  ariaValueText,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"data-testid\": testId = \"circular-progress\",\r\n  ...rest\r\n}) => {\r\n  const range = Math.max(0, max - min);\r\n  const clamped = Math.min(max, Math.max(min, value));\r\n  const percent = range === 0 ? 0 : ((clamped - min) / range) * 100;\r\n\r\n  const [displayPercent, setDisplayPercent] = useState(0);\r\n\r\n  useEffect(() => {\r\n    setDisplayPercent(Math.round(percent));\r\n  }, [percent]);\r\n\r\n  const progressColor =\r\n    state && classMap[state] ? undefined : getColor(percent);\r\n\r\n  const angle = Math.min(360, (percent / 100) * 360);\r\n\r\n  const combinedClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.circular_progress,\r\n        classMap[theme],\r\n        classMap[size],\r\n        classMap[state],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        className,\r\n      ),\r\n    [classMap, theme, size, state, shadow, className],\r\n  );\r\n\r\n  const valueText = showRaw ? `${clamped}/${max}` : `${displayPercent}%`;\r\n\r\n  const resolvedAriaValueText =\r\n    ariaValueText ??\r\n    (showRaw ? `${clamped} out of ${max}` : `${displayPercent}%`);\r\n\r\n  const accessibleNameProps = decorative\r\n    ? {}\r\n    : ariaLabelledBy\r\n      ? { \"aria-labelledby\": ariaLabelledBy }\r\n      : ariaLabel\r\n        ? { \"aria-label\": ariaLabel }\r\n        : { \"aria-label\": label };\r\n\r\n  return (\r\n    <div\r\n      className={combinedClassName}\r\n      data-testid={testId}\r\n      {...(!decorative && {\r\n        role: \"progressbar\",\r\n        \"aria-valuemin\": min,\r\n        \"aria-valuemax\": max,\r\n        \"aria-valuenow\": clamped,\r\n        \"aria-valuetext\": resolvedAriaValueText,\r\n        \"aria-describedby\": ariaDescribedBy,\r\n        ...accessibleNameProps,\r\n      })}\r\n      {...(decorative && {\r\n        \"aria-hidden\": true,\r\n      })}\r\n      {...rest}\r\n    >\r\n      <div\r\n        className={combineClassNames(\r\n          classMap.circle_border,\r\n          state && classMap[`state_${state}`],\r\n        )}\r\n        style={\r\n          progressColor\r\n            ? {\r\n                background: `conic-gradient(\r\n                  ${progressColor} 0deg,\r\n                  ${progressColor} ${angle}deg,\r\n                  transparent ${angle}deg 360deg\r\n                )`,\r\n              }\r\n            : undefined\r\n        }\r\n      >\r\n        <div className={classMap.inner_circle}>\r\n          <span\r\n            className={classMap.value_text}\r\n            aria-hidden={announceInnerValue ? undefined : true}\r\n            aria-live={announceInnerValue ? \"polite\" : undefined}\r\n            aria-atomic={announceInnerValue ? \"true\" : undefined}\r\n          >\r\n            {valueText}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nCircularProgressBase.displayName = \"CircularProgressBase\";\r\nexport default CircularProgressBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport CircularProgressBase from \"../CircularProgressBase\";\r\nimport styles from \"./CircularProgress.module.scss\";\r\nimport { CircularProgressProps } from \"../CircularProgress.types\";\r\n\r\nconst CircularProgress: React.FC<CircularProgressProps> = (props) => (\r\n  <CircularProgressBase {...props} classMap={styles} />\r\n);\r\nCircularProgress.displayName = \"CircularProgress\";\r\nexport default CircularProgress;\r\n"],"names":["getDefaultShadow","getDefaultSize","getDefaultTheme","useState","useEffect","useMemo","combineClassNames","capitalize","jsx"],"mappings":"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"}

package/dist/next/{CircularProgress-C3Hd3lut.js → CircularProgress-Dn1VXFsq.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
-import { b as getDefaultShadow, c as getDefaultSize, d as getDefaultTheme } from "./boreal-style-config-BILmxkZG.js";
+import { b as getDefaultShadow, c as getDefaultSize, d as getDefaultTheme } from "./boreal-style-config-DsaRlxmw.js";
 const getColor = (percent) => {
   if (percent <= 0) return "var(--background-color)";
   if (percent <= 40) return "var(--error-color)";
@@ -10,7 +10,7 @@ const getColor = (percent) => {
   return "var(--success-color)";
 };
 const CircularProgressBase = ({
-  rating,
+  value,
   min = 0,
   max = 100,
   label = "Progress",
@@ -21,10 +21,17 @@ const CircularProgressBase = ({
   state = "",
   className = "",
   classMap,
-  "data-testid": testId = "circular-progress"
+  decorative = false,
+  announceInnerValue = false,
+  ariaValueText,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "data-testid": testId = "circular-progress",
+  ...rest
 }) => {
   const range = Math.max(0, max - min);
-  const clamped = Math.min(max, Math.max(min, rating));
+  const clamped = Math.min(max, Math.max(min, value));
   const percent = range === 0 ? 0 : (clamped - min) / range * 100;
   const [displayPercent, setDisplayPercent] = useState(0);
   useEffect(() => {
@@ -44,17 +51,26 @@ const CircularProgressBase = ({
     [classMap, theme, size, state, shadow, className]
   );
   const valueText = showRaw ? `${clamped}/${max}` : `${displayPercent}%`;
+  const resolvedAriaValueText = ariaValueText ?? (showRaw ? `${clamped} out of ${max}` : `${displayPercent}%`);
+  const accessibleNameProps = decorative ? {} : ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : ariaLabel ? { "aria-label": ariaLabel } : { "aria-label": label };
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: combinedClassName,
-      role: "progressbar",
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-valuenow": clamped,
-      "aria-valuetext": valueText,
-      "aria-label": label,
       "data-testid": testId,
+      ...!decorative && {
+        role: "progressbar",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": clamped,
+        "aria-valuetext": resolvedAriaValueText,
+        "aria-describedby": ariaDescribedBy,
+        ...accessibleNameProps
+      },
+      ...decorative && {
+        "aria-hidden": true
+      },
+      ...rest,
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -72,9 +88,10 @@ const CircularProgressBase = ({
           children: /* @__PURE__ */ jsx("div", { className: classMap.inner_circle, children: /* @__PURE__ */ jsx(
             "span",
             {
-              className: classMap.rating_text,
-              "aria-live": "polite",
-              "aria-atomic": "true",
+              className: classMap.value_text,
+              "aria-hidden": announceInnerValue ? void 0 : true,
+              "aria-live": announceInnerValue ? "polite" : void 0,
+              "aria-atomic": announceInnerValue ? "true" : void 0,
               children: valueText
             }
           ) })
@@ -84,35 +101,35 @@ const CircularProgressBase = ({
   );
 };
 CircularProgressBase.displayName = "CircularProgressBase";
-const noScroll = "_noScroll_1hymk_109";
-const errorMessage = "_errorMessage_1hymk_110";
-const loadingContainer = "_loadingContainer_1hymk_111";
-const hideScrollbar = "_hideScrollbar_1hymk_103";
-const sr_only = "_sr_only_1hymk_112";
-const circular_progress = "_circular_progress_1hymk_628";
-const circle_border = "_circle_border_1hymk_633";
-const inner_circle = "_inner_circle_1hymk_646";
-const primary = "_primary_1hymk_668";
-const secondary = "_secondary_1hymk_671";
-const tertiary = "_tertiary_1hymk_674";
-const quaternary = "_quaternary_1hymk_677";
-const clear = "_clear_1hymk_680";
-const success = "_success_1hymk_683";
-const error = "_error_1hymk_110";
-const warning = "_warning_1hymk_689";
-const shadowNone = "_shadowNone_1hymk_693";
-const shadowLight = "_shadowLight_1hymk_697";
-const shadowMedium = "_shadowMedium_1hymk_701";
-const shadowStrong = "_shadowStrong_1hymk_705";
-const shadowIntense = "_shadowIntense_1hymk_709";
-const xs = "_xs_1hymk_713";
-const rating_text = "_rating_text_1hymk_729";
-const small = "_small_1hymk_756";
-const medium = "_medium_1hymk_799";
-const large = "_large_1hymk_842";
-const xl = "_xl_1hymk_885";
-const spin = "_spin_1hymk_1";
-const pulse = "_pulse_1hymk_1";
+const noScroll = "_noScroll_1fd21_109";
+const errorMessage = "_errorMessage_1fd21_110";
+const loadingContainer = "_loadingContainer_1fd21_111";
+const hideScrollbar = "_hideScrollbar_1fd21_103";
+const sr_only = "_sr_only_1fd21_112";
+const circular_progress = "_circular_progress_1fd21_637";
+const circle_border = "_circle_border_1fd21_642";
+const inner_circle = "_inner_circle_1fd21_655";
+const primary = "_primary_1fd21_677";
+const secondary = "_secondary_1fd21_680";
+const tertiary = "_tertiary_1fd21_683";
+const quaternary = "_quaternary_1fd21_686";
+const clear = "_clear_1fd21_689";
+const success = "_success_1fd21_692";
+const error = "_error_1fd21_110";
+const warning = "_warning_1fd21_698";
+const shadowNone = "_shadowNone_1fd21_702";
+const shadowLight = "_shadowLight_1fd21_706";
+const shadowMedium = "_shadowMedium_1fd21_710";
+const shadowStrong = "_shadowStrong_1fd21_714";
+const shadowIntense = "_shadowIntense_1fd21_718";
+const xs = "_xs_1fd21_722";
+const value_text = "_value_text_1fd21_738";
+const small = "_small_1fd21_765";
+const medium = "_medium_1fd21_808";
+const large = "_large_1fd21_851";
+const xl = "_xl_1fd21_894";
+const spin = "_spin_1fd21_1";
+const pulse = "_pulse_1fd21_1";
 const styles = {
   noScroll,
   errorMessage,
@@ -136,24 +153,24 @@ const styles = {
   shadowStrong,
   shadowIntense,
   xs,
-  rating_text,
+  value_text,
   small,
   medium,
   large,
   xl,
-  "fade-in": "_fade-in_1hymk_1",
-  "slide-up": "_slide-up_1hymk_1",
-  "spin-3d": "_spin-3d_1hymk_1",
+  "fade-in": "_fade-in_1fd21_1",
+  "slide-up": "_slide-up_1fd21_1",
+  "spin-3d": "_spin-3d_1fd21_1",
   spin,
   pulse,
-  "fade-in-up": "_fade-in-up_1hymk_1",
-  "progress-grow": "_progress-grow_1hymk_1",
-  "indeterminate-move": "_indeterminate-move_1hymk_1",
-  "skeleton-loading": "_skeleton-loading_1hymk_1"
+  "fade-in-up": "_fade-in-up_1fd21_1",
+  "progress-grow": "_progress-grow_1fd21_1",
+  "indeterminate-move": "_indeterminate-move_1fd21_1",
+  "skeleton-loading": "_skeleton-loading_1fd21_1"
 };
 const CircularProgress = (props) => /* @__PURE__ */ jsx(CircularProgressBase, { ...props, classMap: styles });
 CircularProgress.displayName = "CircularProgress";
 export {
   CircularProgress as C
 };
-//# sourceMappingURL=CircularProgress-C3Hd3lut.js.map
+//# sourceMappingURL=CircularProgress-Dn1VXFsq.js.map

package/dist/next/CircularProgress-Dn1VXFsq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress-Dn1VXFsq.js","sources":["../../src/components/CircularProgress/CircularProgressBase.tsx","../../src/components/CircularProgress/next/CircularProgress.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\r\nimport type { CircularProgressBaseProps } from \"./CircularProgress.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst getColor = (percent: number): string => {\r\n  if (percent <= 0) return \"var(--background-color)\";\r\n  if (percent <= 40) return \"var(--error-color)\";\r\n  if (percent <= 70) return \"var(--warning-color)\";\r\n  return \"var(--success-color)\";\r\n};\r\n\r\nconst CircularProgressBase: React.FC<CircularProgressBaseProps> = ({\r\n  value,\r\n  min = 0,\r\n  max = 100,\r\n  label = \"Progress\",\r\n  shadow = getDefaultShadow(),\r\n  showRaw = false,\r\n  size = getDefaultSize(),\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  className = \"\",\r\n  classMap,\r\n  decorative = false,\r\n  announceInnerValue = false,\r\n  ariaValueText,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"data-testid\": testId = \"circular-progress\",\r\n  ...rest\r\n}) => {\r\n  const range = Math.max(0, max - min);\r\n  const clamped = Math.min(max, Math.max(min, value));\r\n  const percent = range === 0 ? 0 : ((clamped - min) / range) * 100;\r\n\r\n  const [displayPercent, setDisplayPercent] = useState(0);\r\n\r\n  useEffect(() => {\r\n    setDisplayPercent(Math.round(percent));\r\n  }, [percent]);\r\n\r\n  const progressColor =\r\n    state && classMap[state] ? undefined : getColor(percent);\r\n\r\n  const angle = Math.min(360, (percent / 100) * 360);\r\n\r\n  const combinedClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.circular_progress,\r\n        classMap[theme],\r\n        classMap[size],\r\n        classMap[state],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        className,\r\n      ),\r\n    [classMap, theme, size, state, shadow, className],\r\n  );\r\n\r\n  const valueText = showRaw ? `${clamped}/${max}` : `${displayPercent}%`;\r\n\r\n  const resolvedAriaValueText =\r\n    ariaValueText ??\r\n    (showRaw ? `${clamped} out of ${max}` : `${displayPercent}%`);\r\n\r\n  const accessibleNameProps = decorative\r\n    ? {}\r\n    : ariaLabelledBy\r\n      ? { \"aria-labelledby\": ariaLabelledBy }\r\n      : ariaLabel\r\n        ? { \"aria-label\": ariaLabel }\r\n        : { \"aria-label\": label };\r\n\r\n  return (\r\n    <div\r\n      className={combinedClassName}\r\n      data-testid={testId}\r\n      {...(!decorative && {\r\n        role: \"progressbar\",\r\n        \"aria-valuemin\": min,\r\n        \"aria-valuemax\": max,\r\n        \"aria-valuenow\": clamped,\r\n        \"aria-valuetext\": resolvedAriaValueText,\r\n        \"aria-describedby\": ariaDescribedBy,\r\n        ...accessibleNameProps,\r\n      })}\r\n      {...(decorative && {\r\n        \"aria-hidden\": true,\r\n      })}\r\n      {...rest}\r\n    >\r\n      <div\r\n        className={combineClassNames(\r\n          classMap.circle_border,\r\n          state && classMap[`state_${state}`],\r\n        )}\r\n        style={\r\n          progressColor\r\n            ? {\r\n                background: `conic-gradient(\r\n                  ${progressColor} 0deg,\r\n                  ${progressColor} ${angle}deg,\r\n                  transparent ${angle}deg 360deg\r\n                )`,\r\n              }\r\n            : undefined\r\n        }\r\n      >\r\n        <div className={classMap.inner_circle}>\r\n          <span\r\n            className={classMap.value_text}\r\n            aria-hidden={announceInnerValue ? undefined : true}\r\n            aria-live={announceInnerValue ? \"polite\" : undefined}\r\n            aria-atomic={announceInnerValue ? \"true\" : undefined}\r\n          >\r\n            {valueText}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nCircularProgressBase.displayName = \"CircularProgressBase\";\r\nexport default CircularProgressBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport CircularProgressBase from \"../CircularProgressBase\";\r\nimport styles from \"./CircularProgress.module.scss\";\r\nimport { CircularProgressProps } from \"../CircularProgress.types\";\r\n\r\nconst CircularProgress: React.FC<CircularProgressProps> = (props) => (\r\n  <CircularProgressBase {...props} classMap={styles} />\r\n);\r\nCircularProgress.displayName = \"CircularProgress\";\r\nexport default CircularProgress;\r\n"],"names":[],"mappings":"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"}

package/dist/next/CircularProgress.cjs.js

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

package/dist/next/CircularProgress.js

@@ -1,4 +1,4 @@
-import { C } from "./CircularProgress-C3Hd3lut.js";
+import { C } from "./CircularProgress-Dn1VXFsq.js";
 export {
   C as default
 };

package/dist/next/ColorPicker-ByPKPsMz.cjs

@@ -0,0 +1,232 @@
+"use strict";
+const require$$2 = require("react/jsx-runtime");
+const React = require("react");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
+const ColorPickerBase = ({
+  label = "Choose a color",
+  colors,
+  selected: selected2,
+  onChange,
+  name = "color-picker",
+  disabled = false,
+  size = borealStyleConfig.getDefaultSize(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  shape = "round",
+  allowCustom = false,
+  required = false,
+  invalid = false,
+  helperText,
+  errorText,
+  customInputAriaLabel = "Custom color picker",
+  hideLabel = false,
+  className = "",
+  classMap,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "data-testid": testId = "color-picker"
+}) => {
+  const legendId = `${testId}-legend`;
+  const helperTextId = helperText ? `${testId}-helper-text` : void 0;
+  const errorTextId = errorText ? `${testId}-error-text` : void 0;
+  const describedBy = [ariaDescribedBy, helperTextId, invalid ? errorTextId : void 0].filter(Boolean).join(" ") || void 0;
+  const computedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? legendId : void 0);
+  const labelClass = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.swatch,
+      classMap[size],
+      classMap[shape],
+      disabled && classMap.disabled
+    ),
+    [classMap, size, shape, disabled]
+  );
+  return /* @__PURE__ */ require$$2.jsxs(
+    "fieldset",
+    {
+      className: classNames.combineClassNames(
+        classMap.color_picker,
+        invalid && classMap.invalid,
+        disabled && classMap.disabled,
+        className
+      ),
+      disabled,
+      "data-testid": testId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": computedAriaLabelledBy,
+      "aria-describedby": describedBy,
+      "aria-invalid": invalid || void 0,
+      children: [
+        /* @__PURE__ */ require$$2.jsx(
+          "legend",
+          {
+            id: legendId,
+            className: classNames.combineClassNames(classMap.legend, hideLabel && "sr_only"),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ require$$2.jsx("div", { className: classMap.color_picker_grid, role: "radiogroup", children: colors.map((color, i) => {
+          const id = `${testId}-color-${i}`;
+          const optionLabelId = `${id}-label`;
+          const isSelected = selected2 === color.value;
+          const optionDisabled = disabled || color.disabled;
+          return /* @__PURE__ */ require$$2.jsxs(
+            "label",
+            {
+              className: classNames.combineClassNames(
+                labelClass,
+                optionDisabled && classMap.disabled
+              ),
+              htmlFor: id,
+              title: color.label,
+              "data-testid": `${testId}-option-${color.value}`,
+              children: [
+                /* @__PURE__ */ require$$2.jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name,
+                    id,
+                    value: color.value,
+                    checked: isSelected,
+                    onChange: () => onChange(color.value),
+                    className: classMap.radio_input,
+                    disabled: optionDisabled,
+                    "aria-describedby": describedBy,
+                    "aria-invalid": invalid || void 0,
+                    "aria-required": required || void 0,
+                    "aria-labelledby": optionLabelId
+                  }
+                ),
+                /* @__PURE__ */ require$$2.jsx("span", { id: optionLabelId, className: "sr_only", children: color.label }),
+                /* @__PURE__ */ require$$2.jsx(
+                  "span",
+                  {
+                    className: classNames.combineClassNames(
+                      classMap.preview,
+                      classMap[shape],
+                      isSelected && classMap.selected,
+                      optionDisabled && classMap.disabled,
+                      shadow && classMap[`shadow${capitalize.capitalize(shadow)}`]
+                    ),
+                    style: { backgroundColor: color.value },
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            },
+            `${color.value}-${i}`
+          );
+        }) }),
+        helperText && /* @__PURE__ */ require$$2.jsx(
+          "div",
+          {
+            id: helperTextId,
+            className: classMap.helper_text,
+            "data-testid": `${testId}-helper-text`,
+            children: helperText
+          }
+        ),
+        invalid && errorText && /* @__PURE__ */ require$$2.jsx(
+          "div",
+          {
+            id: errorTextId,
+            className: classMap.error_text,
+            "data-testid": `${testId}-error-text`,
+            "aria-live": "polite",
+            children: errorText
+          }
+        ),
+        allowCustom && /* @__PURE__ */ require$$2.jsx(
+          "input",
+          {
+            type: "color",
+            className: classMap.custom_input,
+            value: selected2,
+            onChange: (e) => onChange(e.target.value),
+            "aria-label": customInputAriaLabel,
+            "aria-describedby": describedBy,
+            "aria-invalid": invalid || void 0,
+            "data-testid": `${testId}-custom-input`,
+            disabled
+          }
+        )
+      ]
+    }
+  );
+};
+ColorPickerBase.displayName = "ColorPickerBase";
+const noScroll = "_noScroll_1bxnh_109";
+const errorMessage = "_errorMessage_1bxnh_110";
+const loadingContainer = "_loadingContainer_1bxnh_111";
+const hideScrollbar = "_hideScrollbar_1bxnh_103";
+const sr_only = "_sr_only_1bxnh_112";
+const color_picker = "_color_picker_1bxnh_637";
+const legend = "_legend_1bxnh_667";
+const grid = "_grid_1bxnh_686";
+const selected = "_selected_1bxnh_702";
+const swatch = "_swatch_1bxnh_708";
+const round = "_round_1bxnh_725";
+const square = "_square_1bxnh_728";
+const pill = "_pill_1bxnh_731";
+const xs = "_xs_1bxnh_735";
+const small = "_small_1bxnh_751";
+const medium = "_medium_1bxnh_767";
+const large = "_large_1bxnh_783";
+const xl = "_xl_1bxnh_799";
+const radio_input = "_radio_input_1bxnh_816";
+const preview = "_preview_1bxnh_820";
+const custom_input = "_custom_input_1bxnh_828";
+const circle = "_circle_1bxnh_843";
+const rounded = "_rounded_1bxnh_851";
+const shadowNone = "_shadowNone_1bxnh_855";
+const shadowLight = "_shadowLight_1bxnh_859";
+const shadowMedium = "_shadowMedium_1bxnh_863";
+const shadowStrong = "_shadowStrong_1bxnh_867";
+const shadowIntense = "_shadowIntense_1bxnh_871";
+const spin = "_spin_1bxnh_1";
+const pulse = "_pulse_1bxnh_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  color_picker,
+  legend,
+  grid,
+  selected,
+  swatch,
+  round,
+  square,
+  pill,
+  xs,
+  small,
+  medium,
+  large,
+  xl,
+  radio_input,
+  preview,
+  custom_input,
+  circle,
+  rounded,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_1bxnh_1",
+  "slide-up": "_slide-up_1bxnh_1",
+  "spin-3d": "_spin-3d_1bxnh_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_1bxnh_1",
+  "progress-grow": "_progress-grow_1bxnh_1",
+  "indeterminate-move": "_indeterminate-move_1bxnh_1",
+  "skeleton-loading": "_skeleton-loading_1bxnh_1"
+};
+const ColorPicker = (props) => /* @__PURE__ */ require$$2.jsx(ColorPickerBase, { ...props, classMap: styles });
+ColorPicker.displayName = "ColorPicker";
+exports.ColorPicker = ColorPicker;
+//# sourceMappingURL=ColorPicker-ByPKPsMz.cjs.map