@pareto-engineering/design-system 5.3.0 → 5.4.0

package/dist/stories/a/Notification.stories.js

@@ -0,0 +1,124 @@
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+import "../../ui/a/AppContext/Context.js";
+import "../../ui/a/AppContext/ContextProvider.js";
+import "../../ui/a/BlurOverlay/BlurOverlay.js";
+import { N as t } from "../../FormBuilder-653sa2uJ.js";
+import "../../ui/a/Conversation/Context.js";
+import "../../ui/a/DotInfo/DotInfo.js";
+import "../../ui/a/Figure/Figure.js";
+import "../../ui/a/HamburgerButton/HamburgerButton.js";
+import "../../ui/a/IconList/IconList.js";
+import "../../ui/a/Label/Label.js";
+import "../../ui/a/LoadingCircle/LoadingCircle.js";
+import "../../ui/a/People/People.js";
+import "../../ui/a/Popover/Popover.js";
+import "../../ui/a/ProgressBar/ProgressBar.js";
+import "../../ui/a/Quote/Quote.js";
+import "../../ui/a/SVG/SVG.js";
+import "../../ui/a/SnapScroller/SnapScroller.js";
+import "../../ui/a/Spinner/Spinner.js";
+import "../../ui/a/Timestamp/Timestamp.js";
+import "../../ui/a/MetaCard/MetaCard.js";
+import "../../ui/a/AnimatedBlobs/AnimatedBlobs.js";
+import "../../ui/a/Tip/Tip.js";
+import "../../ui/a/TextSteps/TextSteps.js";
+import "../../ui/a/Removable/Removable.js";
+import "../../ui/a/ToggleSwitch/ToggleSwitch.js";
+import "../../ui/a/XMLEditor/XMLEditor.js";
+import "../../DatePicker-DHuh_8q6.js";
+import "../../ui/a/Tooltip/Tooltip.js";
+import "../../ui/a/Charts/AreaChart/AreaChart.js";
+import "../../ui/a/Charts/BarChart/BarChart.js";
+import "../../ui/a/Charts/PieChart/PieChart.js";
+import "../../ui/a/ThroughPutIndicator/ThroughPutIndicator.js";
+import "../../ui/b/Page/Context.js";
+import "../../ui/b/Title/Title.js";
+import "../../ui/c/SocialMediaShareButton/SocialMediaShareButton.js";
+import "../../ui/f/common/Label/Label.js";
+import "../../ui/f/common/Description/Description.js";
+import "../../ui/f/fields/LatexPreviewInput/convertLatexToHtml.js";
+import "../../ui/f/fields/RadioInput/RadioInput.js";
+import "../../ui/g/DragAndDrop/DragAndDrop.js";
+import "../../debounce-Cm69Z_cF.js";
+import "../../throttle-BCrS-Wew.js";
+import "../../ui/utils/formatting.js";
+import { ALL_COLORS as s } from "../colors.js";
+const e = ["success", "error", "blocked", "in-progress"], Z = {
+  title: "a/Notification",
+  component: t,
+  decorators: [
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes: {
+    color: { control: { type: "select" }, options: s },
+    type: { control: { type: "select" }, options: e },
+    message: { control: { type: "text" } },
+    isVisible: { control: { type: "boolean" } },
+    overrideIsVisible: { control: { type: "boolean" } },
+    closeNotification: { action: "closeNotification" }
+  }
+}, o = {
+  render: (r) => /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100px"
+      },
+      children: /* @__PURE__ */ i(
+        t,
+        {
+          ...r
+        }
+      )
+    }
+  ),
+  args: {
+    message: "This is a notification with a custom color",
+    color: "deepblue",
+    isVisible: !0
+  }
+}, $ = {
+  ...o,
+  args: {
+    ...o.args,
+    message: "This is an error notification",
+    type: "error",
+    color: null
+  }
+}, oo = {
+  ...o,
+  args: {
+    ...o.args,
+    message: "This is a warning notification",
+    type: "warning",
+    color: null
+  }
+}, io = {
+  ...o,
+  args: {
+    ...o.args,
+    message: "This is an info notification",
+    type: "info",
+    color: null
+  }
+}, to = {
+  ...o,
+  args: {
+    ...o.args,
+    message: "This is a success notification",
+    type: "success",
+    color: null
+  }
+};
+export {
+  o as Base,
+  $ as Error,
+  io as Info,
+  to as Success,
+  oo as Warning,
+  Z as default
+};

package/dist/stories/a/NotificationStack.stories.js

@@ -0,0 +1,102 @@
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+import "../../ui/a/AppContext/Context.js";
+import "../../ui/a/AppContext/ContextProvider.js";
+import "../../ui/a/BlurOverlay/BlurOverlay.js";
+import { b as t } from "../../FormBuilder-653sa2uJ.js";
+import "../../ui/a/Conversation/Context.js";
+import "../../ui/a/DotInfo/DotInfo.js";
+import "../../ui/a/Figure/Figure.js";
+import "../../ui/a/HamburgerButton/HamburgerButton.js";
+import "../../ui/a/IconList/IconList.js";
+import "../../ui/a/Label/Label.js";
+import "../../ui/a/LoadingCircle/LoadingCircle.js";
+import "../../ui/a/People/People.js";
+import "../../ui/a/Popover/Popover.js";
+import "../../ui/a/ProgressBar/ProgressBar.js";
+import "../../ui/a/Quote/Quote.js";
+import "../../ui/a/SVG/SVG.js";
+import "../../ui/a/SnapScroller/SnapScroller.js";
+import "../../ui/a/Spinner/Spinner.js";
+import "../../ui/a/Timestamp/Timestamp.js";
+import "../../ui/a/MetaCard/MetaCard.js";
+import "../../ui/a/AnimatedBlobs/AnimatedBlobs.js";
+import "../../ui/a/Tip/Tip.js";
+import "../../ui/a/TextSteps/TextSteps.js";
+import "../../ui/a/Removable/Removable.js";
+import "../../ui/a/ToggleSwitch/ToggleSwitch.js";
+import "../../ui/a/XMLEditor/XMLEditor.js";
+import "../../DatePicker-DHuh_8q6.js";
+import "../../ui/a/Tooltip/Tooltip.js";
+import "../../ui/a/Charts/AreaChart/AreaChart.js";
+import "../../ui/a/Charts/BarChart/BarChart.js";
+import "../../ui/a/Charts/PieChart/PieChart.js";
+import "../../ui/a/ThroughPutIndicator/ThroughPutIndicator.js";
+import "../../ui/b/Page/Context.js";
+import "../../ui/b/Title/Title.js";
+import "../../ui/c/SocialMediaShareButton/SocialMediaShareButton.js";
+import "../../ui/f/common/Label/Label.js";
+import "../../ui/f/common/Description/Description.js";
+import "../../ui/f/fields/LatexPreviewInput/convertLatexToHtml.js";
+import "../../ui/f/fields/RadioInput/RadioInput.js";
+import "../../ui/g/DragAndDrop/DragAndDrop.js";
+import "../../debounce-Cm69Z_cF.js";
+import "../../throttle-BCrS-Wew.js";
+import "../../ui/utils/formatting.js";
+const W = {
+  title: "a/NotificationStack",
+  component: t,
+  decorators: [
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes: {
+    notifications: { control: { type: "object" } },
+    maxNotifications: { control: { type: "number" } }
+  }
+}, r = [
+  {
+    message: "This is an error notification",
+    type: "error",
+    isVisible: !0
+  },
+  {
+    message: "This is a warning notification",
+    type: "warning",
+    isVisible: !0
+  },
+  {
+    message: "This is an info notification",
+    type: "info",
+    isVisible: !0
+  },
+  {
+    message: "This is a success notification",
+    type: "success",
+    isVisible: !0
+  }
+], X = {
+  render: (o) => /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "500px"
+      },
+      children: /* @__PURE__ */ i(
+        t,
+        {
+          ...o
+        }
+      )
+    }
+  ),
+  args: {
+    notifications: r
+  }
+};
+export {
+  X as Base,
+  W as default
+};

package/dist/stories/a/People.stories.js

@@ -0,0 +1,96 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import "../../ui/a/AppContext/Context.js";
+import "../../ui/a/AppContext/ContextProvider.js";
+import "../../ui/a/BlurOverlay/BlurOverlay.js";
+import "../../FormBuilder-653sa2uJ.js";
+import "../../ui/a/Conversation/Context.js";
+import "../../ui/a/DotInfo/DotInfo.js";
+import "../../ui/a/Figure/Figure.js";
+import "../../ui/a/HamburgerButton/HamburgerButton.js";
+import "../../ui/a/IconList/IconList.js";
+import "../../ui/a/Label/Label.js";
+import "../../ui/a/LoadingCircle/LoadingCircle.js";
+import e from "../../ui/a/People/People.js";
+import "../../ui/a/Popover/Popover.js";
+import "../../ui/a/ProgressBar/ProgressBar.js";
+import "../../ui/a/Quote/Quote.js";
+import "../../ui/a/SVG/SVG.js";
+import "../../ui/a/SnapScroller/SnapScroller.js";
+import "../../ui/a/Spinner/Spinner.js";
+import "../../ui/a/Timestamp/Timestamp.js";
+import "../../ui/a/MetaCard/MetaCard.js";
+import "../../ui/a/AnimatedBlobs/AnimatedBlobs.js";
+import "../../ui/a/Tip/Tip.js";
+import "../../ui/a/TextSteps/TextSteps.js";
+import "../../ui/a/Removable/Removable.js";
+import "../../ui/a/ToggleSwitch/ToggleSwitch.js";
+import "../../ui/a/XMLEditor/XMLEditor.js";
+import "../../DatePicker-DHuh_8q6.js";
+import "../../ui/a/Tooltip/Tooltip.js";
+import "../../ui/a/Charts/AreaChart/AreaChart.js";
+import "../../ui/a/Charts/BarChart/BarChart.js";
+import "../../ui/a/Charts/PieChart/PieChart.js";
+import "../../ui/a/ThroughPutIndicator/ThroughPutIndicator.js";
+import "../../ui/b/Page/Context.js";
+import "../../ui/b/Title/Title.js";
+import "../../ui/c/SocialMediaShareButton/SocialMediaShareButton.js";
+import "../../ui/f/common/Label/Label.js";
+import "../../ui/f/common/Description/Description.js";
+import "../../ui/f/fields/LatexPreviewInput/convertLatexToHtml.js";
+import "../../ui/f/fields/RadioInput/RadioInput.js";
+import "../../ui/g/DragAndDrop/DragAndDrop.js";
+import "../../debounce-Cm69Z_cF.js";
+import "../../throttle-BCrS-Wew.js";
+import "../../ui/utils/formatting.js";
+const S = {
+  title: "a/People",
+  component: e,
+  subcomponents: {
+    "People.Person": e.Person
+  },
+  decorators: [
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes: {
+    backgroundColor: { control: "color" }
+  }
+}, U = () => /* @__PURE__ */ o("div", { className: "x-background-far b-x v1 p-v", children: /* @__PURE__ */ o(e, { children: [
+  {
+    image: "https://lh3.googleusercontent.com/a-/AOh14GiVivY1C3gxFz1kjHfih0jzpV08rlIIfMIgBvPs",
+    name: "Phoebe Yao",
+    role: "Pareto Founder",
+    color: "main1"
+  },
+  {
+    image: "https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Lanie-Col-long.png",
+    name: "Lanie Col-long",
+    role: "Pareto Partner",
+    color: "main3"
+  },
+  {
+    image: "https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg",
+    name: "Camillie Arigo",
+    role: "Pareto Partner",
+    color: "background4"
+  }
+].map((r) => /* @__PURE__ */ o(e.Person, { ...r }, r.name)) }) }), X = () => /* @__PURE__ */ o("div", { className: "x-background-far b-x v1 p-v", children: /* @__PURE__ */ o(e, { children: [
+  {
+    image: "https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg",
+    name: "Camillie Arigo",
+    role: "Pareto Partner",
+    color: "background4"
+  }
+].map((r) => /* @__PURE__ */ o(e.Person, { ...r }, r.name)) }) }), Z = () => /* @__PURE__ */ o("div", { className: "x-background-far b-x v1 p-v", children: /* @__PURE__ */ o(e, { children: [
+  {
+    image: "https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg",
+    name: "Camillie Arigo",
+    color: "background4"
+  }
+].map((r) => /* @__PURE__ */ o(e.Person, { ...r }, r.name)) }) });
+export {
+  U as Base,
+  X as OnePerson,
+  Z as WithoutRole,
+  S as default
+};

package/dist/stories/a/PieChart.stories.js

@@ -0,0 +1,79 @@
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import "react";
+import "../../ui/a/AppContext/Context.js";
+import "../../ui/a/AppContext/ContextProvider.js";
+import "../../ui/a/BlurOverlay/BlurOverlay.js";
+import "../../FormBuilder-653sa2uJ.js";
+import "../../ui/a/Conversation/Context.js";
+import "../../ui/a/DotInfo/DotInfo.js";
+import "../../ui/a/Figure/Figure.js";
+import "../../ui/a/HamburgerButton/HamburgerButton.js";
+import "../../ui/a/IconList/IconList.js";
+import "../../ui/a/Label/Label.js";
+import "../../ui/a/LoadingCircle/LoadingCircle.js";
+import "../../ui/a/People/People.js";
+import "../../ui/a/Popover/Popover.js";
+import "../../ui/a/ProgressBar/ProgressBar.js";
+import "../../ui/a/Quote/Quote.js";
+import "../../ui/a/SVG/SVG.js";
+import "../../ui/a/SnapScroller/SnapScroller.js";
+import "../../ui/a/Spinner/Spinner.js";
+import "../../ui/a/Timestamp/Timestamp.js";
+import "../../ui/a/MetaCard/MetaCard.js";
+import "../../ui/a/AnimatedBlobs/AnimatedBlobs.js";
+import "../../ui/a/Tip/Tip.js";
+import "../../ui/a/TextSteps/TextSteps.js";
+import "../../ui/a/Removable/Removable.js";
+import "../../ui/a/ToggleSwitch/ToggleSwitch.js";
+import "../../ui/a/XMLEditor/XMLEditor.js";
+import "../../DatePicker-DHuh_8q6.js";
+import "../../ui/a/Tooltip/Tooltip.js";
+import "../../ui/a/Charts/AreaChart/AreaChart.js";
+import "../../ui/a/Charts/BarChart/BarChart.js";
+import r from "../../ui/a/Charts/PieChart/PieChart.js";
+import "../../ui/a/ThroughPutIndicator/ThroughPutIndicator.js";
+import "../../ui/b/Page/Context.js";
+import "../../ui/b/Title/Title.js";
+import "../../ui/c/SocialMediaShareButton/SocialMediaShareButton.js";
+import "../../ui/f/common/Label/Label.js";
+import "../../ui/f/common/Description/Description.js";
+import "../../ui/f/fields/LatexPreviewInput/convertLatexToHtml.js";
+import "../../ui/f/fields/RadioInput/RadioInput.js";
+import "../../ui/g/DragAndDrop/DragAndDrop.js";
+import "../../debounce-Cm69Z_cF.js";
+import "../../throttle-BCrS-Wew.js";
+import "../../ui/utils/formatting.js";
+const tt = {
+  title: "a/Charts/PieChart",
+  component: r
+}, e = [
+  { status: "pendingReview", value: 230 },
+  { status: "accepted", value: 350 },
+  { status: "rejected", value: 80 },
+  { status: "toRevise", value: 10 },
+  { status: "revised", value: 60 }
+], m = (i) => /* @__PURE__ */ t("div", { style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ t(r, { ...i }) }), o = m.bind({});
+o.args = {
+  data: e,
+  valueKey: "value",
+  labelKey: "status",
+  colors: ["#8CB0F8", "#7F7CF6", "#FFD66E", "#E8E9ED", "#F6BC7E"],
+  height: 400
+};
+const s = (i) => /* @__PURE__ */ p("div", { style: { display: "flex", gap: "20px" }, children: [
+  /* @__PURE__ */ t("div", { style: { flex: 1 }, children: /* @__PURE__ */ t(r, { ...i[0] }) }),
+  /* @__PURE__ */ t("div", { style: { flex: 1 }, children: /* @__PURE__ */ t(r, { ...i[1] }) })
+] }), a = s.bind({});
+a.args = [
+  {
+    ...o.args
+  },
+  {
+    ...o.args
+  }
+];
+export {
+  o as Default,
+  a as SideBySide,
+  tt as default
+};

package/dist/stories/a/Popover.stories.js

@@ -0,0 +1,147 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { useRef as l, useState as c } from "react";
+import "../../ui/a/AppContext/Context.js";
+import "../../ui/a/AppContext/ContextProvider.js";
+import "../../ui/a/BlurOverlay/BlurOverlay.js";
+import "../../FormBuilder-653sa2uJ.js";
+import "../../ui/a/Conversation/Context.js";
+import "../../ui/a/DotInfo/DotInfo.js";
+import "../../ui/a/Figure/Figure.js";
+import "../../ui/a/HamburgerButton/HamburgerButton.js";
+import "../../ui/a/IconList/IconList.js";
+import "../../ui/a/Label/Label.js";
+import "../../ui/a/LoadingCircle/LoadingCircle.js";
+import "../../ui/a/People/People.js";
+import m from "../../ui/a/Popover/Popover.js";
+import "../../ui/a/ProgressBar/ProgressBar.js";
+import "../../ui/a/Quote/Quote.js";
+import "../../ui/a/SVG/SVG.js";
+import "../../ui/a/SnapScroller/SnapScroller.js";
+import "../../ui/a/Spinner/Spinner.js";
+import "../../ui/a/Timestamp/Timestamp.js";
+import "../../ui/a/MetaCard/MetaCard.js";
+import "../../ui/a/AnimatedBlobs/AnimatedBlobs.js";
+import "../../ui/a/Tip/Tip.js";
+import "../../ui/a/TextSteps/TextSteps.js";
+import "../../ui/a/Removable/Removable.js";
+import "../../ui/a/ToggleSwitch/ToggleSwitch.js";
+import "../../ui/a/XMLEditor/XMLEditor.js";
+import "../../DatePicker-DHuh_8q6.js";
+import "../../ui/a/Tooltip/Tooltip.js";
+import "../../ui/a/Charts/AreaChart/AreaChart.js";
+import "../../ui/a/Charts/BarChart/BarChart.js";
+import "../../ui/a/Charts/PieChart/PieChart.js";
+import "../../ui/a/ThroughPutIndicator/ThroughPutIndicator.js";
+import "../../ui/b/Page/Context.js";
+import "../../ui/b/Title/Title.js";
+import "../../ui/c/SocialMediaShareButton/SocialMediaShareButton.js";
+import "../../ui/f/common/Label/Label.js";
+import "../../ui/f/common/Description/Description.js";
+import "../../ui/f/fields/LatexPreviewInput/convertLatexToHtml.js";
+import "../../ui/f/fields/RadioInput/RadioInput.js";
+import "../../ui/g/DragAndDrop/DragAndDrop.js";
+import "../../debounce-Cm69Z_cF.js";
+import "../../throttle-BCrS-Wew.js";
+import "../../ui/utils/formatting.js";
+import o from "../utils/lorem.js";
+const dr = {
+  title: "a/Popover",
+  component: m,
+  // subcomponents:{
+  //   Item   :Popover.Item,
+  // },
+  decorators: [
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes: {
+    preferredPrimaryOrder: {
+      options: ["bottom", "top", "left", "right"],
+      control: { type: "object" }
+    },
+    preferredSecondaryOrder: {
+      options: ["left", "right"],
+      control: { type: "object" }
+    }
+  }
+}, e = ({ ...n }) => {
+  const p = l(null), [i, d] = c(!1);
+  return /* @__PURE__ */ r(
+    "main",
+    {
+      className: "u1 ph-u",
+      children: [
+        /* @__PURE__ */ r("div", { children: [
+          o,
+          o
+        ] }),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              position: "relative",
+              textAlign: "center",
+              width: "min-content",
+              margin: "0 auto"
+            },
+            ref: p,
+            children: [
+              /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    d(!i);
+                  },
+                  children: i ? "Close Popover" : "Open Popover"
+                }
+              ),
+              /* @__PURE__ */ t(
+                m,
+                {
+                  isOpen: i,
+                  parentRef: p,
+                  ...n,
+                  children: /* @__PURE__ */ r("ul", { children: [
+                    /* @__PURE__ */ t("li", { children: "Company" }),
+                    /* @__PURE__ */ t("li", { children: "Pareto Engineers" }),
+                    /* @__PURE__ */ t("li", { children: "Pareto Core Team" })
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r("div", { children: [
+          o,
+          o
+        ] })
+      ]
+    }
+  );
+}, a = e.bind({});
+a.args = {
+  preferredPrimaryOrder: ["bottom", "top", "left", "right"],
+  preferredSecondaryOrder: ["left", "right", "bottom", "top"]
+};
+const s = e.bind({});
+s.args = {
+  preferredPrimaryOrder: ["bottom", "top", "left", "right"],
+  preferredSecondaryOrder: ["right", "left", "bottom", "top"]
+};
+const f = e.bind({});
+f.args = {
+  preferredPrimaryOrder: ["top", "bottom", "left", "right"],
+  preferredSecondaryOrder: ["left", "right", "top", "bottom"]
+};
+const h = e.bind({});
+h.args = {
+  preferredPrimaryOrder: ["top", "bottom", "left", "right"],
+  preferredSecondaryOrder: ["right", "left", "top", "bottom"]
+};
+export {
+  a as BottomLeft,
+  s as BottomRight,
+  f as TopLeft,
+  h as TopRight,
+  dr as default
+};

package/dist/stories/a/ProgressBar.stories.js

@@ -0,0 +1,86 @@
+import { jsx as o, jsxs as c, Fragment as a } from "react/jsx-runtime";
+import { useState as g } from "react";
+import "../../ui/a/AppContext/Context.js";
+import "../../ui/a/AppContext/ContextProvider.js";
+import "../../ui/a/BlurOverlay/BlurOverlay.js";
+import "../../FormBuilder-653sa2uJ.js";
+import "../../ui/a/Conversation/Context.js";
+import "../../ui/a/DotInfo/DotInfo.js";
+import "../../ui/a/Figure/Figure.js";
+import "../../ui/a/HamburgerButton/HamburgerButton.js";
+import "../../ui/a/IconList/IconList.js";
+import "../../ui/a/Label/Label.js";
+import "../../ui/a/LoadingCircle/LoadingCircle.js";
+import "../../ui/a/People/People.js";
+import "../../ui/a/Popover/Popover.js";
+import i from "../../ui/a/ProgressBar/ProgressBar.js";
+import "../../ui/a/Quote/Quote.js";
+import "../../ui/a/SVG/SVG.js";
+import "../../ui/a/SnapScroller/SnapScroller.js";
+import "../../ui/a/Spinner/Spinner.js";
+import "../../ui/a/Timestamp/Timestamp.js";
+import "../../ui/a/MetaCard/MetaCard.js";
+import "../../ui/a/AnimatedBlobs/AnimatedBlobs.js";
+import "../../ui/a/Tip/Tip.js";
+import "../../ui/a/TextSteps/TextSteps.js";
+import "../../ui/a/Removable/Removable.js";
+import "../../ui/a/ToggleSwitch/ToggleSwitch.js";
+import "../../ui/a/XMLEditor/XMLEditor.js";
+import "../../DatePicker-DHuh_8q6.js";
+import "../../ui/a/Tooltip/Tooltip.js";
+import "../../ui/a/Charts/AreaChart/AreaChart.js";
+import "../../ui/a/Charts/BarChart/BarChart.js";
+import "../../ui/a/Charts/PieChart/PieChart.js";
+import "../../ui/a/ThroughPutIndicator/ThroughPutIndicator.js";
+import "../../ui/b/Page/Context.js";
+import "../../ui/b/Title/Title.js";
+import "../../ui/c/SocialMediaShareButton/SocialMediaShareButton.js";
+import "../../ui/f/common/Label/Label.js";
+import "../../ui/f/common/Description/Description.js";
+import "../../ui/f/fields/LatexPreviewInput/convertLatexToHtml.js";
+import "../../ui/f/fields/RadioInput/RadioInput.js";
+import "../../ui/g/DragAndDrop/DragAndDrop.js";
+import "../../debounce-Cm69Z_cF.js";
+import "../../throttle-BCrS-Wew.js";
+import "../../ui/utils/formatting.js";
+const mt = {
+  title: "a/ProgressBar",
+  component: i,
+  subcomponents: {
+    // Item:ProgressBar.Item
+  },
+  decorators: [
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes: {
+    // backgroundColor:{ control: 'color' },
+    progress: { control: "number" },
+    color: { control: "text" },
+    height: { control: "text" }
+  }
+}, p = (t) => /* @__PURE__ */ o(i, { ...t }), pt = () => {
+  const [t, m] = g(40), s = (r) => m(Math.max(t - r, 0)), n = (r) => {
+    m(Math.min(t + r, 100));
+  };
+  return /* @__PURE__ */ c(a, { children: [
+    /* @__PURE__ */ o(i, { progress: t }),
+    /* @__PURE__ */ o("h3", { children: "Use the buttons to modify the value" }),
+    /* @__PURE__ */ o("button", { onClick: () => s(25), type: "button", children: "Less" }),
+    /* @__PURE__ */ o("button", { onClick: () => n(25), type: "button", children: "More" })
+  ] });
+}, e = p.bind({});
+e.args = {
+  progress: 70,
+  color: "main"
+};
+const l = p.bind({});
+l.args = {
+  ...e.args,
+  height: "5em"
+};
+export {
+  pt as Base,
+  e as Color,
+  l as Height,
+  mt as default
+};