@vector-im/compound-web 8.4.0 → 9.0.1

package/dist/components/Progress/Progress.cjs

@@ -1,57 +1,44 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const classNames = require("classnames");
-const Progress_module = require("./Progress.module.css.cjs");
-const reactProgress = require("@radix-ui/react-progress");
-const Progress = React.forwardRef(
-  function Progress2({
-    size,
-    tint,
-    className,
-    value: valueProp,
-    max: maxProp,
-    getValueLabel,
-    ...props
-  }, ref) {
-    const max = maxProp ?? 1;
-    const value = valueProp ?? max;
-    const labelId = React.useId();
-    const label = getValueLabel ? getValueLabel(value, max) : null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: classNames(Progress_module.default["progress-bar-container"], className),
-        "data-tint": tint,
-        ...props,
-        children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx("div", { id: labelId, className: Progress_module.default["progress-bar-label"], children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactProgress.Root,
-            {
-              className: Progress_module.default["progress-bar"],
-              "data-size": size,
-              max,
-              value,
-              ref,
-              "aria-labelledby": label ? labelId : void 0,
-              getValueLabel,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                reactProgress.Indicator,
-                {
-                  className: Progress_module.default["progress-bar-indicator"],
-                  style: {
-                    transform: `translateX(-${100 - value / max * 100}%)`
-                  }
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Progress_module = require("./Progress.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_progress = require("@radix-ui/react-progress");
+//#region src/components/Progress/Progress.tsx
+/**
+* Displays an indicator showing the completion progress of a task, optionally with a label
+*/
+var Progress = (0, react.forwardRef)(function Progress({ size, tint, className, value: valueProp, max: maxProp, getValueLabel, ...props }, ref) {
+	const max = maxProp ?? 1;
+	const value = valueProp ?? max;
+	const labelId = (0, react.useId)();
+	const label = getValueLabel ? getValueLabel(value, max) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(require_Progress_module.default["progress-bar-container"], className),
+		"data-tint": tint,
+		...props,
+		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: labelId,
+			className: require_Progress_module.default["progress-bar-label"],
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_progress.Root, {
+			className: require_Progress_module.default["progress-bar"],
+			"data-size": size,
+			max,
+			value,
+			ref,
+			"aria-labelledby": label ? labelId : void 0,
+			getValueLabel,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_progress.Indicator, {
+				className: require_Progress_module.default["progress-bar-indicator"],
+				style: { transform: `translateX(-${100 - value / max * 100}%)` }
+			})
+		})]
+	});
+});
+//#endregion
 exports.Progress = Progress;
-//# sourceMappingURL=Progress.cjs.map
+
+//# sourceMappingURL=Progress.cjs.map

package/dist/components/Progress/Progress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.cjs","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { forwardRef, useId } from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Progress.module.css\";\n\nimport { Root, Indicator } from \"@radix-ui/react-progress\";\n\ntype ProgressProps = {\n  /** The size variant of the progress bar */\n  size: \"sm\" | \"lg\";\n\n  /**\n   * The colour variant to use for the progress bar indicator\n   * If not set, the progress bar will be rendered with a gray tone, which should only be used when the progress bar is empty\n   */\n  tint?: \"red\" | \"orange\" | \"lime\" | \"green\";\n\n  /** The CSS class name forwarded to the root element */\n  className?: string;\n\n  /** The value of the progress bar. Defaults to max if not provided */\n  value?: number | null;\n\n  /** The maximum value of the progress bar. Defaults to 1 if not provided */\n  max?: number;\n\n  /**\n   * A function to get the text label to display in the progress bar.\n   * If set, it will display a label on top of the progress bar\n   */\n  getValueLabel?: (value: number, max: number) => string;\n} & Omit<React.ComponentProps<\"div\">, \"children\">;\n\n/**\n * Displays an indicator showing the completion progress of a task, optionally with a label\n */\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  function Progress(\n    {\n      size,\n      tint,\n      className,\n      value: valueProp,\n      max: maxProp,\n      getValueLabel,\n      ...props\n    },\n    ref,\n  ) {\n    const max = maxProp ?? 1;\n    const value = valueProp ?? max;\n    const labelId = useId();\n    const label = getValueLabel ? getValueLabel(value, max) : null;\n\n    return (\n      <div\n        className={classNames(styles[\"progress-bar-container\"], className)}\n        data-tint={tint}\n        {...props}\n      >\n        {label && (\n          <div id={labelId} className={styles[\"progress-bar-label\"]}>\n            {label}\n          </div>\n        )}\n\n        <Root\n          className={styles[\"progress-bar\"]}\n          data-size={size}\n          max={max}\n          value={value}\n          ref={ref}\n          aria-labelledby={label ? labelId : undefined}\n          getValueLabel={getValueLabel}\n        >\n          <Indicator\n            className={styles[\"progress-bar-indicator\"]}\n            style={{\n              transform: `translateX(-${100 - (value / max) * 100}%)`,\n            }}\n          />\n        </Root>\n      </div>\n    );\n  },\n);\n"],"names":["forwardRef","Progress","useId","jsxs","styles","jsx","Root","Indicator"],"mappings":";;;;;;;AA2CO,MAAM,WAAWA,MAAAA;AAAAA,EACtB,SAASC,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,KAAK;AAAA,IACL;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,MAAM,WAAW;AACvB,UAAM,QAAQ,aAAa;AAC3B,UAAM,UAAUC,MAAAA,MAAA;AAChB,UAAM,QAAQ,gBAAgB,cAAc,OAAO,GAAG,IAAI;AAE1D,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,WAAWC,gBAAAA,QAAO,wBAAwB,GAAG,SAAS;AAAA,QACjE,aAAW;AAAA,QACV,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,SACCC,2BAAAA,IAAC,SAAI,IAAI,SAAS,WAAWD,gBAAAA,QAAO,oBAAoB,GACrD,UAAA,MAAA,CACH;AAAA,UAGFC,2BAAAA;AAAAA,YAACC,cAAAA;AAAAA,YAAA;AAAA,cACC,WAAWF,gBAAAA,QAAO,cAAc;AAAA,cAChC,aAAW;AAAA,cACX;AAAA,cACA;AAAA,cACA;AAAA,cACA,mBAAiB,QAAQ,UAAU;AAAA,cACnC;AAAA,cAEA,UAAAC,2BAAAA;AAAAA,gBAACE,cAAAA;AAAAA,gBAAA;AAAA,kBACC,WAAWH,gBAAAA,QAAO,wBAAwB;AAAA,kBAC1C,OAAO;AAAA,oBACL,WAAW,eAAe,MAAO,QAAQ,MAAO,GAAG;AAAA,kBAAA;AAAA,gBACrD;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;;"}
+{"version":3,"file":"Progress.cjs","names":[],"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { forwardRef, useId } from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Progress.module.css\";\n\nimport { Root, Indicator } from \"@radix-ui/react-progress\";\nimport type { Size } from \"../../utils/size\";\n\ntype ProgressProps = {\n  /** The size variant of the progress bar */\n  size: Size & (\"sm\" | \"lg\");\n\n  /**\n   * The colour variant to use for the progress bar indicator\n   * If not set, the progress bar will be rendered with a gray tone, which should only be used when the progress bar is empty\n   */\n  tint?: \"red\" | \"orange\" | \"lime\" | \"green\";\n\n  /** The CSS class name forwarded to the root element */\n  className?: string;\n\n  /** The value of the progress bar. Defaults to max if not provided */\n  value?: number | null;\n\n  /** The maximum value of the progress bar. Defaults to 1 if not provided */\n  max?: number;\n\n  /**\n   * A function to get the text label to display in the progress bar.\n   * If set, it will display a label on top of the progress bar\n   */\n  getValueLabel?: (value: number, max: number) => string;\n} & Omit<React.ComponentProps<\"div\">, \"children\">;\n\n/**\n * Displays an indicator showing the completion progress of a task, optionally with a label\n */\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  function Progress(\n    {\n      size,\n      tint,\n      className,\n      value: valueProp,\n      max: maxProp,\n      getValueLabel,\n      ...props\n    },\n    ref,\n  ) {\n    const max = maxProp ?? 1;\n    const value = valueProp ?? max;\n    const labelId = useId();\n    const label = getValueLabel ? getValueLabel(value, max) : null;\n\n    return (\n      <div\n        className={classNames(styles[\"progress-bar-container\"], className)}\n        data-tint={tint}\n        {...props}\n      >\n        {label && (\n          <div id={labelId} className={styles[\"progress-bar-label\"]}>\n            {label}\n          </div>\n        )}\n\n        <Root\n          className={styles[\"progress-bar\"]}\n          data-size={size}\n          max={max}\n          value={value}\n          ref={ref}\n          aria-labelledby={label ? labelId : undefined}\n          getValueLabel={getValueLabel}\n        >\n          <Indicator\n            className={styles[\"progress-bar-indicator\"]}\n            style={{\n              transform: `translateX(-${100 - (value / max) * 100}%)`,\n            }}\n          />\n        </Root>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;AA4CA,IAAa,YAAA,GAAA,MAAA,YACX,SAAS,SACP,EACE,MACA,MACA,WACA,OAAO,WACP,KAAK,SACL,eACA,GAAG,SAEL,KACA;CACA,MAAM,MAAM,WAAW;CACvB,MAAM,QAAQ,aAAa;CAC3B,MAAM,WAAA,GAAA,MAAA,QAAiB;CACvB,MAAM,QAAQ,gBAAgB,cAAc,OAAO,IAAI,GAAG;AAE1D,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,WAAA,SAAsB,wBAAA,QAAO,2BAA2B,UAAU;EAClE,aAAW;EACX,GAAI;YAHN,CAKG,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,IAAI;GAAS,WAAW,wBAAA,QAAO;aACjC;GACG,CAAA,EAGR,iBAAA,GAAA,kBAAA,KAAC,yBAAA,MAAD;GACE,WAAW,wBAAA,QAAO;GAClB,aAAW;GACN;GACE;GACF;GACL,mBAAiB,QAAQ,UAAU,KAAA;GACpB;aAEf,iBAAA,GAAA,kBAAA,KAAC,yBAAA,WAAD;IACE,WAAW,wBAAA,QAAO;IAClB,OAAO,EACL,WAAW,eAAe,MAAO,QAAQ,MAAO,IAAI,KACrD;IACD,CAAA;GACG,CAAA,CACH;;EAGX"}

package/dist/components/Progress/Progress.d.ts

@@ -1,7 +1,8 @@
 import { default as React } from 'react';
+import { Size } from '../../utils/size';
 type ProgressProps = {
     /** The size variant of the progress bar */
-    size: "sm" | "lg";
+    size: Size & ("sm" | "lg");
     /**
      * The colour variant to use for the progress bar indicator
      * If not set, the progress bar will be rendered with a gray tone, which should only be used when the progress bar is empty

package/dist/components/Progress/Progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAOjD,KAAK,aAAa,GAAG;IACnB,2CAA2C;IAC3C,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAE3C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACxD,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD;;GAEG;AACH,eAAO,MAAM,QAAQ,mGAiDpB,CAAC"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,KAAK,aAAa,GAAG;IACnB,2CAA2C;IAC3C,IAAI,EAAE,IAAI,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAE3B;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAE3C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACxD,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD;;GAEG;AACH,eAAO,MAAM,QAAQ,mGAiDpB,CAAC"}

package/dist/components/Progress/Progress.js

@@ -1,57 +1,41 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import Progress_module_default from "./Progress.module.js";
 import classNames from "classnames";
-import styles from "./Progress.module.css.js";
-import { Root, Indicator } from "@radix-ui/react-progress";
-const Progress = forwardRef(
-  function Progress2({
-    size,
-    tint,
-    className,
-    value: valueProp,
-    max: maxProp,
-    getValueLabel,
-    ...props
-  }, ref) {
-    const max = maxProp ?? 1;
-    const value = valueProp ?? max;
-    const labelId = useId();
-    const label = getValueLabel ? getValueLabel(value, max) : null;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classNames(styles["progress-bar-container"], className),
-        "data-tint": tint,
-        ...props,
-        children: [
-          label && /* @__PURE__ */ jsx("div", { id: labelId, className: styles["progress-bar-label"], children: label }),
-          /* @__PURE__ */ jsx(
-            Root,
-            {
-              className: styles["progress-bar"],
-              "data-size": size,
-              max,
-              value,
-              ref,
-              "aria-labelledby": label ? labelId : void 0,
-              getValueLabel,
-              children: /* @__PURE__ */ jsx(
-                Indicator,
-                {
-                  className: styles["progress-bar-indicator"],
-                  style: {
-                    transform: `translateX(-${100 - value / max * 100}%)`
-                  }
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-export {
-  Progress
-};
-//# sourceMappingURL=Progress.js.map
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Indicator, Root } from "@radix-ui/react-progress";
+//#region src/components/Progress/Progress.tsx
+/**
+* Displays an indicator showing the completion progress of a task, optionally with a label
+*/
+var Progress = forwardRef(function Progress({ size, tint, className, value: valueProp, max: maxProp, getValueLabel, ...props }, ref) {
+	const max = maxProp ?? 1;
+	const value = valueProp ?? max;
+	const labelId = useId();
+	const label = getValueLabel ? getValueLabel(value, max) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(Progress_module_default["progress-bar-container"], className),
+		"data-tint": tint,
+		...props,
+		children: [label && /* @__PURE__ */ jsx("div", {
+			id: labelId,
+			className: Progress_module_default["progress-bar-label"],
+			children: label
+		}), /* @__PURE__ */ jsx(Root, {
+			className: Progress_module_default["progress-bar"],
+			"data-size": size,
+			max,
+			value,
+			ref,
+			"aria-labelledby": label ? labelId : void 0,
+			getValueLabel,
+			children: /* @__PURE__ */ jsx(Indicator, {
+				className: Progress_module_default["progress-bar-indicator"],
+				style: { transform: `translateX(-${100 - value / max * 100}%)` }
+			})
+		})]
+	});
+});
+//#endregion
+export { Progress };
+
+//# sourceMappingURL=Progress.js.map

package/dist/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { forwardRef, useId } from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Progress.module.css\";\n\nimport { Root, Indicator } from \"@radix-ui/react-progress\";\n\ntype ProgressProps = {\n  /** The size variant of the progress bar */\n  size: \"sm\" | \"lg\";\n\n  /**\n   * The colour variant to use for the progress bar indicator\n   * If not set, the progress bar will be rendered with a gray tone, which should only be used when the progress bar is empty\n   */\n  tint?: \"red\" | \"orange\" | \"lime\" | \"green\";\n\n  /** The CSS class name forwarded to the root element */\n  className?: string;\n\n  /** The value of the progress bar. Defaults to max if not provided */\n  value?: number | null;\n\n  /** The maximum value of the progress bar. Defaults to 1 if not provided */\n  max?: number;\n\n  /**\n   * A function to get the text label to display in the progress bar.\n   * If set, it will display a label on top of the progress bar\n   */\n  getValueLabel?: (value: number, max: number) => string;\n} & Omit<React.ComponentProps<\"div\">, \"children\">;\n\n/**\n * Displays an indicator showing the completion progress of a task, optionally with a label\n */\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  function Progress(\n    {\n      size,\n      tint,\n      className,\n      value: valueProp,\n      max: maxProp,\n      getValueLabel,\n      ...props\n    },\n    ref,\n  ) {\n    const max = maxProp ?? 1;\n    const value = valueProp ?? max;\n    const labelId = useId();\n    const label = getValueLabel ? getValueLabel(value, max) : null;\n\n    return (\n      <div\n        className={classNames(styles[\"progress-bar-container\"], className)}\n        data-tint={tint}\n        {...props}\n      >\n        {label && (\n          <div id={labelId} className={styles[\"progress-bar-label\"]}>\n            {label}\n          </div>\n        )}\n\n        <Root\n          className={styles[\"progress-bar\"]}\n          data-size={size}\n          max={max}\n          value={value}\n          ref={ref}\n          aria-labelledby={label ? labelId : undefined}\n          getValueLabel={getValueLabel}\n        >\n          <Indicator\n            className={styles[\"progress-bar-indicator\"]}\n            style={{\n              transform: `translateX(-${100 - (value / max) * 100}%)`,\n            }}\n          />\n        </Root>\n      </div>\n    );\n  },\n);\n"],"names":["Progress"],"mappings":";;;;;AA2CO,MAAM,WAAW;AAAA,EACtB,SAASA,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,KAAK;AAAA,IACL;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,MAAM,WAAW;AACvB,UAAM,QAAQ,aAAa;AAC3B,UAAM,UAAU,MAAA;AAChB,UAAM,QAAQ,gBAAgB,cAAc,OAAO,GAAG,IAAI;AAE1D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,WAAW,OAAO,wBAAwB,GAAG,SAAS;AAAA,QACjE,aAAW;AAAA,QACV,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,SACC,oBAAC,SAAI,IAAI,SAAS,WAAW,OAAO,oBAAoB,GACrD,UAAA,MAAA,CACH;AAAA,UAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,OAAO,cAAc;AAAA,cAChC,aAAW;AAAA,cACX;AAAA,cACA;AAAA,cACA;AAAA,cACA,mBAAiB,QAAQ,UAAU;AAAA,cACnC;AAAA,cAEA,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,OAAO,wBAAwB;AAAA,kBAC1C,OAAO;AAAA,oBACL,WAAW,eAAe,MAAO,QAAQ,MAAO,GAAG;AAAA,kBAAA;AAAA,gBACrD;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"Progress.js","names":[],"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { forwardRef, useId } from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Progress.module.css\";\n\nimport { Root, Indicator } from \"@radix-ui/react-progress\";\nimport type { Size } from \"../../utils/size\";\n\ntype ProgressProps = {\n  /** The size variant of the progress bar */\n  size: Size & (\"sm\" | \"lg\");\n\n  /**\n   * The colour variant to use for the progress bar indicator\n   * If not set, the progress bar will be rendered with a gray tone, which should only be used when the progress bar is empty\n   */\n  tint?: \"red\" | \"orange\" | \"lime\" | \"green\";\n\n  /** The CSS class name forwarded to the root element */\n  className?: string;\n\n  /** The value of the progress bar. Defaults to max if not provided */\n  value?: number | null;\n\n  /** The maximum value of the progress bar. Defaults to 1 if not provided */\n  max?: number;\n\n  /**\n   * A function to get the text label to display in the progress bar.\n   * If set, it will display a label on top of the progress bar\n   */\n  getValueLabel?: (value: number, max: number) => string;\n} & Omit<React.ComponentProps<\"div\">, \"children\">;\n\n/**\n * Displays an indicator showing the completion progress of a task, optionally with a label\n */\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  function Progress(\n    {\n      size,\n      tint,\n      className,\n      value: valueProp,\n      max: maxProp,\n      getValueLabel,\n      ...props\n    },\n    ref,\n  ) {\n    const max = maxProp ?? 1;\n    const value = valueProp ?? max;\n    const labelId = useId();\n    const label = getValueLabel ? getValueLabel(value, max) : null;\n\n    return (\n      <div\n        className={classNames(styles[\"progress-bar-container\"], className)}\n        data-tint={tint}\n        {...props}\n      >\n        {label && (\n          <div id={labelId} className={styles[\"progress-bar-label\"]}>\n            {label}\n          </div>\n        )}\n\n        <Root\n          className={styles[\"progress-bar\"]}\n          data-size={size}\n          max={max}\n          value={value}\n          ref={ref}\n          aria-labelledby={label ? labelId : undefined}\n          getValueLabel={getValueLabel}\n        >\n          <Indicator\n            className={styles[\"progress-bar-indicator\"]}\n            style={{\n              transform: `translateX(-${100 - (value / max) * 100}%)`,\n            }}\n          />\n        </Root>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AA4CA,IAAa,WAAW,WACtB,SAAS,SACP,EACE,MACA,MACA,WACA,OAAO,WACP,KAAK,SACL,eACA,GAAG,SAEL,KACA;CACA,MAAM,MAAM,WAAW;CACvB,MAAM,QAAQ,aAAa;CAC3B,MAAM,UAAU,OAAO;CACvB,MAAM,QAAQ,gBAAgB,cAAc,OAAO,IAAI,GAAG;AAE1D,QACE,qBAAC,OAAD;EACE,WAAW,WAAW,wBAAO,2BAA2B,UAAU;EAClE,aAAW;EACX,GAAI;YAHN,CAKG,SACC,oBAAC,OAAD;GAAK,IAAI;GAAS,WAAW,wBAAO;aACjC;GACG,CAAA,EAGR,oBAAC,MAAD;GACE,WAAW,wBAAO;GAClB,aAAW;GACN;GACE;GACF;GACL,mBAAiB,QAAQ,UAAU,KAAA;GACpB;aAEf,oBAAC,WAAD;IACE,WAAW,wBAAO;IAClB,OAAO,EACL,WAAW,eAAe,MAAO,QAAQ,MAAO,IAAI,KACrD;IACD,CAAA;GACG,CAAA,CACH;;EAGX"}

package/dist/components/Progress/Progress.module.cjs

@@ -0,0 +1,11 @@
+//#region src/components/Progress/Progress.module.css
+var Progress_module_default = {
+	"progress-bar": "_progress-bar_1l6pa_8",
+	"progress-bar-container": "_progress-bar-container_1l6pa_24",
+	"progress-bar-label": "_progress-bar-label_1l6pa_53",
+	"progress-bar-indicator": "_progress-bar-indicator_1l6pa_59"
+};
+//#endregion
+exports.default = Progress_module_default;
+
+//# sourceMappingURL=Progress.module.cjs.map

package/dist/components/Progress/Progress.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.module.cjs","names":[],"sources":["../../../src/components/Progress/Progress.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.progress-bar {\n  position: relative;\n  background-color: var(--cpd-color-gray-200);\n  border: 1px solid var(--cpd-color-gray-400);\n  border-radius: var(--cpd-radius-pill-effect);\n  overflow: hidden;\n\n  &[data-size=\"sm\"] {\n    block-size: var(--cpd-space-2x);\n  }\n\n  &[data-size=\"lg\"] {\n    block-size: var(--cpd-space-4x);\n  }\n}\n\n.progress-bar-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cpd-space-1x);\n\n  --cpd-progress-bar-main: var(--cpd-color-text-secondary);\n  --cpd-progress-bar-muted: var(--cpd-color-gray-800);\n\n  &[data-tint=\"green\"] {\n    --cpd-progress-bar-main: var(--cpd-color-text-success-primary);\n    --cpd-progress-bar-muted: var(--cpd-color-green-800);\n  }\n\n  &[data-tint=\"lime\"] {\n    --cpd-progress-bar-main: var(--cpd-color-lime-900);\n    --cpd-progress-bar-muted: var(--cpd-color-lime-800);\n  }\n\n  &[data-tint=\"orange\"] {\n    --cpd-progress-bar-main: var(--cpd-color-orange-900);\n    --cpd-progress-bar-muted: var(--cpd-color-orange-800);\n  }\n\n  &[data-tint=\"red\"] {\n    --cpd-progress-bar-main: var(--cpd-color-text-critical-primary);\n    --cpd-progress-bar-muted: var(--cpd-color-red-800);\n  }\n}\n\n.progress-bar-label {\n  font: var(--cpd-font-body-sm-medium);\n  letter-spacing: var(--cpd-font-letter-spacing-body-sm);\n  color: var(--cpd-progress-bar-main);\n}\n\n.progress-bar-indicator {\n  position: absolute;\n  inset: 0;\n  transition: transform 0.2s ease-in-out;\n  background-image: linear-gradient(\n    135deg,\n    var(--cpd-progress-bar-muted) 0%,\n    var(--cpd-progress-bar-muted) 25%,\n    var(--cpd-progress-bar-main) 25%,\n    var(--cpd-progress-bar-main) 50%,\n    var(--cpd-progress-bar-muted) 50%,\n    var(--cpd-progress-bar-muted) 75%,\n    var(--cpd-progress-bar-main) 75%,\n    var(--cpd-progress-bar-main) 100%,\n    var(--cpd-progress-bar-muted) 100%\n  );\n\n  /* sqrt(number of stripes * 2 * (stripe width)^2) = sqrt(4 * 2 * 2^2) = sqrt(32) */\n  background-size: 5.6569px 5.6569px;\n}\n\n@media (forced-colors: active) {\n  .progress-bar-indicator {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/Progress/Progress.module.js

@@ -0,0 +1,11 @@
+//#region src/components/Progress/Progress.module.css
+var Progress_module_default = {
+	"progress-bar": "_progress-bar_1l6pa_8",
+	"progress-bar-container": "_progress-bar-container_1l6pa_24",
+	"progress-bar-label": "_progress-bar-label_1l6pa_53",
+	"progress-bar-indicator": "_progress-bar-indicator_1l6pa_59"
+};
+//#endregion
+export { Progress_module_default as default };
+
+//# sourceMappingURL=Progress.module.js.map

package/dist/components/Progress/Progress.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.module.js","names":[],"sources":["../../../src/components/Progress/Progress.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.progress-bar {\n  position: relative;\n  background-color: var(--cpd-color-gray-200);\n  border: 1px solid var(--cpd-color-gray-400);\n  border-radius: var(--cpd-radius-pill-effect);\n  overflow: hidden;\n\n  &[data-size=\"sm\"] {\n    block-size: var(--cpd-space-2x);\n  }\n\n  &[data-size=\"lg\"] {\n    block-size: var(--cpd-space-4x);\n  }\n}\n\n.progress-bar-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cpd-space-1x);\n\n  --cpd-progress-bar-main: var(--cpd-color-text-secondary);\n  --cpd-progress-bar-muted: var(--cpd-color-gray-800);\n\n  &[data-tint=\"green\"] {\n    --cpd-progress-bar-main: var(--cpd-color-text-success-primary);\n    --cpd-progress-bar-muted: var(--cpd-color-green-800);\n  }\n\n  &[data-tint=\"lime\"] {\n    --cpd-progress-bar-main: var(--cpd-color-lime-900);\n    --cpd-progress-bar-muted: var(--cpd-color-lime-800);\n  }\n\n  &[data-tint=\"orange\"] {\n    --cpd-progress-bar-main: var(--cpd-color-orange-900);\n    --cpd-progress-bar-muted: var(--cpd-color-orange-800);\n  }\n\n  &[data-tint=\"red\"] {\n    --cpd-progress-bar-main: var(--cpd-color-text-critical-primary);\n    --cpd-progress-bar-muted: var(--cpd-color-red-800);\n  }\n}\n\n.progress-bar-label {\n  font: var(--cpd-font-body-sm-medium);\n  letter-spacing: var(--cpd-font-letter-spacing-body-sm);\n  color: var(--cpd-progress-bar-main);\n}\n\n.progress-bar-indicator {\n  position: absolute;\n  inset: 0;\n  transition: transform 0.2s ease-in-out;\n  background-image: linear-gradient(\n    135deg,\n    var(--cpd-progress-bar-muted) 0%,\n    var(--cpd-progress-bar-muted) 25%,\n    var(--cpd-progress-bar-main) 25%,\n    var(--cpd-progress-bar-main) 50%,\n    var(--cpd-progress-bar-muted) 50%,\n    var(--cpd-progress-bar-muted) 75%,\n    var(--cpd-progress-bar-main) 75%,\n    var(--cpd-progress-bar-main) 100%,\n    var(--cpd-progress-bar-muted) 100%\n  );\n\n  /* sqrt(number of stripes * 2 * (stripe width)^2) = sqrt(4 * 2 * 2^2) = sqrt(32) */\n  background-size: 5.6569px 5.6569px;\n}\n\n@media (forced-colors: active) {\n  .progress-bar-indicator {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.cjs

@@ -1,121 +1,114 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const react = require("@floating-ui/react");
-const Text = require("../Typography/Text.cjs");
-const ReleaseAnnouncement_module = require("./ReleaseAnnouncement.module.css.cjs");
-const ReleaseAnnouncementContext = require("./ReleaseAnnouncementContext.cjs");
-const useReleaseAnnouncement = require("./useReleaseAnnouncement.cjs");
-const Button = require("../Button/Button.cjs");
-function ReleaseAnnouncement({
-  /**
-   * The children anchor should be a single valid React element.
-   */
-  children,
-  placement = "right",
-  displayArrow = true,
-  ...props
-}) {
-  const context = useReleaseAnnouncement.useReleaseAnnouncement({ placement, displayArrow, ...props });
-  return /* @__PURE__ */ jsxRuntime.jsxs(ReleaseAnnouncementContext.ReleaseAnnouncementContext.Provider, { value: context, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ReleaseAnnouncementAnchor, { children }),
-    /* @__PURE__ */ jsxRuntime.jsx(ReleaseAnnouncementContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ReleaseAnnouncementContent, {}) })
-  ] });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Text = require("../Typography/Text.cjs");
+const require_Button = require("../Button/Button.cjs");
+const require_ReleaseAnnouncement_module = require("./ReleaseAnnouncement.module.cjs");
+const require_useReleaseAnnouncement = require("./useReleaseAnnouncement.cjs");
+const require_ReleaseAnnouncementContext = require("./ReleaseAnnouncementContext.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _floating_ui_react = require("@floating-ui/react");
+//#region src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx
+/**
+* The ReleaseAnnouncement component purpose is to inform the user of a new available feature.
+* This component is a floating component that will appear next to an anchor.
+* @param children - Act as an anchor, the component will be displayed alongside of it.
+* @param placement - The placement of the component
+*/
+function ReleaseAnnouncement({ children, placement = "right", displayArrow = true, ...props }) {
+	const context = require_useReleaseAnnouncement.useReleaseAnnouncement({
+		placement,
+		displayArrow,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ReleaseAnnouncementContext.ReleaseAnnouncementContext.Provider, {
+		value: context,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReleaseAnnouncementAnchor, { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReleaseAnnouncementContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReleaseAnnouncementContent, {}) })]
+	});
 }
-function ReleaseAnnouncementAnchor({
-  children
-}) {
-  const context = ReleaseAnnouncementContext.useReleaseAnnouncementContext();
-  const childrenRef = children?.ref;
-  const ref = react.useMergeRefs([context.refs.setReference, childrenRef]);
-  if (!React.isValidElement(children)) {
-    throw new Error(
-      "ReleaseAnnouncement anchor must be a single valid React element"
-    );
-  }
-  const referenceProps = context.getReferenceProps({
-    ref,
-    // If the ReleaseAnnouncement is open, we need manually aria-describedby.
-    // The RA has the dialog role and it's not adding automatically the aria-describedby.
-    ...context.open && {
-      "aria-describedby": context.getFloatingProps().id
-    }
-  });
-  delete referenceProps["aria-expanded"];
-  return React.cloneElement(children, referenceProps);
+/**
+* The anchor for the ReleaseAnnouncement components.
+* The Release Announcement will appear next to this element.
+* @param children - should be a single valid React element
+* @constructor
+*/
+function ReleaseAnnouncementAnchor({ children }) {
+	const context = require_ReleaseAnnouncementContext.useReleaseAnnouncementContext();
+	const childrenRef = children?.ref;
+	const ref = (0, _floating_ui_react.useMergeRefs)([context.refs.setReference, childrenRef]);
+	if (!(0, react.isValidElement)(children)) throw new Error("ReleaseAnnouncement anchor must be a single valid React element");
+	const referenceProps = context.getReferenceProps({
+		ref,
+		...context.open && { "aria-describedby": context.getFloatingProps().id }
+	});
+	delete referenceProps["aria-expanded"];
+	return (0, react.cloneElement)(children, referenceProps);
 }
-function ReleaseAnnouncementContainer({
-  children
-}) {
-  const {
-    context: floatingContext,
-    arrowRef,
-    displayArrow,
-    ...rest
-  } = ReleaseAnnouncementContext.useReleaseAnnouncementContext();
-  if (!floatingContext.open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context: floatingContext, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: rest.refs.setFloating,
-      style: rest.floatingStyles,
-      "aria-labelledby": rest.labelId,
-      "aria-describedby": rest.descriptionId,
-      ...rest.getFloatingProps(),
-      className: ReleaseAnnouncement_module.default.content,
-      children: [
-        displayArrow && /* @__PURE__ */ jsxRuntime.jsx(
-          react.FloatingArrow,
-          {
-            ref: arrowRef,
-            context: floatingContext,
-            width: 20,
-            height: 12,
-            className: ReleaseAnnouncement_module.default.arrow
-          }
-        ),
-        children
-      ]
-    }
-  ) }) });
+/**
+* The container for the ReleaseAnnouncement components.
+* Manage focus and positioning of the children.
+* @param children
+*/
+function ReleaseAnnouncementContainer({ children }) {
+	const { context: floatingContext, arrowRef, displayArrow, ...rest } = require_ReleaseAnnouncementContext.useReleaseAnnouncementContext();
+	if (!floatingContext.open) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingFocusManager, {
+		context: floatingContext,
+		modal: false,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: rest.refs.setFloating,
+			style: rest.floatingStyles,
+			"aria-labelledby": rest.labelId,
+			"aria-describedby": rest.descriptionId,
+			...rest.getFloatingProps(),
+			className: require_ReleaseAnnouncement_module.default.content,
+			children: [displayArrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingArrow, {
+				ref: arrowRef,
+				context: floatingContext,
+				width: 20,
+				height: 12,
+				className: require_ReleaseAnnouncement_module.default.arrow
+			}), children]
+		})
+	}) });
 }
+/**
+* The content of the ReleaseAnnouncement component.
+* ---------------------------------------------------------------
+* - The header in a bold text                  -------------    -
+* - A description in a regular text           | Close button |  -
+* - Description can be on multiple lines       -------------    -
+* ---------------------------------------------------------------
+*/
 function ReleaseAnnouncementContent() {
-  const { labelId, descriptionId, header, description, closeLabel, onClick } = ReleaseAnnouncementContext.useReleaseAnnouncementContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Text.Text,
-      {
-        as: "h3",
-        id: labelId,
-        className: ReleaseAnnouncement_module.default.header,
-        size: "lg",
-        weight: "semibold",
-        children: header
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Text.Text,
-      {
-        as: "span",
-        id: descriptionId,
-        className: ReleaseAnnouncement_module.default.description,
-        size: "sm",
-        weight: "regular",
-        children: description
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button.Button,
-      {
-        size: "sm",
-        kind: "secondary",
-        className: ReleaseAnnouncement_module.default.button,
-        onClick,
-        children: closeLabel
-      }
-    )
-  ] });
+	const { labelId, descriptionId, header, description, closeLabel, onClick } = require_ReleaseAnnouncementContext.useReleaseAnnouncementContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+			as: "h3",
+			id: labelId,
+			className: require_ReleaseAnnouncement_module.default.header,
+			size: "lg",
+			weight: "semibold",
+			children: header
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+			as: "span",
+			id: descriptionId,
+			className: require_ReleaseAnnouncement_module.default.description,
+			size: "sm",
+			weight: "regular",
+			children: description
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+			size: "sm",
+			kind: "secondary",
+			className: require_ReleaseAnnouncement_module.default.button,
+			onClick,
+			children: closeLabel
+		})
+	] });
 }
+//#endregion
 exports.ReleaseAnnouncement = ReleaseAnnouncement;
-//# sourceMappingURL=ReleaseAnnouncement.cjs.map
+
+//# sourceMappingURL=ReleaseAnnouncement.cjs.map

package/dist/components/ReleaseAnnouncement/ReleaseAnnouncement.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseAnnouncement.cjs","sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  cloneElement,\n  isValidElement,\n  type JSX,\n  type PropsWithChildren,\n  type Ref,\n} from \"react\";\nimport {\n  FloatingPortal,\n  FloatingFocusManager,\n  type Placement,\n  useMergeRefs,\n  FloatingArrow,\n} from \"@floating-ui/react\";\nimport { Text } from \"../Typography/Text\";\nimport { Button } from \"../Button\";\nimport styles from \"./ReleaseAnnouncement.module.css\";\nimport {\n  useReleaseAnnouncementContext,\n  ReleaseAnnouncementContext,\n} from \"./ReleaseAnnouncementContext\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];\n\ninterface ReleaseAnnouncementProps extends Omit<\n  UseReleaseAnnouncementParam,\n  \"placement\" | \"displayArrow\"\n> {\n  /**\n   * The placement of the component\n   * @default \"right\"\n   */\n  placement?: Placement;\n  /**\n   * Whether to display an arrow.\n   * @default true\n   */\n  displayArrow?: boolean;\n}\n\n/**\n * The ReleaseAnnouncement component purpose is to inform the user of a new available feature.\n * This component is a floating component that will appear next to an anchor.\n * @param children - Act as an anchor, the component will be displayed alongside of it.\n * @param placement - The placement of the component\n */\nexport function ReleaseAnnouncement({\n  /**\n   * The children anchor should be a single valid React element.\n   */\n  children,\n  placement = \"right\",\n  displayArrow = true,\n  ...props\n}: PropsWithChildren<ReleaseAnnouncementProps>): JSX.Element {\n  const context = useReleaseAnnouncement({ placement, displayArrow, ...props });\n\n  return (\n    <ReleaseAnnouncementContext.Provider value={context}>\n      <ReleaseAnnouncementAnchor>{children}</ReleaseAnnouncementAnchor>\n      <ReleaseAnnouncementContainer>\n        <ReleaseAnnouncementContent />\n      </ReleaseAnnouncementContainer>\n    </ReleaseAnnouncementContext.Provider>\n  );\n}\n\n/**\n * The anchor for the ReleaseAnnouncement components.\n * The Release Announcement will appear next to this element.\n * @param children - should be a single valid React element\n * @constructor\n */\nfunction ReleaseAnnouncementAnchor({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element {\n  const context = useReleaseAnnouncementContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  if (!isValidElement(children)) {\n    throw new Error(\n      \"ReleaseAnnouncement anchor must be a single valid React element\",\n    );\n  }\n\n  const referenceProps = context.getReferenceProps({\n    ref,\n    // If the ReleaseAnnouncement is open, we need manually aria-describedby.\n    // The RA has the dialog role and it's not adding automatically the aria-describedby.\n    ...(context.open && {\n      \"aria-describedby\": context.getFloatingProps().id as string,\n    }),\n  });\n\n  // getReferenceProps includes aria-expanded (being true when the popup is shown)\n  // but axe only allows this on certain elements and we use release anncounements on\n  // all sorts of elements. Semantically, I don't think it makes sense because the point\n  // of aria-expanded is a hint to the user that there is something that can be expanded.\n  // The user can't cause a release announcement to be shown, it just appears when it thinks\n  // it's time, so I think adding it here is misleading.\n  delete referenceProps[\"aria-expanded\"];\n\n  return cloneElement(children, referenceProps);\n}\n\n/**\n * The container for the ReleaseAnnouncement components.\n * Manage focus and positioning of the children.\n * @param children\n */\nfunction ReleaseAnnouncementContainer({\n  children,\n}: PropsWithChildren): JSX.Element | null {\n  const {\n    context: floatingContext,\n    arrowRef,\n    displayArrow,\n    ...rest\n  } = useReleaseAnnouncementContext();\n\n  if (!floatingContext.open) return null;\n\n  return (\n    <FloatingPortal>\n      <FloatingFocusManager context={floatingContext} modal={false}>\n        <div\n          ref={rest.refs.setFloating}\n          style={rest.floatingStyles}\n          aria-labelledby={rest.labelId}\n          aria-describedby={rest.descriptionId}\n          {...rest.getFloatingProps()}\n          className={styles.content}\n        >\n          {displayArrow && (\n            <FloatingArrow\n              ref={arrowRef}\n              context={floatingContext}\n              // design absolute value\n              width={20}\n              height={12}\n              className={styles.arrow}\n            />\n          )}\n          {children}\n        </div>\n      </FloatingFocusManager>\n    </FloatingPortal>\n  );\n}\n\n/**\n * The content of the ReleaseAnnouncement component.\n * ---------------------------------------------------------------\n * - The header in a bold text                  -------------    -\n * - A description in a regular text           | Close button |  -\n * - Description can be on multiple lines       -------------    -\n * ---------------------------------------------------------------\n */\nfunction ReleaseAnnouncementContent(): JSX.Element {\n  const { labelId, descriptionId, header, description, closeLabel, onClick } =\n    useReleaseAnnouncementContext();\n\n  return (\n    <>\n      <Text\n        as=\"h3\"\n        id={labelId}\n        className={styles.header}\n        size=\"lg\"\n        weight=\"semibold\"\n      >\n        {header}\n      </Text>\n      <Text\n        as=\"span\"\n        id={descriptionId}\n        className={styles.description}\n        size=\"sm\"\n        weight=\"regular\"\n      >\n        {description}\n      </Text>\n      <Button\n        size=\"sm\"\n        kind=\"secondary\"\n        className={styles.button}\n        onClick={onClick}\n      >\n        {closeLabel}\n      </Button>\n    </>\n  );\n}\n"],"names":["useReleaseAnnouncement","jsxs","ReleaseAnnouncementContext","jsx","useReleaseAnnouncementContext","useMergeRefs","isValidElement","cloneElement","FloatingPortal","FloatingFocusManager","styles","FloatingArrow","Fragment","Text","Button"],"mappings":";;;;;;;;;;AAsDO,SAAS,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIlC;AAAA,EACA,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,GAAG;AACL,GAA6D;AAC3D,QAAM,UAAUA,uBAAAA,uBAAuB,EAAE,WAAW,cAAc,GAAG,OAAO;AAE5E,SACEC,2BAAAA,KAACC,2BAAAA,2BAA2B,UAA3B,EAAoC,OAAO,SAC1C,UAAA;AAAA,IAAAC,+BAAC,6BAA2B,UAAS;AAAA,IACrCA,2BAAAA,IAAC,8BAAA,EACC,UAAAA,2BAAAA,IAAC,4BAAA,CAAA,CAA2B,EAAA,CAC9B;AAAA,EAAA,GACF;AAEJ;AAQA,SAAS,0BAA0B;AAAA,EACjC;AACF,GAA6C;AAC3C,QAAM,UAAUC,2BAAAA,8BAAA;AAIhB,QAAM,cAAe,UAAoD;AACzE,QAAM,MAAMC,MAAAA,aAAa,CAAC,QAAQ,KAAK,cAAc,WAAW,CAAC;AAEjE,MAAI,CAACC,MAAAA,eAAe,QAAQ,GAAG;AAC7B,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,iBAAiB,QAAQ,kBAAkB;AAAA,IAC/C;AAAA;AAAA;AAAA,IAGA,GAAI,QAAQ,QAAQ;AAAA,MAClB,oBAAoB,QAAQ,mBAAmB;AAAA,IAAA;AAAA,EACjD,CACD;AAQD,SAAO,eAAe,eAAe;AAErC,SAAOC,MAAAA,aAAa,UAAU,cAAc;AAC9C;AAOA,SAAS,6BAA6B;AAAA,EACpC;AACF,GAA0C;AACxC,QAAM;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDH,yDAAA;AAEJ,MAAI,CAAC,gBAAgB,KAAM,QAAO;AAElC,wCACGI,MAAAA,gBAAA,EACC,UAAAL,2BAAAA,IAACM,MAAAA,wBAAqB,SAAS,iBAAiB,OAAO,OACrD,UAAAR,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,KAAK,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,MACZ,mBAAiB,KAAK;AAAA,MACtB,oBAAkB,KAAK;AAAA,MACtB,GAAG,KAAK,iBAAA;AAAA,MACT,WAAWS,2BAAAA,QAAO;AAAA,MAEjB,UAAA;AAAA,QAAA,gBACCP,2BAAAA;AAAAA,UAACQ,MAAAA;AAAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,SAAS;AAAA,YAET,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWD,2BAAAA,QAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAUA,SAAS,6BAA0C;AACjD,QAAM,EAAE,SAAS,eAAe,QAAQ,aAAa,YAAY,QAAA,IAC/DN,yDAAA;AAEF,SACEH,2BAAAA,KAAAW,qBAAA,EACE,UAAA;AAAA,IAAAT,2BAAAA;AAAAA,MAACU,KAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAWH,2BAAAA,QAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHP,2BAAAA;AAAAA,MAACU,KAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAWH,2BAAAA,QAAO;AAAA,QAClB,MAAK;AAAA,QACL,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHP,2BAAAA;AAAAA,MAACW,OAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAWJ,2BAAAA,QAAO;AAAA,QAClB;AAAA,QAEC,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;;"}
+{"version":3,"file":"ReleaseAnnouncement.cjs","names":[],"sources":["../../../src/components/ReleaseAnnouncement/ReleaseAnnouncement.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  cloneElement,\n  isValidElement,\n  type JSX,\n  type PropsWithChildren,\n  type Ref,\n} from \"react\";\nimport {\n  FloatingPortal,\n  FloatingFocusManager,\n  type Placement,\n  useMergeRefs,\n  FloatingArrow,\n} from \"@floating-ui/react\";\nimport { Text } from \"../Typography/Text\";\nimport { Button } from \"../Button\";\nimport styles from \"./ReleaseAnnouncement.module.css\";\nimport {\n  useReleaseAnnouncementContext,\n  ReleaseAnnouncementContext,\n} from \"./ReleaseAnnouncementContext\";\nimport { useReleaseAnnouncement } from \"./useReleaseAnnouncement\";\n\ntype UseReleaseAnnouncementParam = Parameters<typeof useReleaseAnnouncement>[0];\n\ninterface ReleaseAnnouncementProps extends Omit<\n  UseReleaseAnnouncementParam,\n  \"placement\" | \"displayArrow\"\n> {\n  /**\n   * The placement of the component\n   * @default \"right\"\n   */\n  placement?: Placement;\n  /**\n   * Whether to display an arrow.\n   * @default true\n   */\n  displayArrow?: boolean;\n}\n\n/**\n * The ReleaseAnnouncement component purpose is to inform the user of a new available feature.\n * This component is a floating component that will appear next to an anchor.\n * @param children - Act as an anchor, the component will be displayed alongside of it.\n * @param placement - The placement of the component\n */\nexport function ReleaseAnnouncement({\n  /**\n   * The children anchor should be a single valid React element.\n   */\n  children,\n  placement = \"right\",\n  displayArrow = true,\n  ...props\n}: PropsWithChildren<ReleaseAnnouncementProps>): JSX.Element {\n  const context = useReleaseAnnouncement({ placement, displayArrow, ...props });\n\n  return (\n    <ReleaseAnnouncementContext.Provider value={context}>\n      <ReleaseAnnouncementAnchor>{children}</ReleaseAnnouncementAnchor>\n      <ReleaseAnnouncementContainer>\n        <ReleaseAnnouncementContent />\n      </ReleaseAnnouncementContainer>\n    </ReleaseAnnouncementContext.Provider>\n  );\n}\n\n/**\n * The anchor for the ReleaseAnnouncement components.\n * The Release Announcement will appear next to this element.\n * @param children - should be a single valid React element\n * @constructor\n */\nfunction ReleaseAnnouncementAnchor({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element {\n  const context = useReleaseAnnouncementContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  if (!isValidElement(children)) {\n    throw new Error(\n      \"ReleaseAnnouncement anchor must be a single valid React element\",\n    );\n  }\n\n  const referenceProps = context.getReferenceProps({\n    ref,\n    // If the ReleaseAnnouncement is open, we need manually aria-describedby.\n    // The RA has the dialog role and it's not adding automatically the aria-describedby.\n    ...(context.open && {\n      \"aria-describedby\": context.getFloatingProps().id as string,\n    }),\n  });\n\n  // getReferenceProps includes aria-expanded (being true when the popup is shown)\n  // but axe only allows this on certain elements and we use release anncounements on\n  // all sorts of elements. Semantically, I don't think it makes sense because the point\n  // of aria-expanded is a hint to the user that there is something that can be expanded.\n  // The user can't cause a release announcement to be shown, it just appears when it thinks\n  // it's time, so I think adding it here is misleading.\n  delete referenceProps[\"aria-expanded\"];\n\n  return cloneElement(children, referenceProps);\n}\n\n/**\n * The container for the ReleaseAnnouncement components.\n * Manage focus and positioning of the children.\n * @param children\n */\nfunction ReleaseAnnouncementContainer({\n  children,\n}: PropsWithChildren): JSX.Element | null {\n  const {\n    context: floatingContext,\n    arrowRef,\n    displayArrow,\n    ...rest\n  } = useReleaseAnnouncementContext();\n\n  if (!floatingContext.open) return null;\n\n  return (\n    <FloatingPortal>\n      <FloatingFocusManager context={floatingContext} modal={false}>\n        <div\n          ref={rest.refs.setFloating}\n          style={rest.floatingStyles}\n          aria-labelledby={rest.labelId}\n          aria-describedby={rest.descriptionId}\n          {...rest.getFloatingProps()}\n          className={styles.content}\n        >\n          {displayArrow && (\n            <FloatingArrow\n              ref={arrowRef}\n              context={floatingContext}\n              // design absolute value\n              width={20}\n              height={12}\n              className={styles.arrow}\n            />\n          )}\n          {children}\n        </div>\n      </FloatingFocusManager>\n    </FloatingPortal>\n  );\n}\n\n/**\n * The content of the ReleaseAnnouncement component.\n * ---------------------------------------------------------------\n * - The header in a bold text                  -------------    -\n * - A description in a regular text           | Close button |  -\n * - Description can be on multiple lines       -------------    -\n * ---------------------------------------------------------------\n */\nfunction ReleaseAnnouncementContent(): JSX.Element {\n  const { labelId, descriptionId, header, description, closeLabel, onClick } =\n    useReleaseAnnouncementContext();\n\n  return (\n    <>\n      <Text\n        as=\"h3\"\n        id={labelId}\n        className={styles.header}\n        size=\"lg\"\n        weight=\"semibold\"\n      >\n        {header}\n      </Text>\n      <Text\n        as=\"span\"\n        id={descriptionId}\n        className={styles.description}\n        size=\"sm\"\n        weight=\"regular\"\n      >\n        {description}\n      </Text>\n      <Button\n        size=\"sm\"\n        kind=\"secondary\"\n        className={styles.button}\n        onClick={onClick}\n      >\n        {closeLabel}\n      </Button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsDA,SAAgB,oBAAoB,EAIlC,UACA,YAAY,SACZ,eAAe,MACf,GAAG,SACwD;CAC3D,MAAM,UAAU,+BAAA,uBAAuB;EAAE;EAAW;EAAc,GAAG;EAAO,CAAC;AAE7E,QACE,iBAAA,GAAA,kBAAA,MAAC,mCAAA,2BAA2B,UAA5B;EAAqC,OAAO;YAA5C,CACE,iBAAA,GAAA,kBAAA,KAAC,2BAAD,EAA4B,UAAqC,CAAA,EACjE,iBAAA,GAAA,kBAAA,KAAC,8BAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,4BAAD,EAA8B,CAAA,EACD,CAAA,CACK;;;;;;;;;AAU1C,SAAS,0BAA0B,EACjC,YAC2C;CAC3C,MAAM,UAAU,mCAAA,+BAA+B;CAI/C,MAAM,cAAe,UAAoD;CACzE,MAAM,OAAA,GAAA,mBAAA,cAAmB,CAAC,QAAQ,KAAK,cAAc,YAAY,CAAC;AAElE,KAAI,EAAA,GAAA,MAAA,gBAAgB,SAAS,CAC3B,OAAM,IAAI,MACR,kEACD;CAGH,MAAM,iBAAiB,QAAQ,kBAAkB;EAC/C;EAGA,GAAI,QAAQ,QAAQ,EAClB,oBAAoB,QAAQ,kBAAkB,CAAC,IAChD;EACF,CAAC;AAQF,QAAO,eAAe;AAEtB,SAAA,GAAA,MAAA,cAAoB,UAAU,eAAe;;;;;;;AAQ/C,SAAS,6BAA6B,EACpC,YACwC;CACxC,MAAM,EACJ,SAAS,iBACT,UACA,cACA,GAAG,SACD,mCAAA,+BAA+B;AAEnC,KAAI,CAAC,gBAAgB,KAAM,QAAO;AAElC,QACE,iBAAA,GAAA,kBAAA,KAAC,mBAAA,gBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,mBAAA,sBAAD;EAAsB,SAAS;EAAiB,OAAO;YACrD,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,KAAK,KAAK,KAAK;GACf,OAAO,KAAK;GACZ,mBAAiB,KAAK;GACtB,oBAAkB,KAAK;GACvB,GAAI,KAAK,kBAAkB;GAC3B,WAAW,mCAAA,QAAO;aANpB,CAQG,gBACC,iBAAA,GAAA,kBAAA,KAAC,mBAAA,eAAD;IACE,KAAK;IACL,SAAS;IAET,OAAO;IACP,QAAQ;IACR,WAAW,mCAAA,QAAO;IAClB,CAAA,EAEH,SACG;;EACe,CAAA,EACR,CAAA;;;;;;;;;;AAYrB,SAAS,6BAA0C;CACjD,MAAM,EAAE,SAAS,eAAe,QAAQ,aAAa,YAAY,YAC/D,mCAAA,+BAA+B;AAEjC,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;GACE,IAAG;GACH,IAAI;GACJ,WAAW,mCAAA,QAAO;GAClB,MAAK;GACL,QAAO;aAEN;GACI,CAAA;EACP,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;GACE,IAAG;GACH,IAAI;GACJ,WAAW,mCAAA,QAAO;GAClB,MAAK;GACL,QAAO;aAEN;GACI,CAAA;EACP,iBAAA,GAAA,kBAAA,KAAC,eAAA,QAAD;GACE,MAAK;GACL,MAAK;GACL,WAAW,mCAAA,QAAO;GACT;aAER;GACM,CAAA;EACR,EAAA,CAAA"}