@digitalpromise/design 4.9.5 → 4.10.0

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 (10) hide show
  1. package/dist/forms.cjs +1 -1
  2. package/dist/forms.js +1 -1
  3. package/dist/{icon-DOAUhyEM.js → icon-HNQCfScn.js} +302 -255
  4. package/dist/icon-r9-powj6.cjs +1 -0
  5. package/dist/index.cjs +1 -1
  6. package/dist/index.d.ts +10 -4
  7. package/dist/index.js +144 -151
  8. package/dist/theme.css +1 -1
  9. package/package.json +10 -10
  10. package/dist/icon-KeRREHrI.cjs +0 -1
package/dist/index.js CHANGED
@@ -1,188 +1,181 @@
1
1
  "use client";
2
- import { I as N } from "./icon-DOAUhyEM.js";
3
- import { B as le } from "./icon-DOAUhyEM.js";
4
- import { jsx as n, jsxs as m, Fragment as k } from "react/jsx-runtime";
5
- import { useSearchParams as B, usePathname as I, useRouter as z } from "next/navigation";
6
- import { useRef as F, useState as M, useEffect as O, useId as V } from "react";
7
- const Y = [
2
+ import { I as N, g as F } from "./icon-HNQCfScn.js";
3
+ import { B as ce } from "./icon-HNQCfScn.js";
4
+ import { jsx as n, jsxs as h, Fragment as C } from "react/jsx-runtime";
5
+ import { useSearchParams as I, usePathname as z, useRouter as L } from "next/navigation";
6
+ import { useRef as M, useState as O, useEffect as V, useId as A } from "react";
7
+ const Z = [
8
8
  "default",
9
9
  "danger",
10
10
  "inverse",
11
11
  "emphasize",
12
12
  "decolor"
13
- ], Z = ["md", "sm", "xs"], K = [
14
- "ghost",
15
- "outline",
13
+ ], K = ["md", "sm", "xs"], ee = [
14
+ "primary",
16
15
  "secondary",
17
- "tertiary"
18
- ], A = "inline-flex items-center justify-center rounded-lg cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", E = {
16
+ "tertiary",
17
+ "ghost",
18
+ "outline"
19
+ ], E = "inline-flex items-center justify-center rounded-lg cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", G = {
19
20
  md: "h-12 w-12 p-3",
20
21
  sm: "h-8 w-8 p-2",
21
22
  xs: "h-6 w-6 p-0"
22
- }, G = {
23
+ }, q = {
23
24
  default: "text-gray-5 hover:text-neutral-5 transition-colors",
24
25
  danger: "text-red-4 hover:text-red-5",
25
26
  inverse: "text-white hover:text-gray-1",
26
27
  emphasize: "bg-white text-gray-5 hover:bg-gray-1 hover:text-neutral-5 focus-visible:bg-blue-1 focus-visible:text-blue-4 focus-visible:hover:bg-blue-2 focus-visible:hover:text-blue-5",
27
28
  decolor: "text-gray-5 hover:text-neutral-5 transition-colors"
28
- }, q = {
29
+ }, D = {
29
30
  ghost: "",
30
31
  outline: "border-2 border-gray-5"
31
- }, D = {
32
- default: "btn btn-primary inline-flex items-center justify-center gap-2",
33
- danger: "btn btn-primary btn-danger inline-flex items-center justify-center gap-2",
34
- inverse: "btn btn-primary btn-inverse inline-flex items-center justify-center gap-2",
35
- emphasize: "btn btn-primary inline-flex items-center justify-center gap-2",
36
- decolor: "btn btn-primary btn-decolor inline-flex items-center justify-center gap-2"
37
32
  }, Q = {
38
33
  default: "flex items-center gap-2 py-3 text-gray-5",
39
34
  danger: "flex items-center gap-2 py-3 text-red-4 hover:text-red-5",
40
35
  inverse: "flex items-center gap-2 py-3 text-white hover:text-gray-1",
41
36
  emphasize: "flex items-center gap-2 py-3 text-gray-5",
42
37
  decolor: "flex items-center gap-2 py-3 text-gray-5 hover:text-neutral-5"
43
- };
44
- function L(e, a) {
45
- return `${e === "xs" ? "block h-5 w-5 shrink-0 leading-none" : e === "sm" ? "block h-4 w-4 shrink-0 text-base leading-none" : "block h-6 w-6 shrink-0 text-2xl leading-none"} ${a ?? ""}`.trim();
38
+ }, T = "inline-flex items-center justify-center gap-2";
39
+ function j(t, o) {
40
+ return `${t === "xs" ? "block h-5 w-5 shrink-0 leading-none" : t === "sm" ? "block h-4 w-4 shrink-0 text-base leading-none" : "block h-6 w-6 shrink-0 text-2xl leading-none"} ${o ?? ""}`.trim();
46
41
  }
47
- function T({
48
- className: e,
49
- size: a = "md",
50
- state: t = "default",
42
+ function U({
43
+ className: t,
44
+ size: o = "md",
45
+ state: e = "default",
51
46
  variant: s = "ghost"
52
47
  }) {
53
- return s === "secondary" ? `${D[t]} ${e ?? ""}`.trim() : s === "tertiary" ? `${Q[t]} ${e ?? ""}`.trim() : `${A} ${E[a]} ${G[t]} ${q[s]} ${e ?? ""}`.trim();
48
+ return s === "primary" || s === "secondary" ? `${F({
49
+ className: T,
50
+ variant: s,
51
+ state: e === "emphasize" ? "default" : e
52
+ })} ${t ?? ""}`.trim() : s === "tertiary" ? `${Q[e]} ${t ?? ""}`.trim() : `${E} ${G[o]} ${q[e]} ${D[s]} ${t ?? ""}`.trim();
54
53
  }
55
- function U({
56
- children: e,
57
- icon: a,
58
- iconClassName: t,
54
+ function _({
55
+ children: t,
56
+ icon: o,
57
+ iconClassName: e,
59
58
  iconPosition: s = "start",
60
- size: l = "md",
61
- textClassName: u,
59
+ size: a = "md",
60
+ textClassName: c,
62
61
  variant: i = "ghost"
63
62
  }) {
64
- const o = a ? /* @__PURE__ */ n(
63
+ const l = o ? /* @__PURE__ */ n(
65
64
  N,
66
65
  {
67
- name: a,
68
- className: i === "ghost" || i === "outline" ? L(l, t) : i === "tertiary" ? `h-5 w-5 shrink-0 ${t ?? ""}`.trim() : t
66
+ name: o,
67
+ className: i === "ghost" || i === "outline" ? j(a, e) : i === "tertiary" ? `h-5 w-5 shrink-0 ${e ?? ""}`.trim() : e
69
68
  }
70
69
  ) : null;
71
70
  if (i === "tertiary") {
72
- const r = e ? /* @__PURE__ */ n("span", { className: `font-semibold underline ${u ?? ""}`.trim(), children: e }) : null;
73
- return s === "end" ? /* @__PURE__ */ m(k, { children: [
71
+ const r = t ? /* @__PURE__ */ n("span", { className: `font-semibold underline ${c ?? ""}`.trim(), children: t }) : null;
72
+ return s === "end" ? /* @__PURE__ */ h(C, { children: [
74
73
  r,
75
- o
76
- ] }) : /* @__PURE__ */ m(k, { children: [
77
- o,
74
+ l
75
+ ] }) : /* @__PURE__ */ h(C, { children: [
76
+ l,
78
77
  r
79
78
  ] });
80
79
  }
81
- if (i === "secondary") {
82
- const r = u ? /* @__PURE__ */ n("span", { className: u, children: e }) : e;
83
- return o ? r ? s === "end" ? /* @__PURE__ */ m(k, { children: [
80
+ if (i === "primary" || i === "secondary") {
81
+ const r = c ? /* @__PURE__ */ n("span", { className: c, children: t }) : t;
82
+ return l ? r ? s === "end" ? /* @__PURE__ */ h(C, { children: [
84
83
  r,
85
- o
86
- ] }) : /* @__PURE__ */ m(k, { children: [
87
- o,
84
+ l
85
+ ] }) : /* @__PURE__ */ h(C, { children: [
86
+ l,
88
87
  r
89
- ] }) : o : r;
88
+ ] }) : l : r;
90
89
  }
91
- return /* @__PURE__ */ m(k, { children: [
92
- o,
93
- e
90
+ return /* @__PURE__ */ h(C, { children: [
91
+ l,
92
+ t
94
93
  ] });
95
94
  }
96
- function ee({
97
- children: e,
98
- icon: a,
99
- iconClassName: t,
95
+ function te({
96
+ children: t,
97
+ icon: o,
98
+ iconClassName: e,
100
99
  iconPosition: s = "start",
101
- label: l,
102
- className: u,
100
+ label: a,
101
+ className: c,
103
102
  size: i = "md",
104
- state: o = "default",
103
+ state: l = "default",
105
104
  textClassName: r,
106
- type: c = "button",
107
- variant: f = "ghost",
105
+ type: u = "button",
106
+ variant: b = "ghost",
108
107
  ...y
109
108
  }) {
110
109
  return /* @__PURE__ */ n(
111
110
  "button",
112
111
  {
113
- type: c,
114
- className: T({ className: u, size: i, state: o, variant: f }),
112
+ type: u,
113
+ className: U({ className: c, size: i, state: l, variant: b }),
115
114
  ...y,
116
- "aria-label": l,
117
- children: U({
118
- children: e,
119
- icon: a,
120
- iconClassName: t,
115
+ "aria-label": a,
116
+ children: _({
117
+ children: t,
118
+ icon: o,
119
+ iconClassName: e,
121
120
  iconPosition: s,
122
121
  size: i,
123
122
  textClassName: r,
124
- variant: f
123
+ variant: b
125
124
  })
126
125
  }
127
126
  );
128
127
  }
129
- function te({
130
- name: e,
131
- size: a = "md",
132
- className: t
128
+ function ne({
129
+ name: t,
130
+ size: o = "md",
131
+ className: e
133
132
  }) {
134
- return /* @__PURE__ */ n(
135
- N,
136
- {
137
- name: e,
138
- className: L(a, t)
139
- }
140
- );
133
+ return /* @__PURE__ */ n(N, { name: t, className: j(o, e) });
141
134
  }
142
- const _ = /* @__PURE__ */ new Map([
135
+ const H = /* @__PURE__ */ new Map([
143
136
  ["black", "/primary-badge-engine-logo-black.svg"],
144
137
  ["white", "/primary-badge-engine-logo-white.svg"],
145
138
  ["color", "/primary-badge-engine-logo-color.svg"]
146
139
  ]);
147
- function ne({
148
- variant: e = "color",
149
- className: a
140
+ function re({
141
+ variant: t = "color",
142
+ className: o
150
143
  }) {
151
- const t = _.get(e);
152
- return t === void 0 ? null : /* @__PURE__ */ n(
144
+ const e = H.get(t);
145
+ return e === void 0 ? null : /* @__PURE__ */ n(
153
146
  "img",
154
147
  {
155
- src: t,
148
+ src: e,
156
149
  width: 186,
157
150
  height: 36,
158
151
  alt: "Badge Engine",
159
- className: a
152
+ className: o
160
153
  }
161
154
  );
162
155
  }
163
- function re({
164
- count: e,
165
- limit: a = 10,
166
- pageParamKey: t = "page"
156
+ function se({
157
+ count: t,
158
+ limit: o = 10,
159
+ pageParamKey: e = "page"
167
160
  }) {
168
- const s = B(), l = I(), u = z(), i = s.get(t), o = i ? Number.parseInt(i, 10) : Number.NaN, r = Number.isFinite(o) ? o : 1, c = Math.max(1, Math.ceil(e / a)), f = c <= 7 ? Array.from({ length: c }, (d, g) => g + 1) : r <= 4 ? [1, 2, 3, 4, 5, "ellipsis", c] : r >= c - 3 ? [1, "ellipsis", c - 4, c - 3, c - 2, c - 1, c] : [
161
+ const s = I(), a = z(), c = L(), i = s.get(e), l = i ? Number.parseInt(i, 10) : Number.NaN, r = Number.isFinite(l) ? l : 1, u = Math.max(1, Math.ceil(t / o)), b = u <= 7 ? Array.from({ length: u }, (d, g) => g + 1) : r <= 4 ? [1, 2, 3, 4, 5, "ellipsis", u] : r >= u - 3 ? [1, "ellipsis", u - 4, u - 3, u - 2, u - 1, u] : [
169
162
  1,
170
163
  "ellipsis",
171
164
  r - 1,
172
165
  r,
173
166
  r + 1,
174
167
  "ellipsis",
175
- c
176
- ], y = r === 1, C = r === c, $ = (d) => {
177
- if (y && d === "prev" || C && d === "next")
168
+ u
169
+ ], y = r === 1, k = r === u, $ = (d) => {
170
+ if (y && d === "prev" || k && d === "next")
178
171
  return;
179
172
  const g = d === "prev" ? r - 1 : r + 1, p = new URLSearchParams(s.toString());
180
- p.set(t, String(g)), u.push(`${l}?${p.toString()}`, { scroll: !1 });
181
- }, h = (d) => {
173
+ p.set(e, String(g)), c.push(`${a}?${p.toString()}`, { scroll: !1 });
174
+ }, f = (d) => {
182
175
  const g = new URLSearchParams(s.toString());
183
- g.set(t, String(d)), u.push(`${l}?${g.toString()}`, { scroll: !1 });
176
+ g.set(e, String(d)), c.push(`${a}?${g.toString()}`, { scroll: !1 });
184
177
  };
185
- return /* @__PURE__ */ m("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
178
+ return /* @__PURE__ */ h("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
186
179
  /* @__PURE__ */ n("li", { className: "mr-2", children: /* @__PURE__ */ n(
187
180
  "button",
188
181
  {
@@ -194,7 +187,7 @@ function re({
194
187
  children: /* @__PURE__ */ n(N, { name: "ArrowLineLeft" })
195
188
  }
196
189
  ) }),
197
- f.map((d, g) => {
190
+ b.map((d, g) => {
198
191
  const p = d === "ellipsis", x = p ? void 0 : d, w = x === r, S = p || w, P = p ? "Pagination ellipsis" : `Go to page ${x}`;
199
192
  return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
200
193
  "button",
@@ -204,7 +197,7 @@ function re({
204
197
  "aria-current": w ? "page" : void 0,
205
198
  disabled: S,
206
199
  className: `flex h-[36px] w-[36px] items-center justify-center rounded-[4px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 ${w ? "bg-blue-1 text-blue-4" : ""} ${S ? "cursor-default" : "cursor-pointer hover:bg-gray-1"}`.trim(),
207
- onClick: !S && x ? () => h(x) : void 0,
200
+ onClick: !S && x ? () => f(x) : void 0,
208
201
  children: p ? "..." : x
209
202
  }
210
203
  ) }, `${d}-${g}`);
@@ -214,7 +207,7 @@ function re({
214
207
  {
215
208
  type: "button",
216
209
  "aria-label": "Next page",
217
- disabled: C,
210
+ disabled: k,
218
211
  className: "inline-flex h-[42px] w-[42px] items-center justify-center rounded-[4px] bg-transparent p-[9px] text-gray-5 transition hover:bg-transparent hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
219
212
  onClick: () => $("next"),
220
213
  children: /* @__PURE__ */ n(N, { name: "ArrowLineRight" })
@@ -222,39 +215,39 @@ function re({
222
215
  ) })
223
216
  ] });
224
217
  }
225
- function se({
226
- placeholder: e,
227
- className: a,
228
- inputWidth: t,
218
+ function ie({
219
+ placeholder: t,
220
+ className: o,
221
+ inputWidth: e,
229
222
  value: s,
230
- onChange: l,
231
- syncToUrl: u = !0,
223
+ onChange: a,
224
+ syncToUrl: c = !0,
232
225
  id: i = "search",
233
- paramKey: o = "s",
226
+ paramKey: l = "s",
234
227
  firstResultSelector: r,
235
- onEnter: c
228
+ onEnter: u
236
229
  }) {
237
- const f = B(), y = I(), C = z(), $ = F(null), h = s !== void 0, [d, g] = M(
238
- h ? s : f.get(o)?.toString() ?? ""
239
- ), p = h ? s : d, x = Math.max(e.length, 1), w = `calc(${x}ch + 60px)`, S = t === void 0 ? w : typeof t == "number" ? `${t}px` : t;
240
- O(() => {
241
- !u || h || g(f.get(o)?.toString() ?? "");
242
- }, [h, o, f, u]);
230
+ const b = I(), y = z(), k = L(), $ = M(null), f = s !== void 0, [d, g] = O(
231
+ f ? s : b.get(l)?.toString() ?? ""
232
+ ), p = f ? s : d, x = Math.max(t.length, 1), w = `calc(${x}ch + 60px)`, S = e === void 0 ? w : typeof e == "number" ? `${e}px` : e;
233
+ V(() => {
234
+ !c || f || g(b.get(l)?.toString() ?? "");
235
+ }, [f, l, b, c]);
243
236
  const P = (v) => {
244
- if (!u) return;
245
- const b = new URLSearchParams(f.toString());
246
- v ? (b.set(o, v), b.delete("page")) : (b.delete(o), b.delete("page"));
247
- const j = b.toString();
248
- C.replace(j ? `${y}?${j}` : y);
237
+ if (!c) return;
238
+ const m = new URLSearchParams(b.toString());
239
+ v ? (m.set(l, v), m.delete("page")) : (m.delete(l), m.delete("page"));
240
+ const B = m.toString();
241
+ k.replace(B ? `${y}?${B}` : y);
249
242
  }, R = (v) => {
250
- if (v.preventDefault(), c?.(p), r && p.trim()) {
251
- const b = document.querySelector(r);
252
- b && b.focus();
243
+ if (v.preventDefault(), u?.(p), r && p.trim()) {
244
+ const m = document.querySelector(r);
245
+ m && m.focus();
253
246
  }
254
247
  };
255
- return /* @__PURE__ */ m("form", { className: `search-field ${a ?? ""}`.trim(), noValidate: !0, onSubmit: R, children: [
248
+ return /* @__PURE__ */ h("form", { className: `search-field ${o ?? ""}`.trim(), noValidate: !0, onSubmit: R, children: [
256
249
  /* @__PURE__ */ n("label", { className: "sr-only", htmlFor: i, children: "Search" }),
257
- /* @__PURE__ */ m("div", { className: "relative max-w-full", style: { width: S }, children: [
250
+ /* @__PURE__ */ h("div", { className: "relative max-w-full", style: { width: S }, children: [
258
251
  /* @__PURE__ */ n(
259
252
  N,
260
253
  {
@@ -277,10 +270,10 @@ function se({
277
270
  type: "search",
278
271
  autoComplete: "off",
279
272
  value: p,
280
- placeholder: e,
273
+ placeholder: t,
281
274
  onChange: (v) => {
282
- const b = v.target.value;
283
- h || g(b), l?.(b), P(b);
275
+ const m = v.target.value;
276
+ f || g(m), a?.(m), P(m);
284
277
  }
285
278
  }
286
279
  ),
@@ -291,7 +284,7 @@ function se({
291
284
  "aria-label": "Clear search",
292
285
  className: "absolute right-1 top-1/2 z-10 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg p-2 text-gray-5 hover:text-neutral-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-4",
293
286
  onClick: () => {
294
- h || g(""), l?.(""), P(""), $.current?.focus();
287
+ f || g(""), a?.(""), P(""), $.current?.focus();
295
288
  },
296
289
  children: /* @__PURE__ */ n(N, { name: "Close" })
297
290
  }
@@ -299,40 +292,40 @@ function se({
299
292
  ] })
300
293
  ] });
301
294
  }
302
- function ie({ columns: e, rows: a, rowKey: t }) {
303
- const s = V();
304
- return /* @__PURE__ */ m("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
305
- /* @__PURE__ */ n("thead", { className: "font-bold", children: /* @__PURE__ */ n("tr", { children: e.map((l) => /* @__PURE__ */ n(
295
+ function oe({ columns: t, rows: o, rowKey: e }) {
296
+ const s = A();
297
+ return /* @__PURE__ */ h("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
298
+ /* @__PURE__ */ n("thead", { className: "font-bold", children: /* @__PURE__ */ n("tr", { children: t.map((a) => /* @__PURE__ */ n(
306
299
  "th",
307
300
  {
308
- id: `${s}-col-${l.key}`,
301
+ id: `${s}-col-${a.key}`,
309
302
  scope: "col",
310
- className: `px-3 py-4 text-left leading-[23px] ${l.headerClassName ?? ""}`.trim(),
311
- children: l.header
303
+ className: `px-3 py-4 text-left leading-[23px] ${a.headerClassName ?? ""}`.trim(),
304
+ children: a.header
312
305
  },
313
- l.key
306
+ a.key
314
307
  )) }) }),
315
- /* @__PURE__ */ n("tbody", { children: a.map((l, u) => /* @__PURE__ */ n("tr", { className: "border-t border-gray-2", children: e.map((i) => /* @__PURE__ */ n(
308
+ /* @__PURE__ */ n("tbody", { children: o.map((a, c) => /* @__PURE__ */ n("tr", { className: "border-t border-gray-2", children: t.map((i) => /* @__PURE__ */ n(
316
309
  "td",
317
310
  {
318
311
  headers: `${s}-col-${i.key}`,
319
312
  className: `${i.cellClassName ?? "px-3 py-4"}`.trim(),
320
- children: i.render(l)
313
+ children: i.render(a)
321
314
  },
322
315
  i.key
323
- )) }, t(l, u))) })
316
+ )) }, e(a, c))) })
324
317
  ] });
325
318
  }
326
319
  export {
327
- le as Button,
320
+ ce as Button,
328
321
  N as Icon,
329
- ee as IconButton,
330
- te as IconButtonGlyph,
331
- ne as Logo,
332
- re as Pagination,
333
- se as Search,
334
- ie as Table,
335
- Z as iconButtonSizes,
336
- Y as iconButtonStates,
337
- K as iconButtonVariants
322
+ te as IconButton,
323
+ ne as IconButtonGlyph,
324
+ re as Logo,
325
+ se as Pagination,
326
+ ie as Search,
327
+ oe as Table,
328
+ K as iconButtonSizes,
329
+ Z as iconButtonStates,
330
+ ee as iconButtonVariants
338
331
  };
package/dist/theme.css CHANGED
@@ -1 +1 @@
1
- @theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #767676; --color-gray-5: #454545; --color-blue-1: #eaf4fb; --color-blue-2: #d5e8f5; --color-blue-3: #2077be; --color-blue-4: #1166aa; --color-blue-5: #075593; --color-indigo-1: #eef2f9; --color-indigo-2: #d9dff3; --color-indigo-3: #5770be; --color-indigo-4: #465faa; --color-indigo-5: #3a4f92; --color-purple-1: #f1eef6; --color-purple-2: #e4dcf0; --color-purple-3: #8164af; --color-purple-4: #72559f; --color-purple-5: #5e4586; --color-violet-1: #f5eef6; --color-violet-2: #ecddef; --color-violet-3: #9f57af; --color-violet-4: #8a4799; --color-violet-5: #713c7c; --color-magenta-1: #f6eef4; --color-magenta-2: #f0dce9; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #7d3c68; --color-red-1: #ffefea; --color-red-2: #fee0d7; --color-red-3: #cc4a22; --color-red-4: #bc3a11; --color-red-5: #a22a06; --color-orange-1: #fcf2e8; --color-orange-2: #fae3cb; --color-orange-3: #d46b00; --color-orange-4: #b55b00; --color-orange-5: #8c4500; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #69930d; --color-green-4: #577d04; --color-green-5: #426001; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #299a55; --color-jade-4: #14833f; --color-jade-5: #07652c; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #1692a9; --color-teal-4: #1a7b8d; --color-teal-5: #11606e; --color-neutral-1: #ffffff; --color-neutral-2: rgba(0, 0, 0, .08); --color-neutral-3: rgba(0, 0, 0, .15); --color-neutral-4: rgba(0, 0, 0, .45); --color-neutral-5: #000000; --color-primary: #1166aa; --color-primary-hover: #eaf4fb; --color-danger: #bc3a11; --color-danger-hover: #a22a06; --color-disabled: #a3a3a3; --color-focus: #14833f; --color-focus-outer: #ffffff; --text-small: .875rem; --text-medium: 1rem; --text-medium-large: 1.25rem; --text-large: 1.5rem; --text-x-large: 2rem; --text-xx-large: 3rem; --text-xxx-large: 4rem; --text-base: 1rem; --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem; --spacing-5: 1.5rem; --spacing-6: 2rem; --spacing-7: 3rem; --spacing-8: 4rem; --spacing-9: 5rem; --spacing-10: 6rem; --spacing-11: 15rem; --spacing-12: 22.5rem; }@source "./components";:root{--focus-ring-color: #14833F;--focus-ring-outer-color: #FFFFFF;--focus-ring-width: 4px;--focus-ring-outer-width: 2px;--focus-ring-offset: 2px}.focus-ring:focus-visible,*:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color)}.focus-ring-inside:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color)}.focus-ring-none:focus-visible{outline:none;box-shadow:none}@layer components{.btn{@apply transition cursor-pointer font-semibold px-[1.375rem] py-[.625rem] rounded-3xl disabled:opacity-50;}.btn-primary{@apply bg-blue-3 border-2 border-blue-3 leading-5 text-neutral-1 hover:border-blue-4 hover:bg-blue-4 disabled:border-blue-3 disabled:bg-blue-3;}.btn-primary.btn-danger{@apply border-red-3 bg-red-3 text-neutral-1 hover:border-red-4 hover:bg-red-4;}.btn-primary.btn-inverse{@apply bg-neutral-1 text-blue-4 hover:bg-blue-1 hover:border-blue-5 hover:text-blue-5;}.btn-primary.btn-decolor{@apply border-gray-5 bg-gray-5 text-neutral-1 hover:border-neutral-5 hover:bg-neutral-5;}.btn-secondary{@apply bg-neutral-1 border-2 border-blue-3 text-blue-4 hover:border-blue-4 hover:bg-blue-1 hover:text-blue-5;}.btn-secondary.btn-danger{@apply border-red-3 text-red-3 hover:border-red-4 hover:text-red-4 hover:bg-red-1;}.btn-secondary.btn-inverse{@apply border-neutral-1 text-neutral-1 bg-indigo-3 hover:bg-indigo-4;}.btn-secondary.btn-decolor{@apply text-gray-5 border-gray-5 hover:text-neutral-5 hover:border-neutral-5 hover:bg-gray-1;}.btn-tertiary{@apply px-0 py-3 text-blue-4 underline hover:text-blue-5 rounded-none;}.btn-tertiary.btn-danger{@apply text-red-4 hover:text-red-5 rounded-none;}.btn-tertiary.btn-inverse{@apply text-neutral-1 hover:text-gray-1 rounded-none;}.btn-tertiary.btn-decolor{@apply text-gray-5 hover:text-neutral-5 rounded-none;}}@utility hide-search-clear{&::-webkit-search-cancel-button,&::-webkit-search-decoration {-webkit-appearance: none; appearance: none;} &::-ms-clear {display: none;}}.search-field input[type=search]::placeholder{color:#454545;-webkit-text-fill-color:#454545}.search-field>div>svg[aria-hidden=true]{left:15px!important}.search-field>div>input[type=search]{padding-left:47px!important;padding-right:48px!important;text-indent:0!important}.search-field>div>button[aria-label="Clear search"]{cursor:pointer;right:8px!important}button[aria-label="Previous page"]:not(:disabled),button[aria-label="Next page"]:not(:disabled){cursor:pointer}@utility focus-ring{&:focus-visible {outline: none; box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color);}}@utility focus-ring-inside{&:focus-visible {outline: none; box-shadow: inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color);}}@utility focus-ring-none{&:focus-visible {outline: none; box-shadow: none;}}
1
+ @theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #767676; --color-gray-5: #454545; --color-blue-1: #eaf4fb; --color-blue-2: #d5e8f5; --color-blue-3: #2077be; --color-blue-4: #1166aa; --color-blue-5: #075593; --color-indigo-1: #eef2f9; --color-indigo-2: #d9dff3; --color-indigo-3: #5770be; --color-indigo-4: #465faa; --color-indigo-5: #3a4f92; --color-purple-1: #f1eef6; --color-purple-2: #e4dcf0; --color-purple-3: #8164af; --color-purple-4: #72559f; --color-purple-5: #5e4586; --color-violet-1: #f5eef6; --color-violet-2: #ecddef; --color-violet-3: #9f57af; --color-violet-4: #8a4799; --color-violet-5: #713c7c; --color-magenta-1: #f6eef4; --color-magenta-2: #f0dce9; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #7d3c68; --color-red-1: #ffefea; --color-red-2: #fee0d7; --color-red-3: #cc4a22; --color-red-4: #bc3a11; --color-red-5: #a22a06; --color-orange-1: #fcf2e8; --color-orange-2: #fae3cb; --color-orange-3: #d46b00; --color-orange-4: #b55b00; --color-orange-5: #8c4500; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #69930d; --color-green-4: #577d04; --color-green-5: #426001; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #299a55; --color-jade-4: #14833f; --color-jade-5: #07652c; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #1692a9; --color-teal-4: #1a7b8d; --color-teal-5: #11606e; --color-neutral-1: #ffffff; --color-neutral-2: rgba(0, 0, 0, .08); --color-neutral-3: rgba(0, 0, 0, .15); --color-neutral-4: rgba(0, 0, 0, .45); --color-neutral-5: #000000; --color-primary: #1166aa; --color-primary-hover: #eaf4fb; --color-danger: #bc3a11; --color-danger-hover: #a22a06; --color-disabled: #a3a3a3; --color-focus: #14833f; --color-focus-outer: #ffffff; --text-small: .875rem; --text-medium: 1rem; --text-medium-large: 1.25rem; --text-large: 1.5rem; --text-x-large: 2rem; --text-xx-large: 3rem; --text-xxx-large: 4rem; --text-base: 1rem; --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem; --spacing-5: 1.5rem; --spacing-6: 2rem; --spacing-7: 3rem; --spacing-8: 4rem; --spacing-9: 5rem; --spacing-10: 6rem; --spacing-11: 15rem; --spacing-12: 22.5rem; }@source "./components";@source "./index.js";@source "./forms.js";:root{--focus-ring-color: #14833F;--focus-ring-outer-color: #FFFFFF;--focus-ring-width: 4px;--focus-ring-outer-width: 2px;--focus-ring-offset: 2px}.focus-ring:focus-visible,*:focus-visible{outline:none;box-shadow:0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color)}.focus-ring-inside:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color)}.focus-ring-none:focus-visible{outline:none;box-shadow:none}@layer components{.btn{@apply transition cursor-pointer font-semibold px-[1.375rem] py-[.625rem] rounded-3xl disabled:opacity-50;}.btn-primary{@apply bg-blue-3 border-2 border-blue-3 leading-5 text-neutral-1 hover:border-blue-4 hover:bg-blue-4 disabled:border-blue-3 disabled:bg-blue-3;}.btn-primary.btn-danger{@apply border-red-3 bg-red-3 text-neutral-1 hover:border-red-4 hover:bg-red-4;}.btn-primary.btn-inverse{@apply bg-neutral-1 text-blue-4 hover:bg-blue-1 hover:border-blue-5 hover:text-blue-5;}.btn-primary.btn-decolor{@apply border-gray-5 bg-gray-5 text-neutral-1 hover:border-neutral-5 hover:bg-neutral-5;}.btn-secondary{@apply bg-neutral-1 border-2 border-blue-3 text-blue-4 hover:border-blue-4 hover:bg-blue-1 hover:text-blue-5;}.btn-secondary.btn-danger{@apply border-red-3 text-red-3 hover:border-red-4 hover:text-red-4 hover:bg-red-1;}.btn-secondary.btn-inverse{@apply border-neutral-1 text-neutral-1 bg-indigo-3 hover:bg-indigo-4;}.btn-secondary.btn-decolor{@apply text-gray-5 border-gray-5 hover:text-neutral-5 hover:border-neutral-5 hover:bg-gray-1;}.btn-tertiary{@apply px-0 py-3 text-blue-4 underline hover:text-blue-5 rounded-none;}.btn-tertiary.btn-danger{@apply text-red-4 hover:text-red-5 rounded-none;}.btn-tertiary.btn-inverse{@apply text-neutral-1 hover:text-gray-1 rounded-none;}.btn-tertiary.btn-decolor{@apply text-gray-5 hover:text-neutral-5 rounded-none;}}@utility hide-search-clear{&::-webkit-search-cancel-button,&::-webkit-search-decoration {-webkit-appearance: none; appearance: none;} &::-ms-clear {display: none;}}.search-field input[type=search]::placeholder{color:#454545;-webkit-text-fill-color:#454545}.search-field>div>svg[aria-hidden=true]{left:15px!important}.search-field>div>input[type=search]{padding-left:47px!important;padding-right:48px!important;text-indent:0!important}.search-field>div>button[aria-label="Clear search"]{cursor:pointer;right:8px!important}button[aria-label="Previous page"]:not(:disabled),button[aria-label="Next page"]:not(:disabled){cursor:pointer}@utility focus-ring{&:focus-visible {outline: none; box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-outer-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-ring-outer-width)) var(--focus-ring-outer-color);}}@utility focus-ring-inside{&:focus-visible {outline: none; box-shadow: inset 0 0 0 var(--focus-ring-outer-width) var(--focus-ring-outer-color),inset 0 0 0 calc(var(--focus-ring-outer-width) + var(--focus-ring-width)) var(--focus-ring-color);}}@utility focus-ring-none{&:focus-visible {outline: none; box-shadow: none;}}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@digitalpromise/design",
3
3
  "private": false,
4
- "version": "4.9.5",
4
+ "version": "4.10.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "exports": {
@@ -15,23 +15,23 @@
15
15
  ],
16
16
  "devDependencies": {
17
17
  "@chromatic-com/storybook": "^5.1.2",
18
- "@digitalpromise/icons": "^3.2.0",
18
+ "@digitalpromise/icons": "^3.3.0",
19
19
  "@eslint/js": "^10.0.1",
20
- "@microsoft/api-extractor": "^7.58.3",
20
+ "@microsoft/api-extractor": "^7.58.7",
21
21
  "@storybook/addon-docs": "^10.3.5",
22
22
  "@storybook/addon-links": "^10.3.5",
23
23
  "@storybook/react-vite": "^10.3.5",
24
- "@tailwindcss/vite": "^4.2.2",
24
+ "@tailwindcss/vite": "^4.2.4",
25
25
  "@testing-library/jest-dom": "^6.9.1",
26
26
  "@testing-library/react": "^16.3.2",
27
27
  "@types/jest": "^30.0.0",
28
28
  "@types/react": "^19.2.14",
29
29
  "@types/react-dom": "^19.2.3",
30
- "@typescript-eslint/eslint-plugin": "^8.58.2",
31
- "@typescript-eslint/parser": "^8.58.2",
30
+ "@typescript-eslint/eslint-plugin": "^8.59.1",
31
+ "@typescript-eslint/parser": "^8.59.1",
32
32
  "@vitejs/plugin-react-swc": "^4.3.0",
33
33
  "eslint": "^9.39.4",
34
- "eslint-plugin-react-hooks": "^7.1.0",
34
+ "eslint-plugin-react-hooks": "^7.1.1",
35
35
  "eslint-plugin-storybook": "^10.3.5",
36
36
  "jsdom": "^28.1.0",
37
37
  "react": "^19.2.5",
@@ -40,12 +40,12 @@
40
40
  "rollup-preserve-directives": "^1.1.3",
41
41
  "storybook": "^10.3.5",
42
42
  "style-dictionary": "^5.4.0",
43
- "tailwindcss": "^4.2.2",
43
+ "tailwindcss": "^4.2.4",
44
44
  "typescript": "^5.9.3",
45
- "typescript-eslint": "^8.58.2",
45
+ "typescript-eslint": "^8.59.1",
46
46
  "unplugin-dts": "1.0.0-beta.6",
47
47
  "vite": "^7.3.2",
48
- "vitest": "^4.1.4"
48
+ "vitest": "^4.1.5"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "next": "^16.0.0",