@sps-woodland/progress-indicators 8.2.2 → 8.3.1

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.es.js +131 -139
  2. package/lib/style.css +1 -1
  3. package/package.json +9 -9
package/lib/index.es.js CHANGED
@@ -68,28 +68,33 @@ function _({
68
68
  ...m
69
69
  }) {
70
70
  const B = V().current || void 0;
71
- return /* @__PURE__ */ e.createElement("li", {
72
- id: B,
73
- className: S(
74
- X({
75
- stepCompleted: o,
76
- disabled: n,
77
- barCompleted: p,
78
- color: c
79
- }),
80
- t
71
+ return /* @__PURE__ */ e.createElement(
72
+ "li",
73
+ {
74
+ id: B,
75
+ className: S(
76
+ X({
77
+ stepCompleted: o,
78
+ disabled: n,
79
+ barCompleted: p,
80
+ color: c
81
+ }),
82
+ t
83
+ ),
84
+ ...m
85
+ },
86
+ a && /* @__PURE__ */ e.createElement(
87
+ k,
88
+ {
89
+ icon: a,
90
+ size: "sm",
91
+ className: Q({
92
+ stepCompleted: o
93
+ })
94
+ }
81
95
  ),
82
- ...m
83
- }, a && /* @__PURE__ */ e.createElement(k, {
84
- icon: a,
85
- size: "sm",
86
- className: Q({
87
- stepCompleted: o
88
- })
89
- }), s && B && /* @__PURE__ */ e.createElement(A, {
90
- for: B,
91
- title: s
92
- }, l));
96
+ s && B && /* @__PURE__ */ e.createElement(A, { for: B, title: s }, l)
97
+ );
93
98
  }
94
99
  C.set(_, {
95
100
  name: "ProgressBarStep",
@@ -130,57 +135,66 @@ function O({
130
135
  barCompleted: h.length === u.length,
131
136
  progressColor: m
132
137
  }) : i);
133
- return /* @__PURE__ */ e.createElement("div", {
134
- className: S($, t),
135
- ...B
136
- }, /* @__PURE__ */ e.createElement("div", {
137
- className: W
138
- }, p && /* @__PURE__ */ e.createElement("div", {
139
- className: K
140
- }, /* @__PURE__ */ e.createElement("div", {
141
- className: L
142
- }, p), u.length > 0 ? /* @__PURE__ */ e.createElement(e.Fragment, null, c === !0 && /* @__PURE__ */ e.createElement("div", {
143
- className: ee({
144
- barCompleted: h.length === u.length,
145
- disabled: a,
146
- color: m
147
- })
148
- }, `${h.length} of ${u.length} Complete`)) : /* @__PURE__ */ e.createElement("div", {
149
- className: z({
150
- completed: n === 1,
151
- disabled: a,
152
- color: m
153
- })
154
- }, `${Math.floor(n * 100)}%`)), u.length > 0 ? /* @__PURE__ */ e.createElement("ul", {
155
- className: S(
156
- Z({
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(
139
+ "div",
140
+ {
141
+ className: ee({
157
142
  barCompleted: h.length === u.length,
158
143
  disabled: a,
159
144
  color: m
160
- }),
161
- "d-flex align-items-center list-unstyled mb-0"
145
+ })
146
+ },
147
+ `${h.length} of ${u.length} Complete`
148
+ )) : /* @__PURE__ */ e.createElement(
149
+ "div",
150
+ {
151
+ className: z({
152
+ completed: n === 1,
153
+ disabled: a,
154
+ color: m
155
+ })
156
+ },
157
+ `${Math.floor(n * 100)}%`
158
+ )), u.length > 0 ? /* @__PURE__ */ e.createElement(
159
+ "ul",
160
+ {
161
+ className: S(
162
+ Z({
163
+ barCompleted: h.length === u.length,
164
+ disabled: a,
165
+ color: m
166
+ }),
167
+ "d-flex align-items-center list-unstyled mb-0"
168
+ )
169
+ },
170
+ D
171
+ ) : /* @__PURE__ */ e.createElement(
172
+ "div",
173
+ {
174
+ className: G({
175
+ disabled: a
176
+ })
177
+ },
178
+ /* @__PURE__ */ e.createElement(
179
+ "div",
180
+ {
181
+ className: J({
182
+ completed: n === 1,
183
+ disabled: a,
184
+ color: m
185
+ }),
186
+ style: { width: `${n * 100}%` }
187
+ }
162
188
  )
163
- }, D) : /* @__PURE__ */ e.createElement("div", {
164
- className: G({
165
- disabled: a
166
- })
167
- }, /* @__PURE__ */ e.createElement("div", {
168
- className: J({
169
- completed: n === 1,
170
- disabled: a,
171
- color: m
172
- }),
173
- style: { width: `${n * 100}%` }
174
- })), l && /* @__PURE__ */ e.createElement("div", {
175
- className: Y
176
- }, l)), o && n !== 1 && /* @__PURE__ */ e.createElement("div", {
177
- className: U
178
- }, /* @__PURE__ */ e.createElement(I, {
179
- kind: "icon",
180
- icon: "x",
181
- onClick: o,
182
- title: b("design-system:progressBar.closeButtonTitle")
183
- })));
189
+ ), l && /* @__PURE__ */ e.createElement("div", { className: Y }, l)), o && n !== 1 && /* @__PURE__ */ e.createElement("div", { className: U }, /* @__PURE__ */ e.createElement(
190
+ I,
191
+ {
192
+ kind: "icon",
193
+ icon: "x",
194
+ onClick: o,
195
+ title: b("design-system:progressBar.closeButtonTitle")
196
+ }
197
+ )));
184
198
  }
185
199
  C.set(O, {
186
200
  name: "Progress Bar",
@@ -199,31 +213,39 @@ function re({
199
213
  ...a
200
214
  }) {
201
215
  const n = g.component["progress-ring"][s] - 4, p = n * 2 * Math.PI, c = p - l / 100 * p;
202
- return /* @__PURE__ */ e.createElement("div", {
203
- className: t,
204
- ...a
205
- }, /* @__PURE__ */ e.createElement("svg", {
206
- height: g.component["progress-ring"][s] * 2,
207
- width: g.component["progress-ring"][s] * 2,
208
- style: { transform: "rotate(-90deg)" }
209
- }, /* @__PURE__ */ e.createElement("circle", {
210
- stroke: g.color.grey["medium-light"],
211
- fill: "transparent",
212
- strokeWidth: 4,
213
- strokeDasharray: `${p} ${p}`,
214
- r: n,
215
- cx: g.component["progress-ring"][s],
216
- cy: g.component["progress-ring"][s]
217
- }), /* @__PURE__ */ e.createElement("circle", {
218
- stroke: g.color.purple.medium,
219
- fill: "transparent",
220
- strokeWidth: 4,
221
- strokeDasharray: `${p} ${p}`,
222
- style: { strokeDashoffset: c },
223
- r: n,
224
- cx: g.component["progress-ring"][s],
225
- cy: g.component["progress-ring"][s]
226
- })));
216
+ return /* @__PURE__ */ e.createElement("div", { className: t, ...a }, /* @__PURE__ */ e.createElement(
217
+ "svg",
218
+ {
219
+ height: g.component["progress-ring"][s] * 2,
220
+ width: g.component["progress-ring"][s] * 2,
221
+ style: { transform: "rotate(-90deg)" }
222
+ },
223
+ /* @__PURE__ */ e.createElement(
224
+ "circle",
225
+ {
226
+ stroke: g.color.grey["medium-light"],
227
+ fill: "transparent",
228
+ strokeWidth: 4,
229
+ strokeDasharray: `${p} ${p}`,
230
+ r: n,
231
+ cx: g.component["progress-ring"][s],
232
+ cy: g.component["progress-ring"][s]
233
+ }
234
+ ),
235
+ /* @__PURE__ */ e.createElement(
236
+ "circle",
237
+ {
238
+ stroke: g.color.purple.medium,
239
+ fill: "transparent",
240
+ strokeWidth: 4,
241
+ strokeDasharray: `${p} ${p}`,
242
+ style: { strokeDashoffset: c },
243
+ r: n,
244
+ cx: g.component["progress-ring"][s],
245
+ cy: g.component["progress-ring"][s]
246
+ }
247
+ )
248
+ ));
227
249
  }
228
250
  C.set(re, {
229
251
  name: "Progress Ring",
@@ -242,29 +264,14 @@ const te = {
242
264
  },
243
265
  standard: {
244
266
  label: "Standard Progress Bar",
245
- description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Standard Progress Bars are comprised of the following Required and Optional elements."), /* @__PURE__ */ e.createElement("img", {
246
- src: "assets/images/progress-bar-example.svg",
247
- alt: "A Progress Bar with labels on each section",
248
- className: "w-100 mb-3"
249
- }), /* @__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", {
250
- className: "sps-tag sps-tag--info"
251
- }, "1")), /* @__PURE__ */ e.createElement(r, null, "Title"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, {
252
- wrap: 400
253
- }, "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", {
254
- className: "sps-tag sps-tag--info"
255
- }, "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", {
256
- className: "sps-tag sps-tag--info"
257
- }, "3")), /* @__PURE__ */ e.createElement(r, null, "Progress Counter"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, {
258
- wrap: 400
259
- }, "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", {
260
- className: "sps-tag sps-tag--info"
261
- }, "4")), /* @__PURE__ */ e.createElement(r, null, "Clear Button"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, {
262
- wrap: 400
263
- }, "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", {
264
- className: "sps-tag sps-tag--info"
265
- }, "5")), /* @__PURE__ */ e.createElement(r, null, "Progress Details"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, {
266
- wrap: 400
267
- }, "Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),
267
+ description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Standard Progress Bars are comprised of the following Required and Optional elements."), /* @__PURE__ */ e.createElement(
268
+ "img",
269
+ {
270
+ src: "assets/images/progress-bar-example.svg",
271
+ alt: "A Progress Bar with labels on each section",
272
+ className: "w-100 mb-3"
273
+ }
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."))))),
268
275
  examples: {
269
276
  standard: {
270
277
  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."),
@@ -338,29 +345,14 @@ const te = {
338
345
  },
339
346
  stepped: {
340
347
  label: "Stepped Progress Bar",
341
- description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Stepped Progress Bars are comprised of the following Required and Optional elements."), /* @__PURE__ */ e.createElement("img", {
342
- src: "assets/images/stepped-progress-bar-example.svg",
343
- alt: "A Progress Bar with labels on each section",
344
- className: "w-100 mb-3"
345
- }), /* @__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", {
346
- className: "sps-tag sps-tag--info"
347
- }, "1")), /* @__PURE__ */ e.createElement(r, null, "Title"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, {
348
- wrap: 400
349
- }, "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", {
350
- className: "sps-tag sps-tag--info"
351
- }, "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", {
352
- className: "sps-tag sps-tag--info"
353
- }, "3")), /* @__PURE__ */ e.createElement(r, null, "Progress Counter"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, {
354
- wrap: 400
355
- }, "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", {
356
- className: "sps-tag sps-tag--info"
357
- }, "4")), /* @__PURE__ */ e.createElement(r, null, "Step icons"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, {
358
- wrap: 400
359
- }, "Icons can be set inside of steps for visual emphasis.")), /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(r, null, /* @__PURE__ */ e.createElement("span", {
360
- className: "sps-tag sps-tag--info"
361
- }, "5")), /* @__PURE__ */ e.createElement(r, null, "Step Tooltips"), /* @__PURE__ */ e.createElement(r, null, "No"), /* @__PURE__ */ e.createElement(r, {
362
- wrap: 400
363
- }, "Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover."))))),
348
+ description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", null, "Stepped Progress Bars are comprised of the following Required and Optional elements."), /* @__PURE__ */ e.createElement(
349
+ "img",
350
+ {
351
+ src: "assets/images/stepped-progress-bar-example.svg",
352
+ alt: "A Progress Bar with labels on each section",
353
+ className: "w-100 mb-3"
354
+ }
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."))))),
364
356
  examples: {
365
357
  standard: {
366
358
  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.")),
package/lib/style.css CHANGED
@@ -1 +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:#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:#007db8}._1890qmec{color:#de002e}._1890qmed{color:#e7760b}._1890qmee{color:#717779}._1890qmef{background:#e9e9ea;border-radius:.5rem;height:1rem;width:100%;overflow:hidden}._1890qmeg{cursor:not-allowed}._1890qmei{background-color:#91467f;border-radius:.5rem;height:1rem}._1890qmej{background-color:#0b8940!important}._1890qmel{background-color:#d2d4d4!important}._1890qmen{background:#91467f}._1890qmen:hover{background:#6e3c65}._1890qmeo{background:#007db8}._1890qmeo:hover{background:#09638d}._1890qmep{background:#de002e}._1890qmep:hover{background:#a30d2d}._1890qmeq{background:#e7760b}._1890qmeq:hover{background:#aa5e14}._1890qmer{background:#717779}._1890qmer:hover{background:#1f282c}._1890qmes{background-color:#d2d4d4}._1890qmet{color:#4b5356;font-size:.75rem;line-height:1.125rem;margin-top:1rem}._17lj0go0{font-weight:600}._17lj0go1{color:#0b8940!important}._17lj0go3{color:#d2d4d4!important}._17lj0go5{color:#91467f}._17lj0go6{color:#007db8}._17lj0go7{color:#de002e}._17lj0go8{color:#e7760b}._17lj0go9{color:#717779}._17lj0goh{cursor:not-allowed}._17lj0goj{display:block}._17lj0gok{color:#fff}._17lj0gol{color:#717779}._17lj0gom{background:#e9e9ea;border-radius:.125rem;margin-left:.125rem;height:1rem;display:flex;flex:1 1 8%;align-items:center;justify-content:center}._17lj0gom:last-child{border-radius:.125rem .5rem .5rem .125rem}._17lj0gom:first-child{border-radius:.5rem .125rem .125rem .5rem;margin-left:0}._17lj0goy{background:#d2d4d4}._17lj0goz{background:#0b8940}._17lj0go10{background:#d2d4d4;cursor:not-allowed}._17lj0go11{background:#91467f}._17lj0go11:hover{background:#6e3c65}._17lj0go12{background:#de002e}._17lj0go12:hover{background:#a30d2d}._17lj0go13{background:#007db8}._17lj0go13:hover{background:#09638d}._17lj0go14{background:#e7760b}._17lj0go14:hover{background:#aa5e14}._17lj0go15{background:#717779}._17lj0go15:hover{background:#1f282c}
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}._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)}
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.2.2",
4
+ "version": "8.3.1",
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.2.2",
33
- "@sps-woodland/tokens": "8.2.2",
34
- "@sps-woodland/buttons": "8.2.2",
35
- "@spscommerce/ds-react": "8.2.2"
32
+ "@sps-woodland/core": "8.3.1",
33
+ "@sps-woodland/tokens": "8.3.1",
34
+ "@sps-woodland/buttons": "8.3.1",
35
+ "@spscommerce/ds-react": "8.3.1"
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.2.2",
44
- "@sps-woodland/tokens": "8.2.2",
45
- "@sps-woodland/buttons": "8.2.2",
46
- "@spscommerce/ds-react": "8.2.2"
43
+ "@sps-woodland/core": "8.3.1",
44
+ "@sps-woodland/tokens": "8.3.1",
45
+ "@sps-woodland/buttons": "8.3.1",
46
+ "@spscommerce/ds-react": "8.3.1"
47
47
  },
48
48
  "scripts": {
49
49
  "build": "pnpm run build:js && pnpm run build:types",