@sps-woodland/progress-indicators 8.0.0-rc1

package/README.md

@@ -0,0 +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

package/lib/index.cjs.js

@@ -0,0 +1,232 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const N=require("react"),d=require("@sps-woodland/core"),q=require("@sps-woodland/buttons"),r=require("@spscommerce/ds-react"),u=require("@sps-woodland/tokens"),f=require("@spscommerce/utils");function O(t){if(t&&t.__esModule)return t;const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(s,a,l.get?l:{enumerable:!0,get:()=>t[a]})}}return s.default=t,Object.freeze(s)}const e=O(N);function k(t,s,a){return s in t?Object.defineProperty(t,s,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[s]=a,t}function _(t,s){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);s&&(l=l.filter(function(o){return Object.getOwnPropertyDescriptor(t,o).enumerable})),a.push.apply(a,l)}return a}function w(t){for(var s=1;s<arguments.length;s++){var a=arguments[s]!=null?arguments[s]:{};s%2?_(Object(a),!0).forEach(function(l){k(t,l,a[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):_(Object(a)).forEach(function(l){Object.defineProperty(t,l,Object.getOwnPropertyDescriptor(a,l))})}return t}var D=(t,s,a)=>{for(var l of Object.keys(t)){var o;if(t[l]!==((o=s[l])!==null&&o!==void 0?o:a[l]))return!1}return!0},S=t=>s=>{var a=t.defaultClassName,l=w(w({},t.defaultVariants),s);for(var o in l){var n,p=(n=l[o])!==null&&n!==void 0?n:t.defaultVariants[o];if(p!=null){var i=p;typeof i=="boolean"&&(i=i===!0?"true":"false");var m=t.variantClassNames[o][i];m&&(a+=" "+m)}}for(var[b,B]of t.compoundVariants)D(b,l,t.defaultVariants)&&(a+=" "+B);return a},V="_1890qme0",x=S({defaultClassName:"_1890qmef",variantClassNames:{disabled:{true:"_1890qmeg",false:"_1890qmeh"}},defaultVariants:{disabled:!1},compoundVariants:[]}),R="_1890qme2",F="_1890qme1",H="_1890qmet",M="_1890qme3",I=S({defaultClassName:"_1890qme5",variantClassNames:{completed:{true:"_1890qme6",false:"_1890qme7"},disabled:{true:"_1890qme8",false:"_1890qme9"},color:{purple:"_1890qmea",blue:"_1890qmeb",red:"_1890qmec",orange:"_1890qmed",grey:"_1890qmee"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[]}),A=S({defaultClassName:"_1890qmei",variantClassNames:{completed:{true:"_1890qmej",false:"_1890qmek"},disabled:{true:"_1890qmel",false:"_1890qmem"},color:{purple:"_1890qmen",blue:"_1890qmeo",red:"_1890qmep",orange:"_1890qmeq",grey:"_1890qmer"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[[{completed:!0,disabled:!0},"_1890qmes"]]}),$="_1890qme4";var G=S({defaultClassName:"_17lj0goj",variantClassNames:{stepCompleted:{true:"_17lj0gok",false:"_17lj0gol"}},defaultVariants:{stepCompleted:!1},compoundVariants:[]}),U=S({defaultClassName:"_17lj0gom",variantClassNames:{stepCompleted:{true:"_17lj0gon",false:"_17lj0goo"},disabled:{true:"_17lj0gop",false:"_17lj0goq"},barCompleted:{true:"_17lj0gor",false:"_17lj0gos"},color:{purple:"_17lj0got",red:"_17lj0gou",blue:"_17lj0gov",orange:"_17lj0gow",grey:"_17lj0gox"}},defaultVariants:{stepCompleted:!1,disabled:!1,barCompleted:!1,color:"purple"},compoundVariants:[[{barCompleted:!0,disabled:!0},"_17lj0goy"],[{barCompleted:!0,disabled:!1},"_17lj0goz"],[{stepCompleted:!0,disabled:!0},"_17lj0go10"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"purple"},"_17lj0go11"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"red"},"_17lj0go12"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"blue"},"_17lj0go13"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"orange"},"_17lj0go14"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"grey"},"_17lj0go15"]]}),W=S({defaultClassName:"",variantClassNames:{barCompleted:{true:"_17lj0goa",false:"_17lj0gob"},color:{purple:"_17lj0goc",blue:"_17lj0god",red:"_17lj0goe",orange:"_17lj0gof",grey:"_17lj0gog"},disabled:{true:"_17lj0goh",false:"_17lj0goi"}},defaultVariants:{barCompleted:!1,color:"purple",disabled:!1},compoundVariants:[]}),Y=S({defaultClassName:"_17lj0go0",variantClassNames:{barCompleted:{true:"_17lj0go1",false:"_17lj0go2"},disabled:{true:"_17lj0go3",false:"_17lj0go4"},color:{purple:"_17lj0go5",blue:"_17lj0go6",red:"_17lj0go7",orange:"_17lj0go8",grey:"_17lj0go9"}},defaultVariants:{barCompleted:!1,disabled:!1,color:"purple"},compoundVariants:[]});function C({className:t,title:s,description:a,icon:l,complete:o=!1,disabled:n,barCompleted:p,progressColor:i,...m}){const b=d.useElementId().current||void 0;return e.createElement("li",{id:b,className:d.cl(U({stepCompleted:o,disabled:n,barCompleted:p,color:i}),t),...m},l&&e.createElement(d.Icon,{icon:l,size:"sm",className:G({stepCompleted:o})}),s&&b&&e.createElement(r.SpsTooltip,{for:b,title:s},a))}d.Metadata.set(C,{name:"ProgressBarStep",props:{icon:{type:"IconName"},complete:{type:"boolean"},title:{type:"string"},description:{type:"string"}}});function E({className:t,children:s,detail:a,disabled:l,onClose:o,percentComplete:n=0,title:p,showStepsCounter:i,progressColor:m="purple",...b}){const{t:B}=e.useContext(d.I18nContext),[P,y]=e.useState([]),[g]=d.selectChildren(s,[{type:C}]);let h=[];e.useEffect(()=>{g.forEach(c=>{var T;(c==null?void 0:c.hasOwnProperty("props"))&&((T=c==null?void 0:c.props)==null?void 0:T.complete)===!0&&h.push(c),y(h)})},[]),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 j=e.Children.map(s,c=>e.isValidElement(c)?e.cloneElement(c,{disabled:l,barCompleted:P.length===g.length,progressColor:m}):c);return e.createElement("div",{className:d.cl(V,t),...b},e.createElement("div",{className:F},p&&e.createElement("div",{className:M},e.createElement("div",{className:$},p),g.length>0?e.createElement(e.Fragment,null,i===!0&&e.createElement("div",{className:Y({barCompleted:P.length===g.length,disabled:l,color:m})},`${P.length} of ${g.length} Complete`)):e.createElement("div",{className:I({completed:n===1,disabled:l,color:m})},`${Math.floor(n*100)}%`)),g.length>0?e.createElement("ul",{className:d.cl(W({barCompleted:P.length===g.length,disabled:l,color:m}),"d-flex align-items-center list-unstyled mb-0")},j):e.createElement("div",{className:x({disabled:l})},e.createElement("div",{className:A({completed:n===1,disabled:l,color:m}),style:{width:`${n*100}%`}})),a&&e.createElement("div",{className:H},a)),o&&n!==1&&e.createElement("div",{className:R},e.createElement(q.Button,{kind:"icon",icon:"x",onClick:o,title:B("design-system:progressBar.closeButtonTitle")})))}d.Metadata.set(E,{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 v({className:t,size:s="sm",progress:a=0,...l}){const n=u.Tokens.component["progress-ring"][s]-4,p=n*2*Math.PI,i=p-a/100*p;return e.createElement("div",{className:t,...l},e.createElement("svg",{height:u.Tokens.component["progress-ring"][s]*2,width:u.Tokens.component["progress-ring"][s]*2,style:{transform:"rotate(-90deg)"}},e.createElement("circle",{stroke:u.Tokens.color.grey["medium-light"],fill:"transparent",strokeWidth:4,strokeDasharray:`${p} ${p}`,r:n,cx:u.Tokens.component["progress-ring"][s],cy:u.Tokens.component["progress-ring"][s]}),e.createElement("circle",{stroke:u.Tokens.color.purple.medium,fill:"transparent",strokeWidth:4,strokeDasharray:`${p} ${p}`,style:{strokeDashoffset:i},r:n,cx:u.Tokens.component["progress-ring"][s],cy:u.Tokens.component["progress-ring"][s]})))}d.Metadata.set(v,{name:"Progress Ring",props:{size:{type:'"sm" | "md" | "lg"',default:'"sm"'},progress:{type:"number",default:"0"}}});const z={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:[E,C],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:f.code`
+            import { ProgressBar } from "@sps-woodland/progress-indicators";
+            import { Card } from "@sps-woodland/cards";
+
+            function Component() {
+              function handleClose() {
+                console.log("closed");
+              }
+
+              return (
+                <Card>
+                  <ProgressBar
+                    title="File Name"
+                    detail="Step 3 of 5: Verifying Headers"
+                    percentComplete={0.5}
+                    onClose={handleClose}
+                  />
+                </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:f.code`
+            import { ProgressBar } from "@sps-woodland/progress-indicators";
+            import { Card } from "@sps-woodland/cards";
+
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="File Name"
+                    detail="Process Complete"
+                    percentComplete={1}
+                  />
+                </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:f.code`
+            import { ProgressBar } from "@sps-woodland/progress-indicators";
+            import { Card } from "@sps-woodland/cards";
+
+            function Component() {
+              function handleClose() {
+                console.log("closed");
+              }
+              
+              return (
+                <Card>
+                  <ProgressBar
+                    title="File Name"
+                    detail="Step 3 of 5: Verifying Headers"
+                    percentComplete={0.5}
+                    disabled
+                    onClose={handleClose}
+                  />
+                </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:f.code`
+            import { Card } from "@sps-woodland/cards";
+            import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
+          
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="Process Name"
+                    showStepsCounter={true}
+                  >
+                    <ProgressBarStep
+                      title="Title 1"
+                      description="Description"
+                      complete
+                    />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep
+                      title="Title 5"
+                      description="Description"
+                      icon="calendar"
+                    />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep
+                      title="Title 9"
+                      description="Description"
+                      icon="calendar"
+                    />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep
+                      title="Title 12"
+                      description="Description"
+                    />
+                  </ProgressBar>
+                </Card>
+              )
+            }
+          `},color:{description:()=>e.createElement("h4",null,"Alternate Color"),react:f.code`
+            import { Card } from "@sps-woodland/cards";
+            import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
+
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="Process Name"
+                    showStepsCounter={true}
+                    progressColor="grey"
+                  >
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep
+                      title="Title 5"
+                      description="Description"
+                      icon="calendar"
+                    />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep
+                      title="Title 9"
+                      description="Description"
+                      icon="calendar"
+                    />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep
+                      title="Title 12"
+                      description="Description"
+                    />
+                  </ProgressBar>
+                </Card>
+              )
+            }
+          `},skippedSteps:{description:()=>e.createElement("h4",null,"Skip steps"),react:f.code`
+            import { Card } from "@sps-woodland/cards";
+            import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
+
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="Process Name"
+                    showStepsCounter={true}
+                  >
+                    <ProgressBarStep />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                  </ProgressBar>
+                </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:f.code`
+            import { Card } from "@sps-woodland/cards";
+            import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
+
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="Process Name"
+                    showStepsCounter={true}
+                  >
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep
+                      title="Title 5"
+                      description="Description"
+                      icon="calendar"
+                      complete
+                    />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep
+                      title="Title 9"
+                      description="Description"
+                      icon="calendar"
+                      complete
+                    />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep
+                      title="Title 12"
+                      description="Description"
+                      complete
+                    />
+                  </ProgressBar>
+                </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:f.code`
+            import { Card } from "@sps-woodland/cards";
+            import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
+
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="Process Name"
+                    showStepsCounter={true}
+                    disabled
+                  >
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                  </ProgressBar>
+                </Card>
+              )
+            }
+          `}}}}},K={"Progress Bar":z};exports.MANIFEST=K;exports.ProgressBar=E;exports.ProgressBarStep=C;exports.ProgressRing=v;

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./progress-bar/ProgressBar";
+export * from "./progress-bar/progress-bar-step/ProgressBarStep";
+export * from "./progress-ring/ProgressRing";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,571 @@
+import * as e from "react";
+import { Metadata as C, useElementId as V, cl as S, Icon as k, I18nContext as F, selectChildren as R } from "@sps-woodland/core";
+import { Button as I } from "@sps-woodland/buttons";
+import { SpsTooltip as A, SpsTable as y, SpsTableHead as N, SpsTableHeader as f, SpsTableBody as j, SpsTableRow as d, SpsTableCell as r } from "@spscommerce/ds-react";
+import { Tokens as g } from "@sps-woodland/tokens";
+import { code as P } from "@spscommerce/utils";
+function M(t, s, l) {
+  return s in t ? Object.defineProperty(t, s, {
+    value: l,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : t[s] = l, t;
+}
+function T(t, s) {
+  var l = Object.keys(t);
+  if (Object.getOwnPropertySymbols) {
+    var a = Object.getOwnPropertySymbols(t);
+    s && (a = a.filter(function(o) {
+      return Object.getOwnPropertyDescriptor(t, o).enumerable;
+    })), l.push.apply(l, a);
+  }
+  return l;
+}
+function q(t) {
+  for (var s = 1; s < arguments.length; s++) {
+    var l = arguments[s] != null ? arguments[s] : {};
+    s % 2 ? T(Object(l), !0).forEach(function(a) {
+      M(t, a, l[a]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(l)) : T(Object(l)).forEach(function(a) {
+      Object.defineProperty(t, a, Object.getOwnPropertyDescriptor(l, a));
+    });
+  }
+  return t;
+}
+var H = (t, s, l) => {
+  for (var a of Object.keys(t)) {
+    var o;
+    if (t[a] !== ((o = s[a]) !== null && o !== void 0 ? o : l[a]))
+      return !1;
+  }
+  return !0;
+}, E = (t) => (s) => {
+  var l = t.defaultClassName, a = q(q({}, t.defaultVariants), s);
+  for (var o in a) {
+    var n, p = (n = a[o]) !== null && n !== void 0 ? n : t.defaultVariants[o];
+    if (p != null) {
+      var c = p;
+      typeof c == "boolean" && (c = c === !0 ? "true" : "false");
+      var m = t.variantClassNames[o][c];
+      m && (l += " " + m);
+    }
+  }
+  for (var [B, b] of t.compoundVariants)
+    H(B, a, t.defaultVariants) && (l += " " + b);
+  return l;
+}, $ = "_1890qme0", G = E({ defaultClassName: "_1890qmef", variantClassNames: { disabled: { true: "_1890qmeg", false: "_1890qmeh" } }, defaultVariants: { disabled: !1 }, compoundVariants: [] }), U = "_1890qme2", W = "_1890qme1", Y = "_1890qmet", K = "_1890qme3", z = E({ defaultClassName: "_1890qme5", variantClassNames: { completed: { true: "_1890qme6", false: "_1890qme7" }, disabled: { true: "_1890qme8", false: "_1890qme9" }, color: { purple: "_1890qmea", blue: "_1890qmeb", red: "_1890qmec", orange: "_1890qmed", grey: "_1890qmee" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [] }), J = E({ defaultClassName: "_1890qmei", variantClassNames: { completed: { true: "_1890qmej", false: "_1890qmek" }, disabled: { true: "_1890qmel", false: "_1890qmem" }, color: { purple: "_1890qmen", blue: "_1890qmeo", red: "_1890qmep", orange: "_1890qmeq", grey: "_1890qmer" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [[{ completed: !0, disabled: !0 }, "_1890qmes"]] }), L = "_1890qme4";
+var Q = E({ defaultClassName: "_17lj0goj", variantClassNames: { stepCompleted: { true: "_17lj0gok", false: "_17lj0gol" } }, defaultVariants: { stepCompleted: !1 }, compoundVariants: [] }), X = E({ defaultClassName: "_17lj0gom", variantClassNames: { stepCompleted: { true: "_17lj0gon", false: "_17lj0goo" }, disabled: { true: "_17lj0gop", false: "_17lj0goq" }, barCompleted: { true: "_17lj0gor", false: "_17lj0gos" }, color: { purple: "_17lj0got", red: "_17lj0gou", blue: "_17lj0gov", orange: "_17lj0gow", grey: "_17lj0gox" } }, defaultVariants: { stepCompleted: !1, disabled: !1, barCompleted: !1, color: "purple" }, compoundVariants: [[{ barCompleted: !0, disabled: !0 }, "_17lj0goy"], [{ barCompleted: !0, disabled: !1 }, "_17lj0goz"], [{ stepCompleted: !0, disabled: !0 }, "_17lj0go10"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "purple" }, "_17lj0go11"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "red" }, "_17lj0go12"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "blue" }, "_17lj0go13"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "orange" }, "_17lj0go14"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "grey" }, "_17lj0go15"]] }), Z = E({ defaultClassName: "", variantClassNames: { barCompleted: { true: "_17lj0goa", false: "_17lj0gob" }, color: { purple: "_17lj0goc", blue: "_17lj0god", red: "_17lj0goe", orange: "_17lj0gof", grey: "_17lj0gog" }, disabled: { true: "_17lj0goh", false: "_17lj0goi" } }, defaultVariants: { barCompleted: !1, color: "purple", disabled: !1 }, compoundVariants: [] }), ee = E({ defaultClassName: "_17lj0go0", variantClassNames: { barCompleted: { true: "_17lj0go1", false: "_17lj0go2" }, disabled: { true: "_17lj0go3", false: "_17lj0go4" }, color: { purple: "_17lj0go5", blue: "_17lj0go6", red: "_17lj0go7", orange: "_17lj0go8", grey: "_17lj0go9" } }, defaultVariants: { barCompleted: !1, disabled: !1, color: "purple" }, compoundVariants: [] });
+function _({
+  className: t,
+  title: s,
+  description: l,
+  icon: a,
+  complete: o = !1,
+  disabled: n,
+  barCompleted: p,
+  progressColor: c,
+  ...m
+}) {
+  const B = V().current || void 0;
+  return /* @__PURE__ */ e.createElement("li", {
+    id: B,
+    className: S(
+      X({
+        stepCompleted: o,
+        disabled: n,
+        barCompleted: p,
+        color: c
+      }),
+      t
+    ),
+    ...m
+  }, a && /* @__PURE__ */ e.createElement(k, {
+    icon: a,
+    size: "sm",
+    className: Q({
+      stepCompleted: o
+    })
+  }), s && B && /* @__PURE__ */ e.createElement(A, {
+    for: B,
+    title: s
+  }, l));
+}
+C.set(_, {
+  name: "ProgressBarStep",
+  props: {
+    icon: { type: "IconName" },
+    complete: { type: "boolean" },
+    title: { type: "string" },
+    description: { type: "string" }
+  }
+});
+function O({
+  className: t,
+  children: s,
+  detail: l,
+  disabled: a,
+  onClose: o,
+  percentComplete: n = 0,
+  title: p,
+  showStepsCounter: c,
+  progressColor: m = "purple",
+  ...B
+}) {
+  const { t: b } = e.useContext(F), [h, x] = e.useState([]), [u] = R(s, [{ type: _ }]);
+  let v = [];
+  e.useEffect(() => {
+    u.forEach((i) => {
+      var w;
+      (i == null ? void 0 : i.hasOwnProperty("props")) && ((w = i == null ? void 0 : i.props) == null ? void 0 : w.complete) === !0 && v.push(i), x(v);
+    });
+  }, []), n && 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 D = e.Children.map(s, (i) => e.isValidElement(i) ? e.cloneElement(i, {
+    disabled: a,
+    barCompleted: h.length === u.length,
+    progressColor: m
+  }) : i);
+  return /* @__PURE__ */ e.createElement("div", {
+    className: S($, t),
+    ...B
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: W
+  }, p && /* @__PURE__ */ e.createElement("div", {
+    className: K
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: L
+  }, p), u.length > 0 ? /* @__PURE__ */ e.createElement(e.Fragment, null, c === !0 && /* @__PURE__ */ e.createElement("div", {
+    className: ee({
+      barCompleted: h.length === u.length,
+      disabled: a,
+      color: m
+    })
+  }, `${h.length} of ${u.length} Complete`)) : /* @__PURE__ */ e.createElement("div", {
+    className: z({
+      completed: n === 1,
+      disabled: a,
+      color: m
+    })
+  }, `${Math.floor(n * 100)}%`)), u.length > 0 ? /* @__PURE__ */ e.createElement("ul", {
+    className: S(
+      Z({
+        barCompleted: h.length === u.length,
+        disabled: a,
+        color: m
+      }),
+      "d-flex align-items-center list-unstyled mb-0"
+    )
+  }, D) : /* @__PURE__ */ e.createElement("div", {
+    className: G({
+      disabled: a
+    })
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: J({
+      completed: n === 1,
+      disabled: a,
+      color: m
+    }),
+    style: { width: `${n * 100}%` }
+  })), l && /* @__PURE__ */ e.createElement("div", {
+    className: Y
+  }, l)), o && n !== 1 && /* @__PURE__ */ e.createElement("div", {
+    className: U
+  }, /* @__PURE__ */ e.createElement(I, {
+    kind: "icon",
+    icon: "x",
+    onClick: o,
+    title: b("design-system:progressBar.closeButtonTitle")
+  })));
+}
+C.set(O, {
+  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 re({
+  className: t,
+  size: s = "sm",
+  progress: l = 0,
+  ...a
+}) {
+  const n = g.component["progress-ring"][s] - 4, p = n * 2 * Math.PI, c = p - l / 100 * p;
+  return /* @__PURE__ */ e.createElement("div", {
+    className: t,
+    ...a
+  }, /* @__PURE__ */ e.createElement("svg", {
+    height: g.component["progress-ring"][s] * 2,
+    width: g.component["progress-ring"][s] * 2,
+    style: { transform: "rotate(-90deg)" }
+  }, /* @__PURE__ */ e.createElement("circle", {
+    stroke: g.color.grey["medium-light"],
+    fill: "transparent",
+    strokeWidth: 4,
+    strokeDasharray: `${p} ${p}`,
+    r: n,
+    cx: g.component["progress-ring"][s],
+    cy: g.component["progress-ring"][s]
+  }), /* @__PURE__ */ e.createElement("circle", {
+    stroke: g.color.purple.medium,
+    fill: "transparent",
+    strokeWidth: 4,
+    strokeDasharray: `${p} ${p}`,
+    style: { strokeDashoffset: c },
+    r: n,
+    cx: g.component["progress-ring"][s],
+    cy: g.component["progress-ring"][s]
+  })));
+}
+C.set(re, {
+  name: "Progress Ring",
+  props: {
+    size: { type: '"sm" | "md" | "lg"', default: '"sm"' },
+    progress: { type: "number", default: "0" }
+  }
+});
+const te = {
+  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: [O, _],
+  examples: {
+    general: {
+      label: "General Usage",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ 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."), /* @__PURE__ */ e.createElement("p", null, "For processes that typically complete within minutes or less, opt for the Standard Progress Bar."), /* @__PURE__ */ 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: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Standard Progress Bars are comprised of the following Required and Optional elements."), /* @__PURE__ */ e.createElement("img", {
+        src: "assets/images/progress-bar-example.svg",
+        alt: "A Progress Bar with labels on each section",
+        className: "w-100 mb-3"
+      }), /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(N, null, /* @__PURE__ */ e.createElement(f, null, "Section"), /* @__PURE__ */ e.createElement(f, null, "Content Type"), /* @__PURE__ */ e.createElement(f, null, "Required"), /* @__PURE__ */ e.createElement(f, null, "Description/Guidelines")), /* @__PURE__ */ e.createElement(j, 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: P`
+            import { ProgressBar } from "@sps-woodland/progress-indicators";
+            import { Card } from "@sps-woodland/cards";
+
+            function Component() {
+              function handleClose() {
+                console.log("closed");
+              }
+
+              return (
+                <Card>
+                  <ProgressBar
+                    title="File Name"
+                    detail="Step 3 of 5: Verifying Headers"
+                    percentComplete={0.5}
+                    onClose={handleClose}
+                  />
+                </Card>
+              )
+            }
+          `
+        },
+        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: P`
+            import { ProgressBar } from "@sps-woodland/progress-indicators";
+            import { Card } from "@sps-woodland/cards";
+
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="File Name"
+                    detail="Process Complete"
+                    percentComplete={1}
+                  />
+                </Card>
+              )
+            }
+          `
+        },
+        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: P`
+            import { ProgressBar } from "@sps-woodland/progress-indicators";
+            import { Card } from "@sps-woodland/cards";
+
+            function Component() {
+              function handleClose() {
+                console.log("closed");
+              }
+              
+              return (
+                <Card>
+                  <ProgressBar
+                    title="File Name"
+                    detail="Step 3 of 5: Verifying Headers"
+                    percentComplete={0.5}
+                    disabled
+                    onClose={handleClose}
+                  />
+                </Card>
+              )
+            }
+          `
+        }
+      }
+    },
+    stepped: {
+      label: "Stepped Progress Bar",
+      description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Stepped Progress Bars are comprised of the following Required and Optional elements."), /* @__PURE__ */ 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"
+      }), /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(N, null, /* @__PURE__ */ e.createElement(f, null, "Section"), /* @__PURE__ */ e.createElement(f, null, "Content Type"), /* @__PURE__ */ e.createElement(f, null, "Required"), /* @__PURE__ */ e.createElement(f, null, "Description/Guidelines")), /* @__PURE__ */ e.createElement(j, 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: P`
+            import { Card } from "@sps-woodland/cards";
+            import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
+          
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="Process Name"
+                    showStepsCounter={true}
+                  >
+                    <ProgressBarStep
+                      title="Title 1"
+                      description="Description"
+                      complete
+                    />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep
+                      title="Title 5"
+                      description="Description"
+                      icon="calendar"
+                    />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep
+                      title="Title 9"
+                      description="Description"
+                      icon="calendar"
+                    />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep
+                      title="Title 12"
+                      description="Description"
+                    />
+                  </ProgressBar>
+                </Card>
+              )
+            }
+          `
+        },
+        color: {
+          description: () => /* @__PURE__ */ e.createElement("h4", null, "Alternate Color"),
+          react: P`
+            import { Card } from "@sps-woodland/cards";
+            import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
+
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="Process Name"
+                    showStepsCounter={true}
+                    progressColor="grey"
+                  >
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep
+                      title="Title 5"
+                      description="Description"
+                      icon="calendar"
+                    />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep
+                      title="Title 9"
+                      description="Description"
+                      icon="calendar"
+                    />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep
+                      title="Title 12"
+                      description="Description"
+                    />
+                  </ProgressBar>
+                </Card>
+              )
+            }
+          `
+        },
+        skippedSteps: {
+          description: () => /* @__PURE__ */ e.createElement("h4", null, "Skip steps"),
+          react: P`
+            import { Card } from "@sps-woodland/cards";
+            import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
+
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="Process Name"
+                    showStepsCounter={true}
+                  >
+                    <ProgressBarStep />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                  </ProgressBar>
+                </Card>
+              )
+            }
+          `
+        },
+        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: P`
+            import { Card } from "@sps-woodland/cards";
+            import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
+
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="Process Name"
+                    showStepsCounter={true}
+                  >
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep
+                      title="Title 5"
+                      description="Description"
+                      icon="calendar"
+                      complete
+                    />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep
+                      title="Title 9"
+                      description="Description"
+                      icon="calendar"
+                      complete
+                    />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep
+                      title="Title 12"
+                      description="Description"
+                      complete
+                    />
+                  </ProgressBar>
+                </Card>
+              )
+            }
+          `
+        },
+        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: P`
+            import { Card } from "@sps-woodland/cards";
+            import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
+
+            function Component() {
+              return (
+                <Card>
+                  <ProgressBar
+                    title="Process Name"
+                    showStepsCounter={true}
+                    disabled
+                  >
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep complete />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                    <ProgressBarStep />
+                  </ProgressBar>
+                </Card>
+              )
+            }
+          `
+        }
+      }
+    }
+  }
+}, pe = {
+  "Progress Bar": te
+};
+export {
+  pe as MANIFEST,
+  O as ProgressBar,
+  _ as ProgressBarStep,
+  re as ProgressRing
+};

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

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 declare 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/ProgressBar.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const ProgressBarExamples: ComponentManifestEntry;

package/lib/progress-bar/SteppedProgressBar.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const SteppedProgressBarExamples: ComponentManifestEntry;

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 declare 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

@@ -0,0 +1 @@
+._1890qme0{align-items:center;display:flex}._1890qme1{flex-grow:1}._1890qme2{margin-left:.5rem;margin-top:-.375rem}._1890qme3{display:flex;font-size:.875rem;line-height:1.25rem;margin-bottom:.5rem}._1890qme4{color:#1f282c;flex-grow:1}._1890qme5{color:#91467f;font-weight:600;font-size:.875rem;line-height:1.25rem}._1890qme6{color:#0b8940}._1890qme8{color:#d2d4d4}._1890qmea{color:#91467f}._1890qmeb{color:#007db8}._1890qmec{color:#de002e}._1890qmed{color:#e7760b}._1890qmee{color:#717779}._1890qmef{background:#e9e9ea;border-radius:.5rem;height:1rem;width:100%;overflow:hidden}._1890qmeg{cursor:not-allowed}._1890qmei{background-color:#91467f;border-radius:.5rem;height:1rem}._1890qmej{background-color:#0b8940!important}._1890qmel{background-color:#d2d4d4!important}._1890qmen{background:#91467f}._1890qmen:hover{background:#6e3c65}._1890qmeo{background:#007db8}._1890qmeo:hover{background:#09638d}._1890qmep{background:#de002e}._1890qmep:hover{background:#a30d2d}._1890qmeq{background:#e7760b}._1890qmeq:hover{background:#aa5e14}._1890qmer{background:#717779}._1890qmer:hover{background:#1f282c}._1890qmes{background-color:#d2d4d4}._1890qmet{color:#4b5356;font-size:.75rem;line-height:1.125rem;margin-top:1rem}._17lj0go0{font-weight:600}._17lj0go1{color:#0b8940!important}._17lj0go3{color:#d2d4d4!important}._17lj0go5{color:#91467f}._17lj0go6{color:#007db8}._17lj0go7{color:#de002e}._17lj0go8{color:#e7760b}._17lj0go9{color:#717779}._17lj0goh{cursor:not-allowed}._17lj0goj{display:block}._17lj0gok{color:#fff}._17lj0gol{color:#717779}._17lj0gom{background:#e9e9ea;border-radius:.125rem;margin-left:.125rem;height:1rem;display:flex;flex:1 1 8%;align-items:center;justify-content:center}._17lj0gom:last-child{border-radius:.125rem .5rem .5rem .125rem}._17lj0gom:first-child{border-radius:.5rem .125rem .125rem .5rem;margin-left:0}._17lj0goy{background:#d2d4d4}._17lj0goz{background:#0b8940}._17lj0go10{background:#d2d4d4;cursor:not-allowed}._17lj0go11{background:#91467f}._17lj0go11:hover{background:#6e3c65}._17lj0go12{background:#de002e}._17lj0go12:hover{background:#a30d2d}._17lj0go13{background:#007db8}._17lj0go13:hover{background:#09638d}._17lj0go14{background:#e7760b}._17lj0go14:hover{background:#aa5e14}._17lj0go15{background:#717779}._17lj0go15:hover{background:#1f282c}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@sps-woodland/progress-indicators",
+  "description": "SPS Woodland Design System progress indicator components",
+  "version": "8.0.0-rc1",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/progress-indicators",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/progress-indicators#readme",
+  "module": "./lib/index.es.js",
+  "type": "module",
+  "main": "./lib/index.cjs.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.es.js",
+      "require": "./lib/index.cjs.js",
+      "default": "./lib/index.cjs.js"
+    },
+    "./lib/style.css": {
+      "import": "./lib/style.css",
+      "require": "./lib/style.css"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "@sps-woodland/core": "8.0.0-rc1",
+    "@sps-woodland/tokens": "8.0.0-rc1",
+    "@sps-woodland/buttons": "8.0.0-rc1",
+    "@spscommerce/ds-react": "8.0.0-rc1"
+  },
+  "devDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "@vanilla-extract/css": "^1.9.3",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "@sps-woodland/buttons": "8.0.0-rc1",
+    "@spscommerce/ds-react": "8.0.0-rc1",
+    "@sps-woodland/core": "8.0.0-rc1",
+    "@sps-woodland/tokens": "8.0.0-rc1"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../../scripts/publish-package.js"
+  }
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});