@sps-woodland/progress-indicators 8.4.6 → 8.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/index.cjs.js +9 -9
  2. package/lib/index.es.js +99 -98
  3. package/package.json +9 -9
package/lib/index.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "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`
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const j=require("react"),m=require("@sps-woodland/core"),N=require("@sps-woodland/buttons"),r=require("@spscommerce/ds-react"),d=require("@sps-woodland/tokens"),g=require("@spscommerce/utils");function q(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=q(j);function O(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(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 _(t){for(var s=1;s<arguments.length;s++){var a=arguments[s]!=null?arguments[s]:{};s%2?T(Object(a),!0).forEach(function(l){O(t,l,a[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):T(Object(a)).forEach(function(l){Object.defineProperty(t,l,Object.getOwnPropertyDescriptor(a,l))})}return t}var k=(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},b=t=>s=>{var a=t.defaultClassName,l=_(_({},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 c=p;typeof c=="boolean"&&(c=c===!0?"true":"false");var i=t.variantClassNames[o][c];i&&(a+=" "+i)}}for(var[f,B]of t.compoundVariants)k(f,l,t.defaultVariants)&&(a+=" "+B);return a},D="_1890qme0",V=b({defaultClassName:"_1890qmef",variantClassNames:{disabled:{true:"_1890qmeg",false:"_1890qmeh"}},defaultVariants:{disabled:!1},compoundVariants:[]}),x="_1890qme2",R="_1890qme1",F="_1890qmet",H="_1890qme3",M=b({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:[]}),I=b({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"]]}),A="_1890qme4";var $=b({defaultClassName:"_17lj0goj",variantClassNames:{stepCompleted:{true:"_17lj0gok",false:"_17lj0gol"}},defaultVariants:{stepCompleted:!1},compoundVariants:[]}),G=b({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"]]}),U=b({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:[]}),W=b({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:c,...i}){const f=m.useElementId().current||void 0;return e.createElement("li",{id:f,className:m.cl(G({stepCompleted:o,disabled:n,barCompleted:p,color:c}),t),...i},l&&e.createElement(m.Icon,{icon:l,size:"sm",className:$({stepCompleted:o})}),s&&f&&e.createElement(r.SpsTooltip,{for:f,title:s},a))}m.Metadata.set(C,{name:"ProgressBarStep",props:{icon:{type:"IconName"},complete:{type:"boolean"},title:{type:"string"},description:{type:"string"}}});function h({className:t,children:s,detail:a,disabled:l,onClose:o,percentComplete:n=0,title:p,showStepsCounter:c,progressColor:i="purple",...f}){const{t:B}=e.useContext(m.I18nContext),[P,v]=e.useState([]),[u]=m.selectChildren(s,[{type:C}]);e.useEffect(()=>{let S=[];u.forEach(E=>{E.hasOwnProperty("props")&&E.props.complete===!0&&S.push(E),v(S)})},[]),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 y=e.Children.map(s,S=>e.isValidElement(S)?e.cloneElement(S,{disabled:l,barCompleted:P.length===u.length,progressColor:i}):S);return e.createElement("div",{className:m.cl(D,t),...f},e.createElement("div",{className:R},p&&e.createElement("div",{className:H},e.createElement("div",{className:A},p),u.length>0?e.createElement(e.Fragment,null,c===!0&&e.createElement("div",{className:W({barCompleted:P.length===u.length,disabled:l,color:i})},`${P.length} of ${u.length} Complete`)):e.createElement("div",{className:M({completed:n===1,disabled:l,color:i})},`${Math.floor(n*100)}%`)),u.length>0?e.createElement("ul",{className:m.cl(U({barCompleted:P.length===u.length,disabled:l,color:i}),"d-flex align-items-center list-unstyled mb-0")},y):e.createElement("div",{className:V({disabled:l})},e.createElement("div",{className:I({completed:n===1,disabled:l,color:i}),style:{width:`${n*100}%`}})),a&&e.createElement("div",{className:F},a)),o&&n!==1&&e.createElement("div",{className:x},e.createElement(N.Button,{kind:"icon",icon:"x",onClick:o,title:B("design-system:progressBar.closeButtonTitle")})))}m.Metadata.set(h,{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 w({className:t,size:s="sm",progress:a=0,...l}){const n=d.Tokens.component["progress-ring"][s]-4,p=n*2*Math.PI,c=p-a/100*p;return e.createElement("div",{className:t,...l},e.createElement("svg",{height:d.Tokens.component["progress-ring"][s]*2,width:d.Tokens.component["progress-ring"][s]*2,style:{transform:"rotate(-90deg)"}},e.createElement("circle",{stroke:d.Tokens.color.grey["medium-light"],fill:"transparent",strokeWidth:4,strokeDasharray:`${p} ${p}`,r:n,cx:d.Tokens.component["progress-ring"][s],cy:d.Tokens.component["progress-ring"][s]}),e.createElement("circle",{stroke:d.Tokens.color.purple.medium,fill:"transparent",strokeWidth:4,strokeDasharray:`${p} ${p}`,style:{strokeDashoffset:c},r:n,cx:d.Tokens.component["progress-ring"][s],cy:d.Tokens.component["progress-ring"][s]})))}m.Metadata.set(w,{name:"Progress Ring",props:{size:{type:'"sm" | "md" | "lg"',default:'"sm"'},progress:{type:"number",default:"0"}}});const Y={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:[h,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:g.code`
2
2
  import { ProgressBar } from "@sps-woodland/progress-indicators";
3
3
  import { Card } from "@sps-woodland/cards";
4
4
 
@@ -18,7 +18,7 @@
18
18
  </Card>
19
19
  )
20
20
  }
21
- `},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`
21
+ `},completed:{description:()=>e.createElement("p",null,"Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),react:g.code`
22
22
  import { ProgressBar } from "@sps-woodland/progress-indicators";
23
23
  import { Card } from "@sps-woodland/cards";
24
24
 
@@ -33,7 +33,7 @@
33
33
  </Card>
34
34
  )
35
35
  }
36
- `},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`
36
+ `},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:g.code`
37
37
  import { ProgressBar } from "@sps-woodland/progress-indicators";
38
38
  import { Card } from "@sps-woodland/cards";
39
39
 
@@ -54,7 +54,7 @@
54
54
  </Card>
55
55
  )
56
56
  }
57
- `}}},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`
57
+ `}}},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:g.code`
58
58
  import { Card } from "@sps-woodland/cards";
59
59
  import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
60
60
 
@@ -96,7 +96,7 @@
96
96
  </Card>
97
97
  )
98
98
  }
99
- `},color:{description:()=>e.createElement("h4",null,"Alternate Color"),react:f.code`
99
+ `},color:{description:()=>e.createElement("h4",null,"Alternate Color"),react:g.code`
100
100
  import { Card } from "@sps-woodland/cards";
101
101
  import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
102
102
 
@@ -135,7 +135,7 @@
135
135
  </Card>
136
136
  )
137
137
  }
138
- `},skippedSteps:{description:()=>e.createElement("h4",null,"Skip steps"),react:f.code`
138
+ `},skippedSteps:{description:()=>e.createElement("h4",null,"Skip steps"),react:g.code`
139
139
  import { Card } from "@sps-woodland/cards";
140
140
  import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
141
141
 
@@ -162,7 +162,7 @@
162
162
  </Card>
163
163
  )
164
164
  }
165
- `},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`
165
+ `},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:g.code`
166
166
  import { Card } from "@sps-woodland/cards";
167
167
  import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
168
168
 
@@ -203,7 +203,7 @@
203
203
  </Card>
204
204
  )
205
205
  }
206
- `},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`
206
+ `},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:g.code`
207
207
  import { Card } from "@sps-woodland/cards";
208
208
  import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
209
209
 
@@ -229,4 +229,4 @@
229
229
  </Card>
230
230
  )
231
231
  }
232
- `}}}}},K={"Progress Bar":z};exports.MANIFEST=K;exports.ProgressBar=E;exports.ProgressBarStep=C;exports.ProgressRing=v;
232
+ `}}}}},z={"Progress Bar":Y};exports.MANIFEST=z;exports.ProgressBar=h;exports.ProgressBarStep=C;exports.ProgressRing=w;
package/lib/index.es.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as e from "react";
2
- import { Metadata as C, useElementId as V, cl as S, Icon as k, I18nContext as F, selectChildren as R } from "@sps-woodland/core";
3
- import { Button as I } from "@sps-woodland/buttons";
4
- 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";
5
- import { Tokens as g } from "@sps-woodland/tokens";
6
- import { code as P } from "@spscommerce/utils";
7
- function M(t, s, l) {
2
+ import { Metadata as _, useElementId as D, cl as C, Icon as V, I18nContext as k, selectChildren as F } from "@sps-woodland/core";
3
+ import { Button as R } from "@sps-woodland/buttons";
4
+ import { SpsTooltip as I, SpsTable as w, SpsTableHead as y, SpsTableHeader as u, SpsTableBody as N, SpsTableRow as m, SpsTableCell as r } from "@spscommerce/ds-react";
5
+ import { Tokens as d } from "@sps-woodland/tokens";
6
+ import { code as f } from "@spscommerce/utils";
7
+ function A(t, s, l) {
8
8
  return s in t ? Object.defineProperty(t, s, {
9
9
  value: l,
10
10
  enumerable: !0,
@@ -12,7 +12,7 @@ function M(t, s, l) {
12
12
  writable: !0
13
13
  }) : t[s] = l, t;
14
14
  }
15
- function T(t, s) {
15
+ function j(t, s) {
16
16
  var l = Object.keys(t);
17
17
  if (Object.getOwnPropertySymbols) {
18
18
  var a = Object.getOwnPropertySymbols(t);
@@ -22,41 +22,41 @@ function T(t, s) {
22
22
  }
23
23
  return l;
24
24
  }
25
- function q(t) {
25
+ function T(t) {
26
26
  for (var s = 1; s < arguments.length; s++) {
27
27
  var l = arguments[s] != null ? arguments[s] : {};
28
- s % 2 ? T(Object(l), !0).forEach(function(a) {
29
- M(t, a, l[a]);
30
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(l)) : T(Object(l)).forEach(function(a) {
28
+ s % 2 ? j(Object(l), !0).forEach(function(a) {
29
+ A(t, a, l[a]);
30
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(l)) : j(Object(l)).forEach(function(a) {
31
31
  Object.defineProperty(t, a, Object.getOwnPropertyDescriptor(l, a));
32
32
  });
33
33
  }
34
34
  return t;
35
35
  }
36
- var H = (t, s, l) => {
36
+ var M = (t, s, l) => {
37
37
  for (var a of Object.keys(t)) {
38
38
  var o;
39
39
  if (t[a] !== ((o = s[a]) !== null && o !== void 0 ? o : l[a]))
40
40
  return !1;
41
41
  }
42
42
  return !0;
43
- }, E = (t) => (s) => {
44
- var l = t.defaultClassName, a = q(q({}, t.defaultVariants), s);
43
+ }, B = (t) => (s) => {
44
+ var l = t.defaultClassName, a = T(T({}, t.defaultVariants), s);
45
45
  for (var o in a) {
46
46
  var n, p = (n = a[o]) !== null && n !== void 0 ? n : t.defaultVariants[o];
47
47
  if (p != null) {
48
- var c = p;
49
- typeof c == "boolean" && (c = c === !0 ? "true" : "false");
50
- var m = t.variantClassNames[o][c];
51
- m && (l += " " + m);
48
+ var i = p;
49
+ typeof i == "boolean" && (i = i === !0 ? "true" : "false");
50
+ var c = t.variantClassNames[o][i];
51
+ c && (l += " " + c);
52
52
  }
53
53
  }
54
- for (var [B, b] of t.compoundVariants)
55
- H(B, a, t.defaultVariants) && (l += " " + b);
54
+ for (var [P, b] of t.compoundVariants)
55
+ M(P, a, t.defaultVariants) && (l += " " + b);
56
56
  return l;
57
- }, $ = "_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";
58
- 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: [] });
59
- function _({
57
+ }, H = "_1890qme0", $ = B({ defaultClassName: "_1890qmef", variantClassNames: { disabled: { true: "_1890qmeg", false: "_1890qmeh" } }, defaultVariants: { disabled: !1 }, compoundVariants: [] }), G = "_1890qme2", U = "_1890qme1", W = "_1890qmet", Y = "_1890qme3", K = B({ 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: [] }), z = B({ 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"]] }), J = "_1890qme4";
58
+ var L = B({ defaultClassName: "_17lj0goj", variantClassNames: { stepCompleted: { true: "_17lj0gok", false: "_17lj0gol" } }, defaultVariants: { stepCompleted: !1 }, compoundVariants: [] }), Q = B({ 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"]] }), X = B({ 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: [] }), Z = B({ 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: [] });
59
+ function v({
60
60
  className: t,
61
61
  title: s,
62
62
  description: l,
@@ -64,39 +64,39 @@ function _({
64
64
  complete: o = !1,
65
65
  disabled: n,
66
66
  barCompleted: p,
67
- progressColor: c,
68
- ...m
67
+ progressColor: i,
68
+ ...c
69
69
  }) {
70
- const B = V().current || void 0;
70
+ const P = D().current || void 0;
71
71
  return /* @__PURE__ */ e.createElement(
72
72
  "li",
73
73
  {
74
- id: B,
75
- className: S(
76
- X({
74
+ id: P,
75
+ className: C(
76
+ Q({
77
77
  stepCompleted: o,
78
78
  disabled: n,
79
79
  barCompleted: p,
80
- color: c
80
+ color: i
81
81
  }),
82
82
  t
83
83
  ),
84
- ...m
84
+ ...c
85
85
  },
86
86
  a && /* @__PURE__ */ e.createElement(
87
- k,
87
+ V,
88
88
  {
89
89
  icon: a,
90
90
  size: "sm",
91
- className: Q({
91
+ className: L({
92
92
  stepCompleted: o
93
93
  })
94
94
  }
95
95
  ),
96
- s && B && /* @__PURE__ */ e.createElement(A, { for: B, title: s }, l)
96
+ s && P && /* @__PURE__ */ e.createElement(I, { for: P, title: s }, l)
97
97
  );
98
98
  }
99
- C.set(_, {
99
+ _.set(v, {
100
100
  name: "ProgressBarStep",
101
101
  props: {
102
102
  icon: { type: "IconName" },
@@ -105,7 +105,7 @@ C.set(_, {
105
105
  description: { type: "string" }
106
106
  }
107
107
  });
108
- function O({
108
+ function q({
109
109
  className: t,
110
110
  children: s,
111
111
  detail: l,
@@ -113,81 +113,82 @@ function O({
113
113
  onClose: o,
114
114
  percentComplete: n = 0,
115
115
  title: p,
116
- showStepsCounter: c,
117
- progressColor: m = "purple",
118
- ...B
116
+ showStepsCounter: i,
117
+ progressColor: c = "purple",
118
+ ...P
119
119
  }) {
120
- const { t: b } = e.useContext(F), [h, x] = e.useState([]), [u] = R(s, [{ type: _ }]);
121
- let v = [];
120
+ const { t: b } = e.useContext(k), [h, O] = e.useState([]), [g] = F(s, [
121
+ { type: v }
122
+ ]);
122
123
  e.useEffect(() => {
123
- u.forEach((i) => {
124
- var w;
125
- (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);
124
+ let E = [];
125
+ g.forEach((S) => {
126
+ S.hasOwnProperty("props") && S.props.complete === !0 && E.push(S), O(E);
126
127
  });
127
- }, []), n && u && console.warn(
128
+ }, []), n && g && console.warn(
128
129
  [
129
130
  "The percentComplete prop can't be used with the ProgressBarStep subcomponent.",
130
131
  "The progress will be determined by how many nested ProgressBarStep components have the completed prop."
131
132
  ].join(" ")
132
133
  );
133
- const D = e.Children.map(s, (i) => e.isValidElement(i) ? e.cloneElement(i, {
134
+ const x = e.Children.map(s, (E) => e.isValidElement(E) ? e.cloneElement(E, {
134
135
  disabled: a,
135
- barCompleted: h.length === u.length,
136
- progressColor: m
137
- }) : i);
138
- 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(
136
+ barCompleted: h.length === g.length,
137
+ progressColor: c
138
+ }) : E);
139
+ return /* @__PURE__ */ e.createElement("div", { className: C(H, t), ...P }, /* @__PURE__ */ e.createElement("div", { className: U }, p && /* @__PURE__ */ e.createElement("div", { className: Y }, /* @__PURE__ */ e.createElement("div", { className: J }, p), g.length > 0 ? /* @__PURE__ */ e.createElement(e.Fragment, null, i === !0 && /* @__PURE__ */ e.createElement(
139
140
  "div",
140
141
  {
141
- className: ee({
142
- barCompleted: h.length === u.length,
142
+ className: Z({
143
+ barCompleted: h.length === g.length,
143
144
  disabled: a,
144
- color: m
145
+ color: c
145
146
  })
146
147
  },
147
- `${h.length} of ${u.length} Complete`
148
+ `${h.length} of ${g.length} Complete`
148
149
  )) : /* @__PURE__ */ e.createElement(
149
150
  "div",
150
151
  {
151
- className: z({
152
+ className: K({
152
153
  completed: n === 1,
153
154
  disabled: a,
154
- color: m
155
+ color: c
155
156
  })
156
157
  },
157
158
  `${Math.floor(n * 100)}%`
158
- )), u.length > 0 ? /* @__PURE__ */ e.createElement(
159
+ )), g.length > 0 ? /* @__PURE__ */ e.createElement(
159
160
  "ul",
160
161
  {
161
- className: S(
162
- Z({
163
- barCompleted: h.length === u.length,
162
+ className: C(
163
+ X({
164
+ barCompleted: h.length === g.length,
164
165
  disabled: a,
165
- color: m
166
+ color: c
166
167
  }),
167
168
  "d-flex align-items-center list-unstyled mb-0"
168
169
  )
169
170
  },
170
- D
171
+ x
171
172
  ) : /* @__PURE__ */ e.createElement(
172
173
  "div",
173
174
  {
174
- className: G({
175
+ className: $({
175
176
  disabled: a
176
177
  })
177
178
  },
178
179
  /* @__PURE__ */ e.createElement(
179
180
  "div",
180
181
  {
181
- className: J({
182
+ className: z({
182
183
  completed: n === 1,
183
184
  disabled: a,
184
- color: m
185
+ color: c
185
186
  }),
186
187
  style: { width: `${n * 100}%` }
187
188
  }
188
189
  )
189
- ), l && /* @__PURE__ */ e.createElement("div", { className: Y }, l)), o && n !== 1 && /* @__PURE__ */ e.createElement("div", { className: U }, /* @__PURE__ */ e.createElement(
190
- I,
190
+ ), l && /* @__PURE__ */ e.createElement("div", { className: W }, l)), o && n !== 1 && /* @__PURE__ */ e.createElement("div", { className: G }, /* @__PURE__ */ e.createElement(
191
+ R,
191
192
  {
192
193
  kind: "icon",
193
194
  icon: "x",
@@ -196,7 +197,7 @@ function O({
196
197
  }
197
198
  )));
198
199
  }
199
- C.set(O, {
200
+ _.set(q, {
200
201
  name: "Progress Bar",
201
202
  props: {
202
203
  detail: { type: "string" },
@@ -206,57 +207,57 @@ C.set(O, {
206
207
  progressColor: { type: '"purple" | "blue" | "red" | "orange" | "grey"', default: '"purple"' }
207
208
  }
208
209
  });
209
- function re({
210
+ function ee({
210
211
  className: t,
211
212
  size: s = "sm",
212
213
  progress: l = 0,
213
214
  ...a
214
215
  }) {
215
- const n = g.component["progress-ring"][s] - 4, p = n * 2 * Math.PI, c = p - l / 100 * p;
216
+ const n = d.component["progress-ring"][s] - 4, p = n * 2 * Math.PI, i = p - l / 100 * p;
216
217
  return /* @__PURE__ */ e.createElement("div", { className: t, ...a }, /* @__PURE__ */ e.createElement(
217
218
  "svg",
218
219
  {
219
- height: g.component["progress-ring"][s] * 2,
220
- width: g.component["progress-ring"][s] * 2,
220
+ height: d.component["progress-ring"][s] * 2,
221
+ width: d.component["progress-ring"][s] * 2,
221
222
  style: { transform: "rotate(-90deg)" }
222
223
  },
223
224
  /* @__PURE__ */ e.createElement(
224
225
  "circle",
225
226
  {
226
- stroke: g.color.grey["medium-light"],
227
+ stroke: d.color.grey["medium-light"],
227
228
  fill: "transparent",
228
229
  strokeWidth: 4,
229
230
  strokeDasharray: `${p} ${p}`,
230
231
  r: n,
231
- cx: g.component["progress-ring"][s],
232
- cy: g.component["progress-ring"][s]
232
+ cx: d.component["progress-ring"][s],
233
+ cy: d.component["progress-ring"][s]
233
234
  }
234
235
  ),
235
236
  /* @__PURE__ */ e.createElement(
236
237
  "circle",
237
238
  {
238
- stroke: g.color.purple.medium,
239
+ stroke: d.color.purple.medium,
239
240
  fill: "transparent",
240
241
  strokeWidth: 4,
241
242
  strokeDasharray: `${p} ${p}`,
242
- style: { strokeDashoffset: c },
243
+ style: { strokeDashoffset: i },
243
244
  r: n,
244
- cx: g.component["progress-ring"][s],
245
- cy: g.component["progress-ring"][s]
245
+ cx: d.component["progress-ring"][s],
246
+ cy: d.component["progress-ring"][s]
246
247
  }
247
248
  )
248
249
  ));
249
250
  }
250
- C.set(re, {
251
+ _.set(ee, {
251
252
  name: "Progress Ring",
252
253
  props: {
253
254
  size: { type: '"sm" | "md" | "lg"', default: '"sm"' },
254
255
  progress: { type: "number", default: "0" }
255
256
  }
256
257
  });
257
- const te = {
258
+ const re = {
258
259
  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."),
259
- components: [O, _],
260
+ components: [q, v],
260
261
  examples: {
261
262
  general: {
262
263
  label: "General Usage",
@@ -271,11 +272,11 @@ const te = {
271
272
  alt: "A Progress Bar with labels on each section",
272
273
  className: "w-100 mb-3"
273
274
  }
274
- ), /* @__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."))))),
275
+ ), /* @__PURE__ */ e.createElement(w, null, /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(u, null, "Section"), /* @__PURE__ */ e.createElement(u, null, "Content Type"), /* @__PURE__ */ e.createElement(u, null, "Required"), /* @__PURE__ */ e.createElement(u, null, "Description/Guidelines")), /* @__PURE__ */ e.createElement(N, null, /* @__PURE__ */ e.createElement(m, 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(m, 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(m, 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(m, 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(m, 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."))))),
275
276
  examples: {
276
277
  standard: {
277
278
  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."),
278
- react: P`
279
+ react: f`
279
280
  import { ProgressBar } from "@sps-woodland/progress-indicators";
280
281
  import { Card } from "@sps-woodland/cards";
281
282
 
@@ -299,7 +300,7 @@ const te = {
299
300
  },
300
301
  completed: {
301
302
  description: () => /* @__PURE__ */ e.createElement("p", null, "Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),
302
- react: P`
303
+ react: f`
303
304
  import { ProgressBar } from "@sps-woodland/progress-indicators";
304
305
  import { Card } from "@sps-woodland/cards";
305
306
 
@@ -318,7 +319,7 @@ const te = {
318
319
  },
319
320
  disabled: {
320
321
  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."),
321
- react: P`
322
+ react: f`
322
323
  import { ProgressBar } from "@sps-woodland/progress-indicators";
323
324
  import { Card } from "@sps-woodland/cards";
324
325
 
@@ -352,11 +353,11 @@ const te = {
352
353
  alt: "A Progress Bar with labels on each section",
353
354
  className: "w-100 mb-3"
354
355
  }
355
- ), /* @__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."))))),
356
+ ), /* @__PURE__ */ e.createElement(w, null, /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(u, null, "Section"), /* @__PURE__ */ e.createElement(u, null, "Content Type"), /* @__PURE__ */ e.createElement(u, null, "Required"), /* @__PURE__ */ e.createElement(u, null, "Description/Guidelines")), /* @__PURE__ */ e.createElement(N, null, /* @__PURE__ */ e.createElement(m, 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(m, 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(m, 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(m, 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(m, 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."))))),
356
357
  examples: {
357
358
  standard: {
358
359
  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.")),
359
- react: P`
360
+ react: f`
360
361
  import { Card } from "@sps-woodland/cards";
361
362
  import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
362
363
 
@@ -402,7 +403,7 @@ const te = {
402
403
  },
403
404
  color: {
404
405
  description: () => /* @__PURE__ */ e.createElement("h4", null, "Alternate Color"),
405
- react: P`
406
+ react: f`
406
407
  import { Card } from "@sps-woodland/cards";
407
408
  import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
408
409
 
@@ -445,7 +446,7 @@ const te = {
445
446
  },
446
447
  skippedSteps: {
447
448
  description: () => /* @__PURE__ */ e.createElement("h4", null, "Skip steps"),
448
- react: P`
449
+ react: f`
449
450
  import { Card } from "@sps-woodland/cards";
450
451
  import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
451
452
 
@@ -476,7 +477,7 @@ const te = {
476
477
  },
477
478
  completed: {
478
479
  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.")),
479
- react: P`
480
+ react: f`
480
481
  import { Card } from "@sps-woodland/cards";
481
482
  import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
482
483
 
@@ -521,7 +522,7 @@ const te = {
521
522
  },
522
523
  disabled: {
523
524
  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.")),
524
- react: P`
525
+ react: f`
525
526
  import { Card } from "@sps-woodland/cards";
526
527
  import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
527
528
 
@@ -552,12 +553,12 @@ const te = {
552
553
  }
553
554
  }
554
555
  }
555
- }, pe = {
556
- "Progress Bar": te
556
+ }, ne = {
557
+ "Progress Bar": re
557
558
  };
558
559
  export {
559
- pe as MANIFEST,
560
- O as ProgressBar,
561
- _ as ProgressBarStep,
562
- re as ProgressRing
560
+ ne as MANIFEST,
561
+ q as ProgressBar,
562
+ v as ProgressBarStep,
563
+ ee as ProgressRing
563
564
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sps-woodland/progress-indicators",
3
3
  "description": "SPS Woodland Design System progress indicator components",
4
- "version": "8.4.6",
4
+ "version": "8.4.8",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/progress-indicators",
@@ -29,10 +29,10 @@
29
29
  "@spscommerce/utils": "^6.12.1",
30
30
  "react": "^16.9.0",
31
31
  "react-dom": "^16.9.0",
32
- "@sps-woodland/core": "8.4.6",
33
- "@sps-woodland/tokens": "8.4.6",
34
- "@sps-woodland/buttons": "8.4.6",
35
- "@spscommerce/ds-react": "8.4.6"
32
+ "@sps-woodland/core": "8.4.8",
33
+ "@sps-woodland/tokens": "8.4.8",
34
+ "@sps-woodland/buttons": "8.4.8",
35
+ "@spscommerce/ds-react": "8.4.8"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@spscommerce/utils": "^6.12.1",
@@ -40,10 +40,10 @@
40
40
  "@vanilla-extract/recipes": "^0.2.5",
41
41
  "react": "^16.9.0",
42
42
  "react-dom": "^16.9.0",
43
- "@sps-woodland/core": "8.4.6",
44
- "@sps-woodland/tokens": "8.4.6",
45
- "@sps-woodland/buttons": "8.4.6",
46
- "@spscommerce/ds-react": "8.4.6"
43
+ "@sps-woodland/core": "8.4.8",
44
+ "@sps-woodland/tokens": "8.4.8",
45
+ "@sps-woodland/buttons": "8.4.8",
46
+ "@spscommerce/ds-react": "8.4.8"
47
47
  },
48
48
  "scripts": {
49
49
  "build": "pnpm run build:js && pnpm run build:types",