@digitalpromise/design 4.9.3 → 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 +143 -152
  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,179 @@
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 h, Fragment as k } from "react/jsx-runtime";
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
5
  import { useSearchParams as I, usePathname as z, useRouter as L } from "next/navigation";
6
- import { useRef as F, useState as M, useEffect as O, useId as V } from "react";
7
- const Y = [
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",
33
- danger: "btn btn-primary btn-danger",
34
- inverse: "btn btn-primary btn-inverse",
35
- emphasize: "btn btn-primary",
36
- decolor: "btn btn-primary btn-decolor"
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 j(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" ? j(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__ */ h(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__ */ h(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__ */ h(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
- " ",
86
- o
87
- ] }) : /* @__PURE__ */ h(k, { children: [
88
- o,
89
- " ",
84
+ l
85
+ ] }) : /* @__PURE__ */ h(C, { children: [
86
+ l,
90
87
  r
91
- ] }) : o : r;
88
+ ] }) : l : r;
92
89
  }
93
- return /* @__PURE__ */ h(k, { children: [
94
- o,
95
- e
90
+ return /* @__PURE__ */ h(C, { children: [
91
+ l,
92
+ t
96
93
  ] });
97
94
  }
98
- function ee({
99
- children: e,
100
- icon: a,
101
- iconClassName: t,
95
+ function te({
96
+ children: t,
97
+ icon: o,
98
+ iconClassName: e,
102
99
  iconPosition: s = "start",
103
- label: l,
104
- className: u,
100
+ label: a,
101
+ className: c,
105
102
  size: i = "md",
106
- state: o = "default",
103
+ state: l = "default",
107
104
  textClassName: r,
108
- type: c = "button",
109
- variant: m = "ghost",
105
+ type: u = "button",
106
+ variant: b = "ghost",
110
107
  ...y
111
108
  }) {
112
109
  return /* @__PURE__ */ n(
113
110
  "button",
114
111
  {
115
- type: c,
116
- className: T({ className: u, size: i, state: o, variant: m }),
112
+ type: u,
113
+ className: U({ className: c, size: i, state: l, variant: b }),
117
114
  ...y,
118
- "aria-label": l,
119
- children: U({
120
- children: e,
121
- icon: a,
122
- iconClassName: t,
115
+ "aria-label": a,
116
+ children: _({
117
+ children: t,
118
+ icon: o,
119
+ iconClassName: e,
123
120
  iconPosition: s,
124
121
  size: i,
125
122
  textClassName: r,
126
- variant: m
123
+ variant: b
127
124
  })
128
125
  }
129
126
  );
130
127
  }
131
- function te({
132
- name: e,
133
- size: a = "md",
134
- className: t
128
+ function ne({
129
+ name: t,
130
+ size: o = "md",
131
+ className: e
135
132
  }) {
136
- return /* @__PURE__ */ n(
137
- N,
138
- {
139
- name: e,
140
- className: j(a, t)
141
- }
142
- );
133
+ return /* @__PURE__ */ n(N, { name: t, className: j(o, e) });
143
134
  }
144
- const _ = /* @__PURE__ */ new Map([
135
+ const H = /* @__PURE__ */ new Map([
145
136
  ["black", "/primary-badge-engine-logo-black.svg"],
146
137
  ["white", "/primary-badge-engine-logo-white.svg"],
147
138
  ["color", "/primary-badge-engine-logo-color.svg"]
148
139
  ]);
149
- function ne({
150
- variant: e = "color",
151
- className: a
140
+ function re({
141
+ variant: t = "color",
142
+ className: o
152
143
  }) {
153
- const t = _.get(e);
154
- return t === void 0 ? null : /* @__PURE__ */ n(
144
+ const e = H.get(t);
145
+ return e === void 0 ? null : /* @__PURE__ */ n(
155
146
  "img",
156
147
  {
157
- src: t,
148
+ src: e,
158
149
  width: 186,
159
150
  height: 36,
160
151
  alt: "Badge Engine",
161
- className: a
152
+ className: o
162
153
  }
163
154
  );
164
155
  }
165
- function re({
166
- count: e,
167
- limit: a = 10,
168
- pageParamKey: t = "page"
156
+ function se({
157
+ count: t,
158
+ limit: o = 10,
159
+ pageParamKey: e = "page"
169
160
  }) {
170
- const s = I(), l = z(), u = L(), 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)), m = 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] : [
171
162
  1,
172
163
  "ellipsis",
173
164
  r - 1,
174
165
  r,
175
166
  r + 1,
176
167
  "ellipsis",
177
- c
178
- ], y = r === 1, C = r === c, $ = (d) => {
179
- 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")
180
171
  return;
181
- const g = d === "prev" ? r - 1 : r + 1, b = new URLSearchParams(s.toString());
182
- b.set(t, String(g)), u.push(`${l}?${b.toString()}`, { scroll: !1 });
172
+ const g = d === "prev" ? r - 1 : r + 1, p = new URLSearchParams(s.toString());
173
+ p.set(e, String(g)), c.push(`${a}?${p.toString()}`, { scroll: !1 });
183
174
  }, f = (d) => {
184
175
  const g = new URLSearchParams(s.toString());
185
- 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 });
186
177
  };
187
178
  return /* @__PURE__ */ h("ul", { className: "flex items-center justify-center gap-4 font-medium", children: [
188
179
  /* @__PURE__ */ n("li", { className: "mr-2", children: /* @__PURE__ */ n(
@@ -196,8 +187,8 @@ function re({
196
187
  children: /* @__PURE__ */ n(N, { name: "ArrowLineLeft" })
197
188
  }
198
189
  ) }),
199
- m.map((d, g) => {
200
- const b = d === "ellipsis", x = b ? void 0 : d, w = x === r, S = b || w, P = b ? "Pagination ellipsis" : `Go to page ${x}`;
190
+ b.map((d, g) => {
191
+ const p = d === "ellipsis", x = p ? void 0 : d, w = x === r, S = p || w, P = p ? "Pagination ellipsis" : `Go to page ${x}`;
201
192
  return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
202
193
  "button",
203
194
  {
@@ -207,7 +198,7 @@ function re({
207
198
  disabled: S,
208
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(),
209
200
  onClick: !S && x ? () => f(x) : void 0,
210
- children: b ? "..." : x
201
+ children: p ? "..." : x
211
202
  }
212
203
  ) }, `${d}-${g}`);
213
204
  }),
@@ -216,7 +207,7 @@ function re({
216
207
  {
217
208
  type: "button",
218
209
  "aria-label": "Next page",
219
- disabled: C,
210
+ disabled: k,
220
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",
221
212
  onClick: () => $("next"),
222
213
  children: /* @__PURE__ */ n(N, { name: "ArrowLineRight" })
@@ -224,37 +215,37 @@ function re({
224
215
  ) })
225
216
  ] });
226
217
  }
227
- function se({
228
- placeholder: e,
229
- className: a,
230
- inputWidth: t,
218
+ function ie({
219
+ placeholder: t,
220
+ className: o,
221
+ inputWidth: e,
231
222
  value: s,
232
- onChange: l,
233
- syncToUrl: u = !0,
223
+ onChange: a,
224
+ syncToUrl: c = !0,
234
225
  id: i = "search",
235
- paramKey: o = "s",
226
+ paramKey: l = "s",
236
227
  firstResultSelector: r,
237
- onEnter: c
228
+ onEnter: u
238
229
  }) {
239
- const m = I(), y = z(), C = L(), $ = F(null), f = s !== void 0, [d, g] = M(
240
- f ? s : m.get(o)?.toString() ?? ""
241
- ), b = f ? s : d, x = Math.max(e.length, 1), w = `calc(${x}ch + 60px)`, S = t === void 0 ? w : typeof t == "number" ? `${t}px` : t;
242
- O(() => {
243
- !u || f || g(m.get(o)?.toString() ?? "");
244
- }, [f, o, m, 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]);
245
236
  const P = (v) => {
246
- if (!u) return;
247
- const p = new URLSearchParams(m.toString());
248
- v ? (p.set(o, v), p.delete("page")) : (p.delete(o), p.delete("page"));
249
- const B = p.toString();
250
- C.replace(B ? `${y}?${B}` : 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);
251
242
  }, R = (v) => {
252
- if (v.preventDefault(), c?.(b), r && b.trim()) {
253
- const p = document.querySelector(r);
254
- p && p.focus();
243
+ if (v.preventDefault(), u?.(p), r && p.trim()) {
244
+ const m = document.querySelector(r);
245
+ m && m.focus();
255
246
  }
256
247
  };
257
- return /* @__PURE__ */ h("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: [
258
249
  /* @__PURE__ */ n("label", { className: "sr-only", htmlFor: i, children: "Search" }),
259
250
  /* @__PURE__ */ h("div", { className: "relative max-w-full", style: { width: S }, children: [
260
251
  /* @__PURE__ */ n(
@@ -278,22 +269,22 @@ function se({
278
269
  id: i,
279
270
  type: "search",
280
271
  autoComplete: "off",
281
- value: b,
282
- placeholder: e,
272
+ value: p,
273
+ placeholder: t,
283
274
  onChange: (v) => {
284
- const p = v.target.value;
285
- f || g(p), l?.(p), P(p);
275
+ const m = v.target.value;
276
+ f || g(m), a?.(m), P(m);
286
277
  }
287
278
  }
288
279
  ),
289
- b.length > 0 && /* @__PURE__ */ n(
280
+ p.length > 0 && /* @__PURE__ */ n(
290
281
  "button",
291
282
  {
292
283
  type: "button",
293
284
  "aria-label": "Clear search",
294
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",
295
286
  onClick: () => {
296
- f || g(""), l?.(""), P(""), $.current?.focus();
287
+ f || g(""), a?.(""), P(""), $.current?.focus();
297
288
  },
298
289
  children: /* @__PURE__ */ n(N, { name: "Close" })
299
290
  }
@@ -301,40 +292,40 @@ function se({
301
292
  ] })
302
293
  ] });
303
294
  }
304
- function ie({ columns: e, rows: a, rowKey: t }) {
305
- const s = V();
295
+ function oe({ columns: t, rows: o, rowKey: e }) {
296
+ const s = A();
306
297
  return /* @__PURE__ */ h("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
307
- /* @__PURE__ */ n("thead", { className: "font-bold", children: /* @__PURE__ */ n("tr", { children: e.map((l) => /* @__PURE__ */ n(
298
+ /* @__PURE__ */ n("thead", { className: "font-bold", children: /* @__PURE__ */ n("tr", { children: t.map((a) => /* @__PURE__ */ n(
308
299
  "th",
309
300
  {
310
- id: `${s}-col-${l.key}`,
301
+ id: `${s}-col-${a.key}`,
311
302
  scope: "col",
312
- className: `px-3 py-4 text-left leading-[23px] ${l.headerClassName ?? ""}`.trim(),
313
- children: l.header
303
+ className: `px-3 py-4 text-left leading-[23px] ${a.headerClassName ?? ""}`.trim(),
304
+ children: a.header
314
305
  },
315
- l.key
306
+ a.key
316
307
  )) }) }),
317
- /* @__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(
318
309
  "td",
319
310
  {
320
311
  headers: `${s}-col-${i.key}`,
321
312
  className: `${i.cellClassName ?? "px-3 py-4"}`.trim(),
322
- children: i.render(l)
313
+ children: i.render(a)
323
314
  },
324
315
  i.key
325
- )) }, t(l, u))) })
316
+ )) }, e(a, c))) })
326
317
  ] });
327
318
  }
328
319
  export {
329
- le as Button,
320
+ ce as Button,
330
321
  N as Icon,
331
- ee as IconButton,
332
- te as IconButtonGlyph,
333
- ne as Logo,
334
- re as Pagination,
335
- se as Search,
336
- ie as Table,
337
- Z as iconButtonSizes,
338
- Y as iconButtonStates,
339
- 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
340
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;}.btn-tertiary.btn-danger{@apply text-red-4 hover:text-red-5;}.btn-tertiary.btn-inverse{@apply text-neutral-1 hover:text-gray-1;}.btn-tertiary.btn-decolor{@apply text-gray-5 hover:text-neutral-5;}}@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.3",
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.2",
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.0.1",
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",