se-design 1.0.97 → 1.0.98-dev.0

package/dist/index37.js

@@ -1,10 +1,10 @@
 import e, { useState as k, useEffect as w } from "react";
 import { Icon as x } from "./index6.js";
-import { useStableId as F } from "./index214.js";
-import { getA11yNameAttributes as P } from "./index86.js";
-import { getRegionAttributes as V } from "./index71.js";
-import { useAccessiblePress as q } from "./index72.js";
-import "./index77.js";
+import { useStableId as F } from "./index225.js";
+import { getA11yNameAttributes as P } from "./index87.js";
+import { getRegionAttributes as V } from "./index72.js";
+import { useAccessiblePress as q } from "./index73.js";
+import "./index78.js";
 function a() {
   return a = Object.assign ? Object.assign.bind() : function(i) {
     for (var o = 1; o < arguments.length; o++) {

package/dist/index38.js

@@ -1,9 +1,9 @@
 import a, { useState as w, useRef as $ } from "react";
 /* empty css         */
 import { Icon as A } from "./index6.js";
-import { getA11yNameAttributes as B } from "./index86.js";
-import "./index77.js";
-import { useStableId as D } from "./index214.js";
+import { getA11yNameAttributes as B } from "./index87.js";
+import "./index78.js";
+import { useStableId as D } from "./index225.js";
 function c() {
   return c = Object.assign ? Object.assign.bind() : function(r) {
     for (var n = 1; n < arguments.length; n++) {

package/dist/index39.js

@@ -3,11 +3,11 @@ import { Popover as Ae } from "./index19.js";
 import { Icon as Te } from "./index6.js";
 import { Checkbox as Re } from "./index24.js";
 import { Button as ne } from "./index4.js";
-import { getA11yNameAttributes as Le } from "./index86.js";
-import "./index77.js";
-import { useCombobox as He } from "./index73.js";
-import { useStableId as le } from "./index214.js";
-import { announce as Ke } from "./index80.js";
+import { getA11yNameAttributes as Le } from "./index87.js";
+import "./index78.js";
+import { useCombobox as He } from "./index74.js";
+import { useStableId as le } from "./index225.js";
+import { announce as Ke } from "./index81.js";
 /* empty css         */
 function d() {
   return d = Object.assign ? Object.assign.bind() : function(v) {

package/dist/index4.js

@@ -1,8 +1,8 @@
 import o, { forwardRef as G, useRef as H, useEffect as J } from "react";
-import { getA11yNameAttributes as K } from "./index86.js";
-import { useAccessiblePress as L } from "./index72.js";
-import "./index77.js";
-import { announce as M } from "./index80.js";
+import { getA11yNameAttributes as K } from "./index87.js";
+import { useAccessiblePress as L } from "./index73.js";
+import "./index78.js";
+import { announce as M } from "./index81.js";
 import { Icon as w } from "./index6.js";
 /* empty css        */
 function p() {

package/dist/index40.js

@@ -1,8 +1,8 @@
 import e from "react";
-import { useStableId as _ } from "./index214.js";
-import { mergeIds as k } from "./index231.js";
-import { getA11yNameAttributes as D } from "./index86.js";
-import "./index77.js";
+import { useStableId as _ } from "./index225.js";
+import { mergeIds as k } from "./index242.js";
+import { getA11yNameAttributes as D } from "./index87.js";
+import "./index78.js";
 /* empty css         */
 function J({
   value: r,

package/dist/index41.js

@@ -1,7 +1,7 @@
 import a, { useState as d, useRef as $, useEffect as r, useMemo as D } from "react";
 import { Icon as g } from "./index6.js";
 import { LabelChip as F } from "./index11.js";
-import { debounce as L } from "./index233.js";
+import { debounce as L } from "./index244.js";
 /* empty css         */
 function z(p) {
   const {

package/dist/index43.js

@@ -1,54 +1,137 @@
-import e, { useState as g, useRef as p } from "react";
-import { Icon as c } from "./index6.js";
-import { ProgressBar as x } from "./index42.js";
+import e, { useState as w } from "react";
+import { Icon as p } from "./index6.js";
+import { Button as I } from "./index4.js";
+import { getRegionAttributes as S } from "./index72.js";
+import { useAccessiblePress as k } from "./index73.js";
+import "./index78.js";
+import { useStableId as $ } from "./index225.js";
 /* empty css         */
-const r = {
-  gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
-  accordionCtn: "flex items-center justify-between",
-  gettingStartedWidgetContent: "overflow-hidden transition-all duration-300",
-  icon: "transition-transform duration-300 cursor-pointer",
-  actionItemCtn: "flex items-center gap-2 mt-[4px] mb-[10px]"
-}, E = ({
-  widgetClassName: s = "",
-  actionItems: a = []
+function l() {
+  return l = Object.assign ? Object.assign.bind() : function(c) {
+    for (var r = 1; r < arguments.length; r++) {
+      var n = arguments[r];
+      for (var s in n) ({}).hasOwnProperty.call(n, s) && (c[s] = n[s]);
+    }
+    return c;
+  }, l.apply(null, arguments);
+}
+const t = {
+  gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[8px] w-full bg-[var(--color-white)]",
+  header: "relative flex items-center justify-between gap-[24px] px-[16px]",
+  headerButton: "absolute inset-0 w-full h-full bg-transparent border-none cursor-pointer focus-outline",
+  headerLeft: "m-0 font-normal min-w-0 flex-1 flex items-center gap-[16px] pointer-events-none",
+  headerIconCtn: "relative shrink-0 size-[48px] rounded-full flex items-center justify-center",
+  headerTextCtn: "flex flex-col gap-[4px] items-start min-w-0",
+  headerRight: "flex items-center gap-[24px] shrink-0 pointer-events-none",
+  progressCtn: "flex flex-col gap-[8px] items-end justify-center",
+  progressSegmentsCtn: "flex gap-[6px] items-start w-[100px]",
+  progressSegment: "flex-1 h-[4px] rounded-[10px] bg-[var(--color-gray-600)]",
+  progressSegmentComplete: "flex-1 h-[4px] rounded-[10px] bg-[var(--color-green-500)]",
+  chevronIcon: "transition-transform duration-300",
+  divider: "h-px w-full bg-[var(--color-gray-200)]",
+  actionItemCtn: "flex items-center justify-between px-[16px] py-[16px]",
+  actionItemLeft: "flex items-center gap-[12px]",
+  actionItemTextCtn: "flex flex-col gap-[2px] items-start"
+}, O = ({
+  widgetClassName: c = "",
+  title: r = "Get started",
+  description: n = "Master the basics of Signeasy. This section goes away on its own once you're done.",
+  headerIconProps: s = {
+    name: "magicpen"
+  },
+  defaultExpanded: v = !0,
+  isExpanded: g,
+  onToggle: h,
+  actionItems: o = []
 }) => {
-  const [n, l] = g(!1), o = p(null), i = () => {
-    l(!n);
-  }, m = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
+  const [b, E] = w(v), x = g !== void 0, m = x ? g : b, i = $(void 0, "get-started-widget"), u = `${i}-content`, y = () => {
+    x || E((a) => !a), h?.();
+  }, {
+    pressProps: C
+  } = k({
+    isNative: !0,
+    onClick: y
+  }), d = o.filter((a) => a.isComplete).length, f = `${d} of ${o.length} done`;
   return /* @__PURE__ */ e.createElement("div", {
-    className: `${r.gettingStartedWidgetCtn} ${s} getting-started-widget-ctn`
+    className: `${t.gettingStartedWidgetCtn} ${c} getting-started-widget-ctn`
   }, /* @__PURE__ */ e.createElement("div", {
-    className: r.accordionCtn
+    className: `${t.header} py-[16px]`
+  }, /* @__PURE__ */ e.createElement("button", l({
+    type: "button",
+    className: t.headerButton,
+    "aria-expanded": m,
+    "aria-controls": u,
+    "aria-labelledby": i
+  }, C)), /* @__PURE__ */ e.createElement("h3", {
+    className: t.headerLeft
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: t.headerIconCtn,
+    style: {
+      backgroundColor: "#ffdcda"
+    },
+    "aria-hidden": "true"
+  }, /* @__PURE__ */ e.createElement(p, l({}, s, {
+    stroke: "#7d4644"
+  }))), /* @__PURE__ */ e.createElement("span", {
+    className: t.headerTextCtn
   }, /* @__PURE__ */ e.createElement("span", {
+    id: i,
     className: "title text-[var(--color-gray-900)]"
-  }, "Get Started"), /* @__PURE__ */ e.createElement(c, {
+  }, r), /* @__PURE__ */ e.createElement("span", {
+    className: "description text-[var(--color-gray-700)]"
+  }, n))), /* @__PURE__ */ e.createElement("div", {
+    className: t.headerRight
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: t.progressCtn
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: "steps-count text-[var(--color-gray-700)]",
+    role: "progressbar",
+    "aria-valuenow": d,
+    "aria-valuemin": 0,
+    "aria-valuemax": o.length,
+    "aria-valuetext": f
+  }, f), /* @__PURE__ */ e.createElement("div", {
+    className: t.progressSegmentsCtn,
+    "aria-hidden": "true"
+  }, o.map((a, N) => /* @__PURE__ */ e.createElement("div", {
+    key: a.label,
+    className: N < d ? t.progressSegmentComplete : t.progressSegment
+  })))), /* @__PURE__ */ e.createElement(p, {
     name: "chevron",
-    className: `${r.icon} ${n ? "rotate-180" : ""}`,
-    onClick: i
-  })), /* @__PURE__ */ e.createElement("div", {
-    className: "mt-[12px]"
-  }, /* @__PURE__ */ e.createElement(x, {
-    totalTasks: a.length,
-    completedTasks: a.filter((t) => t.isComplete).length,
-    progressBarCtnClassName: "get-started-progress-bar-ctn"
-  })), /* @__PURE__ */ e.createElement("div", {
-    ref: o,
-    className: r.gettingStartedWidgetContent,
-    style: {
-      maxHeight: n ? `${o.current?.scrollHeight}px` : "0px"
-    }
-  }, a.map((t, d) => /* @__PURE__ */ e.createElement("div", {
-    key: d,
-    className: r.actionItemCtn
-  }, /* @__PURE__ */ e.createElement(c, {
+    className: `${t.chevronIcon} ${m ? "rotate-180" : ""}`
+  }))), m && /* @__PURE__ */ e.createElement("div", l({
+    id: u
+  }, S({
+    titleId: i
+  })), o.map((a) => /* @__PURE__ */ e.createElement(e.Fragment, {
+    key: a.label
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: t.divider
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: t.actionItemCtn
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: t.actionItemLeft
+  }, /* @__PURE__ */ e.createElement(p, {
     name: "checked-circle",
-    stroke: m(t.isComplete)
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
-    onClick: t?.handleActionItemClick
-  }, t.label)))));
+    size: 18,
+    stroke: a.isComplete ? "var(--color-green-500)" : "var(--color-gray-600)"
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: t.actionItemTextCtn
+  }, /* @__PURE__ */ e.createElement("span", {
+    className: "action-item-label text-[var(--color-gray-900)]"
+  }, a.label), a.description && /* @__PURE__ */ e.createElement("span", {
+    className: "action-item-description text-[var(--color-gray-700)]"
+  }, a.description))), a.buttonLabel && /* @__PURE__ */ e.createElement(I, {
+    type: "secondary",
+    theme: "blue",
+    size: "sm",
+    label: a.buttonLabel,
+    iconProps: a.buttonIconProps,
+    onClick: a.handleActionItemClick
+  }))))));
 };
 export {
-  E as GetStartedWidget
+  O as GetStartedWidget,
+  O as default
 };
 //# sourceMappingURL=index43.js.map

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/GetStartedWidget/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Map } from \"../../utils/common.types\";\nimport { ProgressBar } from \"../ProgressBar\";\nimport \"./style.scss\";\n\nexport interface GetStartedWidgetProps {\n  widgetClassName?: string;\n  actionItems: {\n    label: string;\n    isComplete?: boolean;\n    handleActionItemClick: () => void;\n  }[];\n}\n\nconst className: Map = {\n  gettingStartedWidgetCtn: \"border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4\",\n  accordionCtn: \"flex items-center justify-between\",\n  gettingStartedWidgetContent: \"overflow-hidden transition-all duration-300\",\n  icon: \"transition-transform duration-300 cursor-pointer\",\n  actionItemCtn: \"flex items-center gap-2 mt-[4px] mb-[10px]\"\n};\n\nexport const GetStartedWidget: FC<GetStartedWidgetProps> = ({\n  widgetClassName = \"\",\n  actionItems = []\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const toggleAccordion = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const getIconStroke = (isComplete?: boolean) => {\n    if(isComplete) {\n      return \"var(--color-green-500)\"\n    }\n    return \"var(--color-gray-200)\"\n  }\n\n  return (\n    <div className={`${className.gettingStartedWidgetCtn} ${widgetClassName} getting-started-widget-ctn`}>\n      <div className={className.accordionCtn}>\n        <span className=\"title text-[var(--color-gray-900)]\">Get Started</span>\n        <Icon name=\"chevron\" className={`${className.icon} ${isExpanded ? \"rotate-180\" : \"\"}`} onClick={toggleAccordion} />\n      </div>\n      <div className=\"mt-[12px]\">\n        <ProgressBar totalTasks={actionItems.length} \n        completedTasks={actionItems.filter(item => item.isComplete).length} \n        progressBarCtnClassName=\"get-started-progress-bar-ctn\"/>\n      </div>\n      <div\n        ref={contentRef}\n        className={className.gettingStartedWidgetContent}\n        style={{\n          maxHeight: isExpanded ? `${contentRef.current?.scrollHeight}px` : \"0px\",\n        }}\n      >\n        {actionItems.map((item, index) => (\n          <div key={index} className={className.actionItemCtn}>\n            <Icon name={\"checked-circle\"}  stroke={getIconStroke(item.isComplete)} />\n            <span className={item.isComplete ? \"text-[var(--color-gray-500)]\" : \"text-[var(--color-gray-900)] cursor-pointer\"} onClick={item?.handleActionItemClick}>\n              {item.label}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default GetStartedWidget;"],"names":["React__default","useState","useRef","Icon","ProgressBar","className","gettingStartedWidgetCtn","accordionCtn","gettingStartedWidgetContent","icon","actionItemCtn","GetStartedWidget","widgetClassName","actionItems","isExpanded","setIsExpanded","contentRef","toggleAccordion","getIconStroke","isComplete","React","createElement","name","onClick","totalTasks","length","completedTasks","filter","item","progressBarCtnClassName","ref","style","maxHeight","current","scrollHeight","map","index","key","stroke","handleActionItemClick","label"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,yBAAyB;AAAA,EACzBC,cAAc;AAAA,EACdC,6BAA6B;AAAA,EAC7BC,MAAM;AAAA,EACNC,eAAe;AACjB,GAEaC,IAA8CA,CAAC;AAAA,EAC1DC,iBAAAA,IAAkB;AAAA,EAClBC,aAAAA,IAAc,CAAA;AAChB,MAAM;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAId,EAAS,EAAK,GAC5Ce,IAAad,EAAuB,IAAI,GAExCe,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAC3B,GAEMI,IAAgBA,CAACC,MAClBA,IACM,2BAEF;AAGT,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAWA,EAAUE;AAAAA,EAAAA,GACxBa,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMhB,WAAU;AAAA,EAAA,GAAqC,aAAiB,GACtEe,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAK;AAAA,IAAUjB,WAAW,GAAGA,EAAUI,IAAI,IAAIK,IAAa,eAAe,EAAE;AAAA,IAAIS,SAASN;AAAAA,EAAAA,CAAkB,CAC/G,GACLG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GACbe,gBAAAA,EAAAC,cAACjB,GAAW;AAAA,IAACoB,YAAYX,EAAYY;AAAAA,IACrCC,gBAAgBb,EAAYc,OAAOC,CAAAA,MAAQA,EAAKT,UAAU,EAAEM;AAAAA,IAC5DI,yBAAwB;AAAA,EAAA,CAA+B,CACpD,GACLT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACES,KAAKd;AAAAA,IACLX,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWlB,IAAa,GAAGE,EAAWiB,SAASC,YAAY,OAAO;AAAA,IAAA;AAAA,EACpE,GAECrB,EAAYsB,IAAI,CAACP,GAAMQ,MACtBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKgB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,GACpCU,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAM;AAAA,IAAmBgB,QAAQpB,EAAcU,EAAKT,UAAU;AAAA,EAAA,CAAI,GACxEC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMhB,WAAWuB,EAAKT,aAAa,iCAAiC;AAAA,IAA+CI,SAASK,GAAMW;AAAAA,EAAAA,GAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}
+{"version":3,"file":"index43.js","sources":["../src/components/GetStartedWidget/index.tsx"],"sourcesContent":["import React, { FC, useState } from \"react\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport { Map } from \"../../utils/common.types\";\nimport { useAccessiblePress, getRegionAttributes } from \"../../utils/a11y\";\nimport { useStableId } from \"../../utils/useStableId\";\nimport \"./style.scss\";\n\nexport interface GetStartedWidgetActionItem {\n  label: string;\n  description?: string;\n  isComplete?: boolean;\n  buttonLabel?: string;\n  buttonIconProps?: IconProps;\n  handleActionItemClick: () => void;\n}\n\nexport interface GetStartedWidgetProps {\n  widgetClassName?: string;\n  title?: string;\n  description?: string;\n  headerIconProps?: IconProps;\n  /**\n   * Initial expanded state when the widget is uncontrolled (default behavior).\n   * Ignored once `isExpanded` is provided.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Controls expanded state externally. When provided, the widget becomes\n   * controlled — you must also provide `onToggle` to update it.\n   */\n  isExpanded?: boolean;\n  /**\n   * Called when the toggle chevron is activated. Required to update state\n   * when `isExpanded` is controlled; optional otherwise (e.g. for analytics).\n   */\n  onToggle?: () => void;\n  actionItems: GetStartedWidgetActionItem[];\n}\n\nconst className: Map = {\n  gettingStartedWidgetCtn: \"border border-[var(--color-gray-200)] rounded-[8px] w-full bg-[var(--color-white)]\",\n  header: \"relative flex items-center justify-between gap-[24px] px-[16px]\",\n  headerButton: \"absolute inset-0 w-full h-full bg-transparent border-none cursor-pointer focus-outline\",\n  headerLeft: \"m-0 font-normal min-w-0 flex-1 flex items-center gap-[16px] pointer-events-none\",\n  headerIconCtn: \"relative shrink-0 size-[48px] rounded-full flex items-center justify-center\",\n  headerTextCtn: \"flex flex-col gap-[4px] items-start min-w-0\",\n  headerRight: \"flex items-center gap-[24px] shrink-0 pointer-events-none\",\n  progressCtn: \"flex flex-col gap-[8px] items-end justify-center\",\n  progressSegmentsCtn: \"flex gap-[6px] items-start w-[100px]\",\n  progressSegment: \"flex-1 h-[4px] rounded-[10px] bg-[var(--color-gray-600)]\",\n  progressSegmentComplete: \"flex-1 h-[4px] rounded-[10px] bg-[var(--color-green-500)]\",\n  chevronIcon: \"transition-transform duration-300\",\n  divider: \"h-px w-full bg-[var(--color-gray-200)]\",\n  actionItemCtn: \"flex items-center justify-between px-[16px] py-[16px]\",\n  actionItemLeft: \"flex items-center gap-[12px]\",\n  actionItemTextCtn: \"flex flex-col gap-[2px] items-start\"\n};\n\nexport const GetStartedWidget: FC<GetStartedWidgetProps> = ({\n  widgetClassName = \"\",\n  title = \"Get started\",\n  description = \"Master the basics of Signeasy. This section goes away on its own once you're done.\",\n  headerIconProps = { name: \"magicpen\" },\n  defaultExpanded = true,\n  isExpanded: isExpandedProp,\n  onToggle,\n  actionItems = []\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const isControlled = isExpandedProp !== undefined;\n  const isExpanded = isControlled ? isExpandedProp : internalExpanded;\n\n  const titleId = useStableId(undefined, \"get-started-widget\");\n  const contentId = `${titleId}-content`;\n\n  const handleToggle = () => {\n    if (!isControlled) {\n      setInternalExpanded((prev) => !prev);\n    }\n    onToggle?.();\n  };\n\n  const { pressProps } = useAccessiblePress({\n    isNative: true,\n    onClick: handleToggle\n  });\n\n  const completedCount = actionItems.filter((item) => item.isComplete).length;\n  const progressLabel = `${completedCount} of ${actionItems.length} done`;\n\n  return (\n    <div className={`${className.gettingStartedWidgetCtn} ${widgetClassName} getting-started-widget-ctn`}>\n      <div className={`${className.header} py-[16px]`}>\n        <button\n          type=\"button\"\n          className={className.headerButton}\n          aria-expanded={isExpanded}\n          aria-controls={contentId}\n          aria-labelledby={titleId}\n          {...pressProps}\n        />\n        <h3 className={className.headerLeft}>\n          <span className={className.headerIconCtn} style={{ backgroundColor: \"#ffdcda\" }} aria-hidden=\"true\">\n            <Icon {...headerIconProps} stroke=\"#7d4644\" />\n          </span>\n          <span className={className.headerTextCtn}>\n            <span id={titleId} className=\"title text-[var(--color-gray-900)]\">\n              {title}\n            </span>\n            <span className=\"description text-[var(--color-gray-700)]\">{description}</span>\n          </span>\n        </h3>\n        <div className={className.headerRight}>\n          <div className={className.progressCtn}>\n            <span\n              className=\"steps-count text-[var(--color-gray-700)]\"\n              role=\"progressbar\"\n              aria-valuenow={completedCount}\n              aria-valuemin={0}\n              aria-valuemax={actionItems.length}\n              aria-valuetext={progressLabel}\n            >\n              {progressLabel}\n            </span>\n            <div className={className.progressSegmentsCtn} aria-hidden=\"true\">\n              {actionItems.map((item, index) => (\n                <div\n                  key={item.label}\n                  className={index < completedCount ? className.progressSegmentComplete : className.progressSegment}\n                />\n              ))}\n            </div>\n          </div>\n          <Icon name=\"chevron\" className={`${className.chevronIcon} ${isExpanded ? \"rotate-180\" : \"\"}`} />\n        </div>\n      </div>\n      {isExpanded && (\n        <div id={contentId} {...getRegionAttributes({ titleId })}>\n          {actionItems.map((item) => (\n            <React.Fragment key={item.label}>\n              <div className={className.divider} />\n              <div className={className.actionItemCtn}>\n                <div className={className.actionItemLeft}>\n                  <Icon\n                    name=\"checked-circle\"\n                    size={18}\n                    stroke={item.isComplete ? \"var(--color-green-500)\" : \"var(--color-gray-600)\"}\n                  />\n                  <div className={className.actionItemTextCtn}>\n                    <span className=\"action-item-label text-[var(--color-gray-900)]\">{item.label}</span>\n                    {item.description && (\n                      <span className=\"action-item-description text-[var(--color-gray-700)]\">\n                        {item.description}\n                      </span>\n                    )}\n                  </div>\n                </div>\n                {item.buttonLabel && (\n                  <Button\n                    type=\"secondary\"\n                    theme=\"blue\"\n                    size=\"sm\"\n                    label={item.buttonLabel}\n                    iconProps={item.buttonIconProps}\n                    onClick={item.handleActionItemClick}\n                  />\n                )}\n              </div>\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default GetStartedWidget;\n"],"names":["className","gettingStartedWidgetCtn","header","headerButton","headerLeft","headerIconCtn","headerTextCtn","headerRight","progressCtn","progressSegmentsCtn","progressSegment","progressSegmentComplete","chevronIcon","divider","actionItemCtn","actionItemLeft","actionItemTextCtn","GetStartedWidget","widgetClassName","title","description","headerIconProps","name","defaultExpanded","isExpanded","isExpandedProp","onToggle","actionItems","internalExpanded","setInternalExpanded","useState","isControlled","undefined","titleId","useStableId","contentId","handleToggle","prev","pressProps","useAccessiblePress","isNative","onClick","completedCount","filter","item","isComplete","length","progressLabel","React","createElement","_extends","type","style","backgroundColor","Icon","stroke","id","role","map","index","key","label","getRegionAttributes","Fragment","size","buttonLabel","Button","theme","iconProps","buttonIconProps","handleActionItemClick"],"mappings":"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"}

package/dist/index44.js

@@ -1,115 +1,153 @@
-import t, { useState as $, useRef as T } from "react";
-import "./index77.js";
-import { useDismissOnEscape as j } from "./index223.js";
-import { Icon as g } from "./index6.js";
+import t, { useState as p, useEffect as g } from "react";
+import { Icon as S } from "./index6.js";
 import { Button as A } from "./index4.js";
+import { getRegionAttributes as P } from "./index72.js";
+import "./index78.js";
+import { useStableId as w } from "./index225.js";
 /* empty css         */
-function a() {
-  return a = Object.assign ? Object.assign.bind() : function(s) {
-    for (var o = 1; o < arguments.length; o++) {
-      var r = arguments[o];
-      for (var n in r) ({}).hasOwnProperty.call(r, n) && (s[n] = r[n]);
+function x() {
+  return x = Object.assign ? Object.assign.bind() : function(i) {
+    for (var a = 1; a < arguments.length; a++) {
+      var n = arguments[a];
+      for (var s in n) ({}).hasOwnProperty.call(n, s) && (i[s] = n[s]);
     }
-    return s;
-  }, a.apply(null, arguments);
+    return i;
+  }, x.apply(null, arguments);
 }
-const f = {
-  info: {
-    stroke: "var(--color-yellow-700)",
-    rotation: "180"
+const l = {
+  bannerCtn: "relative overflow-hidden rounded-[8px] bg-[var(--color-white)] flex items-center py-[16px] pl-[16px] pr-[48px] w-full",
+  content: "relative flex items-center justify-between w-full gap-[24px]",
+  textCtn: "flex flex-col gap-[4px] items-start",
+  closeBtn: "absolute top-[4px] right-[4px]"
+}, D = [{
+  key: "ring-3",
+  rx: 357,
+  ry: 185.5,
+  opacity: 0.3
+}, {
+  key: "ring-2",
+  rx: 306,
+  ry: 159,
+  opacity: 0.5
+}, {
+  key: "ring-1",
+  rx: 255,
+  ry: 132.5,
+  opacity: 1
+}], I = 1600, O = 952, f = O * 0.6, T = 1550, X = ({
+  bannerClassName: i = "",
+  title: a = "Nicely done, you're a Pro now!",
+  description: n = "Get Business Plan which adds unlimited signatures, AI insights and bulk signing.",
+  buttonLabel: s = "Upgrade to Business",
+  buttonIconProps: k = {
+    name: "upload"
   },
-  alert: {
-    stroke: "var(--color-gray-900)",
-    rotation: "0"
-  },
-  nudge: {
-    stroke: "var(--color-white)",
-    rotation: "180"
-  }
-}, e = {
-  messageBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2",
-  messageCtn: "flex items-center justify-center gap-2 flex-wrap px-4 pr-12",
-  info: "bg-[var(--color-yellow-50)]",
-  alert: "bg-[var(--color-red-50)]",
-  nudge: "bg-[var(--color-blue-500)]",
-  infoMessage: "text-[var(--color-yellow-700)] text-center",
-  alertMessage: "text-[var(--color-gray-900)] text-center",
-  nudgeMessage: "text-[var(--color-white)] text-center",
-  closeIconCtn: "absolute right-[12px] cursor-pointer rounded-full p-1",
-  closeIconCtnInfo: "hover:bg-[var(--color-gray-200)]",
-  closeIconCtnAlert: "hover:bg-[var(--color-gray-200)]",
-  closeIconCtnNudge: "hover:bg-[var(--color-blue-700)]"
-}, d = {
-  info: "blue",
-  alert: "red",
-  nudge: "white"
-}, U = ({
-  messageBarCtnClassName: s = "",
-  messageBarType: o = "info",
-  message: r = "",
-  hasCloseIcon: n = !1,
-  hasButton: v = !1,
-  buttonLabel: b = "",
-  buttonOnClick: p = () => {
-  },
-  handleClose: l = () => {
-  },
-  automationId: C = "",
-  iconProps: c,
-  buttonProps: I,
-  closeButtonAriaLabel: w = "Close message"
+  onButtonClick: R,
+  onClose: m,
+  playAnimation: u = !1,
+  onAnimationComplete: _,
+  automationId: B
 }) => {
-  const [i, h] = $(!0), x = T(null), m = t.useCallback(() => {
-    h(!1);
-    const O = setTimeout(() => {
-      l?.();
-    }, 300);
-    return () => clearTimeout(O);
-  }, [l]), {
-    onKeyDown: E
-  } = j({
-    onDismiss: m,
-    enabled: n && i
-  }), k = {
-    info: e.infoMessage,
-    alert: e.alertMessage,
-    nudge: e.nudgeMessage
-  }[o] ?? e.infoMessage, y = {
-    info: e.closeIconCtnInfo,
-    alert: e.closeIconCtnAlert,
-    nudge: e.closeIconCtnNudge
-  }[o] ?? e.closeIconCtnInfo, N = o === "nudge" ? "var(--color-white)" : "var(--color-gray-700)", _ = d[o] ?? d.info, u = f[o] ?? f.info, M = c !== null, D = {
-    name: "info",
-    stroke: u.stroke,
-    rotation: u.rotation,
-    className: "shrink-0",
-    ...c
-  };
-  return /* @__PURE__ */ t.createElement("div", {
-    ref: x,
-    className: `se-design-message-bar ${s} ${e.messageBarCtn} ${e[o]} ${i ? "show" : "hide"}`,
-    "data-automation-id": C,
-    onKeyDown: E
+  const b = w(), y = w(), C = P({
+    titleId: b,
+    descriptionId: y
+  }), [L, h] = p(!1), [v, d] = p(!1), [E, M] = p(0);
+  g(() => {
+    const e = window.matchMedia("(prefers-reduced-motion: reduce)");
+    h(e.matches);
+    const o = (c) => h(c.matches);
+    return e.addEventListener("change", o), () => e.removeEventListener("change", o);
+  }, []), g(() => {
+    u && M((e) => e + 1);
+  }, [u]);
+  const r = !u || L;
+  return g(() => {
+    if (r) {
+      d(!0);
+      return;
+    }
+    d(!1);
+    const e = setTimeout(() => {
+      d(!0), _?.();
+    }, T);
+    return () => clearTimeout(e);
+  }, [E, r]), /* @__PURE__ */ t.createElement("div", x({
+    className: `${l.bannerCtn} ${i} upgrade-banner-ctn ${r ? "upgrade-banner-ctn--static" : ""}`,
+    "data-automation-id": B
+  }, C), /* @__PURE__ */ t.createElement("svg", {
+    key: E,
+    className: "upgrade-banner-rings",
+    viewBox: "0 0 952 84",
+    preserveAspectRatio: "xMidYMid slice",
+    "aria-hidden": "true"
+  }, D.map((e, o) => {
+    const c = f, N = -e.rx * 0.6;
+    return /* @__PURE__ */ t.createElement("ellipse", {
+      key: e.key,
+      className: `upgrade-banner-ring upgrade-banner-ring--${e.key}`,
+      cx: r ? c : N,
+      cy: "42",
+      rx: e.rx,
+      ry: e.ry,
+      opacity: e.opacity
+    }, !r && /* @__PURE__ */ t.createElement("animate", {
+      attributeName: "cx",
+      from: N,
+      to: c,
+      dur: "1.1s",
+      begin: `${o * 0.12}s`,
+      calcMode: "linear",
+      fill: "freeze"
+    }));
+  }), /* @__PURE__ */ t.createElement("ellipse", {
+    className: "upgrade-banner-ring upgrade-banner-ring--fill",
+    cx: r ? f : -1640,
+    cy: "42",
+    rx: I,
+    ry: I,
+    opacity: "1"
+  }, !r && /* @__PURE__ */ t.createElement("animate", {
+    attributeName: "cx",
+    from: -1640,
+    to: f,
+    dur: "1.2s",
+    begin: "0.35s",
+    calcMode: "linear",
+    fill: "freeze"
+  }))), /* @__PURE__ */ t.createElement("div", {
+    className: l.content
   }, /* @__PURE__ */ t.createElement("div", {
-    className: e.messageCtn
-  }, M && /* @__PURE__ */ t.createElement(g, D), /* @__PURE__ */ t.createElement("span", {
-    className: `${k} break-words min-w-0`
-  }, r), v && /* @__PURE__ */ t.createElement(A, a({
-    label: b,
-    type: "primary",
+    className: l.textCtn
+  }, /* @__PURE__ */ t.createElement("span", {
+    id: b,
+    className: "upgrade-banner-title text-[var(--color-white)]"
+  }, a), /* @__PURE__ */ t.createElement("span", {
+    id: y,
+    className: "upgrade-banner-description text-[var(--color-white)]"
+  }, n)), /* @__PURE__ */ t.createElement(A, {
+    type: "secondary",
+    theme: "blue",
     size: "sm",
-    theme: _,
-    onClick: p,
-    className: "alert-btn"
-  }, I))), n && /* @__PURE__ */ t.createElement(g, {
+    label: s,
+    iconProps: k,
+    onClick: R,
+    className: "shrink-0"
+  })), m && v && /* @__PURE__ */ t.createElement("div", {
+    className: l.closeBtn
+  }, /* @__PURE__ */ t.createElement(S, {
     name: "close",
-    className: `${e.closeIconCtn} ${y}`,
-    stroke: N,
+    size: 16,
+    stroke: "var(--color-white)",
     onClick: m,
-    ariaLabel: w
-  }));
+    ariaLabel: "Dismiss"
+  })), m && /* @__PURE__ */ t.createElement("span", {
+    className: "sr-only",
+    role: "status",
+    "aria-live": "polite"
+  }, v ? "Dismiss button available." : ""));
 };
 export {
-  U as MessageBar
+  X as UpgradeBanner,
+  X as default
 };
 //# sourceMappingURL=index44.js.map

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useRef, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { useDismissOnEscape } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport { Button, ButtonProps } from '../Button';\nimport './style.scss';\n\nexport type MessageBarType = 'info' | 'alert' | 'nudge';\n\nexport interface MessageBarProps {\n  messageBarCtnClassName?: string;\n  messageBarType: MessageBarType;\n  message: string;\n  hasCloseIcon?: boolean;\n  hasButton?: boolean;\n  buttonLabel: string | '';\n  buttonOnClick?: () => void;\n  handleClose?: () => void;\n  automationId?: string;\n  /**\n   * Override the leading icon. Merged on top of the variant default\n   * (name + fill color derived from `messageBarType`).\n   * Pass `null` to suppress the leading icon entirely.\n   */\n  iconProps?: Partial<IconProps> | null;\n  /**\n   * Override props for the CTA button. Spread after the variant defaults\n   * (label/onClick/className/type/size), so any field can be replaced —\n   * including `iconProps` to add an icon to the button.\n   */\n  buttonProps?: Partial<ButtonProps>;\n  /**\n   * Accessible name for the close icon. Defaults to \"Close message\".\n   */\n  closeButtonAriaLabel?: string;\n}\n\n/**\n * Per-variant defaults for the leading icon. Single `info` glyph everywhere;\n * stroke matches the variant's text color. `info` and `nudge` render rotated\n * 180° to read as inverted; `alert` keeps the default orientation.\n */\nconst DEFAULT_ICON_BY_TYPE: Record<MessageBarType, { stroke: string; rotation: '0' | '180' }> = {\n  info: { stroke: 'var(--color-yellow-700)', rotation: '180' },\n  alert: { stroke: 'var(--color-gray-900)', rotation: '0' },\n  nudge: { stroke: 'var(--color-white)', rotation: '180' }\n};\n\nconst classNames: Map = {\n  messageBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2\",\n  messageCtn: \"flex items-center justify-center gap-2 flex-wrap px-4 pr-12\",\n  info: \"bg-[var(--color-yellow-50)]\",\n  alert: \"bg-[var(--color-red-50)]\",\n  nudge: \"bg-[var(--color-blue-500)]\",\n  infoMessage: \"text-[var(--color-yellow-700)] text-center\",\n  alertMessage: \"text-[var(--color-gray-900)] text-center\",\n  nudgeMessage: \"text-[var(--color-white)] text-center\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer rounded-full p-1\",\n  closeIconCtnInfo: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnAlert: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnNudge: \"hover:bg-[var(--color-blue-700)]\",\n};\n\n/**\n * Per-variant default Button theme. Picked so the CTA surface has a\n * non-text contrast of >= 3:1 against the bar background (WCAG 1.4.11).\n * Consumers can override via `buttonProps`.\n */\nconst DEFAULT_BUTTON_THEME_BY_TYPE: Record<MessageBarType, ButtonProps['theme']> = {\n  info: 'blue',\n  alert: 'red',\n  nudge: 'white'\n};\n\nexport const MessageBar: FC<MessageBarProps> = ({\n  messageBarCtnClassName = \"\",\n  messageBarType = 'info',\n  message = '',\n  hasCloseIcon = false,\n  hasButton = false,\n  buttonLabel = '',\n  buttonOnClick = () => {},\n  handleClose = () => {},\n  automationId = '',\n  iconProps,\n  buttonProps,\n  closeButtonAriaLabel = 'Close message'\n}) => {\n  const [visible, setVisible] = useState(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOnCloseIcon = React.useCallback(() => {\n    setVisible(false);\n    const timer = setTimeout(() => {\n      handleClose?.();\n    }, 300);\n    return () => clearTimeout(timer);\n  }, [handleClose]);\n\n  // SR announcements: pending shared live-announcer component.\n  const { onKeyDown: onEscapeKeyDown } = useDismissOnEscape({\n    onDismiss: handleClickOnCloseIcon,\n    enabled: hasCloseIcon && visible\n  });\n\n  const messageClass = {\n    info: classNames.infoMessage,\n    alert: classNames.alertMessage,\n    nudge: classNames.nudgeMessage\n  }[messageBarType] ?? classNames.infoMessage;\n\n  const closeIconHoverClass = {\n    info: classNames.closeIconCtnInfo,\n    alert: classNames.closeIconCtnAlert,\n    nudge: classNames.closeIconCtnNudge\n  }[messageBarType] ?? classNames.closeIconCtnInfo;\n\n  const closeIconStroke = messageBarType === 'nudge' ? 'var(--color-white)' : 'var(--color-gray-700)';\n\n  const defaultButtonTheme = DEFAULT_BUTTON_THEME_BY_TYPE[messageBarType] ?? DEFAULT_BUTTON_THEME_BY_TYPE.info;\n\n  const variantIcon = DEFAULT_ICON_BY_TYPE[messageBarType] ?? DEFAULT_ICON_BY_TYPE.info;\n  const showLeadingIcon = iconProps !== null;\n  const mergedIconProps: IconProps = {\n    name: 'info',\n    stroke: variantIcon.stroke,\n    rotation: variantIcon.rotation,\n    className: 'shrink-0',\n    ...iconProps\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`}\n      data-automation-id={automationId}\n      onKeyDown={onEscapeKeyDown}\n    >\n      <div className={classNames.messageCtn}>\n        {showLeadingIcon && <Icon {...mergedIconProps} />}\n        <span className={`${messageClass} break-words min-w-0`}>{message}</span>\n        {hasButton && (\n          <Button\n            label={buttonLabel}\n            type='primary'\n            size=\"sm\"\n            theme={defaultButtonTheme}\n            onClick={buttonOnClick}\n            className=\"alert-btn\"\n            {...buttonProps}\n          />\n        )}\n      </div>\n      {hasCloseIcon && (\n        <Icon\n          name={\"close\"}\n          className={`${classNames.closeIconCtn} ${closeIconHoverClass}`}\n          stroke={closeIconStroke}\n          onClick={handleClickOnCloseIcon}\n          ariaLabel={closeButtonAriaLabel}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default MessageBar;"],"names":["DEFAULT_ICON_BY_TYPE","info","stroke","rotation","alert","nudge","classNames","messageBarCtn","messageCtn","infoMessage","alertMessage","nudgeMessage","closeIconCtn","closeIconCtnInfo","closeIconCtnAlert","closeIconCtnNudge","DEFAULT_BUTTON_THEME_BY_TYPE","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","automationId","iconProps","buttonProps","closeButtonAriaLabel","visible","setVisible","useState","containerRef","useRef","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","onKeyDown","onEscapeKeyDown","useDismissOnEscape","onDismiss","enabled","messageClass","closeIconHoverClass","closeIconStroke","defaultButtonTheme","variantIcon","showLeadingIcon","mergedIconProps","name","className","createElement","ref","Icon","Button","_extends","label","type","size","theme","onClick","ariaLabel"],"mappings":"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"}
+{"version":3,"file":"index44.js","sources":["../src/components/UpgradeBanner/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from \"react\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { Button } from \"../Button\";\nimport { Map } from \"../../utils/common.types\";\nimport { getRegionAttributes } from \"../../utils/a11y\";\nimport { useStableId } from \"../../utils/useStableId\";\nimport \"./style.scss\";\n\nexport interface UpgradeBannerProps {\n  /** Additional class name applied to the banner container. */\n  bannerClassName?: string;\n  /** Headline text. */\n  title?: string;\n  /** Supporting description text below the title. */\n  description?: string;\n  /** Label for the call-to-action button. */\n  buttonLabel?: string;\n  /** Icon props for the call-to-action button. */\n  buttonIconProps?: IconProps;\n  /** Called when the call-to-action button is activated. */\n  onButtonClick?: () => void;\n  /** Called when the dismiss (close) icon is activated. When omitted, no close icon is rendered. */\n  onClose?: () => void;\n  /**\n   * Pass `true` at the moment the banner should animate in (e.g. when a\n   * preceding task list completes) — the animation runs once per\n   * `false` -> `true` transition, not on mount. When `false` (default), the\n   * banner renders in its fully-settled solid state with no animation.\n   */\n  playAnimation?: boolean;\n  /** Called once the fill animation finishes. */\n  onAnimationComplete?: () => void;\n  /** Automation ID for testing, applied as data-automation-id on the root element. */\n  automationId?: string;\n}\n\nconst className: Map = {\n  bannerCtn:\n    \"relative overflow-hidden rounded-[8px] bg-[var(--color-white)] flex items-center py-[16px] pl-[16px] pr-[48px] w-full\",\n  content: \"relative flex items-center justify-between w-full gap-[24px]\",\n  textCtn: \"flex flex-col gap-[4px] items-start\",\n  closeBtn: \"absolute top-[4px] right-[4px]\"\n};\n\nconst RING_LAYERS = [\n  { key: \"ring-3\", rx: 357, ry: 185.5, opacity: 0.3 },\n  { key: \"ring-2\", rx: 306, ry: 159, opacity: 0.5 },\n  { key: \"ring-1\", rx: 255, ry: 132.5, opacity: 1 }\n];\n\nconst FILL_RADIUS = 1600;\nconst VIEWBOX_WIDTH = 952;\nconst RIPPLE_REST_CX = VIEWBOX_WIDTH * 0.6;\nconst FILL_ANIMATION_END_MS = 1550;\n\nexport const UpgradeBanner: FC<UpgradeBannerProps> = ({\n  bannerClassName = \"\",\n  title = \"Nicely done, you're a Pro now!\",\n  description = \"Get Business Plan which adds unlimited signatures, AI insights and bulk signing.\",\n  buttonLabel = \"Upgrade to Business\",\n  buttonIconProps = { name: \"upload\" },\n  onButtonClick,\n  onClose,\n  playAnimation = false,\n  onAnimationComplete,\n  automationId\n}) => {\n  const titleId = useStableId();\n  const descriptionId = useStableId();\n  const regionAttributes = getRegionAttributes({ titleId, descriptionId });\n\n  const [reduceMotion, setReduceMotion] = useState(false);\n  const [showCloseButton, setShowCloseButton] = useState(false);\n  const [animationRunId, setAnimationRunId] = useState(0);\n\n  useEffect(() => {\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setReduceMotion(query.matches);\n\n    const handleChange = (event: MediaQueryListEvent) => setReduceMotion(event.matches);\n    query.addEventListener(\"change\", handleChange);\n    return () => query.removeEventListener(\"change\", handleChange);\n  }, []);\n\n  useEffect(() => {\n    if (!playAnimation) {\n      return;\n    }\n    setAnimationRunId((id) => id + 1);\n  }, [playAnimation]);\n\n  const showStatic = !playAnimation || reduceMotion;\n\n  useEffect(() => {\n    if (showStatic) {\n      setShowCloseButton(true);\n      return;\n    }\n\n    setShowCloseButton(false);\n    const timer = setTimeout(() => {\n      setShowCloseButton(true);\n      onAnimationComplete?.();\n    }, FILL_ANIMATION_END_MS);\n    return () => clearTimeout(timer);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animationRunId, showStatic]);\n\n  return (\n    <div\n      className={`${className.bannerCtn} ${bannerClassName} upgrade-banner-ctn ${\n        showStatic ? \"upgrade-banner-ctn--static\" : \"\"\n      }`}\n      data-automation-id={automationId}\n      {...regionAttributes}\n    >\n      <svg\n        key={animationRunId}\n        className=\"upgrade-banner-rings\"\n        viewBox=\"0 0 952 84\"\n        preserveAspectRatio=\"xMidYMid slice\"\n        aria-hidden=\"true\"\n      >\n        {RING_LAYERS.map((ring, index) => {\n          const restCx = RIPPLE_REST_CX;\n          const fromCx = -ring.rx * 0.6;\n          return (\n            <ellipse\n              key={ring.key}\n              className={`upgrade-banner-ring upgrade-banner-ring--${ring.key}`}\n              cx={showStatic ? restCx : fromCx}\n              cy=\"42\"\n              rx={ring.rx}\n              ry={ring.ry}\n              opacity={ring.opacity}\n            >\n              {!showStatic && (\n                <animate\n                  attributeName=\"cx\"\n                  from={fromCx}\n                  to={restCx}\n                  dur=\"1.1s\"\n                  begin={`${index * 0.12}s`}\n                  calcMode=\"linear\"\n                  fill=\"freeze\"\n                />\n              )}\n            </ellipse>\n          );\n        })}\n        <ellipse\n          className=\"upgrade-banner-ring upgrade-banner-ring--fill\"\n          cx={showStatic ? RIPPLE_REST_CX : -(FILL_RADIUS + 40)}\n          cy=\"42\"\n          rx={FILL_RADIUS}\n          ry={FILL_RADIUS}\n          opacity=\"1\"\n        >\n          {!showStatic && (\n            <animate\n              attributeName=\"cx\"\n              from={-(FILL_RADIUS + 40)}\n              to={RIPPLE_REST_CX}\n              dur=\"1.2s\"\n              begin=\"0.35s\"\n              calcMode=\"linear\"\n              fill=\"freeze\"\n            />\n          )}\n        </ellipse>\n      </svg>\n\n      <div className={className.content}>\n        <div className={className.textCtn}>\n          <span id={titleId} className=\"upgrade-banner-title text-[var(--color-white)]\">\n            {title}\n          </span>\n          <span id={descriptionId} className=\"upgrade-banner-description text-[var(--color-white)]\">\n            {description}\n          </span>\n        </div>\n        <Button\n          type=\"secondary\"\n          theme=\"blue\"\n          size=\"sm\"\n          label={buttonLabel}\n          iconProps={buttonIconProps}\n          onClick={onButtonClick}\n          className=\"shrink-0\"\n        />\n      </div>\n\n      {onClose && showCloseButton && (\n        <div className={className.closeBtn}>\n          <Icon name=\"close\" size={16} stroke=\"var(--color-white)\" onClick={onClose} ariaLabel=\"Dismiss\" />\n        </div>\n      )}\n\n      {onClose && (\n        <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {showCloseButton ? \"Dismiss button available.\" : \"\"}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default UpgradeBanner;\n"],"names":["className","bannerCtn","content","textCtn","closeBtn","RING_LAYERS","key","rx","ry","opacity","FILL_RADIUS","VIEWBOX_WIDTH","RIPPLE_REST_CX","FILL_ANIMATION_END_MS","UpgradeBanner","bannerClassName","title","description","buttonLabel","buttonIconProps","name","onButtonClick","onClose","playAnimation","onAnimationComplete","automationId","titleId","useStableId","descriptionId","regionAttributes","getRegionAttributes","reduceMotion","setReduceMotion","useState","showCloseButton","setShowCloseButton","animationRunId","setAnimationRunId","useEffect","query","window","matchMedia","matches","handleChange","event","addEventListener","removeEventListener","id","showStatic","timer","setTimeout","clearTimeout","React","createElement","_extends","viewBox","preserveAspectRatio","map","ring","index","restCx","fromCx","cx","cy","attributeName","from","to","dur","begin","calcMode","fill","Button","type","theme","size","label","iconProps","onClick","Icon","stroke","ariaLabel","role"],"mappings":"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"}