@marigold/components 17.1.0 → 17.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,54 +3,96 @@ import { cn, createWidthVar, isFraction, useClassNames } from "@marigold/system"
3
3
  import { Children, createContext, forwardRef, isValidElement, useContext, useState } from "react";
4
4
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
5
5
  import { useLocalizedStringFormatter } from "@react-aria/i18n";
6
- import { useId } from "@react-aria/utils";
6
+ import { useId as useId$1 } from "@react-aria/utils";
7
7
 
8
8
  //#region src/intl/messages.ts
9
9
  const intlMessages = {
10
10
  "de-DE": {
11
+ actionsAvailable: "Aktionen verfügbar.",
12
+ appNavigation: "App-Navigation",
13
+ back: "Zurück",
14
+ backTo: (vars) => `Zurück zu ${vars?.label}`,
15
+ allItemsSelected: "Alle Elemente ausgewählt",
11
16
  bulkActionsAriaLabel: "Massenaktionen",
12
17
  cancel: "Abbrechen",
13
- close: "Schließen",
18
+ clearSearch: "Suche zurücksetzen",
14
19
  clearSelectionAriaLabel: "Auswahl löschen",
20
+ close: "Schließen",
21
+ closeNavigation: "Navigation schließen",
22
+ dismissDrawer: "Seitenleiste schließen",
15
23
  dropZoneLabel: "Dateien hierher ziehen",
16
24
  edit: "Bearbeiten",
17
25
  editCell: "Zelle bearbeiten",
18
26
  help: "Hilfe",
27
+ globalNavigation: "Globale Navigation",
28
+ globalNavigationUtilities: "Hilfsfunktionen",
19
29
  hiddenBreadcrumbs: "Diese Breadcrumbs sind ausgeblendet",
30
+ hiddenPages: "Diese Seiten sind ausgeblendet",
20
31
  items: "Elemente",
21
32
  loadingMessage: "Lade...",
22
33
  moreInfo: "Mehr Informationen",
23
34
  noResultsFound: "Kein Ergebnis gefunden",
24
- save: "Speichern",
35
+ pageNext: "Nächste Seite",
36
+ pageOfTotal: (vars) => `Seite ${vars?.current} von ${vars?.total}`,
37
+ pagePrevious: "Vorherige Seite",
25
38
  removeAll: "Alle entfernen",
26
39
  removeFile: "Datei entfernen",
40
+ save: "Speichern",
41
+ search: "Suche",
42
+ selectedAll: "Alles ausgewählt",
43
+ sidebar: "Seitenleiste",
44
+ selectedCount: (vars) => `${vars?.count} ausgewählt`,
45
+ selectedItems: "Ausgewählte Elemente",
27
46
  showLess: "Weniger anzeigen",
28
- showLessCount: "{count} weniger anzeigen",
47
+ showLessCount: (vars) => `${vars?.count} weniger anzeigen`,
29
48
  showMore: "Mehr anzeigen",
30
- showMoreCount: "{count} weitere anzeigen",
49
+ showMoreCount: (vars) => `${vars?.count} weitere anzeigen`,
50
+ toggleNavigation: "Navigation umschalten",
51
+ toggleNavigationTooltip: (vars) => `Navigation ein-/ausblenden (${vars?.shortcut})`,
31
52
  uploadLabel: "Hochladen"
32
53
  },
33
54
  "en-US": {
55
+ actionsAvailable: "Actions available.",
56
+ appNavigation: "App navigation",
57
+ back: "Back",
58
+ backTo: (vars) => `Back to ${vars?.label}`,
59
+ allItemsSelected: "All items selected",
34
60
  bulkActionsAriaLabel: "Bulk Actions",
35
61
  cancel: "Cancel",
36
- close: "Close",
62
+ clearSearch: "Clear search",
37
63
  clearSelectionAriaLabel: "Clear selection",
64
+ close: "Close",
65
+ closeNavigation: "Close navigation",
66
+ dismissDrawer: "Dismiss drawer",
38
67
  dropZoneLabel: "Drop files here",
39
68
  edit: "Edit",
40
69
  editCell: "Edit cell",
41
70
  help: "Help",
71
+ globalNavigation: "Global navigation",
72
+ globalNavigationUtilities: "Utilities",
42
73
  hiddenBreadcrumbs: "These breadcrumbs are hidden",
74
+ hiddenPages: "These pages are hidden",
43
75
  items: "Items",
44
76
  loadingMessage: "Loading...",
45
77
  moreInfo: "More information",
46
78
  noResultsFound: "No result found",
47
- save: "Save",
79
+ pageNext: "Next page",
80
+ pageOfTotal: (vars) => `Page ${vars?.current} of ${vars?.total}`,
81
+ pagePrevious: "Previous page",
48
82
  removeAll: "Remove all",
49
83
  removeFile: "Remove file",
84
+ save: "Save",
85
+ search: "Search",
86
+ selectedAll: "All items selected",
87
+ sidebar: "Sidebar",
88
+ selectedCount: (vars) => `${vars?.count} selected`,
89
+ selectedItems: "Selected items",
50
90
  showLess: "Show less",
51
- showLessCount: "Show {count} less",
91
+ showLessCount: (vars) => `Show ${vars?.count} less`,
52
92
  showMore: "Show more",
53
- showMoreCount: "Show {count} more",
93
+ showMoreCount: (vars) => `Show ${vars?.count} more`,
94
+ toggleNavigation: "Toggle navigation",
95
+ toggleNavigationTooltip: (vars) => `Toggle navigation (${vars?.shortcut})`,
54
96
  uploadLabel: "Upload"
55
97
  }
56
98
  };
@@ -87,7 +129,7 @@ const HelpText = ({ variant, size, description, errorMessage, ...props }) => {
87
129
  const ctx = useContext(FieldErrorContext);
88
130
  if (!description && !ctx?.isInvalid) return null;
89
131
  return /* @__PURE__ */ jsxs("div", {
90
- className: cn(classNames.container),
132
+ className: cn("in-field:mt-1", classNames.container),
91
133
  children: [/* @__PURE__ */ jsx(FieldError, {
92
134
  ...props,
93
135
  className: "flex flex-col",
@@ -125,7 +167,7 @@ const _Label = ({ size, variant, children, ...props }) => {
125
167
  });
126
168
  return /* @__PURE__ */ jsx(Label, {
127
169
  ...props,
128
- className: cn(className, "inline-flex"),
170
+ className: cn(className, "in-field:mb-1.5 inline-flex"),
129
171
  children
130
172
  });
131
173
  };
@@ -134,14 +176,14 @@ const _Label = ({ size, variant, children, ...props }) => {
134
176
  //#region src/FieldBase/FieldBase.tsx
135
177
  const fixedForwardRef = forwardRef;
136
178
  const _FieldBase = (props, ref) => {
137
- const { as: Component$1 = "div", children, label, size, variant, width: width$1, description, errorMessage, className, ...rest } = props;
179
+ const { as: Component = "div", children, label, size, variant, width, description, errorMessage, className, ...rest } = props;
138
180
  const classNames = useClassNames({
139
181
  component: "Field",
140
182
  variant,
141
183
  size
142
184
  });
143
- const isFractionWidth = width$1 ? isFraction(`${width$1}`) : false;
144
- return /* @__PURE__ */ jsxs(Component$1, {
185
+ const isFractionWidth = width ? isFraction(`${width}`) : false;
186
+ return /* @__PURE__ */ jsxs(Component, {
145
187
  ref,
146
188
  className: cn(
147
189
  "group/field flex min-w-0 flex-col",
@@ -151,13 +193,13 @@ const _FieldBase = (props, ref) => {
151
193
  * - For fraction widths (e.g., "1/2", "2/3"): Use the corresponding Tailwind class
152
194
  * (e.g., `w-1/2`) which allows the field to properly respond to its container's width
153
195
  */
154
- width$1 && !isFractionWidth ? "w-auto" : `w-(--container-width)`,
196
+ width && !isFractionWidth ? "w-auto" : `w-(--container-width)`,
155
197
  classNames,
156
198
  className
157
199
  ),
158
200
  style: {
159
- ...createWidthVar("container-width", width$1 ? `${width$1}` : "full"),
160
- ...createWidthVar("field-width", width$1 && !isFractionWidth ? `${width$1}` : "full")
201
+ ...createWidthVar("container-width", width ? `${width}` : "full"),
202
+ ...createWidthVar("field-width", width && !isFractionWidth ? `${width}` : "full")
161
203
  },
162
204
  "data-required": props.isRequired ? true : void 0,
163
205
  "data-error": props.isInvalid ? true : void 0,
@@ -281,7 +323,7 @@ const More = ({ children, defaultExpanded = false, unstyled = true, showCount =
281
323
  ...props,
282
324
  children: [/* @__PURE__ */ jsx(Collapsible.Content, { children }), /* @__PURE__ */ jsx(Collapsible.Trigger, {
283
325
  onPress: () => setIsExpanded(!isExpanded),
284
- children: isExpanded ? stringFormatter.format(showCount ? "showLessCount" : "showLess").replace("{count}", count) : stringFormatter.format(showCount ? "showMoreCount" : "showMore").replace("{count}", count)
326
+ children: isExpanded ? stringFormatter.format(showCount ? "showLessCount" : "showLess", { count }) : stringFormatter.format(showCount ? "showMoreCount" : "showMore", { count })
285
327
  })]
286
328
  });
287
329
  };
@@ -310,7 +352,7 @@ const CollapsibleGroup = ({ children }) => {
310
352
  children
311
353
  });
312
354
  };
313
- const _CheckboxGroup = ({ children, variant, size, required, disabled, readOnly, error, width: width$1, orientation = "vertical", collapseAt, ...rest }) => {
355
+ const _CheckboxGroup = ({ children, variant, size, required, disabled, readOnly, error, width, orientation = "vertical", collapseAt, ...rest }) => {
314
356
  const classNames = useClassNames({
315
357
  component: "Checkbox",
316
358
  variant,
@@ -328,7 +370,7 @@ const _CheckboxGroup = ({ children, variant, size, required, disabled, readOnly,
328
370
  const [visibleChildren, collapsedChildren] = splitChildren(children, collapseAt);
329
371
  return /* @__PURE__ */ jsx(FieldBase, {
330
372
  as: CheckboxGroup,
331
- width: width$1,
373
+ width,
332
374
  ...props,
333
375
  children: /* @__PURE__ */ jsx("div", {
334
376
  role: "presentation",
@@ -336,7 +378,7 @@ const _CheckboxGroup = ({ children, variant, size, required, disabled, readOnly,
336
378
  className: cn(classNames.group, "group/checkboxgroup flex items-start", orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"),
337
379
  children: /* @__PURE__ */ jsxs(CheckboxGroupContext.Provider, {
338
380
  value: {
339
- width: width$1,
381
+ width,
340
382
  variant,
341
383
  size
342
384
  },
@@ -367,7 +409,7 @@ const Minus = ({ size = 24, className, ...props }) => /* @__PURE__ */ jsx("svg",
367
409
  //#region src/Checkbox/Checkbox.tsx
368
410
  const Field = ({ description, children }) => {
369
411
  const className = useClassNames({ component: "Field" });
370
- const descriptionId = useId();
412
+ const descriptionId = useId$1();
371
413
  if (!description) return children;
372
414
  return /* @__PURE__ */ jsx("div", {
373
415
  className,
@@ -1,57 +1,99 @@
1
1
  const require_index = require('./index.cjs');
2
2
  let react_aria_components = require("react-aria-components");
3
- let __marigold_system = require("@marigold/system");
3
+ let _marigold_system = require("@marigold/system");
4
4
  let react = require("react");
5
5
  let react_jsx_runtime = require("react/jsx-runtime");
6
- let __react_aria_i18n = require("@react-aria/i18n");
7
- let __react_aria_utils = require("@react-aria/utils");
6
+ let _react_aria_i18n = require("@react-aria/i18n");
7
+ let _react_aria_utils = require("@react-aria/utils");
8
8
 
9
9
  //#region src/intl/messages.ts
10
10
  const intlMessages = {
11
11
  "de-DE": {
12
+ actionsAvailable: "Aktionen verfügbar.",
13
+ appNavigation: "App-Navigation",
14
+ back: "Zurück",
15
+ backTo: (vars) => `Zurück zu ${vars?.label}`,
16
+ allItemsSelected: "Alle Elemente ausgewählt",
12
17
  bulkActionsAriaLabel: "Massenaktionen",
13
18
  cancel: "Abbrechen",
14
- close: "Schließen",
19
+ clearSearch: "Suche zurücksetzen",
15
20
  clearSelectionAriaLabel: "Auswahl löschen",
21
+ close: "Schließen",
22
+ closeNavigation: "Navigation schließen",
23
+ dismissDrawer: "Seitenleiste schließen",
16
24
  dropZoneLabel: "Dateien hierher ziehen",
17
25
  edit: "Bearbeiten",
18
26
  editCell: "Zelle bearbeiten",
19
27
  help: "Hilfe",
28
+ globalNavigation: "Globale Navigation",
29
+ globalNavigationUtilities: "Hilfsfunktionen",
20
30
  hiddenBreadcrumbs: "Diese Breadcrumbs sind ausgeblendet",
31
+ hiddenPages: "Diese Seiten sind ausgeblendet",
21
32
  items: "Elemente",
22
33
  loadingMessage: "Lade...",
23
34
  moreInfo: "Mehr Informationen",
24
35
  noResultsFound: "Kein Ergebnis gefunden",
25
- save: "Speichern",
36
+ pageNext: "Nächste Seite",
37
+ pageOfTotal: (vars) => `Seite ${vars?.current} von ${vars?.total}`,
38
+ pagePrevious: "Vorherige Seite",
26
39
  removeAll: "Alle entfernen",
27
40
  removeFile: "Datei entfernen",
41
+ save: "Speichern",
42
+ search: "Suche",
43
+ selectedAll: "Alles ausgewählt",
44
+ sidebar: "Seitenleiste",
45
+ selectedCount: (vars) => `${vars?.count} ausgewählt`,
46
+ selectedItems: "Ausgewählte Elemente",
28
47
  showLess: "Weniger anzeigen",
29
- showLessCount: "{count} weniger anzeigen",
48
+ showLessCount: (vars) => `${vars?.count} weniger anzeigen`,
30
49
  showMore: "Mehr anzeigen",
31
- showMoreCount: "{count} weitere anzeigen",
50
+ showMoreCount: (vars) => `${vars?.count} weitere anzeigen`,
51
+ toggleNavigation: "Navigation umschalten",
52
+ toggleNavigationTooltip: (vars) => `Navigation ein-/ausblenden (${vars?.shortcut})`,
32
53
  uploadLabel: "Hochladen"
33
54
  },
34
55
  "en-US": {
56
+ actionsAvailable: "Actions available.",
57
+ appNavigation: "App navigation",
58
+ back: "Back",
59
+ backTo: (vars) => `Back to ${vars?.label}`,
60
+ allItemsSelected: "All items selected",
35
61
  bulkActionsAriaLabel: "Bulk Actions",
36
62
  cancel: "Cancel",
37
- close: "Close",
63
+ clearSearch: "Clear search",
38
64
  clearSelectionAriaLabel: "Clear selection",
65
+ close: "Close",
66
+ closeNavigation: "Close navigation",
67
+ dismissDrawer: "Dismiss drawer",
39
68
  dropZoneLabel: "Drop files here",
40
69
  edit: "Edit",
41
70
  editCell: "Edit cell",
42
71
  help: "Help",
72
+ globalNavigation: "Global navigation",
73
+ globalNavigationUtilities: "Utilities",
43
74
  hiddenBreadcrumbs: "These breadcrumbs are hidden",
75
+ hiddenPages: "These pages are hidden",
44
76
  items: "Items",
45
77
  loadingMessage: "Loading...",
46
78
  moreInfo: "More information",
47
79
  noResultsFound: "No result found",
48
- save: "Save",
80
+ pageNext: "Next page",
81
+ pageOfTotal: (vars) => `Page ${vars?.current} of ${vars?.total}`,
82
+ pagePrevious: "Previous page",
49
83
  removeAll: "Remove all",
50
84
  removeFile: "Remove file",
85
+ save: "Save",
86
+ search: "Search",
87
+ selectedAll: "All items selected",
88
+ sidebar: "Sidebar",
89
+ selectedCount: (vars) => `${vars?.count} selected`,
90
+ selectedItems: "Selected items",
51
91
  showLess: "Show less",
52
- showLessCount: "Show {count} less",
92
+ showLessCount: (vars) => `Show ${vars?.count} less`,
53
93
  showMore: "Show more",
54
- showMoreCount: "Show {count} more",
94
+ showMoreCount: (vars) => `Show ${vars?.count} more`,
95
+ toggleNavigation: "Toggle navigation",
96
+ toggleNavigationTooltip: (vars) => `Toggle navigation (${vars?.shortcut})`,
55
97
  uploadLabel: "Upload"
56
98
  }
57
99
  };
@@ -68,7 +110,7 @@ const TriangleAlert = ({ size = 24, className, ...props }) => /* @__PURE__ */ (0
68
110
  strokeWidth: "2",
69
111
  strokeLinecap: "round",
70
112
  strokeLinejoin: "round",
71
- className: (0, __marigold_system.cn)("shrink-0", className),
113
+ className: (0, _marigold_system.cn)("shrink-0", className),
72
114
  ...props,
73
115
  children: [
74
116
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
@@ -80,7 +122,7 @@ const TriangleAlert = ({ size = 24, className, ...props }) => /* @__PURE__ */ (0
80
122
  //#endregion
81
123
  //#region src/HelpText/HelpText.tsx
82
124
  const HelpText = ({ variant, size, description, errorMessage, ...props }) => {
83
- const classNames = (0, __marigold_system.useClassNames)({
125
+ const classNames = (0, _marigold_system.useClassNames)({
84
126
  component: "HelpText",
85
127
  variant,
86
128
  size
@@ -88,7 +130,7 @@ const HelpText = ({ variant, size, description, errorMessage, ...props }) => {
88
130
  const ctx = (0, react.useContext)(react_aria_components.FieldErrorContext);
89
131
  if (!description && !ctx?.isInvalid) return null;
90
132
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
91
- className: (0, __marigold_system.cn)(classNames.container),
133
+ className: (0, _marigold_system.cn)("in-field:mt-1", classNames.container),
92
134
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.FieldError, {
93
135
  ...props,
94
136
  className: "flex flex-col",
@@ -103,10 +145,10 @@ const HelpText = ({ variant, size, description, errorMessage, ...props }) => {
103
145
  const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
104
146
  return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
105
147
  className: "flex items-center justify-start gap-1",
106
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: (0, __marigold_system.cn)("h-4 w-4 shrink-0", classNames.icon) }), msg]
148
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: (0, _marigold_system.cn)("h-4 w-4 shrink-0", classNames.icon) }), msg]
107
149
  }, idx)) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
108
150
  className: "flex items-start justify-start gap-1",
109
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: (0, __marigold_system.cn)("h-4 w-4 shrink-0", classNames.icon) }), messages]
151
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: (0, _marigold_system.cn)("h-4 w-4 shrink-0", classNames.icon) }), messages]
110
152
  });
111
153
  }
112
154
  }), ctx && ctx.isInvalid ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Text, {
@@ -119,14 +161,14 @@ const HelpText = ({ variant, size, description, errorMessage, ...props }) => {
119
161
  //#endregion
120
162
  //#region src/Label/Label.tsx
121
163
  const _Label = ({ size, variant, children, ...props }) => {
122
- const className = (0, __marigold_system.useClassNames)({
164
+ const className = (0, _marigold_system.useClassNames)({
123
165
  component: "Label",
124
166
  size,
125
167
  variant
126
168
  });
127
169
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Label, {
128
170
  ...props,
129
- className: (0, __marigold_system.cn)(className, "inline-flex"),
171
+ className: (0, _marigold_system.cn)(className, "in-field:mb-1.5 inline-flex"),
130
172
  children
131
173
  });
132
174
  };
@@ -136,15 +178,15 @@ const _Label = ({ size, variant, children, ...props }) => {
136
178
  const fixedForwardRef = react.forwardRef;
137
179
  const _FieldBase = (props, ref) => {
138
180
  const { as: Component = "div", children, label, size, variant, width, description, errorMessage, className, ...rest } = props;
139
- const classNames = (0, __marigold_system.useClassNames)({
181
+ const classNames = (0, _marigold_system.useClassNames)({
140
182
  component: "Field",
141
183
  variant,
142
184
  size
143
185
  });
144
- const isFractionWidth = width ? (0, __marigold_system.isFraction)(`${width}`) : false;
186
+ const isFractionWidth = width ? (0, _marigold_system.isFraction)(`${width}`) : false;
145
187
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
146
188
  ref,
147
- className: (0, __marigold_system.cn)(
189
+ className: (0, _marigold_system.cn)(
148
190
  "group/field flex min-w-0 flex-col",
149
191
  /**
150
192
  * Width handling strategy:
@@ -157,8 +199,8 @@ const _FieldBase = (props, ref) => {
157
199
  className
158
200
  ),
159
201
  style: {
160
- ...(0, __marigold_system.createWidthVar)("container-width", width ? `${width}` : "full"),
161
- ...(0, __marigold_system.createWidthVar)("field-width", width && !isFractionWidth ? `${width}` : "full")
202
+ ...(0, _marigold_system.createWidthVar)("container-width", width ? `${width}` : "full"),
203
+ ...(0, _marigold_system.createWidthVar)("field-width", width && !isFractionWidth ? `${width}` : "full")
162
204
  },
163
205
  "data-required": props.isRequired ? true : void 0,
164
206
  "data-error": props.isInvalid ? true : void 0,
@@ -193,7 +235,7 @@ const Check = ({ size = 24, className, ...props }) => /* @__PURE__ */ (0, react_
193
235
  strokeWidth: "2",
194
236
  strokeLinecap: "round",
195
237
  strokeLinejoin: "round",
196
- className: (0, __marigold_system.cn)("shrink-0", className),
238
+ className: (0, _marigold_system.cn)("shrink-0", className),
197
239
  ...props,
198
240
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" })
199
241
  });
@@ -209,7 +251,7 @@ const CollapsibleProvider = ({ value, children }) => /* @__PURE__ */ (0, react_j
209
251
  //#endregion
210
252
  //#region src/Collapsible/CollapsibleContent.tsx
211
253
  const CollapsibleContent = ({ variant, size, children, ...props }) => {
212
- const classNames = (0, __marigold_system.useClassNames)({
254
+ const classNames = (0, _marigold_system.useClassNames)({
213
255
  component: "Collapsible",
214
256
  variant,
215
257
  size,
@@ -225,7 +267,7 @@ const CollapsibleContent = ({ variant, size, children, ...props }) => {
225
267
  //#endregion
226
268
  //#region src/Collapsible/CollapsibleTrigger.tsx
227
269
  const CollapsibleTrigger = ({ variant, size, children, level, ...props }) => {
228
- const classNames = (0, __marigold_system.useClassNames)({
270
+ const classNames = (0, _marigold_system.useClassNames)({
229
271
  component: "Collapsible",
230
272
  variant,
231
273
  size,
@@ -245,7 +287,7 @@ const CollapsibleTrigger = ({ variant, size, children, level, ...props }) => {
245
287
  //#endregion
246
288
  //#region src/Collapsible/Collapsible.tsx
247
289
  const Collapsible = ({ variant, size, children, unstyled, ...props }) => {
248
- const classNames = (0, __marigold_system.useClassNames)({
290
+ const classNames = (0, _marigold_system.useClassNames)({
249
291
  component: "Collapsible",
250
292
  variant,
251
293
  size
@@ -257,7 +299,7 @@ const Collapsible = ({ variant, size, children, unstyled, ...props }) => {
257
299
  },
258
300
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Disclosure, {
259
301
  ...props,
260
- className: (0, __marigold_system.cn)(classNames.container, unstyled && "expanded:contents expanded:[&_[role=group]]:contents"),
302
+ className: (0, _marigold_system.cn)(classNames.container, unstyled && "expanded:contents expanded:[&_[role=group]]:contents"),
261
303
  children
262
304
  })
263
305
  });
@@ -273,7 +315,7 @@ const More = ({ children, defaultExpanded = false, unstyled = true, showCount =
273
315
  * force a rerender and without the state the <Collapsible> will be collapsed.
274
316
  */
275
317
  const [isExpanded, setIsExpanded] = (0, react.useState)(defaultExpanded);
276
- const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
318
+ const stringFormatter = (0, _react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
277
319
  const count = `${react.Children.count(children)}`;
278
320
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Collapsible, {
279
321
  variant: "link",
@@ -282,7 +324,7 @@ const More = ({ children, defaultExpanded = false, unstyled = true, showCount =
282
324
  ...props,
283
325
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible.Content, { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible.Trigger, {
284
326
  onPress: () => setIsExpanded(!isExpanded),
285
- children: isExpanded ? stringFormatter.format(showCount ? "showLessCount" : "showLess").replace("{count}", count) : stringFormatter.format(showCount ? "showMoreCount" : "showMore").replace("{count}", count)
327
+ children: isExpanded ? stringFormatter.format(showCount ? "showLessCount" : "showLess", { count }) : stringFormatter.format(showCount ? "showMoreCount" : "showMore", { count })
286
328
  })]
287
329
  });
288
330
  };
@@ -312,7 +354,7 @@ const CollapsibleGroup = ({ children }) => {
312
354
  });
313
355
  };
314
356
  const _CheckboxGroup = ({ children, variant, size, required, disabled, readOnly, error, width, orientation = "vertical", collapseAt, ...rest }) => {
315
- const classNames = (0, __marigold_system.useClassNames)({
357
+ const classNames = (0, _marigold_system.useClassNames)({
316
358
  component: "Checkbox",
317
359
  variant,
318
360
  size,
@@ -334,7 +376,7 @@ const _CheckboxGroup = ({ children, variant, size, required, disabled, readOnly,
334
376
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
335
377
  role: "presentation",
336
378
  "data-orientation": orientation,
337
- className: (0, __marigold_system.cn)(classNames.group, "group/checkboxgroup flex items-start", orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"),
379
+ className: (0, _marigold_system.cn)(classNames.group, "group/checkboxgroup flex items-start", orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"),
338
380
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CheckboxGroupContext.Provider, {
339
381
  value: {
340
382
  width,
@@ -359,7 +401,7 @@ const Minus = ({ size = 24, className, ...props }) => /* @__PURE__ */ (0, react_
359
401
  strokeWidth: "2",
360
402
  strokeLinecap: "round",
361
403
  strokeLinejoin: "round",
362
- className: (0, __marigold_system.cn)("shrink-0", className),
404
+ className: (0, _marigold_system.cn)("shrink-0", className),
363
405
  ...props,
364
406
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12h14" })
365
407
  });
@@ -367,8 +409,8 @@ const Minus = ({ size = 24, className, ...props }) => /* @__PURE__ */ (0, react_
367
409
  //#endregion
368
410
  //#region src/Checkbox/Checkbox.tsx
369
411
  const Field = ({ description, children }) => {
370
- const className = (0, __marigold_system.useClassNames)({ component: "Field" });
371
- const descriptionId = (0, __react_aria_utils.useId)();
412
+ const className = (0, _marigold_system.useClassNames)({ component: "Field" });
413
+ const descriptionId = (0, _react_aria_utils.useId)();
372
414
  if (!description) return children;
373
415
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
374
416
  className,
@@ -381,7 +423,7 @@ const Field = ({ description, children }) => {
381
423
  const Icon = ({ className, checked, indeterminate, ...props }) => {
382
424
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
383
425
  "aria-hidden": "true",
384
- className: (0, __marigold_system.cn)("flex shrink-0 grow-0 basis-4 items-center justify-center", "h-4 w-4 p-px", "bg-white", "rounded-[3px] border border-solid border-black", className),
426
+ className: (0, _marigold_system.cn)("flex shrink-0 grow-0 basis-4 items-center justify-center", "h-4 w-4 p-px", "bg-white", "rounded-[3px] border border-solid border-black", className),
385
427
  ...props,
386
428
  children: indeterminate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Minus, {
387
429
  size: "12",
@@ -404,7 +446,7 @@ const _Checkbox = (0, react.forwardRef)(({ error, disabled, readOnly, required,
404
446
  ...rest
405
447
  };
406
448
  const group = useCheckboxGroupContext();
407
- const classNames = (0, __marigold_system.useClassNames)({
449
+ const classNames = (0, _marigold_system.useClassNames)({
408
450
  component: "Checkbox",
409
451
  variant: variant || group?.variant,
410
452
  size: size || group?.size
@@ -413,7 +455,7 @@ const _Checkbox = (0, react.forwardRef)(({ error, disabled, readOnly, required,
413
455
  description,
414
456
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Checkbox, {
415
457
  ref,
416
- className: (0, __marigold_system.cn)("group/checkbox flex items-center", "cursor-pointer data-disabled:cursor-not-allowed", classNames.container),
458
+ className: (0, _marigold_system.cn)("group/checkbox flex items-center", "cursor-pointer data-disabled:cursor-not-allowed", classNames.container),
417
459
  ...props,
418
460
  children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
419
461
  checked: isSelected,