@sps-woodland/progress-indicators 8.7.4 → 8.7.6

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"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`
+"use strict";Object.defineProperty(exports,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"),u=require("@spscommerce/utils");function q(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 w(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=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 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",$=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 P({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(P,{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),[C,_]=e.useState([]),[g]=m.selectChildren(s,[{type:P}]);e.useEffect(()=>{let S=[];g.forEach(E=>{E.hasOwnProperty("props")&&E.props.complete===!0&&S.push(E),_(S)})},[]),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 y=e.Children.map(s,S=>e.isValidElement(S)?e.cloneElement(S,{disabled:l,barCompleted:C.length===g.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),g.length>0?e.createElement(e.Fragment,null,c===!0&&e.createElement("div",{className:W({barCompleted:C.length===g.length,disabled:l,color:i})},`${C.length} of ${g.length} Complete`)):e.createElement("div",{className:M({completed:n===1,disabled:l,color:i})},`${Math.floor(n*100)}%`)),g.length>0?e.createElement("ul",{className:m.cl(U({barCompleted:C.length===g.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 v({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(v,{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,P],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:u.code`
             import { ProgressBar } from "@sps-woodland/progress-indicators";
             import { Card } from "@sps-woodland/cards";
 
@@ -18,7 +18,7 @@
                 </Card>
               )
             }
-          `},completed:{description:()=>e.createElement("p",null,"Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),react:g.code`
+          `},completed:{description:()=>e.createElement("p",null,"Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),react:u.code`
             import { ProgressBar } from "@sps-woodland/progress-indicators";
             import { Card } from "@sps-woodland/cards";
 
@@ -33,7 +33,7 @@
                 </Card>
               )
             }
-          `},disabled:{description:()=>e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted."),react:g.code`
+          `},disabled:{description:()=>e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted."),react:u.code`
             import { ProgressBar } from "@sps-woodland/progress-indicators";
             import { Card } from "@sps-woodland/cards";
 
@@ -54,7 +54,7 @@
                 </Card>
               )
             }
-          `}}},stepped:{label:"Stepped Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Stepped Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/stepped-progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Content Type"),e.createElement(r.SpsTableHeader,null,"Required"),e.createElement(r.SpsTableHeader,null,"Description/Guidelines")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Title"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Progress Meter"),e.createElement(r.SpsTableCell,null,"Yes"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Progress Counter"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Step icons"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Icons can be set inside of steps for visual emphasis.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Step Tooltips"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover."))))),examples:{standard:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Building Stepped Progress Bars"),e.createElement("p",null,"The Stepped Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements.")),react:g.code`
+          `}}},stepped:{label:"Stepped Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Stepped Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/stepped-progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Content Type"),e.createElement(r.SpsTableHeader,null,"Required"),e.createElement(r.SpsTableHeader,null,"Description/Guidelines")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Title"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Progress Meter"),e.createElement(r.SpsTableCell,null,"Yes"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Progress Counter"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Step icons"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Icons can be set inside of steps for visual emphasis.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Step Tooltips"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover."))))),examples:{standard:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Building Stepped Progress Bars"),e.createElement("p",null,"The Stepped Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements.")),react:u.code`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
           
@@ -96,7 +96,7 @@
                 </Card>
               )
             }
-          `},color:{description:()=>e.createElement("h4",null,"Alternate Color"),react:g.code`
+          `},color:{description:()=>e.createElement("h4",null,"Alternate Color"),react:u.code`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -135,7 +135,7 @@
                 </Card>
               )
             }
-          `},skippedSteps:{description:()=>e.createElement("h4",null,"Skip steps"),react:g.code`
+          `},skippedSteps:{description:()=>e.createElement("h4",null,"Skip steps"),react:u.code`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -162,7 +162,7 @@
                 </Card>
               )
             }
-          `},completed:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Completed State"),e.createElement("p",null,"Once complete, the progress bar appears in green.")),react:g.code`
+          `},completed:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Completed State"),e.createElement("p",null,"Once complete, the progress bar appears in green.")),react:u.code`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -203,7 +203,7 @@
                 </Card>
               )
             }
-          `},disabled:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Disabled State"),e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted.")),react:g.code`
+          `},disabled:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Disabled State"),e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted.")),react:u.code`
             import { Card } from "@sps-woodland/cards";
             import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
 
@@ -229,4 +229,4 @@
                 </Card>
               )
             }
-          `}}}}},z={"Progress Bar":Y};exports.MANIFEST=z;exports.ProgressBar=h;exports.ProgressBarStep=C;exports.ProgressRing=w;
+          `}}}}},z={"Progress Bar":Y};exports.MANIFEST=z;exports.ProgressBar=h;exports.ProgressBarStep=P;exports.ProgressRing=v;

package/lib/index.es.js

@@ -1,5 +1,5 @@
 import * as e from "react";
-import { Metadata as _, useElementId as D, cl as C, Icon as V, I18nContext as k, selectChildren as F } from "@sps-woodland/core";
+import { Metadata as v, useElementId as D, cl as C, Icon as V, I18nContext as k, selectChildren as F } from "@sps-woodland/core";
 import { Button as R } from "@sps-woodland/buttons";
 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";
 import { Tokens as d } from "@sps-woodland/tokens";
@@ -47,16 +47,18 @@ var M = (t, s, l) => {
     if (p != null) {
       var i = p;
       typeof i == "boolean" && (i = i === !0 ? "true" : "false");
-      var c = t.variantClassNames[o][i];
+      var c = (
+        // @ts-expect-error
+        t.variantClassNames[o][i]
+      );
       c && (l += " " + c);
     }
   }
   for (var [P, b] of t.compoundVariants)
     M(P, a, t.defaultVariants) && (l += " " + b);
   return l;
-}, 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";
-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: [] });
-function v({
+}, 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", 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: [] });
+function _({
   className: t,
   title: s,
   description: l,
@@ -96,7 +98,7 @@ function v({
     s && P && /* @__PURE__ */ e.createElement(I, { for: P, title: s }, l)
   );
 }
-_.set(v, {
+v.set(_, {
   name: "ProgressBarStep",
   props: {
     icon: { type: "IconName" },
@@ -118,7 +120,7 @@ function q({
   ...P
 }) {
   const { t: b } = e.useContext(k), [h, O] = e.useState([]), [g] = F(s, [
-    { type: v }
+    { type: _ }
   ]);
   e.useEffect(() => {
     let E = [];
@@ -197,7 +199,7 @@ function q({
     }
   )));
 }
-_.set(q, {
+v.set(q, {
   name: "Progress Bar",
   props: {
     detail: { type: "string" },
@@ -248,7 +250,7 @@ function ee({
     )
   ));
 }
-_.set(ee, {
+v.set(ee, {
   name: "Progress Ring",
   props: {
     size: { type: '"sm" | "md" | "lg"', default: '"sm"' },
@@ -257,7 +259,7 @@ _.set(ee, {
 });
 const re = {
   description: () => /* @__PURE__ */ e.createElement("p", null, "Progress Bars are used to visualize the progression of a process (such as a file upload) or series of related tasks that take place over a longer period of time. Progress Bars can be accompanied by a variety of additional content to provide more context regarding the processes being performed."),
-  components: [q, v],
+  components: [q, _],
   examples: {
     general: {
       label: "General Usage",
@@ -559,6 +561,6 @@ const re = {
 export {
   ne as MANIFEST,
   q as ProgressBar,
-  v as ProgressBarStep,
+  _ as ProgressBarStep,
   ee as ProgressRing
 };

package/lib/style.css

@@ -1 +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:oklch(26.99% .015 226.65);flex-grow:1}._1890qme5{color:oklch(50.83% .125 337.21);font-weight:600;font-size:.875rem;line-height:1.25rem}._1890qme6{color:oklch(55.21% .148 150.27)!important}._1890qme8{color:oklch(86.84% .002 197.12)!important}._1890qmea{color:oklch(50.83% .125 337.21)}._1890qmeb{color:oklch(56.21% .128 239.83)}._1890qmec{color:oklch(56.83% .229 22.94)}._1890qmed{color:oklch(68.35% .17 53.59)}._1890qmee{color:oklch(56.48% .008 219.62)}._1890qmef{background:oklch(93.43% .001 286.37);border-radius:.5rem;height:1rem;width:100%;overflow:hidden}._1890qmeg{cursor:not-allowed}._1890qmei{background-color:oklch(50.83% .125 337.21);border-radius:.5rem;height:1rem}._1890qmej{background-color:oklch(55.21% .148 150.27)!important}._1890qmel{background-color:oklch(86.84% .002 197.12)!important}._1890qmen{background:oklch(50.83% .125 337.21)}._1890qmen:hover{background:oklch(43.29% .091 334)}._1890qmeo{background:oklch(56.21% .128 239.83)}._1890qmeo:hover{background:oklch(47.39% .101 237.12)}._1890qmep{background:oklch(56.83% .229 22.94)}._1890qmep:hover{background:oklch(45.78% .177 19.02)}._1890qmeq{background:oklch(68.35% .17 53.59)}._1890qmeq:hover{background:oklch(55.93% .127 57.69)}._1890qmer{background:oklch(56.48% .008 219.62)}._1890qmer:hover{background:oklch(26.99% .015 226.65)}._1890qmes{background-color:oklch(86.84% .002 197.12)}._1890qmet{color:oklch(43.62% .011 222.24);font-size:.75rem;line-height:1.125rem;margin-top:1rem}._17lj0go0{font-weight:600}._17lj0go1{color:oklch(55.21% .148 150.27)!important}._17lj0go3{color:oklch(86.84% .002 197.12)!important}._17lj0go5{color:oklch(50.83% .125 337.21)}._17lj0go6{color:oklch(56.21% .128 239.83)}._17lj0go7{color:oklch(56.83% .229 22.94)}._17lj0go8{color:oklch(68.35% .17 53.59)}._17lj0go9{color:oklch(56.48% .008 219.62)}._17lj0goh{cursor:not-allowed}._17lj0goj{display:block}._17lj0gok{color:oklch(100% 0 0)}._17lj0gol{color:oklch(56.48% .008 219.62)}._17lj0gom{background:oklch(93.43% .001 286.37);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}._17lj0gom:only-child{border-radius:.5rem}._17lj0goy{background:oklch(86.84% .002 197.12)}._17lj0goz{background:oklch(55.21% .148 150.27)}._17lj0go10{background:oklch(86.84% .002 197.12);cursor:not-allowed}._17lj0go11{background:oklch(50.83% .125 337.21)}._17lj0go11:hover{background:oklch(43.29% .091 334)}._17lj0go12{background:oklch(56.83% .229 22.94)}._17lj0go12:hover{background:oklch(45.78% .177 19.02)}._17lj0go13{background:oklch(56.21% .128 239.83)}._17lj0go13:hover{background:oklch(47.39% .101 237.12)}._17lj0go14{background:oklch(68.35% .17 53.59)}._17lj0go14:hover{background:oklch(55.93% .127 57.69)}._17lj0go15{background:oklch(56.48% .008 219.62)}._17lj0go15:hover{background:oklch(26.99% .015 226.65)}
+._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!important}._1890qme8{color:#d2d4d4!important}._1890qmea{color:#91467f}._1890qmeb{color:#027db8}._1890qmec{color:#de012e}._1890qmed{color:#e77609}._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:#027db8}._1890qmeo:hover{background:#08638d}._1890qmep{background:#de012e}._1890qmep:hover{background:#a30d2d}._1890qmeq{background:#e77609}._1890qmeq:hover{background:#aa5e13}._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:#027db8}._17lj0go7{color:#de012e}._17lj0go8{color:#e77609}._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}._17lj0gom:only-child{border-radius:.5rem}._17lj0goy{background:#d2d4d4}._17lj0goz{background:#0b8940}._17lj0go10{background:#d2d4d4;cursor:not-allowed}._17lj0go11{background:#91467f}._17lj0go11:hover{background:#6e3c65}._17lj0go12{background:#de012e}._17lj0go12:hover{background:#a30d2d}._17lj0go13{background:#027db8}._17lj0go13:hover{background:#08638d}._17lj0go14{background:#e77609}._17lj0go14:hover{background:#aa5e13}._17lj0go15{background:#717779}._17lj0go15:hover{background:#1f282c}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/progress-indicators",
   "description": "SPS Woodland Design System progress indicator components",
-  "version": "8.7.4",
+  "version": "8.7.6",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/progress-indicators",
@@ -29,10 +29,10 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.7.4",
-    "@sps-woodland/tokens": "8.7.4",
-    "@sps-woodland/buttons": "8.7.4",
-    "@spscommerce/ds-react": "8.7.4"
+    "@sps-woodland/core": "8.7.6",
+    "@sps-woodland/tokens": "8.7.6",
+    "@sps-woodland/buttons": "8.7.6",
+    "@spscommerce/ds-react": "8.7.6"
   },
   "devDependencies": {
     "@spscommerce/utils": "^6.12.1",
@@ -40,10 +40,10 @@
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/core": "8.7.4",
-    "@sps-woodland/tokens": "8.7.4",
-    "@sps-woodland/buttons": "8.7.4",
-    "@spscommerce/ds-react": "8.7.4"
+    "@sps-woodland/core": "8.7.6",
+    "@sps-woodland/tokens": "8.7.6",
+    "@sps-woodland/buttons": "8.7.6",
+    "@spscommerce/ds-react": "8.7.6"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",