@digitalpromise/design 4.9.0 → 4.9.3

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 (9) hide show
  1. package/dist/forms.cjs +1 -1
  2. package/dist/forms.js +1 -1
  3. package/dist/{icon-B0jP5FtS.js → icon-DOAUhyEM.js} +288 -147
  4. package/dist/{icon-DcmjUgZF.cjs → icon-KeRREHrI.cjs} +1 -1
  5. package/dist/index.cjs +1 -1
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.js +52 -52
  8. package/dist/theme.css +1 -1
  9. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,9 +1,9 @@
1
1
  "use client";
2
- import { I as N } from "./icon-B0jP5FtS.js";
3
- import { B as le } from "./icon-B0jP5FtS.js";
2
+ import { I as N } from "./icon-DOAUhyEM.js";
3
+ import { B as le } from "./icon-DOAUhyEM.js";
4
4
  import { jsx as n, jsxs as h, Fragment as k } from "react/jsx-runtime";
5
5
  import { useSearchParams as I, usePathname as z, useRouter as L } from "next/navigation";
6
- import { useRef as R, useState as F, useEffect as M, useId as O } from "react";
6
+ import { useRef as F, useState as M, useEffect as O, useId as V } from "react";
7
7
  const Y = [
8
8
  "default",
9
9
  "danger",
@@ -15,56 +15,56 @@ const Y = [
15
15
  "outline",
16
16
  "secondary",
17
17
  "tertiary"
18
- ], V = "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", A = {
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 = {
19
19
  md: "h-12 w-12 p-3",
20
20
  sm: "h-8 w-8 p-2",
21
21
  xs: "h-6 w-6 p-0"
22
- }, E = {
22
+ }, G = {
23
23
  default: "text-gray-5 hover:text-neutral-5 transition-colors",
24
24
  danger: "text-red-4 hover:text-red-5",
25
25
  inverse: "text-white hover:text-gray-1",
26
26
  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
27
  decolor: "text-gray-5 hover:text-neutral-5 transition-colors"
28
- }, G = {
28
+ }, q = {
29
29
  ghost: "",
30
30
  outline: "border-2 border-gray-5"
31
- }, q = {
31
+ }, D = {
32
32
  default: "btn btn-primary",
33
33
  danger: "btn btn-primary btn-danger",
34
34
  inverse: "btn btn-primary btn-inverse",
35
35
  emphasize: "btn btn-primary",
36
36
  decolor: "btn btn-primary btn-decolor"
37
- }, D = {
37
+ }, Q = {
38
38
  default: "flex items-center gap-2 py-3 text-gray-5",
39
39
  danger: "flex items-center gap-2 py-3 text-red-4 hover:text-red-5",
40
40
  inverse: "flex items-center gap-2 py-3 text-white hover:text-gray-1",
41
41
  emphasize: "flex items-center gap-2 py-3 text-gray-5",
42
42
  decolor: "flex items-center gap-2 py-3 text-gray-5 hover:text-neutral-5"
43
43
  };
44
- function j(e, o) {
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"} ${o ?? ""}`.trim();
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();
46
46
  }
47
- function Q({
47
+ function T({
48
48
  className: e,
49
- size: o = "md",
49
+ size: a = "md",
50
50
  state: t = "default",
51
51
  variant: s = "ghost"
52
52
  }) {
53
- return s === "secondary" ? `${q[t]} ${e ?? ""}`.trim() : s === "tertiary" ? `${D[t]} ${e ?? ""}`.trim() : `${V} ${A[o]} ${E[t]} ${G[s]} ${e ?? ""}`.trim();
53
+ return s === "secondary" ? `${D[t]} ${e ?? ""}`.trim() : s === "tertiary" ? `${Q[t]} ${e ?? ""}`.trim() : `${A} ${E[a]} ${G[t]} ${q[s]} ${e ?? ""}`.trim();
54
54
  }
55
- function T({
55
+ function U({
56
56
  children: e,
57
- icon: o,
57
+ icon: a,
58
58
  iconClassName: t,
59
59
  iconPosition: s = "start",
60
60
  size: l = "md",
61
61
  textClassName: u,
62
62
  variant: i = "ghost"
63
63
  }) {
64
- const a = o ? /* @__PURE__ */ n(
64
+ const o = a ? /* @__PURE__ */ n(
65
65
  N,
66
66
  {
67
- name: o,
67
+ name: a,
68
68
  className: i === "ghost" || i === "outline" ? j(l, t) : i === "tertiary" ? `h-5 w-5 shrink-0 ${t ?? ""}`.trim() : t
69
69
  }
70
70
  ) : null;
@@ -72,38 +72,38 @@ function T({
72
72
  const r = e ? /* @__PURE__ */ n("span", { className: `font-semibold underline ${u ?? ""}`.trim(), children: e }) : null;
73
73
  return s === "end" ? /* @__PURE__ */ h(k, { children: [
74
74
  r,
75
- a
75
+ o
76
76
  ] }) : /* @__PURE__ */ h(k, { children: [
77
- a,
77
+ o,
78
78
  r
79
79
  ] });
80
80
  }
81
81
  if (i === "secondary") {
82
82
  const r = u ? /* @__PURE__ */ n("span", { className: u, children: e }) : e;
83
- return a ? r ? s === "end" ? /* @__PURE__ */ h(k, { children: [
83
+ return o ? r ? s === "end" ? /* @__PURE__ */ h(k, { children: [
84
84
  r,
85
85
  " ",
86
- a
86
+ o
87
87
  ] }) : /* @__PURE__ */ h(k, { children: [
88
- a,
88
+ o,
89
89
  " ",
90
90
  r
91
- ] }) : a : r;
91
+ ] }) : o : r;
92
92
  }
93
93
  return /* @__PURE__ */ h(k, { children: [
94
- a,
94
+ o,
95
95
  e
96
96
  ] });
97
97
  }
98
98
  function ee({
99
99
  children: e,
100
- icon: o,
100
+ icon: a,
101
101
  iconClassName: t,
102
102
  iconPosition: s = "start",
103
103
  label: l,
104
104
  className: u,
105
105
  size: i = "md",
106
- state: a = "default",
106
+ state: o = "default",
107
107
  textClassName: r,
108
108
  type: c = "button",
109
109
  variant: m = "ghost",
@@ -113,12 +113,12 @@ function ee({
113
113
  "button",
114
114
  {
115
115
  type: c,
116
- className: Q({ className: u, size: i, state: a, variant: m }),
116
+ className: T({ className: u, size: i, state: o, variant: m }),
117
117
  ...y,
118
118
  "aria-label": l,
119
- children: T({
119
+ children: U({
120
120
  children: e,
121
- icon: o,
121
+ icon: a,
122
122
  iconClassName: t,
123
123
  iconPosition: s,
124
124
  size: i,
@@ -130,27 +130,27 @@ function ee({
130
130
  }
131
131
  function te({
132
132
  name: e,
133
- size: o = "md",
133
+ size: a = "md",
134
134
  className: t
135
135
  }) {
136
136
  return /* @__PURE__ */ n(
137
137
  N,
138
138
  {
139
139
  name: e,
140
- className: j(o, t)
140
+ className: j(a, t)
141
141
  }
142
142
  );
143
143
  }
144
- const U = /* @__PURE__ */ new Map([
144
+ const _ = /* @__PURE__ */ new Map([
145
145
  ["black", "/primary-badge-engine-logo-black.svg"],
146
146
  ["white", "/primary-badge-engine-logo-white.svg"],
147
147
  ["color", "/primary-badge-engine-logo-color.svg"]
148
148
  ]);
149
149
  function ne({
150
150
  variant: e = "color",
151
- className: o
151
+ className: a
152
152
  }) {
153
- const t = U.get(e);
153
+ const t = _.get(e);
154
154
  return t === void 0 ? null : /* @__PURE__ */ n(
155
155
  "img",
156
156
  {
@@ -158,16 +158,16 @@ function ne({
158
158
  width: 186,
159
159
  height: 36,
160
160
  alt: "Badge Engine",
161
- className: o
161
+ className: a
162
162
  }
163
163
  );
164
164
  }
165
165
  function re({
166
166
  count: e,
167
- limit: o,
167
+ limit: a = 10,
168
168
  pageParamKey: t = "page"
169
169
  }) {
170
- const s = I(), l = z(), u = L(), i = s.get(t), a = i ? Number.parseInt(i, 10) : Number.NaN, r = Number.isFinite(a) ? a : 1, c = Math.max(1, Math.ceil(e / o)), 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] : [
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] : [
171
171
  1,
172
172
  "ellipsis",
173
173
  r - 1,
@@ -226,35 +226,35 @@ function re({
226
226
  }
227
227
  function se({
228
228
  placeholder: e,
229
- className: o,
229
+ className: a,
230
230
  inputWidth: t,
231
231
  value: s,
232
232
  onChange: l,
233
233
  syncToUrl: u = !0,
234
234
  id: i = "search",
235
- paramKey: a = "s",
235
+ paramKey: o = "s",
236
236
  firstResultSelector: r,
237
237
  onEnter: c
238
238
  }) {
239
- const m = I(), y = z(), C = L(), $ = R(null), f = s !== void 0, [d, g] = F(
240
- f ? s : m.get(a)?.toString() ?? ""
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
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
- M(() => {
243
- !u || f || g(m.get(a)?.toString() ?? "");
244
- }, [f, a, m, u]);
242
+ O(() => {
243
+ !u || f || g(m.get(o)?.toString() ?? "");
244
+ }, [f, o, m, u]);
245
245
  const P = (v) => {
246
246
  if (!u) return;
247
247
  const p = new URLSearchParams(m.toString());
248
- v ? (p.set(a, v), p.delete("page")) : (p.delete(a), p.delete("page"));
248
+ v ? (p.set(o, v), p.delete("page")) : (p.delete(o), p.delete("page"));
249
249
  const B = p.toString();
250
250
  C.replace(B ? `${y}?${B}` : y);
251
- };
252
- return /* @__PURE__ */ h("form", { className: o ?? "", noValidate: !0, onSubmit: (v) => {
251
+ }, R = (v) => {
253
252
  if (v.preventDefault(), c?.(b), r && b.trim()) {
254
253
  const p = document.querySelector(r);
255
254
  p && p.focus();
256
255
  }
257
- }, children: [
256
+ };
257
+ return /* @__PURE__ */ h("form", { className: `search-field ${a ?? ""}`.trim(), noValidate: !0, onSubmit: R, children: [
258
258
  /* @__PURE__ */ n("label", { className: "sr-only", htmlFor: i, children: "Search" }),
259
259
  /* @__PURE__ */ h("div", { className: "relative max-w-full", style: { width: S }, children: [
260
260
  /* @__PURE__ */ n(
@@ -301,20 +301,20 @@ function se({
301
301
  ] })
302
302
  ] });
303
303
  }
304
- function ie({ columns: e, rows: o, rowKey: t }) {
305
- const s = O();
304
+ function ie({ columns: e, rows: a, rowKey: t }) {
305
+ const s = V();
306
306
  return /* @__PURE__ */ h("table", { className: "w-full table-auto border-y border-gray-2 text-gray-5", children: [
307
307
  /* @__PURE__ */ n("thead", { className: "font-bold", children: /* @__PURE__ */ n("tr", { children: e.map((l) => /* @__PURE__ */ n(
308
308
  "th",
309
309
  {
310
310
  id: `${s}-col-${l.key}`,
311
311
  scope: "col",
312
- className: `px-3 py-4 text-left ${l.headerClassName ?? ""}`.trim(),
312
+ className: `px-3 py-4 text-left leading-[23px] ${l.headerClassName ?? ""}`.trim(),
313
313
  children: l.header
314
314
  },
315
315
  l.key
316
316
  )) }) }),
317
- /* @__PURE__ */ n("tbody", { children: o.map((l, u) => /* @__PURE__ */ n("tr", { className: "border-t border-gray-2", children: e.map((i) => /* @__PURE__ */ n(
317
+ /* @__PURE__ */ n("tbody", { children: a.map((l, u) => /* @__PURE__ */ n("tr", { className: "border-t border-gray-2", children: e.map((i) => /* @__PURE__ */ n(
318
318
  "td",
319
319
  {
320
320
  headers: `${s}-col-${i.key}`,
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;}}@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";: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;}}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@digitalpromise/design",
3
3
  "private": false,
4
- "version": "4.9.0",
4
+ "version": "4.9.3",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "exports": {
@@ -15,7 +15,7 @@
15
15
  ],
16
16
  "devDependencies": {
17
17
  "@chromatic-com/storybook": "^5.1.2",
18
- "@digitalpromise/icons": "^2.6.1",
18
+ "@digitalpromise/icons": "^3.2.0",
19
19
  "@eslint/js": "^10.0.1",
20
20
  "@microsoft/api-extractor": "^7.58.2",
21
21
  "@storybook/addon-docs": "^10.3.5",