@studiolxd/brand 38.17.0 → 40.0.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 (141) hide show
  1. package/CHANGELOG.md +141 -0
  2. package/dist/_shared/brandmessagescontext.js +15 -0
  3. package/dist/_shared/calendargrid.js +42 -42
  4. package/dist/_shared/datepicker.js +41 -41
  5. package/dist/_shared/imagecropdialog.js +54 -54
  6. package/dist/_shared/tokens.js +4 -0
  7. package/dist/_types/atoms/StarRating/StarRating.d.ts +87 -30
  8. package/dist/_types/messages/BrandMessages.d.ts +26 -0
  9. package/dist/_types/messages/BrandMessagesContext.d.ts +21 -0
  10. package/dist/_types/messages/BrandMessagesProvider.d.ts +46 -0
  11. package/dist/_types/messages/index.d.ts +5 -0
  12. package/dist/_types/molecules/Card/Card.d.ts +12 -1
  13. package/dist/_types/molecules/ConfirmDialog/ConfirmDialog.d.ts +42 -2
  14. package/dist/_types/molecules/Pagination/Pagination.d.ts +40 -23
  15. package/dist/_types/organisms/DataTable/DataTable.d.ts +3 -2
  16. package/dist/accordion.js +26 -26
  17. package/dist/alert.js +26 -26
  18. package/dist/annotation-thread.js +1 -1
  19. package/dist/app-header.js +8 -8
  20. package/dist/app-launcher.js +34 -34
  21. package/dist/app-shell.js +14 -14
  22. package/dist/assistant-message.js +8 -8
  23. package/dist/async-multi-select-field.js +9 -9
  24. package/dist/async-multi-select.js +40 -40
  25. package/dist/async-select-field.js +9 -9
  26. package/dist/async-select.js +64 -64
  27. package/dist/avatar-upload.js +40 -40
  28. package/dist/avatar.js +5 -5
  29. package/dist/banner.js +9 -9
  30. package/dist/brand.css +11 -2
  31. package/dist/button.js +7 -7
  32. package/dist/calendar-planner.js +16 -16
  33. package/dist/calendar.js +38 -38
  34. package/dist/card.js +28 -29
  35. package/dist/carousel.js +19 -19
  36. package/dist/chart.js +137 -137
  37. package/dist/chat-shell.js +23 -23
  38. package/dist/checkbox-field.js +11 -11
  39. package/dist/checkbox.js +7 -7
  40. package/dist/close-button.js +6 -6
  41. package/dist/code-block.js +15 -15
  42. package/dist/code.js +5 -5
  43. package/dist/collapsible.js +1 -1
  44. package/dist/columns.js +7 -7
  45. package/dist/command-palette.js +14 -14
  46. package/dist/confirm-dialog.css +1 -1
  47. package/dist/confirm-dialog.js +65 -42
  48. package/dist/connector-auth-shell.js +9 -9
  49. package/dist/consent.js +23 -23
  50. package/dist/container.js +6 -6
  51. package/dist/conversation-list.js +19 -19
  52. package/dist/conversation-thread.js +15 -15
  53. package/dist/copy-button.js +9 -9
  54. package/dist/copyable-value.js +17 -17
  55. package/dist/data-table.js +29 -29
  56. package/dist/date-picker-field.js +9 -9
  57. package/dist/date-time-field.js +12 -12
  58. package/dist/description-list.js +12 -12
  59. package/dist/docs-search.js +1 -1
  60. package/dist/dots-button.js +7 -7
  61. package/dist/dropdown-field.js +13 -13
  62. package/dist/email.js +44 -44
  63. package/dist/error-text.js +4 -4
  64. package/dist/field-row.js +20 -20
  65. package/dist/figure.js +8 -8
  66. package/dist/file-upload-field.js +9 -9
  67. package/dist/file-upload.js +29 -29
  68. package/dist/filter-bar.js +10 -10
  69. package/dist/floating-dock.js +17 -17
  70. package/dist/form-field.js +43 -43
  71. package/dist/form.js +14 -14
  72. package/dist/heading.js +5 -5
  73. package/dist/input-field.js +20 -20
  74. package/dist/input-phone-field.js +9 -9
  75. package/dist/input-phone.js +19 -19
  76. package/dist/input.js +5 -5
  77. package/dist/kbd.js +5 -5
  78. package/dist/label.js +5 -5
  79. package/dist/link.js +7 -7
  80. package/dist/list.js +7 -7
  81. package/dist/menu-button.js +7 -7
  82. package/dist/message-bubble.js +5 -5
  83. package/dist/message-composer.js +13 -13
  84. package/dist/messages.js +12 -0
  85. package/dist/multi-select-field.js +9 -9
  86. package/dist/multi-select.js +52 -52
  87. package/dist/notification-button.js +8 -8
  88. package/dist/notification-panel.js +25 -25
  89. package/dist/number-input-field.js +9 -9
  90. package/dist/number-input.js +11 -11
  91. package/dist/otp-field.js +9 -9
  92. package/dist/otp-input.js +48 -48
  93. package/dist/pagination.js +92 -89
  94. package/dist/paragraph.js +5 -5
  95. package/dist/password-field.js +15 -15
  96. package/dist/prose.js +4 -4
  97. package/dist/public-page-shell.js +11 -11
  98. package/dist/radio-field.js +11 -11
  99. package/dist/radio-group.js +5 -5
  100. package/dist/radio.js +5 -5
  101. package/dist/scroll-area.js +11 -11
  102. package/dist/search-form.js +8 -8
  103. package/dist/select-field.js +9 -9
  104. package/dist/select.js +85 -85
  105. package/dist/separator.js +6 -6
  106. package/dist/sidebar.js +16 -16
  107. package/dist/site-header.js +14 -14
  108. package/dist/site-shell.js +6 -6
  109. package/dist/sparkline.js +9 -9
  110. package/dist/star-rating.css +1 -1
  111. package/dist/star-rating.js +55 -41
  112. package/dist/stat-tile.js +12 -12
  113. package/dist/steps.js +32 -32
  114. package/dist/switcher-field.js +13 -13
  115. package/dist/switcher.js +8 -8
  116. package/dist/table-of-contents.js +14 -14
  117. package/dist/tag.js +5 -5
  118. package/dist/text.js +7 -7
  119. package/dist/textarea-field.js +11 -11
  120. package/dist/textarea.js +5 -5
  121. package/dist/time-field.js +9 -9
  122. package/dist/time-select.js +17 -17
  123. package/dist/toaster.js +16 -16
  124. package/dist/toggle-group.js +7 -7
  125. package/dist/toggle.js +5 -5
  126. package/dist/tokens.css +11 -2
  127. package/dist/tooltip.js +16 -16
  128. package/dist/tree-view.js +41 -41
  129. package/dist/uptime-bars.js +34 -34
  130. package/dist/user-message.js +8 -8
  131. package/dist/visually-hidden.js +5 -5
  132. package/package.json +5 -1
  133. package/src/tokens/components/description-list.css +1 -1
  134. package/src/tokens/components/star-rating.css +5 -0
  135. package/src/tokens/molecules/confirm-dialog.css +1 -0
  136. package/src/tokens/scss/components/_description-list.scss +1 -1
  137. package/src/tokens/scss/components/_star-rating.scss +3 -0
  138. package/src/tokens/scss/molecules/_confirm-dialog.scss +1 -0
  139. package/src/tokens/surface-invert.css +2 -0
  140. package/src/tokens/surface-public.css +1 -0
  141. package/src/tokens/tokens.json +4 -0
package/dist/otp-input.js CHANGED
@@ -1,75 +1,75 @@
1
1
  'use client';
2
2
  import './otp-input.css';
3
3
  import { Input as e } from "./input.js";
4
- import { jsx as t, jsxs as n } from "react/jsx-runtime";
5
- import { forwardRef as r, useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
4
+ import { forwardRef as t, useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
5
+ import { jsx as o, jsxs as s } from "react/jsx-runtime";
6
6
  //#region src/stories/atoms/OtpInput/OtpInput.tsx
7
- var c = r(function({ length: r, value: c, defaultValue: l, onChange: u, onComplete: d, disabled: f, readOnly: p, error: m = !1, size: h = "md", describedBy: g, "aria-describedby": _, "aria-label": v, "aria-labelledby": y, groupLabel: b = "Código de verificación", id: x, name: S, onBlur: C, className: w, digitLabel: T = (e, t) => `Dígito ${e} de ${t}` }, E) {
8
- let D = c !== void 0, [O, k] = s(() => {
7
+ var c = t(function({ length: t, value: c, defaultValue: l, onChange: u, onComplete: d, disabled: f, readOnly: p, error: m = !1, size: h = "md", describedBy: g, "aria-describedby": _, "aria-label": v, "aria-labelledby": y, groupLabel: b = "Código de verificación", id: x, name: S, onBlur: C, className: w, digitLabel: T = (e, t) => `Dígito ${e} de ${t}` }, E) {
8
+ let D = c !== void 0, [O, k] = a(() => {
9
9
  let e = l ?? "";
10
- return Array.from({ length: r }, (t, n) => e[n] ?? "");
11
- }), A = o(null), j = D ? Array.from({ length: r }, (e, t) => c[t] ?? "") : O;
12
- a(() => {
10
+ return Array.from({ length: t }, (t, n) => e[n] ?? "");
11
+ }), A = i(null), j = D ? Array.from({ length: t }, (e, t) => c[t] ?? "") : O;
12
+ r(() => {
13
13
  if (D) return;
14
14
  let e = A.current?.closest("form");
15
15
  if (!e) return;
16
- let t = () => {
16
+ let n = () => {
17
17
  let e = l ?? "";
18
- k(Array.from({ length: r }, (t, n) => e[n] ?? ""));
18
+ k(Array.from({ length: t }, (t, n) => e[n] ?? ""));
19
19
  };
20
- return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
20
+ return e.addEventListener("reset", n), () => e.removeEventListener("reset", n);
21
21
  }, [
22
22
  D,
23
23
  l,
24
- r
24
+ t
25
25
  ]);
26
- let M = i((e) => {
26
+ let M = n((e) => {
27
27
  let t = A.current?.querySelectorAll("input");
28
28
  t?.[e] && t[e].focus();
29
- }, []), N = i((e) => {
29
+ }, []), N = n((e) => {
30
30
  D || k(e);
31
- let t = e.join("");
32
- u?.(t), e.length === r && e.every((e) => e !== "") && d?.(t);
31
+ let n = e.join("");
32
+ u?.(n), e.length === t && e.every((e) => e !== "") && d?.(n);
33
33
  }, [
34
34
  D,
35
- r,
35
+ t,
36
36
  u,
37
37
  d
38
- ]), P = i((e) => (t) => {
39
- let n = t.target.value.replace(/\D/g, "").slice(-1);
40
- if (!n) return;
38
+ ]), P = n((e) => (n) => {
39
+ let r = n.target.value.replace(/\D/g, "").slice(-1);
40
+ if (!r) return;
41
41
  let i = [...j];
42
- i[e] = n, N(i), e < r - 1 && M(e + 1);
42
+ i[e] = r, N(i), e < t - 1 && M(e + 1);
43
43
  }, [
44
44
  j,
45
- r,
45
+ t,
46
46
  M,
47
47
  N
48
- ]), F = i((e) => (t) => {
49
- if (t.key === "Backspace") {
50
- t.preventDefault();
51
- let n = [...j];
52
- n[e] === "" ? e > 0 && (n[e - 1] = "", N(n), M(e - 1)) : (n[e] = "", N(n));
53
- } else t.key === "ArrowLeft" ? (t.preventDefault(), e > 0 && M(e - 1)) : t.key === "ArrowRight" && (t.preventDefault(), e < r - 1 && M(e + 1));
48
+ ]), F = n((e) => (n) => {
49
+ if (n.key === "Backspace") {
50
+ n.preventDefault();
51
+ let t = [...j];
52
+ t[e] === "" ? e > 0 && (t[e - 1] = "", N(t), M(e - 1)) : (t[e] = "", N(t));
53
+ } else n.key === "ArrowLeft" ? (n.preventDefault(), e > 0 && M(e - 1)) : n.key === "ArrowRight" && (n.preventDefault(), e < t - 1 && M(e + 1));
54
54
  }, [
55
55
  j,
56
- r,
56
+ t,
57
57
  M,
58
58
  N
59
- ]), I = i((e) => (t) => {
60
- t.preventDefault();
61
- let n = t.clipboardData.getData("text").replace(/\D/g, "");
62
- if (!n) return;
59
+ ]), I = n((e) => (n) => {
60
+ n.preventDefault();
61
+ let r = n.clipboardData.getData("text").replace(/\D/g, "");
62
+ if (!r) return;
63
63
  let i = [...j], a = e;
64
- for (let t = 0; t < n.length && e + t < r; t++) i[e + t] = n[t], a = e + t;
65
- N(i), M(Math.min(a + 1, r - 1));
64
+ for (let n = 0; n < r.length && e + n < t; n++) i[e + n] = r[n], a = e + n;
65
+ N(i), M(Math.min(a + 1, t - 1));
66
66
  }, [
67
67
  j,
68
- r,
68
+ t,
69
69
  M,
70
70
  N
71
71
  ]);
72
- return /* @__PURE__ */ n("div", {
72
+ return /* @__PURE__ */ s("div", {
73
73
  ref: A,
74
74
  role: "group",
75
75
  "aria-label": y ? void 0 : v ?? b,
@@ -83,28 +83,28 @@ var c = r(function({ length: r, value: c, defaultValue: l, onChange: u, onComple
83
83
  f ? "otp-input--disabled" : "",
84
84
  w ?? ""
85
85
  ].filter(Boolean).join(" "),
86
- children: [Array.from({ length: r }, (n, i) => /* @__PURE__ */ t(e, {
86
+ children: [Array.from({ length: t }, (n, r) => /* @__PURE__ */ o(e, {
87
87
  className: "otp-input__cell",
88
- ref: i === 0 ? E : void 0,
89
- id: x ? `${x}-${i}` : void 0,
90
- name: S ? `${S}-${i}` : void 0,
88
+ ref: r === 0 ? E : void 0,
89
+ id: x ? `${x}-${r}` : void 0,
90
+ name: S ? `${S}-${r}` : void 0,
91
91
  type: "text",
92
92
  size: h,
93
93
  error: m,
94
94
  disabled: f,
95
95
  readOnly: p,
96
- "aria-describedby": i === 0 ? g ?? _ : void 0,
96
+ "aria-describedby": r === 0 ? g ?? _ : void 0,
97
97
  inputMode: "numeric",
98
98
  pattern: "\\d*",
99
99
  maxLength: 1,
100
- autoComplete: i === 0 ? "one-time-code" : "off",
101
- "aria-label": T(i + 1, r),
102
- value: j[i],
103
- onChange: P(i),
104
- onKeyDown: F(i),
105
- onPaste: I(i),
100
+ autoComplete: r === 0 ? "one-time-code" : "off",
101
+ "aria-label": T(r + 1, t),
102
+ value: j[r],
103
+ onChange: P(r),
104
+ onKeyDown: F(r),
105
+ onPaste: I(r),
106
106
  onBlur: C
107
- }, i)), S && /* @__PURE__ */ t("input", {
107
+ }, r)), S && /* @__PURE__ */ o("input", {
108
108
  type: "hidden",
109
109
  name: S,
110
110
  value: j.join("")
@@ -1,32 +1,35 @@
1
1
  'use client';
2
2
  import './pagination.css';
3
- import { Icon as e } from "./icon.js";
4
- import { Select as t } from "./select.js";
5
- import { jsx as n, jsxs as r } from "react/jsx-runtime";
3
+ import { n as e } from "./_shared/brandmessagescontext.js";
4
+ import { Icon as t } from "./icon.js";
5
+ import { Select as n } from "./select.js";
6
+ import { jsx as r, jsxs as i } from "react/jsx-runtime";
6
7
  //#region src/stories/molecules/Pagination/Pagination.tsx
7
- var i = [
8
- {
9
- label: "10",
10
- value: "10"
11
- },
12
- {
13
- label: "20",
14
- value: "20"
15
- },
16
- {
17
- label: "50",
18
- value: "50"
19
- },
20
- {
21
- label: "100",
22
- value: "100"
23
- },
24
- {
25
- label: "Todos",
26
- value: "all"
27
- }
28
- ];
29
- function a(e, t) {
8
+ function a(e) {
9
+ return [
10
+ {
11
+ label: "10",
12
+ value: "10"
13
+ },
14
+ {
15
+ label: "20",
16
+ value: "20"
17
+ },
18
+ {
19
+ label: "50",
20
+ value: "50"
21
+ },
22
+ {
23
+ label: "100",
24
+ value: "100"
25
+ },
26
+ {
27
+ label: e,
28
+ value: "all"
29
+ }
30
+ ];
31
+ }
32
+ function o(e, t) {
30
33
  return t <= 3 ? Array.from({ length: t }, (e, t) => t + 1) : e <= 3 ? [
31
34
  1,
32
35
  2,
@@ -45,21 +48,21 @@ function a(e, t) {
45
48
  "..."
46
49
  ];
47
50
  }
48
- function o({ mode: o = "pages", total: s = 0, pageCount: c, page: l = 1, pageSize: u = 10, hrefs: d, previousHref: f, nextHref: p, onPrevious: m, onNext: h, onPageChange: g, hrefBuilder: _, linkComponent: v, onPageSizeChange: y, pageSizeOptions: b = i, afterPageSize: x, showTotal: S = !1, size: C = "md", ariaLabel: w = "Paginación", pageLabel: T = (e) => `Página ${e}`, previousLabel: E = "Página anterior", nextLabel: D = "Página siguiente", pagesGroupLabel: O = "Páginas", pageSizeLabel: k = "Registros por página", totalLabel: A = (e) => `${e} resultados`, className: j }) {
49
- let M = _ ?? (d ? (e) => d[e] : void 0), N = v ?? "a";
50
- if (o === "cursor") {
51
- let t = C === "sm" ? "xs" : C === "lg" ? "md" : "sm", i = (r) => {
52
- let i = r === "prev" ? f : p, a = r === "prev" ? m : h, o = !i && !a, s = r === "prev" ? E : D, c = /* @__PURE__ */ n(e, {
51
+ function s({ mode: s = "pages", total: c = 0, pageCount: l, page: u = 1, pageSize: d = 10, hrefs: f, previousHref: p, nextHref: m, onPrevious: h, onNext: g, onPageChange: _, hrefBuilder: v, linkComponent: y, onPageSizeChange: b, pageSizeOptions: x, afterPageSize: S, showTotal: C = !1, size: w = "md", ariaLabel: T, pageLabel: E, previousLabel: D, nextLabel: O, pagesGroupLabel: k, pageSizeLabel: A, totalLabel: j, className: M }) {
52
+ let N = e("pagination"), P = v ?? (f ? (e) => f[e] : void 0), F = y ?? "a";
53
+ if (s === "cursor") {
54
+ let e = w === "sm" ? "xs" : w === "lg" ? "md" : "sm", n = (n) => {
55
+ let i = n === "prev" ? p : m, a = n === "prev" ? h : g, o = !i && !a, s = n === "prev" ? N("previous", D) : N("next", O), c = /* @__PURE__ */ r(t, {
53
56
  name: "chevron",
54
- size: t,
55
- className: r === "prev" ? "pagination__chevron--prev" : void 0
57
+ size: e,
58
+ className: n === "prev" ? "pagination__chevron--prev" : void 0
56
59
  });
57
- return i ? /* @__PURE__ */ n(N, {
60
+ return i ? /* @__PURE__ */ r(F, {
58
61
  href: i,
59
62
  className: "pagination__btn pagination__btn--nav",
60
63
  "aria-label": s,
61
64
  children: c
62
- }) : /* @__PURE__ */ n("button", {
65
+ }) : /* @__PURE__ */ r("button", {
63
66
  type: "button",
64
67
  className: "pagination__btn pagination__btn--nav",
65
68
  disabled: o,
@@ -68,111 +71,111 @@ function o({ mode: o = "pages", total: s = 0, pageCount: c, page: l = 1, pageSiz
68
71
  children: c
69
72
  });
70
73
  };
71
- return /* @__PURE__ */ n("nav", {
74
+ return /* @__PURE__ */ r("nav", {
72
75
  className: [
73
76
  "pagination",
74
- `pagination--${C}`,
75
- j
77
+ `pagination--${w}`,
78
+ M
76
79
  ].filter(Boolean).join(" "),
77
- "aria-label": w,
78
- children: /* @__PURE__ */ r("div", {
80
+ "aria-label": N("label", T),
81
+ children: /* @__PURE__ */ i("div", {
79
82
  className: "pagination__controls",
80
83
  role: "group",
81
- "aria-label": O,
82
- children: [i("prev"), i("next")]
84
+ "aria-label": N("pagesGroup", k),
85
+ children: [n("prev"), n("next")]
83
86
  })
84
87
  });
85
88
  }
86
- if (c === void 0 && s === 0 && !x) return null;
87
- let P = c ?? (u === "all" ? 1 : Math.ceil(s / u)), F = P > 1 ? a(l, P) : [];
88
- function I(e, t) {
89
- if (e === "...") return /* @__PURE__ */ n("span", {
89
+ if (l === void 0 && c === 0 && !S) return null;
90
+ let I = l ?? (d === "all" ? 1 : Math.ceil(c / d)), L = I > 1 ? o(u, I) : [];
91
+ function R(e, t) {
92
+ if (e === "...") return /* @__PURE__ */ r("span", {
90
93
  className: "pagination__ellipsis",
91
94
  "aria-hidden": "true",
92
95
  children: "…"
93
96
  }, `ellipsis-${t}`);
94
- let r = e === l, i = ["pagination__btn", r ? "pagination__btn--current" : ""].filter(Boolean).join(" ");
95
- return M && !r ? /* @__PURE__ */ n(N, {
96
- href: M(e),
97
+ let n = e === u, i = ["pagination__btn", n ? "pagination__btn--current" : ""].filter(Boolean).join(" ");
98
+ return P && !n ? /* @__PURE__ */ r(F, {
99
+ href: P(e),
97
100
  className: i,
98
- "aria-label": T(e),
99
- onClick: g ? (t) => {
100
- t.preventDefault(), g(e);
101
+ "aria-label": N("goToPage", E)(e),
102
+ onClick: _ ? (t) => {
103
+ t.preventDefault(), _(e);
101
104
  } : void 0,
102
105
  children: e
103
- }, e) : /* @__PURE__ */ n("button", {
106
+ }, e) : /* @__PURE__ */ r("button", {
104
107
  type: "button",
105
108
  className: i,
106
- "aria-current": r ? "page" : void 0,
107
- "aria-label": T(e),
108
- onClick: r ? void 0 : () => g?.(e),
109
+ "aria-current": n ? "page" : void 0,
110
+ "aria-label": N("goToPage", E)(e),
111
+ onClick: n ? void 0 : () => _?.(e),
109
112
  children: e
110
113
  }, e);
111
114
  }
112
- function L(t, r, i) {
113
- let a = r === "prev" ? E : D, o = /* @__PURE__ */ n(e, {
115
+ function z(e, n, i) {
116
+ let a = n === "prev" ? N("previous", D) : N("next", O), o = /* @__PURE__ */ r(t, {
114
117
  name: "chevron",
115
- size: C === "sm" ? "xs" : C === "lg" ? "md" : "sm",
116
- className: r === "prev" ? "pagination__chevron--prev" : void 0
118
+ size: w === "sm" ? "xs" : w === "lg" ? "md" : "sm",
119
+ className: n === "prev" ? "pagination__chevron--prev" : void 0
117
120
  });
118
- return M && !i ? /* @__PURE__ */ n(N, {
119
- href: M(t),
121
+ return P && !i ? /* @__PURE__ */ r(F, {
122
+ href: P(e),
120
123
  className: "pagination__btn pagination__btn--nav",
121
124
  "aria-label": a,
122
- onClick: g ? (e) => {
123
- e.preventDefault(), g(t);
125
+ onClick: _ ? (t) => {
126
+ t.preventDefault(), _(e);
124
127
  } : void 0,
125
128
  children: o
126
- }) : /* @__PURE__ */ n("button", {
129
+ }) : /* @__PURE__ */ r("button", {
127
130
  type: "button",
128
131
  className: "pagination__btn pagination__btn--nav",
129
132
  disabled: i,
130
133
  "aria-label": a,
131
- onClick: () => g?.(t),
134
+ onClick: () => _?.(e),
132
135
  children: o
133
136
  });
134
137
  }
135
- let R = S || !!y || !!x;
136
- return /* @__PURE__ */ r("nav", {
138
+ let B = C || !!b || !!S;
139
+ return /* @__PURE__ */ i("nav", {
137
140
  className: [
138
141
  "pagination",
139
- `pagination--${C}`,
140
- j
142
+ `pagination--${w}`,
143
+ M
141
144
  ].filter(Boolean).join(" "),
142
- "aria-label": w,
143
- children: [R && /* @__PURE__ */ r("div", {
145
+ "aria-label": N("label", T),
146
+ children: [B && /* @__PURE__ */ i("div", {
144
147
  className: "pagination__meta",
145
148
  children: [
146
- S && /* @__PURE__ */ n("span", {
149
+ C && /* @__PURE__ */ r("span", {
147
150
  className: "pagination__summary",
148
- children: A(s)
151
+ children: N("total", j)(c)
149
152
  }),
150
- y && /* @__PURE__ */ n("div", {
153
+ b && /* @__PURE__ */ r("div", {
151
154
  className: "pagination__size-selector",
152
- children: /* @__PURE__ */ n(t, {
153
- options: b,
154
- value: u === "all" ? "all" : String(u),
155
- onValueChange: y,
156
- "aria-label": k,
157
- size: C
155
+ children: /* @__PURE__ */ r(n, {
156
+ options: x ?? a(N("allOption")),
157
+ value: d === "all" ? "all" : String(d),
158
+ onValueChange: b,
159
+ "aria-label": N("perPage", A),
160
+ size: w
158
161
  })
159
162
  }),
160
- x && /* @__PURE__ */ n("div", {
163
+ S && /* @__PURE__ */ r("div", {
161
164
  className: "pagination__after-page-size",
162
- children: x
165
+ children: S
163
166
  })
164
167
  ]
165
- }), P > 1 && /* @__PURE__ */ r("div", {
168
+ }), I > 1 && /* @__PURE__ */ i("div", {
166
169
  className: "pagination__controls",
167
170
  role: "group",
168
- "aria-label": O,
171
+ "aria-label": N("pagesGroup", k),
169
172
  children: [
170
- L(l - 1, "prev", l <= 1),
171
- F.map((e, t) => I(e, t)),
172
- L(l + 1, "next", l >= P)
173
+ z(u - 1, "prev", u <= 1),
174
+ L.map((e, t) => R(e, t)),
175
+ z(u + 1, "next", u >= I)
173
176
  ]
174
177
  })]
175
178
  });
176
179
  }
177
180
  //#endregion
178
- export { o as Pagination };
181
+ export { s as Pagination };
package/dist/paragraph.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import './paragraph.css';
2
- import { jsx as e } from "react/jsx-runtime";
3
- import { forwardRef as t } from "react";
2
+ import { forwardRef as e } from "react";
3
+ import { jsx as t } from "react/jsx-runtime";
4
4
  //#region src/stories/atoms/Paragraph/Paragraph.tsx
5
- var n = t(function({ size: t = "default", className: n, children: r, ...i }, a) {
6
- return /* @__PURE__ */ e("p", {
5
+ var n = e(function({ size: e = "default", className: n, children: r, ...i }, a) {
6
+ return /* @__PURE__ */ t("p", {
7
7
  ref: a,
8
8
  className: [
9
9
  "paragraph",
10
- t === "default" ? "" : `paragraph--${t}`,
10
+ e === "default" ? "" : `paragraph--${e}`,
11
11
  n
12
12
  ].filter(Boolean).join(" "),
13
13
  ...i,
@@ -6,55 +6,55 @@ import { n } from "./_shared/form-size.js";
6
6
  import { ErrorText as r } from "./error-text.js";
7
7
  import { Input as i } from "./input.js";
8
8
  import { Label as a } from "./label.js";
9
- import { jsx as o, jsxs as s } from "react/jsx-runtime";
10
- import { forwardRef as c, useId as l, useState as u } from "react";
9
+ import { forwardRef as o, useId as s, useState as c } from "react";
10
+ import { jsx as l, jsxs as u } from "react/jsx-runtime";
11
11
  //#region src/stories/molecules/PasswordField/PasswordField.tsx
12
- var d = c(function({ label: c, labelHidden: d = !0, error: f = !1, errorMessage: p, helperText: m, action: h, size: g, showPasswordLabel: _ = "Mostrar contraseña", hidePasswordLabel: v = "Ocultar contraseña", className: y, id: b, disabled: x, placeholder: S, ...C }, w) {
13
- let T = n(g), E = l(), D = b ?? E, [O, k] = u(!1), A = p ? `${D}-error` : void 0, j = m ? `${D}-helper` : void 0, M = [A, j].filter(Boolean).join(" ") || void 0;
14
- return /* @__PURE__ */ s("div", {
12
+ var d = o(function({ label: o, labelHidden: d = !0, error: f = !1, errorMessage: p, helperText: m, action: h, size: g, showPasswordLabel: _ = "Mostrar contraseña", hidePasswordLabel: v = "Ocultar contraseña", className: y, id: b, disabled: x, placeholder: S, ...C }, w) {
13
+ let T = n(g), E = s(), D = b ?? E, [O, k] = c(!1), A = p ? `${D}-error` : void 0, j = m ? `${D}-helper` : void 0, M = [A, j].filter(Boolean).join(" ") || void 0;
14
+ return /* @__PURE__ */ u("div", {
15
15
  className: ["password-field", y ?? ""].filter(Boolean).join(" "),
16
16
  children: [
17
- c && /* @__PURE__ */ o(a, {
17
+ o && /* @__PURE__ */ l(a, {
18
18
  htmlFor: D,
19
19
  hidden: d,
20
20
  size: T,
21
- children: c
21
+ children: o
22
22
  }),
23
- /* @__PURE__ */ s("div", {
23
+ /* @__PURE__ */ u("div", {
24
24
  className: ["password-field__wrapper", T === "md" ? "" : `password-field__wrapper--${T}`].filter(Boolean).join(" "),
25
- children: [/* @__PURE__ */ o(i, {
25
+ children: [/* @__PURE__ */ l(i, {
26
26
  ref: w,
27
27
  id: D,
28
28
  size: T,
29
29
  error: f || !!p,
30
- placeholder: S ?? (c && d ? c : void 0),
30
+ placeholder: S ?? (o && d ? o : void 0),
31
31
  "aria-describedby": M,
32
32
  ...C,
33
33
  type: O ? "text" : "password",
34
34
  disabled: x
35
- }), /* @__PURE__ */ s("button", {
35
+ }), /* @__PURE__ */ u("button", {
36
36
  type: "button",
37
37
  className: "password-field__toggle",
38
38
  onClick: () => k((e) => !e),
39
39
  disabled: x,
40
40
  "aria-controls": D,
41
41
  "aria-pressed": O,
42
- children: [/* @__PURE__ */ o(t, { children: O ? v : _ }), /* @__PURE__ */ o(e, {
42
+ children: [/* @__PURE__ */ l(t, { children: O ? v : _ }), /* @__PURE__ */ l(e, {
43
43
  name: O ? "eye-off" : "eye",
44
44
  className: "password-field__icon"
45
45
  })]
46
46
  })]
47
47
  }),
48
- p && /* @__PURE__ */ o(r, {
48
+ p && /* @__PURE__ */ l(r, {
49
49
  id: A,
50
50
  children: p
51
51
  }),
52
- m && /* @__PURE__ */ o("span", {
52
+ m && /* @__PURE__ */ l("span", {
53
53
  id: j,
54
54
  className: "password-field__helper",
55
55
  children: m
56
56
  }),
57
- h && /* @__PURE__ */ o("div", {
57
+ h && /* @__PURE__ */ l("div", {
58
58
  className: "password-field__action",
59
59
  children: h
60
60
  })
package/dist/prose.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import './prose.css';
2
- import { jsx as e } from "react/jsx-runtime";
3
- import { forwardRef as t } from "react";
2
+ import { forwardRef as e } from "react";
3
+ import { jsx as t } from "react/jsx-runtime";
4
4
  //#region src/stories/molecules/Prose/Prose.tsx
5
- var n = t(function({ as: t = "div", size: n = "md", measure: r = !0, className: i, children: a, ...o }, s) {
6
- return /* @__PURE__ */ e(t, {
5
+ var n = e(function({ as: e = "div", size: n = "md", measure: r = !0, className: i, children: a, ...o }, s) {
6
+ return /* @__PURE__ */ t(e, {
7
7
  ref: s,
8
8
  className: [
9
9
  "prose",
@@ -3,30 +3,30 @@ import './public-page-shell.css';
3
3
  import { Container as e } from "./container.js";
4
4
  import { ErrorBoundary as t } from "./error-boundary.js";
5
5
  import { SiteShell as n } from "./site-shell.js";
6
- import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
7
- import { forwardRef as o } from "react";
6
+ import { forwardRef as r } from "react";
7
+ import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
8
8
  //#region src/stories/templates/PublicPageShell/PublicPageShell.tsx
9
- var s = o(function({ children: o, header: s, footer: c, preferences: l, preferencesLabel: u = "Preferencias", id: d = "main-content", shell: f = !0 }, p) {
10
- if (!f) return /* @__PURE__ */ i(r, { children: o });
11
- let m = l && /* @__PURE__ */ i(e, {
9
+ var s = r(function({ children: r, header: s, footer: c, preferences: l, preferencesLabel: u = "Preferencias", id: d = "main-content", shell: f = !0 }, p) {
10
+ if (!f) return /* @__PURE__ */ a(i, { children: r });
11
+ let m = l && /* @__PURE__ */ a(e, {
12
12
  as: "section",
13
13
  className: "public-page-shell__preferences",
14
14
  "aria-label": u,
15
- children: /* @__PURE__ */ i("div", {
15
+ children: /* @__PURE__ */ a("div", {
16
16
  className: "public-page-shell__preferences-row",
17
17
  children: l
18
18
  })
19
19
  });
20
- return /* @__PURE__ */ i(n, {
20
+ return /* @__PURE__ */ a(n, {
21
21
  ref: p,
22
- header: s && /* @__PURE__ */ i(t, { children: s }),
23
- footer: (m || c) && /* @__PURE__ */ a(r, { children: [m && /* @__PURE__ */ i(t, { children: m }), c && /* @__PURE__ */ i(t, { children: c })] }),
24
- children: /* @__PURE__ */ i(e, {
22
+ header: s && /* @__PURE__ */ a(t, { children: s }),
23
+ footer: (m || c) && /* @__PURE__ */ o(i, { children: [m && /* @__PURE__ */ a(t, { children: m }), c && /* @__PURE__ */ a(t, { children: c })] }),
24
+ children: /* @__PURE__ */ a(e, {
25
25
  as: "main",
26
26
  id: d,
27
27
  tabIndex: -1,
28
28
  space: "xl",
29
- children: o
29
+ children: r
30
30
  })
31
31
  });
32
32
  });
@@ -4,12 +4,12 @@ import { n as e } from "./_shared/form-size.js";
4
4
  import { n as t } from "./_shared/radiogroupcontext.js";
5
5
  import { Radio as n } from "./radio.js";
6
6
  import { ErrorText as r } from "./error-text.js";
7
- import { jsx as i, jsxs as a } from "react/jsx-runtime";
8
- import { forwardRef as o, useId as s } from "react";
7
+ import { forwardRef as i, useId as a } from "react";
8
+ import { jsx as o, jsxs as s } from "react/jsx-runtime";
9
9
  //#region src/stories/molecules/RadioField/RadioField.tsx
10
- var c = o(function({ label: o, id: c, size: l, disabled: u, error: d = !1, errorMessage: f, helperText: p, className: m, ...h }, g) {
11
- let _ = t(), v = e(l ?? _?.size), y = s(), b = c ?? y, x = f ? `${b}-error` : void 0, S = p ? `${b}-helper` : void 0, C = [x, S].filter(Boolean).join(" ") || void 0, w = d || !!f || (_?.error ?? !1), T = u ?? _?.disabled;
12
- return /* @__PURE__ */ a("div", {
10
+ var c = i(function({ label: i, id: c, size: l, disabled: u, error: d = !1, errorMessage: f, helperText: p, className: m, ...h }, g) {
11
+ let _ = t(), v = e(l ?? _?.size), y = a(), b = c ?? y, x = f ? `${b}-error` : void 0, S = p ? `${b}-helper` : void 0, C = [x, S].filter(Boolean).join(" ") || void 0, w = d || !!f || (_?.error ?? !1), T = u ?? _?.disabled;
12
+ return /* @__PURE__ */ s("div", {
13
13
  className: [
14
14
  "radio-field",
15
15
  v === "md" ? "" : `radio-field--${v}`,
@@ -17,10 +17,10 @@ var c = o(function({ label: o, id: c, size: l, disabled: u, error: d = !1, error
17
17
  m
18
18
  ].filter(Boolean).join(" "),
19
19
  children: [
20
- /* @__PURE__ */ a("label", {
20
+ /* @__PURE__ */ s("label", {
21
21
  className: "radio-field__control",
22
22
  htmlFor: b,
23
- children: [/* @__PURE__ */ i(n, {
23
+ children: [/* @__PURE__ */ o(n, {
24
24
  ref: g,
25
25
  ...h,
26
26
  id: b,
@@ -28,16 +28,16 @@ var c = o(function({ label: o, id: c, size: l, disabled: u, error: d = !1, error
28
28
  disabled: T,
29
29
  error: w,
30
30
  "aria-describedby": C
31
- }), /* @__PURE__ */ i("span", {
31
+ }), /* @__PURE__ */ o("span", {
32
32
  className: "radio-field__label",
33
- children: o
33
+ children: i
34
34
  })]
35
35
  }),
36
- f && /* @__PURE__ */ i(r, {
36
+ f && /* @__PURE__ */ o(r, {
37
37
  id: x,
38
38
  children: f
39
39
  }),
40
- p && /* @__PURE__ */ i("span", {
40
+ p && /* @__PURE__ */ o("span", {
41
41
  id: S,
42
42
  className: "radio-field__helper",
43
43
  children: p