@sps-woodland/progress-indicators 8.51.3 → 8.52.0

package/README.md

@@ -1,31 +1,3 @@
 ## [@sps-woodland/progress-indicators](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/progress-indicators#readme)
 
-SPS Woodland Design System progress indicator components.
-
-> **Heads up — this is a wrapper package.** The component source now lives in
-> [`@sps-woodland/core`](../react). This package re-exports from the
-> mono-package so existing imports keep working, but new code should prefer the
-> mono-package paths.
-
-### Preferred imports (mono-package)
-
-```ts
-import { ProgressBar, ProgressBarStep, ProgressRing } from "@sps-woodland/core/progress-indicators";
-// or, per-component:
-import { ProgressBar } from "@sps-woodland/core/progress-bar";
-import { ProgressBarStep } from "@sps-woodland/core/progress-bar-step";
-import { ProgressRing } from "@sps-woodland/core/progress-ring";
-
-import "@sps-woodland/core/progress-indicators/style.css";
-```
-
-The family name (`progress-indicators`) doesn't collide with any of its
-components, so every component gets a clean flat subpath in addition to the
-barrel.
-
-### Legacy imports (still supported)
-
-```ts
-import { ProgressBar, ProgressBarStep, ProgressRing } from "@sps-woodland/progress-indicators";
-import "@sps-woodland/progress-indicators/style.css";
-```
+SPS Woodland Design System progress indicator components

package/lib/index.d.ts

@@ -1,2 +1,4 @@
-export * from "@sps-woodland/core/progress-indicators";
+export * from "./progress-bar/ProgressBar";
+export * from "./progress-bar/progress-bar-step/ProgressBarStep";
+export * from "./progress-ring/ProgressRing";
 export * from "./manifest";

package/lib/index.js

@@ -1,11 +1,266 @@
-import { ProgressBar as p, ProgressBarStep as i } from "@sps-woodland/core/progress-indicators";
-export * from "@sps-woodland/core/progress-indicators";
 import * as e from "react";
-import { code as s } from "@spscommerce/utils";
-import { SpsTable as o, SpsTableHead as l, SpsTableHeader as a, SpsTableBody as n, SpsTableRow as t, SpsTableCell as r } from "@spscommerce/ds-react";
-const c = {
+import { Metadata as b, useElementId as V, cl as E, Icon as D, selectChildren as x } from "@sps-woodland/core";
+import { Button as F } from "@sps-woodland/buttons";
+import { SpsTooltip as R, SpsTable as C, SpsTableHead as k, SpsTableHeader as m, SpsTableBody as y, SpsTableRow as d, SpsTableCell as r } from "@spscommerce/ds-react";
+import { useWoodlandLanguage as I } from "@spscommerce/i18n";
+import { Tokens as c } from "@sps-woodland/tokens";
+import { code as u } from "@spscommerce/utils";
+function A(s, o, a) {
+  return o in s ? Object.defineProperty(s, o, {
+    value: a,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : s[o] = a, s;
+}
+function N(s, o) {
+  var a = Object.keys(s);
+  if (Object.getOwnPropertySymbols) {
+    var t = Object.getOwnPropertySymbols(s);
+    o && (t = t.filter(function(l) {
+      return Object.getOwnPropertyDescriptor(s, l).enumerable;
+    })), a.push.apply(a, t);
+  }
+  return a;
+}
+function j(s) {
+  for (var o = 1; o < arguments.length; o++) {
+    var a = arguments[o] != null ? arguments[o] : {};
+    o % 2 ? N(Object(a), !0).forEach(function(t) {
+      A(s, t, a[t]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(s, Object.getOwnPropertyDescriptors(a)) : N(Object(a)).forEach(function(t) {
+      Object.defineProperty(s, t, Object.getOwnPropertyDescriptor(a, t));
+    });
+  }
+  return s;
+}
+var M = (s, o, a) => {
+  for (var t of Object.keys(s)) {
+    var l;
+    if (s[t] !== ((l = o[t]) !== null && l !== void 0 ? l : a[t]))
+      return !1;
+  }
+  return !0;
+}, f = (s) => (o) => {
+  var a = s.defaultClassName, t = j(j({}, s.defaultVariants), o);
+  for (var l in t) {
+    var n, p = (n = t[l]) !== null && n !== void 0 ? n : s.defaultVariants[l];
+    if (p != null) {
+      var _ = p;
+      typeof _ == "boolean" && (_ = _ === !0 ? "true" : "false");
+      var i = (
+        // @ts-expect-error
+        s.variantClassNames[l][_]
+      );
+      i && (a += " " + i);
+    }
+  }
+  for (var [h, P] of s.compoundVariants)
+    M(h, t, s.defaultVariants) && (a += " " + P);
+  return a;
+}, H = "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme0", W = "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme1", $ = "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme2", G = "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme3", U = "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme4", Y = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme5", variantClassNames: { completed: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme6", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme7" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme8", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme9" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmea", blue: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeb", red: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmec", orange: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmed", grey: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmee" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [] }), K = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmef", variantClassNames: { disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeg", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeh" } }, defaultVariants: { disabled: !1 }, compoundVariants: [] }), L = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmei", variantClassNames: { completed: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmej", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmek" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmel", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmem" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmen", blue: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeo", red: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmep", orange: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeq", grey: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmer" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [[{ completed: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmes"]] }), z = "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmet", J = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go0", variantClassNames: { barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go1", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go2" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go3", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go4" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go5", blue: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go6", red: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go7", orange: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go8", grey: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go9" } }, defaultVariants: { barCompleted: !1, disabled: !1, color: "purple" }, compoundVariants: [] }), Q = f({ defaultClassName: "", variantClassNames: { barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goa", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gob" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goc", blue: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0god", red: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goe", orange: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gof", grey: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gog" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goh", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goi" } }, defaultVariants: { barCompleted: !1, color: "purple", disabled: !1 }, compoundVariants: [] }), X = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goj", variantClassNames: { stepCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gok", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gol" } }, defaultVariants: { stepCompleted: !1 }, compoundVariants: [] }), Z = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gom", variantClassNames: { stepCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gon", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goo" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gop", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goq" }, barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gor", false: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gos" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0got", red: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gou", blue: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gov", orange: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gow", grey: "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gox" } }, defaultVariants: { stepCompleted: !1, disabled: !1, barCompleted: !1, color: "purple" }, compoundVariants: [[{ barCompleted: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goy"], [{ barCompleted: !0, disabled: !1 }, "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goz"], [{ stepCompleted: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go10"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "purple" }, "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go11"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "red" }, "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go12"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "blue" }, "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go13"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "orange" }, "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go14"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "grey" }, "pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go15"]] });
+function S({
+  className: s,
+  title: o,
+  description: a,
+  icon: t,
+  complete: l = !1,
+  disabled: n,
+  barCompleted: p,
+  progressColor: _,
+  ...i
+}) {
+  const h = V().current || void 0;
+  return /* @__PURE__ */ e.createElement(
+    "li",
+    {
+      id: h,
+      className: E(
+        Z({
+          stepCompleted: l,
+          disabled: n,
+          barCompleted: p,
+          color: _
+        }),
+        s
+      ),
+      ...i
+    },
+    t && /* @__PURE__ */ e.createElement(
+      D,
+      {
+        icon: t,
+        size: "sm",
+        className: X({
+          stepCompleted: l
+        })
+      }
+    ),
+    o && h && /* @__PURE__ */ e.createElement(R, { for: h, title: o }, a)
+  );
+}
+b.set(S, {
+  name: "ProgressBarStep",
+  props: {
+    icon: { type: "IconName" },
+    complete: { type: "boolean" },
+    title: { type: "string" },
+    description: { type: "string" }
+  }
+});
+function T({
+  className: s,
+  children: o,
+  detail: a,
+  disabled: t,
+  onClose: l,
+  percentComplete: n = 0,
+  title: p,
+  showStepsCounter: _,
+  progressColor: i = "purple",
+  ...h
+}) {
+  const { t: P } = I(), [w, q] = e.useState([]), [g] = x(o, [
+    { type: S }
+  ]);
+  e.useEffect(() => {
+    let v = [];
+    g.forEach((B) => {
+      B.hasOwnProperty("props") && B.props.complete === !0 && v.push(B), q(v);
+    });
+  }, []), n && g && console.warn(
+    [
+      "The percentComplete prop can't be used with the ProgressBarStep subcomponent.",
+      "The progress will be determined by how many nested ProgressBarStep components have the completed prop."
+    ].join(" ")
+  );
+  const O = e.Children.map(o, (v) => e.isValidElement(v) ? e.cloneElement(v, {
+    disabled: t,
+    barCompleted: w.length === g.length,
+    progressColor: i
+  }) : v);
+  return /* @__PURE__ */ e.createElement("div", { className: E(H, s), ...h }, /* @__PURE__ */ e.createElement("div", { className: W }, p && /* @__PURE__ */ e.createElement("div", { className: G }, /* @__PURE__ */ e.createElement("div", { className: U }, p), g.length > 0 ? /* @__PURE__ */ e.createElement(e.Fragment, null, _ === !0 && /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: J({
+        barCompleted: w.length === g.length,
+        disabled: t,
+        color: i
+      })
+    },
+    `${w.length} of ${g.length} Complete`
+  )) : /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: Y({
+        completed: n === 1,
+        disabled: t,
+        color: i
+      })
+    },
+    `${Math.floor(n * 100)}%`
+  )), g.length > 0 ? /* @__PURE__ */ e.createElement(
+    "ul",
+    {
+      className: E(
+        Q({
+          barCompleted: w.length === g.length,
+          disabled: t,
+          color: i
+        }),
+        "d-flex align-items-center list-unstyled mb-0"
+      )
+    },
+    O
+  ) : /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: K({
+        disabled: t
+      })
+    },
+    /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: L({
+          completed: n === 1,
+          disabled: t,
+          color: i
+        }),
+        style: { width: `${n * 100}%` }
+      }
+    )
+  ), a && /* @__PURE__ */ e.createElement("div", { className: z }, a)), l && n !== 1 && /* @__PURE__ */ e.createElement("div", { className: $ }, /* @__PURE__ */ e.createElement(
+    F,
+    {
+      kind: "icon",
+      icon: "x",
+      onClick: l,
+      title: P("progressBar.closeButtonTitle", { defaultValue: "Close progress bar" })
+    }
+  )));
+}
+b.set(T, {
+  name: "Progress Bar",
+  props: {
+    detail: { type: "string" },
+    disabled: { type: "boolean" },
+    onClose: { type: "() => void" },
+    percentComplete: { type: "number", default: "0" },
+    progressColor: { type: '"purple" | "blue" | "red" | "orange" | "grey"', default: '"purple"' }
+  }
+});
+function ee({
+  className: s,
+  size: o = "sm",
+  progress: a = 0,
+  ...t
+}) {
+  const n = c.component["progress-ring"][o] - 4, p = n * 2 * Math.PI, _ = p - a / 100 * p;
+  return /* @__PURE__ */ e.createElement("div", { className: s, ...t }, /* @__PURE__ */ e.createElement(
+    "svg",
+    {
+      height: c.component["progress-ring"][o] * 2,
+      width: c.component["progress-ring"][o] * 2,
+      style: { transform: "rotate(-90deg)" }
+    },
+    /* @__PURE__ */ e.createElement(
+      "circle",
+      {
+        stroke: c.color.grey["medium-light"],
+        fill: "transparent",
+        strokeWidth: 4,
+        strokeDasharray: `${p} ${p}`,
+        r: n,
+        cx: c.component["progress-ring"][o],
+        cy: c.component["progress-ring"][o]
+      }
+    ),
+    /* @__PURE__ */ e.createElement(
+      "circle",
+      {
+        stroke: c.color.purple.medium,
+        fill: "transparent",
+        strokeWidth: 4,
+        strokeDasharray: `${p} ${p}`,
+        style: { strokeDashoffset: _ },
+        r: n,
+        cx: c.component["progress-ring"][o],
+        cy: c.component["progress-ring"][o]
+      }
+    )
+  ));
+}
+b.set(ee, {
+  name: "Progress Ring",
+  props: {
+    size: { type: '"sm" | "md" | "lg"', default: '"sm"' },
+    progress: { type: "number", default: "0" }
+  }
+});
+const re = {
   description: () => /* @__PURE__ */ e.createElement("p", null, "Progress Bars are used to visualize the progression of a process (such as a file upload) or series of related tasks that take place over a longer period of time. Progress Bars can be accompanied by a variety of additional content to provide more context regarding the processes being performed."),
-  components: [p, i],
+  components: [T, S],
   examples: {
     general: {
       label: "General Usage",
@@ -20,11 +275,11 @@ const c = {
           alt: "A Progress Bar with labels on each section",
           className: "w-100 mb-3"
         }
-      ), /* @__PURE__ */ e.createElement(o, null, /* @__PURE__ */ e.createElement(l, null, /* @__PURE__ */ e.createElement(a, null, "Section"), /* @__PURE__ */ e.createElement(a, null, "Content Type"), /* @__PURE__ */ e.createElement(a, null, "Required"), /* @__PURE__ */ e.createElement(a, null, "Description/Guidelines")), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(r, null, "Title"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")), /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(r, null, "Progress Meter"), /* @__PURE__ */ e.createElement(r, null, "Yes"), /* @__PURE__ */ e.createElement(r, null)), /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(r, null, "Progress Counter"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "The Progress Counter should not be used without the existence of a Title.")), /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(r, null, "Clear Button"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "If the process requires the option to be cancelled or removed from a list the clear button can be used.")), /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(r, null, "Progress Details"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),
+      ), /* @__PURE__ */ e.createElement(C, null, /* @__PURE__ */ e.createElement(k, null, /* @__PURE__ */ e.createElement(m, null, "Section"), /* @__PURE__ */ e.createElement(m, null, "Content Type"), /* @__PURE__ */ e.createElement(m, null, "Required"), /* @__PURE__ */ e.createElement(m, null, "Description/Guidelines")), /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(r, null, "Title"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(r, null, "Progress Meter"), /* @__PURE__ */ e.createElement(r, null, "Yes"), /* @__PURE__ */ e.createElement(r, null)), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(r, null, "Progress Counter"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "The Progress Counter should not be used without the existence of a Title.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(r, null, "Clear Button"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "If the process requires the option to be cancelled or removed from a list the clear button can be used.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(r, null, "Progress Details"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),
       examples: {
         standard: {
           description: () => /* @__PURE__ */ e.createElement("p", null, "The Standard Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements."),
-          react: s`
+          react: u`
             import { ProgressBar } from "@sps-woodland/progress-indicators";
             import { Card } from "@sps-woodland/cards";
 
@@ -48,7 +303,7 @@ const c = {
         },
         completed: {
           description: () => /* @__PURE__ */ e.createElement("p", null, "Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),
-          react: s`
+          react: u`
             import { ProgressBar } from "@sps-woodland/progress-indicators";
             import { Card } from "@sps-woodland/cards";
 
@@ -67,7 +322,7 @@ const c = {
         },
         disabled: {
           description: () => /* @__PURE__ */ e.createElement("p", null, "A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted."),
-          react: s`
+          react: u`
             import { ProgressBar } from "@sps-woodland/progress-indicators";
             import { Card } from "@sps-woodland/cards";
 
@@ -101,11 +356,11 @@ const c = {
           alt: "A Progress Bar with labels on each section",
           className: "w-100 mb-3"
         }
-      ), /* @__PURE__ */ e.createElement(o, null, /* @__PURE__ */ e.createElement(l, null, /* @__PURE__ */ e.createElement(a, null, "Section"), /* @__PURE__ */ e.createElement(a, null, "Content Type"), /* @__PURE__ */ e.createElement(a, null, "Required"), /* @__PURE__ */ e.createElement(a, null, "Description/Guidelines")), /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(r, null, "Title"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")), /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(r, null, "Progress Meter"), /* @__PURE__ */ e.createElement(r, null, "Yes"), /* @__PURE__ */ e.createElement(r, null)), /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(r, null, "Progress Counter"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "The Progress Counter should not be used without the existence of a Title.")), /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(r, null, "Step icons"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Icons can be set inside of steps for visual emphasis.")), /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(r, null, "Step Tooltips"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover."))))),
+      ), /* @__PURE__ */ e.createElement(C, null, /* @__PURE__ */ e.createElement(k, null, /* @__PURE__ */ e.createElement(m, null, "Section"), /* @__PURE__ */ e.createElement(m, null, "Content Type"), /* @__PURE__ */ e.createElement(m, null, "Required"), /* @__PURE__ */ e.createElement(m, null, "Description/Guidelines")), /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "1")), /* @__PURE__ */ e.createElement(r, null, "Title"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "2")), /* @__PURE__ */ e.createElement(r, null, "Progress Meter"), /* @__PURE__ */ e.createElement(r, null, "Yes"), /* @__PURE__ */ e.createElement(r, null)), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "3")), /* @__PURE__ */ e.createElement(r, null, "Progress Counter"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "The Progress Counter should not be used without the existence of a Title.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "4")), /* @__PURE__ */ e.createElement(r, null, "Step icons"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Icons can be set inside of steps for visual emphasis.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", { className: "sps-tag sps-tag--info" }, "5")), /* @__PURE__ */ e.createElement(r, null, "Step Tooltips"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, { wrap: 400 }, "Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover."))))),
       examples: {
         standard: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Building Stepped Progress Bars"), /* @__PURE__ */ e.createElement("p", null, "The Stepped Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements.")),
-          react: s`
+          react: u`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
           
@@ -151,7 +406,7 @@ const c = {
         },
         color: {
           description: () => /* @__PURE__ */ e.createElement("h4", null, "Alternate Color"),
-          react: s`
+          react: u`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -194,7 +449,7 @@ const c = {
         },
         skippedSteps: {
           description: () => /* @__PURE__ */ e.createElement("h4", null, "Skip steps"),
-          react: s`
+          react: u`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -225,7 +480,7 @@ const c = {
         },
         completed: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Completed State"), /* @__PURE__ */ e.createElement("p", null, "Once complete, the progress bar appears in green.")),
-          react: s`
+          react: u`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -270,7 +525,7 @@ const c = {
         },
         disabled: {
           description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h4", null, "Disabled State"), /* @__PURE__ */ e.createElement("p", null, "A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted.")),
-          react: s`
+          react: u`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -301,9 +556,12 @@ const c = {
       }
     }
   }
-}, u = {
-  "Progress Bars": c
+}, pe = {
+  "Progress Bars": re
 };
 export {
-  u as MANIFEST
+  pe as MANIFEST,
+  T as ProgressBar,
+  S as ProgressBarStep,
+  ee as ProgressRing
 };

package/lib/index.umd.cjs

@@ -1,4 +1,4 @@
-(function(t,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("@sps-woodland/core/progress-indicators"),require("react"),require("@spscommerce/utils"),require("@spscommerce/ds-react")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/progress-indicators","react","@spscommerce/utils","@spscommerce/ds-react"],l):(t=typeof globalThis<"u"?globalThis:t||self,l(t.ProgressIndicators={},t.progressIndicators,t.React,t.utils,t.dsReact))})(this,(function(t,l,i,o,r){"use strict";function c(s){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const a in s)if(a!=="default"){const p=Object.getOwnPropertyDescriptor(s,a);Object.defineProperty(n,a,p.get?p:{enumerable:!0,get:()=>s[a]})}}return n.default=s,Object.freeze(n)}const e=c(i),m={"Progress Bars":{description:()=>e.createElement("p",null,"Progress Bars are used to visualize the progression of a process (such as a file upload) or series of related tasks that take place over a longer period of time. Progress Bars can be accompanied by a variety of additional content to provide more context regarding the processes being performed."),components:[l.ProgressBar,l.ProgressBarStep],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Progress Bars can be used in a variety of situations, but the most common use case is to show the live progress of a process such as a file upload or the processing of a digital payload."),e.createElement("p",null,"For processes that typically complete within minutes or less, opt for the Standard Progress Bar."),e.createElement("p",null,"For processes that are divided into specific steps that are accomplished over a longer period of time, opt for the Stepped Progress Bar."))},standard:{label:"Standard Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Standard Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Content Type"),e.createElement(r.SpsTableHeader,null,"Required"),e.createElement(r.SpsTableHeader,null,"Description/Guidelines")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Title"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Progress Meter"),e.createElement(r.SpsTableCell,null,"Yes"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Progress Counter"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Clear Button"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"If the process requires the option to be cancelled or removed from a list the clear button can be used.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Progress Details"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),examples:{standard:{description:()=>e.createElement("p",null,"The Standard Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements."),react:o.code`
+(function(l,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/buttons"),require("@spscommerce/ds-react"),require("@spscommerce/i18n"),require("@sps-woodland/tokens"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/buttons","@spscommerce/ds-react","@spscommerce/i18n","@sps-woodland/tokens","@spscommerce/utils"],S):(l=typeof globalThis<"u"?globalThis:l||self,S(l.ProgressIndicators={},l.React,l.core,l.buttons,l.dsReact,l.i18n,l.tokens,l.utils))})(this,(function(l,S,c,y,r,j,g,m){"use strict";function N(s){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>s[t]})}}return o.default=s,Object.freeze(o)}const e=N(S);function q(s,o,t){return o in s?Object.defineProperty(s,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[o]=t,s}function E(s,o){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(s);o&&(a=a.filter(function(n){return Object.getOwnPropertyDescriptor(s,n).enumerable})),t.push.apply(t,a)}return t}function T(s){for(var o=1;o<arguments.length;o++){var t=arguments[o]!=null?arguments[o]:{};o%2?E(Object(t),!0).forEach(function(a){q(s,a,t[a])}):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(t)):E(Object(t)).forEach(function(a){Object.defineProperty(s,a,Object.getOwnPropertyDescriptor(t,a))})}return s}var O=(s,o,t)=>{for(var a of Object.keys(s)){var n;if(s[a]!==((n=o[a])!==null&&n!==void 0?n:t[a]))return!1}return!0},h=s=>o=>{var t=s.defaultClassName,a=T(T({},s.defaultVariants),o);for(var n in a){var p,_=(p=a[n])!==null&&p!==void 0?p:s.defaultVariants[n];if(_!=null){var i=_;typeof i=="boolean"&&(i=i===!0?"true":"false");var d=s.variantClassNames[n][i];d&&(t+=" "+d)}}for(var[f,C]of s.compoundVariants)O(f,a,s.defaultVariants)&&(t+=" "+C);return t},D="pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme0",V="pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme1",x="pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme2",F="pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme3",H="pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme4",M=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme5",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme6",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme7"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme8",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme9"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmea",blue:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeb",red:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmec",orange:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmed",grey:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmee"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[]}),I=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmef",variantClassNames:{disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeg",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeh"}},defaultVariants:{disabled:!1},compoundVariants:[]}),A=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmei",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmej",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmek"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmel",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmem"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmen",blue:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeo",red:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmep",orange:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeq",grey:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmer"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[[{completed:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmes"]]}),W="pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmet",$=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go0",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go1",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go2"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go3",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go4"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go5",blue:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go6",red:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go7",orange:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go8",grey:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go9"}},defaultVariants:{barCompleted:!1,disabled:!1,color:"purple"},compoundVariants:[]}),G=h({defaultClassName:"",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goa",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gob"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goc",blue:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0god",red:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goe",orange:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gof",grey:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gog"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goh",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goi"}},defaultVariants:{barCompleted:!1,color:"purple",disabled:!1},compoundVariants:[]}),U=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goj",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gok",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gol"}},defaultVariants:{stepCompleted:!1},compoundVariants:[]}),Y=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gom",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gon",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goo"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gop",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goq"},barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gor",false:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gos"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0got",red:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gou",blue:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gov",orange:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gow",grey:"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gox"}},defaultVariants:{stepCompleted:!1,disabled:!1,barCompleted:!1,color:"purple"},compoundVariants:[[{barCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goy"],[{barCompleted:!0,disabled:!1},"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goz"],[{stepCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go10"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"purple"},"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go11"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"red"},"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go12"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"blue"},"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go13"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"orange"},"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go14"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"grey"},"pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go15"]]});function w({className:s,title:o,description:t,icon:a,complete:n=!1,disabled:p,barCompleted:_,progressColor:i,...d}){const f=c.useElementId().current||void 0;return e.createElement("li",{id:f,className:c.cl(Y({stepCompleted:n,disabled:p,barCompleted:_,color:i}),s),...d},a&&e.createElement(c.Icon,{icon:a,size:"sm",className:U({stepCompleted:n})}),o&&f&&e.createElement(r.SpsTooltip,{for:f,title:o},t))}c.Metadata.set(w,{name:"ProgressBarStep",props:{icon:{type:"IconName"},complete:{type:"boolean"},title:{type:"string"},description:{type:"string"}}});function P({className:s,children:o,detail:t,disabled:a,onClose:n,percentComplete:p=0,title:_,showStepsCounter:i,progressColor:d="purple",...f}){const{t:C}=j.useWoodlandLanguage(),[v,K]=e.useState([]),[u]=c.selectChildren(o,[{type:w}]);e.useEffect(()=>{let b=[];u.forEach(B=>{B.hasOwnProperty("props")&&B.props.complete===!0&&b.push(B),K(b)})},[]),p&&u&&console.warn(["The percentComplete prop can't be used with the ProgressBarStep subcomponent.","The progress will be determined by how many nested ProgressBarStep components have the completed prop."].join(" "));const L=e.Children.map(o,b=>e.isValidElement(b)?e.cloneElement(b,{disabled:a,barCompleted:v.length===u.length,progressColor:d}):b);return e.createElement("div",{className:c.cl(D,s),...f},e.createElement("div",{className:V},_&&e.createElement("div",{className:F},e.createElement("div",{className:H},_),u.length>0?e.createElement(e.Fragment,null,i===!0&&e.createElement("div",{className:$({barCompleted:v.length===u.length,disabled:a,color:d})},`${v.length} of ${u.length} Complete`)):e.createElement("div",{className:M({completed:p===1,disabled:a,color:d})},`${Math.floor(p*100)}%`)),u.length>0?e.createElement("ul",{className:c.cl(G({barCompleted:v.length===u.length,disabled:a,color:d}),"d-flex align-items-center list-unstyled mb-0")},L):e.createElement("div",{className:I({disabled:a})},e.createElement("div",{className:A({completed:p===1,disabled:a,color:d}),style:{width:`${p*100}%`}})),t&&e.createElement("div",{className:W},t)),n&&p!==1&&e.createElement("div",{className:x},e.createElement(y.Button,{kind:"icon",icon:"x",onClick:n,title:C("progressBar.closeButtonTitle",{defaultValue:"Close progress bar"})})))}c.Metadata.set(P,{name:"Progress Bar",props:{detail:{type:"string"},disabled:{type:"boolean"},onClose:{type:"() => void"},percentComplete:{type:"number",default:"0"},progressColor:{type:'"purple" | "blue" | "red" | "orange" | "grey"',default:'"purple"'}}});function k({className:s,size:o="sm",progress:t=0,...a}){const p=g.Tokens.component["progress-ring"][o]-4,_=p*2*Math.PI,i=_-t/100*_;return e.createElement("div",{className:s,...a},e.createElement("svg",{height:g.Tokens.component["progress-ring"][o]*2,width:g.Tokens.component["progress-ring"][o]*2,style:{transform:"rotate(-90deg)"}},e.createElement("circle",{stroke:g.Tokens.color.grey["medium-light"],fill:"transparent",strokeWidth:4,strokeDasharray:`${_} ${_}`,r:p,cx:g.Tokens.component["progress-ring"][o],cy:g.Tokens.component["progress-ring"][o]}),e.createElement("circle",{stroke:g.Tokens.color.purple.medium,fill:"transparent",strokeWidth:4,strokeDasharray:`${_} ${_}`,style:{strokeDashoffset:i},r:p,cx:g.Tokens.component["progress-ring"][o],cy:g.Tokens.component["progress-ring"][o]})))}c.Metadata.set(k,{name:"Progress Ring",props:{size:{type:'"sm" | "md" | "lg"',default:'"sm"'},progress:{type:"number",default:"0"}}});const z={"Progress Bars":{description:()=>e.createElement("p",null,"Progress Bars are used to visualize the progression of a process (such as a file upload) or series of related tasks that take place over a longer period of time. Progress Bars can be accompanied by a variety of additional content to provide more context regarding the processes being performed."),components:[P,w],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Progress Bars can be used in a variety of situations, but the most common use case is to show the live progress of a process such as a file upload or the processing of a digital payload."),e.createElement("p",null,"For processes that typically complete within minutes or less, opt for the Standard Progress Bar."),e.createElement("p",null,"For processes that are divided into specific steps that are accomplished over a longer period of time, opt for the Stepped Progress Bar."))},standard:{label:"Standard Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Standard Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Content Type"),e.createElement(r.SpsTableHeader,null,"Required"),e.createElement(r.SpsTableHeader,null,"Description/Guidelines")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Title"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Progress Meter"),e.createElement(r.SpsTableCell,null,"Yes"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Progress Counter"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Clear Button"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"If the process requires the option to be cancelled or removed from a list the clear button can be used.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Progress Details"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),examples:{standard:{description:()=>e.createElement("p",null,"The Standard Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements."),react:m.code`
             import { ProgressBar } from "@sps-woodland/progress-indicators";
             import { Card } from "@sps-woodland/cards";
 
@@ -18,7 +18,7 @@
                 </Card>
               )
             }
-          `},completed:{description:()=>e.createElement("p",null,"Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),react:o.code`
+          `},completed:{description:()=>e.createElement("p",null,"Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),react:m.code`
             import { ProgressBar } from "@sps-woodland/progress-indicators";
             import { Card } from "@sps-woodland/cards";
 
@@ -33,7 +33,7 @@
                 </Card>
               )
             }
-          `},disabled:{description:()=>e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted."),react:o.code`
+          `},disabled:{description:()=>e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted."),react:m.code`
             import { ProgressBar } from "@sps-woodland/progress-indicators";
             import { Card } from "@sps-woodland/cards";
 
@@ -54,7 +54,7 @@
                 </Card>
               )
             }
-          `}}},stepped:{label:"Stepped Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Stepped Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/stepped-progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Content Type"),e.createElement(r.SpsTableHeader,null,"Required"),e.createElement(r.SpsTableHeader,null,"Description/Guidelines")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Title"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Progress Meter"),e.createElement(r.SpsTableCell,null,"Yes"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Progress Counter"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Step icons"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Icons can be set inside of steps for visual emphasis.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Step Tooltips"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover."))))),examples:{standard:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Building Stepped Progress Bars"),e.createElement("p",null,"The Stepped Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements.")),react:o.code`
+          `}}},stepped:{label:"Stepped Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Stepped Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/stepped-progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Content Type"),e.createElement(r.SpsTableHeader,null,"Required"),e.createElement(r.SpsTableHeader,null,"Description/Guidelines")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Title"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Progress Meter"),e.createElement(r.SpsTableCell,null,"Yes"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Progress Counter"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Step icons"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Icons can be set inside of steps for visual emphasis.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Step Tooltips"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover."))))),examples:{standard:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Building Stepped Progress Bars"),e.createElement("p",null,"The Stepped Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements.")),react:m.code`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
           
@@ -96,7 +96,7 @@
                 </Card>
               )
             }
-          `},color:{description:()=>e.createElement("h4",null,"Alternate Color"),react:o.code`
+          `},color:{description:()=>e.createElement("h4",null,"Alternate Color"),react:m.code`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -135,7 +135,7 @@
                 </Card>
               )
             }
-          `},skippedSteps:{description:()=>e.createElement("h4",null,"Skip steps"),react:o.code`
+          `},skippedSteps:{description:()=>e.createElement("h4",null,"Skip steps"),react:m.code`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -162,7 +162,7 @@
                 </Card>
               )
             }
-          `},completed:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Completed State"),e.createElement("p",null,"Once complete, the progress bar appears in green.")),react:o.code`
+          `},completed:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Completed State"),e.createElement("p",null,"Once complete, the progress bar appears in green.")),react:m.code`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -203,7 +203,7 @@
                 </Card>
               )
             }
-          `},disabled:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Disabled State"),e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted.")),react:o.code`
+          `},disabled:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Disabled State"),e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted.")),react:m.code`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -229,4 +229,4 @@
                 </Card>
               )
             }
-          `}}}}}};t.MANIFEST=m,Object.keys(l).forEach(s=>{s!=="default"&&!Object.prototype.hasOwnProperty.call(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:()=>l[s]})}),Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
+          `}}}}}};l.MANIFEST=z,l.ProgressBar=P,l.ProgressBarStep=w,l.ProgressRing=k,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/lib/progress-bar/ProgressBar.css.d.ts

@@ -0,0 +1,18 @@
+import { Tokens } from "@sps-woodland/tokens";
+import { BooleanRecipeVariant, RecipeVariant, VariantDefinitions } from "@sps-woodland/core";
+export type ProgressBarKind = keyof typeof Tokens.component["progress-bar"]["progress-color"];
+interface ProgressBarVariantDefinitions extends VariantDefinitions {
+    completed: BooleanRecipeVariant;
+    disabled: BooleanRecipeVariant;
+    color: RecipeVariant<ProgressBarKind>;
+}
+export declare const progressBar: string;
+export declare const progressBarContent: string;
+export declare const progressBarCloseButton: string;
+export declare const progressBarHeading: string;
+export declare const progressBarTitle: string;
+export declare const progressBarPercentage: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<ProgressBarVariantDefinitions>;
+export declare const progressBarBackground: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ProgressBarVariantDefinitions, "disabled">>;
+export declare const progressBarProgress: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<ProgressBarVariantDefinitions>;
+export declare const progressBarDetail: string;
+export {};

package/lib/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+import { ProgressBarKind } from "./ProgressBar.css";
+export declare function ProgressBar({ className, children, detail, disabled, onClose, percentComplete, title, showStepsCounter, progressColor, ...rest }: ComponentProps<{
+    detail?: string;
+    disabled?: boolean;
+    onClose?: () => void;
+    percentComplete?: number;
+    title?: string;
+    showStepsCounter?: boolean;
+    progressColor?: ProgressBarKind;
+}, HTMLDivElement>): React.ReactElement;

package/lib/progress-bar/progress-bar-step/ProgressBarStep.css.d.ts

@@ -0,0 +1,13 @@
+import { Tokens } from "@sps-woodland/tokens";
+import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
+export type SteppedProgressBarKind = keyof typeof Tokens.component["stepped-progress-bar"]["progress-color"];
+interface ProgressBarStepVariantDefinitions extends VariantDefinitions {
+    color: RecipeVariant<SteppedProgressBarKind>;
+    stepCompleted: BooleanRecipeVariant;
+    barComplete: BooleanRecipeVariant;
+}
+export declare const progressBarStepsComplete: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ProgressBarStepVariantDefinitions, "color" | "disabled" | "barCompleted">>;
+export declare const progressBarStepBackground: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ProgressBarStepVariantDefinitions, "color" | "disabled" | "barCompleted">>;
+export declare const progressBarIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ProgressBarStepVariantDefinitions, "stepCompleted">>;
+export declare const progressBarStep: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ProgressBarStepVariantDefinitions, "color" | "disabled" | "stepCompleted" | "barCompleted">>;
+export {};

package/lib/progress-bar/progress-bar-step/ProgressBarStep.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+import { IconName } from "@sps-woodland/tokens";
+import { ProgressBarKind } from "../ProgressBar.css";
+export declare function ProgressBarStep({ className, title, description, icon, complete, disabled, barCompleted, progressColor, ...rest }: ComponentProps<{
+    title?: string;
+    description?: string;
+    icon?: IconName;
+    complete?: boolean;
+    disabled?: boolean;
+    barCompleted?: boolean;
+    progressColor?: ProgressBarKind;
+}, HTMLElement>): React.ReactElement;

package/lib/progress-ring/ProgressRing.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+import { ProgressRingSize } from "@sps-woodland/tokens";
+export declare function ProgressRing({ className, size, progress, ...rest }: ComponentProps<{
+    size: ProgressRingSize;
+    progress: number;
+}, HTMLDivElement>): React.ReactElement;

package/lib/style.css

@@ -1 +1 @@
-.pkg_sps-woodland_core__version_8_51_3__hash_aun9aq0{align-items:center;display:flex}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aq1{flex-grow:1}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aq2{margin-left:.5rem;margin-top:-.375rem}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aq3{display:flex;font-size:.875rem;line-height:1.25rem;margin-bottom:.5rem}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aq4{color:#1f282c;flex-grow:1}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aq5{color:#91467f;font-weight:600;font-size:.875rem;line-height:1.25rem}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aq6{color:#0b8940!important}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aq8{color:#d2d4d4!important}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqa{color:#91467f}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqb{color:#007db8}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqc{color:#de002e}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqd{color:#e7760b}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqe{color:#717779}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqf{background:#e9e9ea;border-radius:.5rem;height:1rem;width:100%;overflow:hidden}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqg{cursor:not-allowed}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqi{background-color:#91467f;border-radius:.5rem;height:1rem}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqj{background-color:#0b8940!important}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aql{background-color:#d2d4d4!important}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqn{background:#91467f}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqn:hover{background:#6e3c65}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqo{background:#007db8}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqo:hover{background:#09638d}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqp{background:#de002e}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqp:hover{background:#a30d2d}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqq{background:#e7760b}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqq:hover{background:#aa5e14}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqr{background:#717779}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqr:hover{background:#1f282c}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqs{background-color:#d2d4d4}.pkg_sps-woodland_core__version_8_51_3__hash_aun9aqt{color:#4b5356;font-size:.75rem;line-height:1.125rem;margin-top:1rem}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf80{font-weight:600}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf81{color:#0b8940!important}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf83{color:#d2d4d4!important}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf85{color:#91467f}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf86{color:#007db8}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf87{color:#de002e}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf88{color:#e7760b}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf89{color:#717779}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf8h{cursor:not-allowed}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf8j{display:block;margin-bottom:0}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf8k{color:#fff}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf8l{color:#717779}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf8m{background:#e9e9ea;border-radius:.125rem;margin-left:.125rem;height:1rem;display:flex;flex:1 1 8%;align-items:center;justify-content:center}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf8m:last-child{border-radius:.125rem .5rem .5rem .125rem}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf8m:first-child{border-radius:.5rem .125rem .125rem .5rem;margin-left:0}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf8m:only-child{border-radius:.5rem}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf8y{background:#d2d4d4}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf8z{background:#0b8940}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf810{background:#d2d4d4;cursor:not-allowed}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf811{background:#91467f}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf811:hover{background:#6e3c65}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf812{background:#de002e}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf812:hover{background:#a30d2d}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf813{background:#007db8}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf813:hover{background:#09638d}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf814{background:#e7760b}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf814:hover{background:#aa5e14}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf815{background:#717779}.pkg_sps-woodland_core__version_8_51_3__hash_2etnf815:hover{background:#1f282c}
+.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme0{align-items:center;display:flex}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme1{flex-grow:1}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme2{margin-left:.5rem;margin-top:-.375rem}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme3{display:flex;font-size:.875rem;line-height:1.25rem;margin-bottom:.5rem}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme4{color:#1f282c;flex-grow:1}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme5{color:#91467f;font-weight:600;font-size:.875rem;line-height:1.25rem}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme6{color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qme8{color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmea{color:#91467f}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeb{color:#007db8}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmec{color:#de002e}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmed{color:#e7760b}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmee{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmef{background:#e9e9ea;border-radius:.5rem;height:1rem;width:100%;overflow:hidden}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeg{cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmei{background-color:#91467f;border-radius:.5rem;height:1rem}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmej{background-color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmel{background-color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmen{background:#91467f}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmen:hover{background:#6e3c65}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeo{background:#007db8}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeo:hover{background:#09638d}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmep{background:#de002e}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmep:hover{background:#a30d2d}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeq{background:#e7760b}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmeq:hover{background:#aa5e14}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmer{background:#717779}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmer:hover{background:#1f282c}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmes{background-color:#d2d4d4}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_1890qmet{color:#4b5356;font-size:.75rem;line-height:1.125rem;margin-top:1rem}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go0{font-weight:600}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go1{color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go3{color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go5{color:#91467f}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go6{color:#007db8}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go7{color:#de002e}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go8{color:#e7760b}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go9{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goh{cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goj{display:block;margin-bottom:0}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gok{color:#fff}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gol{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gom{background:#e9e9ea;border-radius:.125rem;margin-left:.125rem;height:1rem;display:flex;flex:1 1 8%;align-items:center;justify-content:center}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gom:last-child{border-radius:.125rem .5rem .5rem .125rem}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gom:first-child{border-radius:.5rem .125rem .125rem .5rem;margin-left:0}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0gom:only-child{border-radius:.5rem}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goy{background:#d2d4d4}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0goz{background:#0b8940}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go10{background:#d2d4d4;cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go11{background:#91467f}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go11:hover{background:#6e3c65}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go12{background:#de002e}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go12:hover{background:#a30d2d}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go13{background:#007db8}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go13:hover{background:#09638d}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go14{background:#e7760b}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go14:hover{background:#aa5e14}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go15{background:#717779}.pkg_sps-woodland_progress-indicators__version_8_52_0__hash_17lj0go15:hover{background:#1f282c}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/progress-indicators",
   "description": "SPS Woodland Design System progress indicator components",
-  "version": "8.51.3",
+  "version": "8.52.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/progress-indicators",
@@ -17,7 +17,6 @@
       "import": "./lib/index.js",
       "default": "./lib/index.js"
     },
-    "./style.css": "./lib/style.css",
     "./lib/style.css": {
       "import": "./lib/style.css",
       "require": "./lib/style.css"
@@ -30,21 +29,28 @@
     "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@spscommerce/ds-react": "8.51.3",
-    "@sps-woodland/core": "8.51.3"
+    "@sps-woodland/buttons": "8.52.0",
+    "@sps-woodland/core": "8.52.0",
+    "@sps-woodland/tokens": "8.52.0",
+    "@spscommerce/ds-react": "8.52.0",
+    "@spscommerce/i18n": "8.52.0"
   },
   "devDependencies": {
     "@spscommerce/utils": "9.0.3",
+    "@vanilla-extract/css": "1.17.4",
+    "@vanilla-extract/recipes": "0.2.5",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@sps-woodland/core": "8.51.3",
-    "@spscommerce/ds-react": "8.51.3"
+    "@sps-woodland/buttons": "8.52.0",
+    "@sps-woodland/core": "8.52.0",
+    "@sps-woodland/tokens": "8.52.0",
+    "@spscommerce/ds-react": "8.52.0",
+    "@spscommerce/i18n": "8.52.0"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
+    "build": "pnpm run build:js && pnpm run build:types",
     "build:js": "vite build",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
-    "build:css": "cp ../core/lib/progress-indicators/style.css lib/style.css 2>/dev/null || echo 'progress-indicators style.css not found, skipping'",
     "watch": "vite build --watch",
     "clean": "git clean -fdX",
     "pub": "node ../../../scripts/publish-package.mjs"

package/vite.config.mjs

@@ -1,24 +1,31 @@
 import path from "node:path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
 import pkg from "./package.json";
 
-// Progress-indicators is now a wrapper package that re-exports from @sps-woodland/core.
-// No vanilla-extract needed - CSS is provided by the mono-package.
-
-const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
 
 export default defineConfig({
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
       name: "ProgressIndicators",
       fileName: "index",
+      cssFileName: "style",
     },
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,
     rollupOptions: {
-      // External must match subpath imports like @sps-woodland/core/progress-indicators
-      external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
     },
   },
 });