se-design 1.0.99 → 1.1.1-dev

package/dist/index43.js

@@ -1,68 +1,73 @@
-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 e, { useState as I } from "react";
+import { Icon as x } from "./index6.js";
+import { Button as S } from "./index4.js";
+import { getRegionAttributes as k } from "./index72.js";
+import { useAccessiblePress as L } from "./index73.js";
 import "./index78.js";
-import { useStableId as $ } from "./index226.js";
+import { useStableId as $ } from "./index228.js";
 /* empty css         */
-function l() {
-  return l = Object.assign ? Object.assign.bind() : function(c) {
+function o() {
+  return o = 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);
+  }, o.apply(null, arguments);
 }
 const t = {
-  gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[8px] w-full bg-[var(--color-white)]",
+  gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[8px] w-full bg-[var(--color-white)] flex flex-col gap-[12px] py-[16px]",
   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",
+  progressCtn: "flex flex-col gap-[8px] items-end justify-center py-[8px]",
   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]",
+  content: "flex flex-col gap-[12px]",
+  actionItemCtn: "flex items-center justify-between px-[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 = []
+  defaultExpanded: h = !0,
+  isExpanded: f,
+  onToggle: b,
+  isAccordion: d = !0,
+  actionItems: l = []
 }) => {
-  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?.();
+  const [E, y] = I(h), u = f !== void 0;
+  let i = u ? f : E;
+  d || (i = !0);
+  const m = $(void 0, "get-started-widget"), v = `${m}-content`, C = () => {
+    u || y((a) => !a), b?.();
   }, {
-    pressProps: C
-  } = k({
+    pressProps: N
+  } = L({
     isNative: !0,
-    onClick: y
-  }), d = o.filter((a) => a.isComplete).length, f = `${d} of ${o.length} done`;
+    onClick: C
+  }), p = l.filter((a) => a.isComplete).length, g = `${p} of ${l.length} done`;
   return /* @__PURE__ */ e.createElement("div", {
     className: `${t.gettingStartedWidgetCtn} ${c} getting-started-widget-ctn`
   }, /* @__PURE__ */ e.createElement("div", {
-    className: `${t.header} py-[16px]`
-  }, /* @__PURE__ */ e.createElement("button", l({
+    className: t.header
+  }, d && /* @__PURE__ */ e.createElement("button", o({
     type: "button",
     className: t.headerButton,
-    "aria-expanded": m,
-    "aria-controls": u,
-    "aria-labelledby": i
-  }, C)), /* @__PURE__ */ e.createElement("h3", {
+    "aria-expanded": i,
+    "aria-controls": v,
+    "aria-labelledby": m
+  }, N)), /* @__PURE__ */ e.createElement("h3", {
     className: t.headerLeft
   }, /* @__PURE__ */ e.createElement("span", {
     className: t.headerIconCtn,
@@ -70,12 +75,12 @@ const t = {
       backgroundColor: "#ffdcda"
     },
     "aria-hidden": "true"
-  }, /* @__PURE__ */ e.createElement(p, l({}, s, {
+  }, /* @__PURE__ */ e.createElement(x, o({}, s, {
     stroke: "#7d4644"
   }))), /* @__PURE__ */ e.createElement("span", {
     className: t.headerTextCtn
   }, /* @__PURE__ */ e.createElement("span", {
-    id: i,
+    id: m,
     className: "title text-[var(--color-gray-900)]"
   }, r), /* @__PURE__ */ e.createElement("span", {
     className: "description text-[var(--color-gray-700)]"
@@ -83,27 +88,29 @@ const t = {
     className: t.headerRight
   }, /* @__PURE__ */ e.createElement("div", {
     className: t.progressCtn
-  }, /* @__PURE__ */ e.createElement("span", {
+  }, /* @__PURE__ */ e.createElement("progress", {
+    className: "sr-only",
+    value: p,
+    max: l.length,
+    "aria-valuetext": g
+  }, g), /* @__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", {
+    "aria-hidden": "true"
+  }, g), /* @__PURE__ */ e.createElement("div", {
     className: t.progressSegmentsCtn,
     "aria-hidden": "true"
-  }, o.map((a, N) => /* @__PURE__ */ e.createElement("div", {
+  }, l.map((a, w) => /* @__PURE__ */ e.createElement("div", {
     key: a.label,
-    className: N < d ? t.progressSegmentComplete : t.progressSegment
-  })))), /* @__PURE__ */ e.createElement(p, {
+    className: w < p ? t.progressSegmentComplete : t.progressSegment
+  })))), d && /* @__PURE__ */ e.createElement(x, {
     name: "chevron",
-    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, {
+    className: `${t.chevronIcon} ${i ? "rotate-180" : ""}`
+  }))), i && /* @__PURE__ */ e.createElement("div", o({
+    className: t.content,
+    id: v
+  }, k({
+    titleId: m
+  })), l.map((a) => /* @__PURE__ */ e.createElement(e.Fragment, {
     key: a.label
   }, /* @__PURE__ */ e.createElement("div", {
     className: t.divider
@@ -111,7 +118,7 @@ const t = {
     className: t.actionItemCtn
   }, /* @__PURE__ */ e.createElement("div", {
     className: t.actionItemLeft
-  }, /* @__PURE__ */ e.createElement(p, {
+  }, /* @__PURE__ */ e.createElement(x, {
     name: "checked-circle",
     size: 18,
     stroke: a.isComplete ? "var(--color-green-500)" : "var(--color-gray-600)"
@@ -121,7 +128,7 @@ const t = {
     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, {
+  }, a.description))), a.buttonLabel && /* @__PURE__ */ e.createElement(S, {
     type: "secondary",
     theme: "blue",
     size: "sm",
@@ -131,7 +138,7 @@ const t = {
   }))))));
 };
 export {
-  O as GetStartedWidget,
-  O as default
+  _ as GetStartedWidget,
+  _ 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 } 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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"}
+{"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  /**\n   * When true (default), the widget is collapsible — the header toggles\n   * `isExpanded` and the chevron is shown. When false, the widget is always\n   * expanded: the header is not clickable and the chevron is hidden.\n   */\n  isAccordion?: boolean;\n  actionItems: GetStartedWidgetActionItem[];\n}\n\nconst className: Map = {\n  gettingStartedWidgetCtn:\n    \"border border-[var(--color-gray-200)] rounded-[8px] w-full bg-[var(--color-white)] flex flex-col gap-[12px] py-[16px]\",\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 py-[8px]\",\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  content: \"flex flex-col gap-[12px]\",\n  actionItemCtn: \"flex items-center justify-between px-[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  isAccordion = true,\n  actionItems = []\n}) => {\n  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n  const isControlled = isExpandedProp !== undefined;\n  let isExpanded = isControlled ? isExpandedProp : internalExpanded;\n  if (!isAccordion) isExpanded = true;\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}>\n        {isAccordion && (\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        )}\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            <progress\n              className=\"sr-only\"\n              value={completedCount}\n              max={actionItems.length}\n              aria-valuetext={progressLabel}\n            >\n              {progressLabel}\n            </progress>\n            <span className=\"steps-count text-[var(--color-gray-700)]\" aria-hidden=\"true\">\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          {isAccordion && (\n            <Icon name=\"chevron\" className={`${className.chevronIcon} ${isExpanded ? \"rotate-180\" : \"\"}`} />\n          )}\n        </div>\n      </div>\n      {isExpanded && (\n        <div className={className.content} 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","content","actionItemCtn","actionItemLeft","actionItemTextCtn","GetStartedWidget","widgetClassName","title","description","headerIconProps","name","defaultExpanded","isExpanded","isExpandedProp","onToggle","isAccordion","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","value","max","map","index","key","label","getRegionAttributes","Fragment","size","buttonLabel","Button","theme","iconProps","buttonIconProps","handleActionItemClick"],"mappings":"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"}

package/dist/index44.js

@@ -3,7 +3,7 @@ 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 "./index226.js";
+import { useStableId as w } from "./index228.js";
 /* empty css         */
 function x() {
   return x = Object.assign ? Object.assign.bind() : function(i) {

package/dist/index45.js

@@ -1,6 +1,6 @@
 import t, { useState as $, useRef as T } from "react";
 import "./index78.js";
-import { useDismissOnEscape as j } from "./index235.js";
+import { useDismissOnEscape as j } from "./index237.js";
 import { Icon as g } from "./index6.js";
 import { Button as A } from "./index4.js";
 /* empty css         */

package/dist/index47.js

@@ -1,7 +1,7 @@
 import e, { useState as k, useRef as S, useCallback as P, useEffect as Y } from "react";
 /* empty css         */
 import { Icon as x } from "./index6.js";
-import { useStableId as Z } from "./index226.js";
+import { useStableId as Z } from "./index228.js";
 import { getA11yNameAttributes as ee } from "./index87.js";
 import "./index78.js";
 import { useCombobox as te } from "./index74.js";

package/dist/index52.js

@@ -1,8 +1,8 @@
 import t, { useState as h, useRef as f, useCallback as g, useEffect as P } from "react";
 /* empty css         */
-import C from "./index254.js";
+import C from "./index256.js";
 import { Icon as H } from "./index6.js";
-import { useStableId as b } from "./index226.js";
+import { useStableId as b } from "./index228.js";
 import { getA11yNameAttributes as J } from "./index87.js";
 import "./index78.js";
 import { useCombobox as le } from "./index74.js";

package/dist/index55.js

@@ -36,7 +36,7 @@ import "./index49.js";
 import "./index50.js";
 /* empty css        */
 /* empty css         */
-import { TabButton as j } from "./index257.js";
+import { TabButton as j } from "./index259.js";
 /* empty css         */
 /* empty css         */
 /* empty css         */

package/dist/index57.js

@@ -2,7 +2,7 @@ import r, { useState as S } from "react";
 import { Button as z } from "./index4.js";
 import { Icon as _ } from "./index6.js";
 import { Dropdown as te } from "./index26.js";
-import { useDatePickerA11y as Fe, formatDateId as Pe, getCellAriaLabel as Ce } from "./index266.js";
+import { useDatePickerA11y as Fe, formatDateId as Pe, getCellAriaLabel as Ce } from "./index268.js";
 /* empty css         */
 function T() {
   return T = Object.assign ? Object.assign.bind() : function(p) {

package/dist/index58.js

@@ -1,6 +1,6 @@
 import t from "react";
 import { Icon as W } from "./index6.js";
-import { useStableId as j } from "./index226.js";
+import { useStableId as j } from "./index228.js";
 import { getA11yNameAttributes as q } from "./index87.js";
 import "./index78.js";
 /* empty css         */

package/dist/index59.js

@@ -1,5 +1,5 @@
 import e, { useEffect as a } from "react";
-import { delay as m } from "./index267.js";
+import { delay as m } from "./index269.js";
 import { announce as i } from "./index81.js";
 import { Icon as s } from "./index6.js";
 const u = (l) => {