@cieloazul310/digital-go-pandacss-preset 0.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 (46) hide show
  1. package/.turbo/turbo-build.log +20 -0
  2. package/README.md +30 -0
  3. package/dist/index.d.mts +8 -0
  4. package/dist/index.d.ts +8 -0
  5. package/dist/index.js +3022 -0
  6. package/dist/index.mjs +2989 -0
  7. package/eslint.config.mjs +6 -0
  8. package/package.json +60 -0
  9. package/src/anatomy.ts +41 -0
  10. package/src/index.ts +32 -0
  11. package/src/recipes/accordion.ts +128 -0
  12. package/src/recipes/breadcrumb.ts +64 -0
  13. package/src/recipes/button.ts +192 -0
  14. package/src/recipes/checkbox.ts +297 -0
  15. package/src/recipes/disclosure.ts +98 -0
  16. package/src/recipes/divider.ts +21 -0
  17. package/src/recipes/drawer.ts +126 -0
  18. package/src/recipes/error-text.ts +16 -0
  19. package/src/recipes/hamburger-menu-button.ts +45 -0
  20. package/src/recipes/index.ts +71 -0
  21. package/src/recipes/input-text.ts +76 -0
  22. package/src/recipes/input.ts +81 -0
  23. package/src/recipes/label.ts +32 -0
  24. package/src/recipes/legend.ts +44 -0
  25. package/src/recipes/link.ts +66 -0
  26. package/src/recipes/list.ts +11 -0
  27. package/src/recipes/menu-item.ts +99 -0
  28. package/src/recipes/menu-list.ts +67 -0
  29. package/src/recipes/menu.ts +101 -0
  30. package/src/recipes/notification-banner.ts +246 -0
  31. package/src/recipes/ordered-list.ts +23 -0
  32. package/src/recipes/radio-group.ts +74 -0
  33. package/src/recipes/radio.ts +227 -0
  34. package/src/recipes/requirement-badge.ts +29 -0
  35. package/src/recipes/resource-list.ts +122 -0
  36. package/src/recipes/select-box.ts +81 -0
  37. package/src/recipes/select.ts +117 -0
  38. package/src/recipes/support-text.ts +16 -0
  39. package/src/recipes/table.ts +146 -0
  40. package/src/recipes/tabs.ts +90 -0
  41. package/src/recipes/textarea.ts +63 -0
  42. package/src/recipes/tree-view.ts +89 -0
  43. package/src/recipes/unordered-list.ts +19 -0
  44. package/src/recipes/utility-link.ts +56 -0
  45. package/tsconfig.json +4 -0
  46. package/tsup.config.ts +9 -0
package/dist/index.mjs ADDED
@@ -0,0 +1,2989 @@
1
+ // src/index.ts
2
+ import { definePreset } from "@pandacss/dev";
3
+ import presetBase from "@cieloazul310/digital-go-pandacss-plugin";
4
+ import {
5
+ createKeyColor
6
+ } from "@cieloazul310/digital-go-pandacss-utils";
7
+
8
+ // src/recipes/accordion.ts
9
+ import { defineSlotRecipe } from "@pandacss/dev";
10
+ import { anatomy as accordionAnatomy } from "@ark-ui/anatomy/accordion";
11
+ var accordion_default = defineSlotRecipe({
12
+ className: "accordion",
13
+ slots: accordionAnatomy.keys(),
14
+ base: {
15
+ item: {
16
+ /**
17
+ * group/accordion border-b border-solid-gray-420
18
+ [--icon-size:calc(20/16*1rem)] desktop:[--icon-size:calc(32/16*1rem)]
19
+ ${className ?? ''}
20
+ */
21
+ borderBottomWidth: "1px",
22
+ borderBottomColor: "solid-gray.420",
23
+ "--icon-size": {
24
+ base: "calc(20 / 16 * 1rem)",
25
+ md: "calc(32 / 16 * 1rem)"
26
+ }
27
+ },
28
+ itemTrigger: {
29
+ /**
30
+ * group/summary relative block cursor-default
31
+ */
32
+ position: "relative",
33
+ display: "block",
34
+ /**
35
+ * hover:bg-solid-gray-50
36
+ * focus-visible:bg-yellow-300
37
+ */
38
+ bg: {
39
+ base: "transparent",
40
+ _hover: "solid-gray.50",
41
+ _focusVisible: { base: "yellow.300", _hover: "yellow.300" }
42
+ },
43
+ /*
44
+ * py-2 pl-[calc(var(--icon-size)+(12/16*1rem))] pr-2
45
+ * desktop:py-3.5 desktop:pl-[calc(var(--icon-size)+(20/16*1rem))] desktop:pr-4
46
+ */
47
+ py: { base: 2, md: 3.5 },
48
+ pl: {
49
+ base: "calc(var(--icon-size) + (12 / 16 * 1rem))",
50
+ md: "calc(var(--icon-size) + (20 / 16 * 1rem))"
51
+ },
52
+ pr: { base: 2, md: 4 },
53
+ cursor: { _hover: "pointer" },
54
+ /**
55
+ * marker:[content:'']
56
+ [&::-webkit-details-marker]:hidden
57
+ */
58
+ "&::marker": { content: '""' },
59
+ /**
60
+ * focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:outline-black focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
61
+ */
62
+ _focusVisible: {
63
+ rounded: 4,
64
+ outlineStyle: "solid",
65
+ outlineWidth: "4px",
66
+ outlineColor: "black",
67
+ outlineOffset: "calc(2 / 16 * 1rem)",
68
+ focusRing: "calc(2 / 16 * 1rem)"
69
+ },
70
+ /**
71
+ * remove button style
72
+ */
73
+ textAlign: "start",
74
+ width: "full"
75
+ },
76
+ itemIndicator: {
77
+ /**
78
+ * absolute top-2 left-0.5
79
+ * desktop:top-3.5 desktop:left-1.5
80
+ * size-[var(--icon-size)]
81
+ * mt-[calc((1lh-var(--icon-size))/2)]
82
+ */
83
+ position: "absolute",
84
+ top: { base: 2, md: 3.5 },
85
+ left: { base: 0.5, md: 1.5 },
86
+ width: "var(--icon-size)",
87
+ height: "var(--icon-size)",
88
+ mt: "calc((1lh - var(--icon-size)) / 2)",
89
+ /**
90
+ * inline-flex items-center justify-center
91
+ */
92
+ display: "inline-flex",
93
+ alignItems: "center",
94
+ justifyContent: "center",
95
+ /**
96
+ * bg-white text-blue-1000
97
+ */
98
+ bg: "white",
99
+ color: "keyColor.1000",
100
+ /**
101
+ * border border-current rounded-full
102
+ group-hover/summary:outline group-hover/summary:outline-2 group-hover/summary:outline-current
103
+ group-open/accordion:rotate-180
104
+ */
105
+ borderWidth: "1px",
106
+ borderColor: "currentcolor",
107
+ rounded: "full",
108
+ outlineStyle: "solid",
109
+ outlineWidth: { base: "0px", _groupHover: "2px" },
110
+ transformOrigin: "center",
111
+ transitionDuration: "normal",
112
+ transitionProperty: "transform",
113
+ transitionTimingFunction: "default",
114
+ _open: {
115
+ transform: "rotate(-180deg)"
116
+ }
117
+ },
118
+ itemContent: {
119
+ /**
120
+ * pl-[calc(var(--icon-size)+(12/16*1rem))] pr-2 py-4
121
+ desktop:pl-[calc(var(--icon-size)+(20/16*1rem))] desktop:pr-4 desktop:py-6
122
+ */
123
+ pl: {
124
+ base: "calc(var(--icon-size) + (12 / 16 * 1rem))",
125
+ md: "calc(var(--icon-size) + (20 / 16 * 1rem))"
126
+ },
127
+ pr: { base: 2, md: 4 },
128
+ py: { base: 4, md: 6 }
129
+ }
130
+ }
131
+ });
132
+
133
+ // src/recipes/breadcrumb.ts
134
+ import { defineSlotRecipe as defineSlotRecipe2 } from "@pandacss/dev";
135
+
136
+ // ../../node_modules/@ark-ui/react/node_modules/@zag-js/anatomy/dist/index.mjs
137
+ var createAnatomy = (name, parts = []) => ({
138
+ parts: (...values) => {
139
+ if (isEmpty(parts)) {
140
+ return createAnatomy(name, values);
141
+ }
142
+ throw new Error("createAnatomy().parts(...) should only be called once. Did you mean to use .extendWith(...) ?");
143
+ },
144
+ extendWith: (...values) => createAnatomy(name, [...parts, ...values]),
145
+ rename: (newName) => createAnatomy(newName, parts),
146
+ keys: () => parts,
147
+ build: () => [...new Set(parts)].reduce(
148
+ (prev, part) => Object.assign(prev, {
149
+ [part]: {
150
+ selector: [
151
+ `&[data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`,
152
+ `& [data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`
153
+ ].join(", "),
154
+ attrs: { "data-scope": toKebabCase(name), "data-part": toKebabCase(part) }
155
+ }
156
+ }),
157
+ {}
158
+ )
159
+ });
160
+ var toKebabCase = (value) => value.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
161
+ var isEmpty = (v) => v.length === 0;
162
+
163
+ // src/anatomy.ts
164
+ var breadcrumbAnatomy = createAnatomy("breadcrumb").parts(
165
+ "root",
166
+ "list",
167
+ "item",
168
+ "link",
169
+ "separator"
170
+ );
171
+ var menuListAnatomy = createAnatomy("menu-list").parts(
172
+ "root",
173
+ "label",
174
+ "content",
175
+ "item",
176
+ "itemGroup",
177
+ "itemGroupLabel",
178
+ "itemText",
179
+ "itemIndicator",
180
+ "input"
181
+ );
182
+ var notificationBannerAnatomy = createAnatomy(
183
+ "notification-banner"
184
+ ).parts("root", "icon", "close", "header", "heading", "body");
185
+ var resourceListAnatomy = createAnatomy("resource-list").parts(
186
+ "root",
187
+ "contentsContainer",
188
+ "functionButton",
189
+ "frontIcon",
190
+ "form",
191
+ "content",
192
+ "label",
193
+ "title",
194
+ "supportText",
195
+ "subLabel"
196
+ );
197
+
198
+ // src/recipes/link.ts
199
+ import { defineRecipe } from "@pandacss/dev";
200
+ var link_default = defineRecipe({
201
+ className: "link",
202
+ description: "\u30EA\u30F3\u30AF\u30C6\u30AD\u30B9\u30C8\u306F\u901A\u5E38\u3001\u8272\u3084\u4E0B\u7DDA\u306A\u3069\u306E\u8996\u899A\u7684\u306A\u8868\u73FE\u3067\u901A\u5E38\u306E\u30C6\u30AD\u30B9\u30C8\u3068\u533A\u5225\u3055\u308C\u3001URL\u3068\u95A2\u9023\u3065\u3051\u3089\u308C\u305F\u30C6\u30AD\u30B9\u30C8\u6587\u5B57\u5217\u3067\u3059\u3002\u3053\u306E\u95A2\u9023\u4ED8\u3051\u3092\u30CF\u30A4\u30D1\u30FC\u30EA\u30F3\u30AF\u3068\u547C\u3073\u3001\u3053\u308C\u306F\u30A6\u30A7\u30D6\u3092\u30A6\u30A7\u30D6\u305F\u3089\u3057\u3081\u3066\u3044\u308B\u57FA\u672C\u7684\u306A\u6982\u5FF5\u306E\u3072\u3068\u3064\u3067\u3059\u3002",
203
+ base: {
204
+ /**
205
+ * text-blue-1000 visited:text-magenta-900 hover:text-blue-1000
206
+ * focus-visible:text-blue-1000 active:text-orange-700
207
+ */
208
+ color: {
209
+ base: "keyColor.1000",
210
+ _visited: "magenta.900",
211
+ _hover: "keyColor.1000",
212
+ _focusVisible: "keyColor.1000",
213
+ _active: "orange.700"
214
+ },
215
+ /**
216
+ * focus-visible:bg-yellow-300
217
+ */
218
+ bg: {
219
+ base: "transparent",
220
+ _focusVisible: "yellow.300"
221
+ },
222
+ /**
223
+ * underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)]
224
+ * active:decoration-1
225
+ */
226
+ textDecoration: "underline",
227
+ textDecorationThickness: {
228
+ base: "1px",
229
+ _hover: "calc(3 / 16 * 1rem)",
230
+ _active: "1px"
231
+ },
232
+ textUnderlineOffset: "calc(3 / 16 * 1rem)",
233
+ /**
234
+ * focus-visible:rounded-4
235
+ * focus-visible:outline focus-visible:outline-4
236
+ * focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
237
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
238
+ */
239
+ _focusVisible: {
240
+ rounded: 4,
241
+ outlineStyle: "solid",
242
+ outlineWidth: "4px",
243
+ outlineColor: "black",
244
+ outlineOffset: "calc(2 / 16 * 1rem)",
245
+ focusRing: "calc(2 / 16 * 1rem)"
246
+ },
247
+ /**
248
+ * with icon
249
+ */
250
+ display: "inline-flex",
251
+ alignItems: "center",
252
+ gap: 1,
253
+ "& svg": {
254
+ width: "1em",
255
+ height: "1em"
256
+ }
257
+ }
258
+ });
259
+
260
+ // src/recipes/breadcrumb.ts
261
+ var breadcrumb_default = defineSlotRecipe2({
262
+ className: "breadcrumb",
263
+ description: "\u30D1\u30F3\u304F\u305A\u30EA\u30B9\u30C8\u306F\u3001\u30A6\u30A7\u30D6\u30B5\u30A4\u30C8\u306E\u968E\u5C64\u5185\u3067\u30E6\u30FC\u30B6\u30FC\u306E\u73FE\u5728\u306E\u4F4D\u7F6E\u3092\u8868\u793A\u3057\u307E\u3059\u3002",
264
+ slots: breadcrumbAnatomy.keys(),
265
+ base: {
266
+ root: {
267
+ /**
268
+ * icon
269
+ */
270
+ "--icon-size": "16px"
271
+ },
272
+ list: {
273
+ /**
274
+ * inline
275
+ */
276
+ display: "inline"
277
+ },
278
+ item: {
279
+ /**
280
+ * inline break-words text-oln-16N-100
281
+ */
282
+ display: "inline",
283
+ overflowWrap: "break-word",
284
+ textStyle: "oln-16N-100"
285
+ },
286
+ link: {
287
+ /**
288
+ * text-blue-1000 text-oln-16N-100 underline underline-offset-[calc(3/16*1rem)]
289
+ * hover:text-blue-900 hover:decoration-[calc(3/16*1rem)]
290
+ * active:text-orange-700 active:decoration-1
291
+ * focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4
292
+ * focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
293
+ * focus-visible:bg-yellow-300 focus-visible:text-blue-1000
294
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
295
+ */
296
+ ...link_default.base,
297
+ /**
298
+ * icon
299
+ */
300
+ "& svg": {
301
+ display: "inline",
302
+ width: "var(--icon-size)",
303
+ height: "var(--icon-size)",
304
+ mr: 1
305
+ }
306
+ },
307
+ separator: {
308
+ /**
309
+ * mx-2 inline
310
+ */
311
+ mx: 2,
312
+ display: "inline"
313
+ }
314
+ }
315
+ });
316
+
317
+ // src/recipes/button.ts
318
+ import { defineRecipe as defineRecipe2 } from "@pandacss/dev";
319
+ var button_default = defineRecipe2({
320
+ className: "button",
321
+ description: "\u30DC\u30BF\u30F3\u306F\u3001\u4E3B\u306B\u30A2\u30AF\u30B7\u30E7\u30F3\u5B9F\u884C\u307E\u305F\u306F\u30DA\u30FC\u30B8\u9077\u79FB\u306E\u305F\u3081\u306E\u30C8\u30EA\u30AC\u30FC\u3068\u3057\u3066\u4F7F\u7528\u3057\u307E\u3059\u3002\u753B\u9762\u5185\u306B\u304A\u3051\u308B\u30DC\u30BF\u30F3\u306E\u91CD\u8981\u5EA6\u306B\u5FDC\u3058\u3066\u4F7F\u3044\u5206\u3051\u53EF\u80FD\u306A\u8907\u6570\u306E\u30B9\u30BF\u30A4\u30EB\u304C\u3042\u308A\u307E\u3059\u3002",
322
+ base: {
323
+ /**
324
+ * underline-offset-[calc(3/16*1rem)]
325
+ */
326
+ textUnderlineOffset: "calc(3 / 16 * 1rem)",
327
+ /**
328
+ * focus-visible:outline focus-visible:outline-4 focus-visible:outline-black
329
+ * focus-visible:outline-offset-[calc(2/16*1rem)]
330
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
331
+ */
332
+ _focusVisible: {
333
+ outlineStyle: "solid",
334
+ outlineWidth: "4px",
335
+ outlineColor: "black",
336
+ outlineOffset: "calc(2 / 16 * 1rem)",
337
+ focusRing: "calc(2 / 16 * 1rem)"
338
+ },
339
+ /**
340
+ * aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
341
+ */
342
+ _disabled: {
343
+ pointerEvents: "none"
344
+ },
345
+ /**
346
+ * button default
347
+ */
348
+ display: "inline-flex",
349
+ textAlign: "center",
350
+ alignItems: "center",
351
+ justifyContent: "center",
352
+ cursor: "pointer"
353
+ },
354
+ variants: {
355
+ variant: {
356
+ "solid-fill": {
357
+ /**
358
+ * text-white aria-disabled:text-solid-gray-50
359
+ * bg-blue-900 hover:bg-blue-1000 active:bg-blue-1200 aria-disabled:bg-solid-gray-300
360
+ */
361
+ bg: {
362
+ base: "keyColor.900",
363
+ _hover: "keyColor.1000",
364
+ _active: "keyColor.1200",
365
+ _disabled: "solid-gray.300"
366
+ },
367
+ color: { base: "white", _disabled: "solid-gray.50" },
368
+ /**
369
+ * border-4 border-double border-transparent
370
+ * hover:underline active:underline
371
+ */
372
+ borderWidth: "4px",
373
+ borderStyle: "double",
374
+ borderColor: "transparent",
375
+ textDecoration: {
376
+ base: "none",
377
+ _hover: "underline",
378
+ _active: "underline"
379
+ }
380
+ },
381
+ outline: {
382
+ /**
383
+ * bg-white hover:bg-blue-200 active:bg-blue-300 aria-disabled:bg-white
384
+ * text-blue-900 hover:text-blue-1000 active:text-blue-1200
385
+ * aria-disabled:text-solid-gray-300
386
+ */
387
+ bg: {
388
+ base: "white",
389
+ _hover: "keyColor.200",
390
+ _active: "keyColor.300",
391
+ _disabled: "white"
392
+ },
393
+ color: {
394
+ base: "keyColor.900",
395
+ _hover: "keyColor.1000",
396
+ _active: "keyColor.1200",
397
+ _disabled: "solid-gray.300"
398
+ },
399
+ /**
400
+ * border border-current hover:underline active:underline
401
+ */
402
+ borderWidth: "1px",
403
+ borderColor: "currentcolor",
404
+ textDecoration: {
405
+ base: "none",
406
+ _hover: "underline",
407
+ _active: "underline"
408
+ }
409
+ },
410
+ text: {
411
+ /**
412
+ *
413
+ * hover:bg-blue-50 active:bg-blue-100 focus-visible:bg-yellow-300
414
+ * aria-disabled:bg-transparent aria-disabled:focus-visible:bg-yellow-300
415
+ * text-blue-900 hover:text-blue-1000 active:text-blue-1200
416
+ * aria-disabled:text-solid-gray-300
417
+ */
418
+ bg: {
419
+ base: "transparent",
420
+ _hover: "keyColor.50",
421
+ _active: "keyColor.100",
422
+ _focusVisible: { base: "yellow.300", _hover: "yellow.300" },
423
+ _disabled: "transparent"
424
+ },
425
+ color: {
426
+ base: "keyColor.900",
427
+ _hover: "keyColor.1000",
428
+ _active: "keyColor.1200",
429
+ _disabled: "solid-gray.300"
430
+ },
431
+ /**
432
+ * hover:decoration-[calc(3/16*1rem)] underline
433
+ */
434
+ textDecoration: "underline",
435
+ textDecorationThickness: { base: "1px", _hover: "calc(3 / 16 * 1rem)" }
436
+ }
437
+ },
438
+ size: {
439
+ lg: {
440
+ /**
441
+ * lg: 'min-w-[calc(136/16*1rem)] min-h-14 rounded-8 px-4 py-3 text-oln-16B-100'
442
+ */
443
+ minWidth: "calc(136 / 16 * 1rem)",
444
+ minHeight: 14,
445
+ rounded: 8,
446
+ px: 4,
447
+ py: 3,
448
+ textStyle: "oln-16B-100"
449
+ },
450
+ md: {
451
+ /**
452
+ * md: 'min-w-24 min-h-12 rounded-8 px-4 py-2 text-oln-16B-100',
453
+ */
454
+ minWidth: 24,
455
+ minHeight: 12,
456
+ textStyle: "oln-16B-100",
457
+ px: 4,
458
+ py: 2,
459
+ rounded: 8
460
+ },
461
+ sm: {
462
+ /**
463
+ * sm: 'relative min-w-20 min-h-9 rounded-6 px-3 py-0.5 text-oln-16B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
464
+ */
465
+ position: "relative",
466
+ minWidth: 20,
467
+ minHeight: 9,
468
+ textStyle: "oln-16B-100",
469
+ py: 0.5,
470
+ rounded: 6,
471
+ _after: {
472
+ position: "absolute",
473
+ insetInline: 0,
474
+ insetBlock: "full",
475
+ m: "auto",
476
+ height: "44px"
477
+ }
478
+ },
479
+ xs: {
480
+ /**
481
+ * xs: 'relative min-w-18 min-h-7 rounded-4 px-2 py-0.5 text-oln-14B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
482
+ */
483
+ minWidth: 18,
484
+ minHeight: 7,
485
+ textStyle: "oln-14B-100",
486
+ px: 2,
487
+ py: 0.5,
488
+ rounded: 4,
489
+ _after: {
490
+ position: "absolute",
491
+ insetInline: 0,
492
+ insetBlock: "full",
493
+ m: "auto",
494
+ height: "44px"
495
+ }
496
+ }
497
+ }
498
+ },
499
+ defaultVariants: {
500
+ variant: "solid-fill",
501
+ size: "md"
502
+ }
503
+ });
504
+
505
+ // src/recipes/checkbox.ts
506
+ import { defineSlotRecipe as defineSlotRecipe3 } from "@pandacss/dev";
507
+ import { anatomy as checkboxAnatomy } from "@ark-ui/anatomy/checkbox";
508
+ var checkbox_default = defineSlotRecipe3({
509
+ className: "checkbox",
510
+ slots: checkboxAnatomy.keys(),
511
+ base: {
512
+ root: {
513
+ /**
514
+ * flex w-fit items-start py-2
515
+ */
516
+ display: "flex",
517
+ alignItems: "flex-start",
518
+ width: "fit-content",
519
+ py: 2
520
+ },
521
+ control: {
522
+ /**
523
+ * flex items-center justify-center shrink-0 rounded-[calc(1/8*100%)]
524
+ * has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
525
+ */
526
+ display: "flex",
527
+ alignItems: "center",
528
+ justifyContent: "center",
529
+ flexShrink: 0,
530
+ rounded: "calc(1 / 8 * 100%)",
531
+ _disabled: {
532
+ bg: "solid-gray.420"
533
+ }
534
+ },
535
+ indicator: {
536
+ /**
537
+ * appearance-none size-3/4 rounded-[calc(2/18*100%)]
538
+ */
539
+ appearance: "none",
540
+ width: "3/4",
541
+ height: "3/4",
542
+ rounded: "calc(2 / 18 * 100%)",
543
+ borderColor: {
544
+ /**
545
+ * border-solid-gray-600 hover:border-black
546
+ * forced-colors:!border-[ButtonText]
547
+ */
548
+ base: "solid-gray.600",
549
+ _hover: "black",
550
+ _highContrast: "ButtonText",
551
+ _checked: {
552
+ /**
553
+ * checked:border-blue-900 checked:hover:border-blue-1100
554
+ * forced-colors:checked:!border-[Highlight]
555
+ */
556
+ base: "keyColor.900",
557
+ _hover: "keyColor.1100",
558
+ _highContrast: "Highlight"
559
+ },
560
+ _indeterminate: {
561
+ /**
562
+ * indeterminate:border-blue-900 indeterminate:hover:border-blue-1100
563
+ * forced-colors:indeterminate:!border-[Highlight]
564
+ */
565
+ base: "keyColor.900",
566
+ _hover: "keyColor.1100",
567
+ _highContrast: "Highlight"
568
+ },
569
+ _invalid: {
570
+ /**
571
+ * data-[error]:border-error-1 data-[error]:hover:border-red-1000
572
+ */
573
+ base: "error.1",
574
+ _hover: "red.1000"
575
+ },
576
+ _disabled: {
577
+ /**
578
+ * aria-disabled:!border-solid-gray-300
579
+ * forced-colors:aria-disabled:!border-[GrayText]
580
+ */
581
+ base: "solid-gray.300",
582
+ _highContrast: "GrayText"
583
+ }
584
+ },
585
+ bg: {
586
+ /**
587
+ * bg-white
588
+ */
589
+ base: "white",
590
+ /**
591
+ * checked:bg-blue-900 checked:hover:bg-blue-1100
592
+ * forced-colors:checked:!bg-[Highlight]
593
+ */
594
+ _checked: {
595
+ base: "keyColor.900",
596
+ _hover: "keyColor.1100",
597
+ _highContrast: "Highlight"
598
+ },
599
+ _indeterminate: {
600
+ /**
601
+ * indeterminate:bg-blue-900 indeterminate:hover:bg-blue-1100
602
+ * forced-colors:indeterminate:!bg-[Highlight]
603
+ */
604
+ base: "keyColor.900",
605
+ _hover: "keyColor.1100",
606
+ _highContrast: "Highlight"
607
+ },
608
+ /**
609
+ * data-[error]:indeterminate:bg-error-1
610
+ * data-[error]:indeterminate:hover:bg-red-1000
611
+ * data-[error]:checked:bg-error-1 data-[error]:checked:hover:bg-red-1000
612
+ */
613
+ _invalid: {
614
+ _indeterminate: {
615
+ base: "error.1",
616
+ _hover: "red.1000"
617
+ },
618
+ _checked: {
619
+ base: "error.1",
620
+ _hover: "red.1000"
621
+ }
622
+ },
623
+ /**
624
+ * aria-disabled:!bg-solid-gray-50
625
+ * aria-disabled:checked:!bg-solid-gray-300
626
+ * aria-disabled:indeterminate:!bg-solid-gray-300
627
+ * forced-colors:aria-disabled:checked:!bg-[GrayText]
628
+ */
629
+ _disabled: {
630
+ base: "solid-gray.50",
631
+ _checked: "solid-gray.300",
632
+ _indeterminate: "solid-gray.300",
633
+ _highContrast: {
634
+ _checked: "GrayText"
635
+ }
636
+ }
637
+ },
638
+ /**
639
+ * bg-clip-padding
640
+ */
641
+ backgroundClip: "padding-box",
642
+ /**
643
+ * before:hidden checked:before:block indeterminate:before:block
644
+ * before:size-3.5
645
+ * before:bg-white
646
+ * forced-colors:before:!bg-[HighlightText]
647
+ * aria-disabled:before:border-solid-gray-50
648
+ */
649
+ _before: {
650
+ content: '""',
651
+ display: "none",
652
+ width: 3.5,
653
+ height: 3.5,
654
+ bg: { base: "white", _highContrast: "HighlightText" },
655
+ borderColor: { _disabled: "solid-gray.50" }
656
+ },
657
+ /**
658
+ * checked:before:[clip-path:path('M5.6,11.2L12.65,4.15L11.25,2.75L5.6,8.4L2.75,5.55L1.35,6.95L5.6,11.2Z')]
659
+ * indeterminate:before:[clip-path:path('M3.25,7.75H10.75V6.25H3.25V7.75Z')]
660
+ */
661
+ _checked: {
662
+ _before: {
663
+ display: "block",
664
+ clipPath: "path('M5.6,11.2L12.65,4.15L11.25,2.75L5.6,8.4L2.75,5.55L1.35,6.95L5.6,11.2Z')"
665
+ }
666
+ },
667
+ _indeterminate: {
668
+ _before: {
669
+ display: "block",
670
+ clipPath: "path('M3.25,7.75H10.75V6.25H3.25V7.75Z')"
671
+ }
672
+ },
673
+ /**
674
+ * focus:outline focus:outline-4 focus:outline-black
675
+ * focus:outline-offset-[calc(2/16*1rem)]
676
+ * focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
677
+ */
678
+ _focus: {
679
+ outlineStyle: "solid",
680
+ outlineWidth: "4px",
681
+ outlineColor: "black",
682
+ outlineOffset: "calc(2 / 16 * 1rem)",
683
+ focusRing: "calc(2 / 16 * 1rem)"
684
+ }
685
+ },
686
+ label: {
687
+ /**
688
+ * text-solid-gray-800
689
+ * data-[size=sm]:pt-px data-[size=sm]:text-dns-16N-130
690
+ * data-[size=md]:pt-1 data-[size=md]:text-dns-16N-130
691
+ * data-[size=lg]:pt-2.5 data-[size=lg]:text-dns-17N-130
692
+ */
693
+ color: "solid-gray.800"
694
+ },
695
+ group: {}
696
+ },
697
+ variants: {
698
+ size: {
699
+ sm: {
700
+ root: {
701
+ /**
702
+ * data-[size=sm]:gap-1
703
+ */
704
+ gap: 1
705
+ },
706
+ control: {
707
+ /**
708
+ * data-[size=sm]:size-6
709
+ */
710
+ width: 6,
711
+ height: 6
712
+ },
713
+ indicator: {
714
+ /**
715
+ * data-[size=sm]:border-[calc(2/16*1rem)]
716
+ */
717
+ borderWidth: "calc(2 / 16 * 1rem)"
718
+ },
719
+ label: {
720
+ /**
721
+ * data-[size=sm]:pt-px data-[size=sm]:text-dns-16N-130
722
+ */
723
+ pt: "1px",
724
+ textStyle: "dns-16N-130"
725
+ }
726
+ },
727
+ md: {
728
+ root: {
729
+ /**
730
+ * data-[size=md]:gap-2
731
+ */
732
+ gap: 2
733
+ },
734
+ control: {
735
+ /**
736
+ * data-[size=md]:size-8
737
+ */
738
+ width: 8,
739
+ height: 8
740
+ },
741
+ indicator: {
742
+ /**
743
+ * data-[size=md]:border-[calc(2/16*1rem)]
744
+ * data-[size=md]:before:origin-top-left
745
+ * data-[size=md]:before:scale-[calc(20/14)]
746
+ */
747
+ borderWidth: "calc(2 / 16 * 1rem)",
748
+ _before: {
749
+ transformOrigin: "top left",
750
+ scale: "calc(20 / 14)"
751
+ }
752
+ },
753
+ label: {
754
+ /**
755
+ * data-[size=md]:pt-1 data-[size=md]:text-dns-16N-130
756
+ */
757
+ pt: 1,
758
+ textStyle: "dns-16N-130"
759
+ }
760
+ },
761
+ lg: {
762
+ root: {
763
+ /**
764
+ * data-[size=lg]:gap-2
765
+ */
766
+ gap: 2
767
+ },
768
+ control: {
769
+ /**
770
+ * data-[size=lg]:size-11
771
+ */
772
+ width: 11,
773
+ height: 11
774
+ },
775
+ indicator: {
776
+ /**
777
+ * data-[size=lg]:border-[calc(3/16*1rem)]
778
+ * data-[size=lg]:before:origin-top-left
779
+ * data-[size=lg]:before:scale-[calc(27/14)]
780
+ */
781
+ borderWidth: "calc(3 / 16 * 1rem)",
782
+ _before: {
783
+ transformOrigin: "top left",
784
+ scale: "calc(27 / 14)"
785
+ }
786
+ },
787
+ label: {
788
+ /**
789
+ * data-[size=lg]:pt-2.5 data-[size=lg]:text-dns-17N-130
790
+ */
791
+ pt: 2.5,
792
+ textStyle: "dns-17N-130"
793
+ }
794
+ }
795
+ }
796
+ },
797
+ defaultVariants: {
798
+ size: "sm"
799
+ }
800
+ });
801
+
802
+ // src/recipes/disclosure.ts
803
+ import { defineSlotRecipe as defineSlotRecipe4 } from "@pandacss/dev";
804
+ var disclosure_default = defineSlotRecipe4({
805
+ className: "disclosure",
806
+ slots: ["root", "summary", "icon", "content"],
807
+ base: {
808
+ root: {
809
+ /**
810
+ * group/disclosure
811
+ */
812
+ },
813
+ summary: {
814
+ /**
815
+ * group/summary
816
+ * [&::-webkit-details-marker]:hidden
817
+ */
818
+ /**
819
+ * flex w-fit cursor-default list-none items-start justify-start gap-2
820
+ */
821
+ display: "flex",
822
+ width: "fit-content",
823
+ cursor: "default",
824
+ listStyle: "none",
825
+ alignItems: "start",
826
+ justifyContent: "start",
827
+ gap: 2,
828
+ /**
829
+ * remove button style
830
+ */
831
+ textAlign: "start",
832
+ /**
833
+ * hover:underline hover:underline-offset-[calc(3/16*1rem)]
834
+ */
835
+ _hover: {
836
+ textDecoration: "underline",
837
+ textUnderlineOffset: "calc(3 / 16 * 1rem)"
838
+ },
839
+ /**
840
+ * focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4
841
+ * focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
842
+ * focus-visible:bg-yellow-300
843
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
844
+ */
845
+ _focusVisible: {
846
+ rounded: 4,
847
+ bg: "yellow.300",
848
+ outlineStyle: "solid",
849
+ outlineWidth: "4px",
850
+ outlineColor: "black",
851
+ outlineOffset: "calc(2 / 16 * 1rem)",
852
+ focusRing: "calc(2 / 16 * 1rem)"
853
+ }
854
+ },
855
+ icon: {
856
+ /**
857
+ * flex-none text-blue-1000 mt-[calc((1lh-24px)/2)]
858
+ * group-open/disclosure:rotate-180
859
+ * forced-colors:text-inherit
860
+ */
861
+ flex: "none",
862
+ color: { base: "keyColor.1000", _highContrast: "inherit" },
863
+ mt: "calc((1lh - 24px) / 2)",
864
+ /**
865
+ * svg
866
+ */
867
+ width: "24px",
868
+ height: "24px",
869
+ rounded: "full",
870
+ bg: { base: "white", _groupHover: "currentColor" },
871
+ outlineStyle: "solid",
872
+ outlineWidth: "3px",
873
+ outlineOffset: "-3px",
874
+ transform: {
875
+ base: "rotate(-180deg)",
876
+ "[data-state=open]>&": "rotate(0deg)"
877
+ },
878
+ transition: "transform",
879
+ _before: {
880
+ content: '""',
881
+ bg: { base: "currentColor", _groupHover: "white" },
882
+ width: "full",
883
+ height: "full",
884
+ rounded: "full",
885
+ outlineStyle: "solid",
886
+ outlineWidth: "3px",
887
+ outlineOffset: "-3px",
888
+ display: "block",
889
+ clipPath: "path('M12 15.525L16.925 10.625H7.07502L12 15.525ZM12 22.85C10.4834 22.85 9.06677 22.566 7.75027 21.998C6.43394 21.4298 5.28886 20.6588 4.31502 19.685C3.34119 18.7112 2.57019 17.5661 2.00202 16.2498C1.43402 14.9333 1.15002 13.5167 1.15002 12C1.15002 10.4833 1.43402 9.06675 2.00202 7.75025C2.57019 6.43392 3.34119 5.28883 4.31502 4.315C5.28886 3.34117 6.43394 2.57017 7.75027 2.002C9.06677 1.434 10.4834 1.15 12 1.15C13.5167 1.15 14.9333 1.434 16.2498 2.002C17.5661 2.57017 18.7112 3.34117 19.685 4.315C20.6589 5.28883 21.4299 6.43392 21.998 7.75025C22.566 9.06675 22.85 10.4833 22.85 12C22.85 13.5167 22.566 14.9333 21.998 16.2498C21.4299 17.5661 20.6589 18.7112 19.685 19.685C18.7112 20.6588 17.5661 21.4298 16.2498 21.998C14.9333 22.566 13.5167 22.85 12 22.85Z')"
890
+ }
891
+ },
892
+ content: {}
893
+ }
894
+ });
895
+
896
+ // src/recipes/divider.ts
897
+ import { defineRecipe as defineRecipe3 } from "@pandacss/dev";
898
+ var divider_default = defineRecipe3({
899
+ className: "divider",
900
+ description: "\u30C7\u30A3\u30D0\u30A4\u30C0\u30FC\u306F\u3001\u7570\u306A\u308B\u30BB\u30AF\u30B7\u30E7\u30F3\u3001\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u3001\u307E\u305F\u306F\u30B3\u30F3\u30C6\u30F3\u30C4\u306E\u30B0\u30EB\u30FC\u30D7\u9593\u306B\u8A2D\u3051\u3089\u308C\u308B\u8996\u899A\u7684\u306A\u533A\u5207\u308A\u3067\u3001HTML\u306Ehr\u8981\u7D20\u306B\u76F8\u5F53\u3057\u307E\u3059\u3002\u8981\u7D20\u9593\u306B\u660E\u78BA\u306A\u533A\u5207\u308A\u3092\u8A2D\u3051\u308B\u3053\u3068\u3067\u3001\u8AAD\u307F\u3084\u3059\u3055\u3092\u5411\u4E0A\u3055\u305B\u308B\u5F79\u5272\u3092\u679C\u305F\u3057\u307E\u3059\u3002",
901
+ variants: {
902
+ color: {
903
+ "gray-420": { borderColor: "solid-gray.420" },
904
+ "gray-536": { borderColor: "solid-gray.536" },
905
+ black: { borderColor: "black" }
906
+ }
907
+ },
908
+ defaultVariants: {
909
+ color: "gray-420"
910
+ }
911
+ });
912
+
913
+ // src/recipes/drawer.ts
914
+ import { anatomy as dialogAnatomy } from "@ark-ui/anatomy/dialog";
915
+ import { defineSlotRecipe as defineSlotRecipe5 } from "@pandacss/dev";
916
+ var anatomy = dialogAnatomy.extendWith("header", "body", "footer");
917
+ var drawer_default = defineSlotRecipe5({
918
+ className: "drawer",
919
+ slots: anatomy.keys(),
920
+ base: {
921
+ backdrop: {
922
+ /**
923
+ * backdrop:bg-opacity-gray-100 forced-colors:backdrop:bg-[#000b]
924
+ */
925
+ backdropFilter: "blur(4px)",
926
+ background: "gray.100/90",
927
+ height: "100vh",
928
+ position: "fixed",
929
+ top: 0,
930
+ left: 0,
931
+ width: "100vw",
932
+ zIndex: 10,
933
+ // zIndex: "overlay",
934
+ _open: {
935
+ animation: "backdrop-in"
936
+ },
937
+ _closed: {
938
+ animation: "backdrop-out"
939
+ }
940
+ },
941
+ positioner: {
942
+ alignItems: "center",
943
+ display: "flex",
944
+ height: "100dvh",
945
+ justifyContent: "center",
946
+ position: "fixed",
947
+ top: 0,
948
+ /**
949
+ * w-72
950
+ */
951
+ width: 72,
952
+ zIndex: 1400
953
+ // zIndex: "modal",
954
+ },
955
+ content: {
956
+ /**
957
+ * m-[unset] max-w-full max-h-[unset] overflow-visible start-auto
958
+ */
959
+ margin: "unset",
960
+ maxWidth: "full",
961
+ maxHeight: "full",
962
+ overflow: "visible",
963
+ insetInlineStart: "auto",
964
+ width: "full",
965
+ /**
966
+ * bg-white shadow-2 border-l-transparent
967
+ */
968
+ borderColor: "transparent",
969
+ background: "white",
970
+ boxShadow: 2,
971
+ /**
972
+ * grid grid-rows-[auto_1fr] h-dvh
973
+ */
974
+ display: "grid",
975
+ gridTemplateRows: "auto 1fr",
976
+ height: "100dvh",
977
+ _hidden: {
978
+ display: "none"
979
+ }
980
+ },
981
+ header: {
982
+ /**
983
+ * flex justify-end py-4 pl-4 pr-8
984
+ */
985
+ display: "flex",
986
+ justifyContent: "start",
987
+ py: 4,
988
+ px: 4
989
+ },
990
+ title: {
991
+ textStyle: "std-20B-150"
992
+ },
993
+ body: {
994
+ /**
995
+ * overflow-auto
996
+ */
997
+ overflow: "auto",
998
+ px: 4,
999
+ py: 4,
1000
+ textStyle: "std-17N-170"
1001
+ }
1002
+ },
1003
+ variants: {
1004
+ placement: {
1005
+ right: {
1006
+ positioner: {
1007
+ right: 0
1008
+ },
1009
+ content: {
1010
+ /**
1011
+ * border-l
1012
+ */
1013
+ borderLeftWidth: "1px"
1014
+ }
1015
+ },
1016
+ left: {
1017
+ positioner: {
1018
+ left: 0
1019
+ },
1020
+ content: {
1021
+ /**
1022
+ * border-l
1023
+ */
1024
+ borderRightWidth: "1px"
1025
+ }
1026
+ }
1027
+ }
1028
+ },
1029
+ defaultVariants: {
1030
+ placement: "right"
1031
+ }
1032
+ });
1033
+
1034
+ // src/recipes/error-text.ts
1035
+ import { defineRecipe as defineRecipe4 } from "@pandacss/dev";
1036
+ var error_text_default = defineRecipe4({
1037
+ className: "error-text",
1038
+ base: {
1039
+ /**
1040
+ * text-dns-16N-130 text-error-1
1041
+ */
1042
+ textStyle: "dns-16N-130",
1043
+ color: "error.1"
1044
+ }
1045
+ });
1046
+
1047
+ // src/recipes/hamburger-menu-button.ts
1048
+ import { defineRecipe as defineRecipe5 } from "@pandacss/dev";
1049
+ var hamburger_menu_button_default = defineRecipe5({
1050
+ className: "hamburger-menu-button",
1051
+ base: {
1052
+ /**
1053
+ * flex w-fit items-center text-oln-16N-100 rounded-4 touch-manipulation
1054
+ */
1055
+ display: "flex",
1056
+ width: "fit-content",
1057
+ alignItems: "center",
1058
+ textStyle: "oln-16N-100",
1059
+ rounded: 4,
1060
+ touchAction: "manipulation",
1061
+ /**
1062
+ * hover:bg-solid-gray-50 hover:underline hover:underline-offset-[calc(3/16*1rem)]
1063
+ */
1064
+ _hover: {
1065
+ bg: "solid-gray.50",
1066
+ textDecoration: "underline",
1067
+ textUnderlineOffset: "calc(3 / 16 * 1rem)"
1068
+ },
1069
+ /**
1070
+ * focus-visible:outline focus-visible:outline-4 focus-visible:outline-black
1071
+ * focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300
1072
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
1073
+ */
1074
+ _focusVisible: {
1075
+ bg: "yellow.300",
1076
+ outlineStyle: "solid",
1077
+ outlineWidth: "4px",
1078
+ outlineColor: "black",
1079
+ outlineOffset: "calc(2 / 16 * 1rem)",
1080
+ focusRing: "calc(2 / 16 * 1rem)"
1081
+ },
1082
+ /**
1083
+ * override reset
1084
+ */
1085
+ cursor: "pointer"
1086
+ }
1087
+ });
1088
+
1089
+ // src/recipes/input.ts
1090
+ import { defineRecipe as defineRecipe6 } from "@pandacss/dev";
1091
+ var input_default = defineRecipe6({
1092
+ className: "input",
1093
+ description: "\u30A4\u30F3\u30D7\u30C3\u30C8\u30C6\u30AD\u30B9\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306F\u3001\u540D\u524D\u3084\u96FB\u8A71\u756A\u53F7\u306A\u3069\u30011\u884C\u4EE5\u5185\u306E\u30C6\u30AD\u30B9\u30C8\u3092\u5165\u529B\u3059\u308B\u5834\u5408\u306B\u4F7F\u7528\u3057\u307E\u3059\u3002",
1094
+ base: {
1095
+ /**
1096
+ * max-w-full px-4 py-3 rounded-8
1097
+ */
1098
+ // minWidth: "80px",
1099
+ maxWidth: "full",
1100
+ rounded: 8,
1101
+ px: 4,
1102
+ py: 3,
1103
+ /**
1104
+ * border border-solid-gray-600 hover:border-black
1105
+ * aria-disabled:border-solid-gray-300
1106
+ * aria-disabled:forced-colors:border-[GrayText]
1107
+ */
1108
+ borderWidth: "1px",
1109
+ borderColor: {
1110
+ base: "solid-gray.600",
1111
+ _hover: "black",
1112
+ _disabled: { base: "solid-gray.300", _highContrast: "GrayText" }
1113
+ },
1114
+ /**
1115
+ * bg-white text-oln-16N-100 text-solid-gray-800
1116
+ * aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420
1117
+ * aria-disabled:forced-colors:text-[GrayText]
1118
+ *
1119
+ */
1120
+ bg: { base: "white", _disabled: "solid-gray.50" },
1121
+ color: {
1122
+ base: "solid-gray.800",
1123
+ _disabled: { base: "solid-gray.420", _highContrast: "GrayText" }
1124
+ },
1125
+ textStyle: "oln-16N-100",
1126
+ /**
1127
+ * focus:outline focus:outline-4 focus:outline-black
1128
+ * focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
1129
+ */
1130
+ _focus: {
1131
+ outlineStyle: "solid",
1132
+ outlineWidth: "4px",
1133
+ outlineColor: "black",
1134
+ outlineOffset: "calc(2 / 16 * 1rem)",
1135
+ focusRing: "calc(2 / 16 * 1rem)"
1136
+ },
1137
+ /**
1138
+ * aria-disabled:pointer-events-none
1139
+ */
1140
+ pointerEvents: { base: "inherit", _disabled: "none" }
1141
+ },
1142
+ variants: {
1143
+ size: {
1144
+ /**
1145
+ * data-[size=sm]:h-10 data-[size=md]:h-12 data-[size=lg]:h-14
1146
+ */
1147
+ sm: { height: 10 },
1148
+ md: { height: 12 },
1149
+ lg: { height: 14 }
1150
+ },
1151
+ invalid: {
1152
+ true: {
1153
+ /**
1154
+ * aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000
1155
+ */
1156
+ borderColor: { base: "error.1", _hover: "red.1000" }
1157
+ }
1158
+ }
1159
+ },
1160
+ defaultVariants: {
1161
+ size: "lg",
1162
+ invalid: false
1163
+ }
1164
+ });
1165
+
1166
+ // src/recipes/input-text.ts
1167
+ import { defineSlotRecipe as defineSlotRecipe6 } from "@pandacss/dev";
1168
+ import { anatomy as fieldAnatomy } from "@ark-ui/anatomy/field";
1169
+
1170
+ // src/recipes/label.ts
1171
+ import { defineRecipe as defineRecipe7 } from "@pandacss/dev";
1172
+ var label_default = defineRecipe7({
1173
+ className: "label",
1174
+ base: {
1175
+ /**
1176
+ * flex w-fit items-center gap-2 text-solid-gray-800
1177
+ */
1178
+ display: "flex",
1179
+ width: "fit-content",
1180
+ alignItems: "center",
1181
+ gap: 2,
1182
+ color: "solid-gray.800"
1183
+ },
1184
+ variants: {
1185
+ size: {
1186
+ /**
1187
+ * data-[size=sm]:text-std-16B-170 data-[size=md]:text-std-17B-170 data-[size=lg]:text-std-18B-160
1188
+ */
1189
+ sm: { textStyle: "std-16B-170" },
1190
+ md: { textStyle: "std-17B-170" },
1191
+ lg: { textStyle: "std-18B-160" }
1192
+ }
1193
+ },
1194
+ defaultVariants: {
1195
+ size: "md"
1196
+ }
1197
+ });
1198
+
1199
+ // src/recipes/select-box.ts
1200
+ import { defineRecipe as defineRecipe8 } from "@pandacss/dev";
1201
+ var select_box_default = defineRecipe8({
1202
+ className: "select-box",
1203
+ description: "\u30BB\u30EC\u30AF\u30C8\u30DC\u30C3\u30AF\u30B9\u306F\u3001\u8907\u6570\u306E\u9078\u629E\u80A2\u3092\u63D0\u4F9B\u3059\u308B\u30D5\u30A9\u30FC\u30E0\u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u3067\u3059\u3002",
1204
+ base: {
1205
+ /**
1206
+ * w-full pl-4 pr-10 py-[calc(11/16*1rem)]
1207
+ * appearance-none rounded-8
1208
+ * aria-disabled:pointer-events-none
1209
+ */
1210
+ width: "full",
1211
+ appearance: "none",
1212
+ pl: 4,
1213
+ pr: 10,
1214
+ py: "calc(11 / 16 * 1rem)",
1215
+ rounded: 8,
1216
+ pointerEvents: { base: "inherit", _disabled: "none" },
1217
+ /**
1218
+ * bg-white text-oln-16N-100 text-solid-gray-800
1219
+ * aria-disabled:text-solid-gray-420
1220
+ * aria-disabled:forced-colors:text-[GrayText]
1221
+ */
1222
+ bg: { base: "white", _disabled: "solid-gray.50" },
1223
+ color: { base: "solid-gray.800", _disabled: "solid-gray.420" },
1224
+ textStyle: "oln-16N-100",
1225
+ /**
1226
+ * border border-solid-gray-600 hover:border-black
1227
+ * aria-disabled:border-solid-gray-300 aria-disabled:bg-solid-gray-50
1228
+ * aria-disabled:forced-colors:border-[GrayText]
1229
+ */
1230
+ borderWidth: "1px",
1231
+ borderColor: {
1232
+ base: "solid-gray.900",
1233
+ _disabled: "solid-gray.300"
1234
+ },
1235
+ /**
1236
+ * remove button style
1237
+ */
1238
+ textAlign: "start",
1239
+ /**
1240
+ * focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
1241
+ */
1242
+ _focus: {
1243
+ outlineStyle: "solid",
1244
+ outlineWidth: "4px",
1245
+ outlineColor: "black",
1246
+ outlineOffset: "calc(2 / 16 * 1rem)",
1247
+ focusRing: "calc(2 / 16 * 1rem)"
1248
+ }
1249
+ },
1250
+ variants: {
1251
+ size: {
1252
+ /**
1253
+ * data-[size=sm]:h-10 data-[size=md]:h-12 data-[size=lg]:h-14
1254
+ */
1255
+ sm: {
1256
+ height: 10
1257
+ },
1258
+ md: {
1259
+ height: 12
1260
+ },
1261
+ lg: {
1262
+ height: 14
1263
+ }
1264
+ },
1265
+ invalid: {
1266
+ /**
1267
+ * aria-[invalid=true]:border-error-1aria-[invalid=true]:hover:border-red-1000
1268
+ */
1269
+ true: {
1270
+ borderColor: { base: "error.1", _hover: "red.1000" }
1271
+ }
1272
+ }
1273
+ }
1274
+ });
1275
+
1276
+ // src/recipes/support-text.ts
1277
+ import { defineRecipe as defineRecipe9 } from "@pandacss/dev";
1278
+ var support_text_default = defineRecipe9({
1279
+ className: "support-text",
1280
+ base: {
1281
+ /**
1282
+ * text-std-16N-170 text-solid-gray-700
1283
+ */
1284
+ textStyle: "dns-16N-170",
1285
+ color: "solid-gray.700"
1286
+ }
1287
+ });
1288
+
1289
+ // src/recipes/textarea.ts
1290
+ import { defineRecipe as defineRecipe10 } from "@pandacss/dev";
1291
+ var textarea_default = defineRecipe10({
1292
+ className: "textarea",
1293
+ description: "\u30C6\u30AD\u30B9\u30C8\u30A8\u30EA\u30A2\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306F\u30011\u884C\u4EE5\u4E0A\u306E\u30C6\u30AD\u30B9\u30C8\u3092\u5165\u529B\u3059\u308B\u5834\u5408\u306B\u4F7F\u7528\u3057\u307E\u3059\u3002",
1294
+ base: {
1295
+ /**
1296
+ * rounded-8 max-w-full p-4 aria-disabled:pointer-events-none
1297
+ */
1298
+ rounded: 8,
1299
+ p: 4,
1300
+ /**
1301
+ * text-std-16N-170 bg-white text-solid-gray-800
1302
+ * aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420
1303
+ * aria-disabled:forced-colors:text-[GrayText]
1304
+ */
1305
+ textStyle: "std-16N-170",
1306
+ bg: { base: "white", _disabled: "solid-gray.50" },
1307
+ color: {
1308
+ base: "solid-gray.800",
1309
+ _disabled: { base: "solid-gray.420", _highContrast: "GrayText" }
1310
+ },
1311
+ /**
1312
+ * border border-solid-gray-600 hover:border-black
1313
+ * aria-disabled:border-solid-gray-300 aria-disabled:forced-colors:border-[GrayText]
1314
+ */
1315
+ borderWidth: "1px",
1316
+ borderColor: {
1317
+ base: "solid-gray.600",
1318
+ _hover: "black",
1319
+ _disabled: { base: "solid-gray.300", _hover: "GrayText" }
1320
+ },
1321
+ /**
1322
+ * focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)]
1323
+ * focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
1324
+ */
1325
+ _focus: {
1326
+ outlineStyle: "solid",
1327
+ outlineWidth: "4px",
1328
+ outlineColor: "black",
1329
+ outlineOffset: "calc(2 / 16 * 1rem)",
1330
+ focusRing: "calc(2 / 16 * 1rem)"
1331
+ }
1332
+ },
1333
+ variants: {
1334
+ invalid: {
1335
+ true: {
1336
+ /**
1337
+ * aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000
1338
+ */
1339
+ borderColor: { base: "error.1", _hover: "red.1000" }
1340
+ }
1341
+ }
1342
+ },
1343
+ defaultVariants: {
1344
+ invalid: false
1345
+ }
1346
+ });
1347
+
1348
+ // src/recipes/input-text.ts
1349
+ var inputText = defineSlotRecipe6({
1350
+ className: "input-text",
1351
+ description: "\u30A4\u30F3\u30D7\u30C3\u30C8\u30C6\u30AD\u30B9\u30C8\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306F\u3001\u540D\u524D\u3084\u96FB\u8A71\u756A\u53F7\u306A\u3069\u30011\u884C\u4EE5\u5185\u306E\u30C6\u30AD\u30B9\u30C8\u3092\u5165\u529B\u3059\u308B\u5834\u5408\u306B\u4F7F\u7528\u3057\u307E\u3059\u3002",
1352
+ slots: fieldAnatomy.keys(),
1353
+ base: {
1354
+ root: {
1355
+ display: "flex",
1356
+ flexDirection: "column",
1357
+ gap: 1.5
1358
+ },
1359
+ label: {
1360
+ ...label_default.base
1361
+ },
1362
+ input: {
1363
+ ...input_default.base
1364
+ },
1365
+ textarea: {
1366
+ ...textarea_default.base
1367
+ },
1368
+ select: {
1369
+ ...select_box_default.base
1370
+ },
1371
+ errorText: {
1372
+ ...error_text_default.base
1373
+ },
1374
+ helperText: {
1375
+ ...support_text_default.base
1376
+ }
1377
+ },
1378
+ variants: {
1379
+ size: {
1380
+ lg: {
1381
+ label: { ...label_default.variants?.size?.lg },
1382
+ input: { ...input_default.variants?.size?.lg },
1383
+ select: { ...select_box_default.variants?.size?.lg }
1384
+ },
1385
+ md: {
1386
+ label: { ...label_default.variants?.size?.md },
1387
+ input: { ...input_default.variants?.size?.md },
1388
+ select: { ...select_box_default.variants?.size?.md }
1389
+ },
1390
+ sm: {
1391
+ label: { ...label_default.variants?.size?.sm },
1392
+ input: { ...input_default.variants?.size?.sm },
1393
+ select: { ...select_box_default.variants?.size?.sm }
1394
+ }
1395
+ },
1396
+ invalid: {
1397
+ true: {
1398
+ input: { ...input_default.variants?.invalid?.true },
1399
+ select: { ...select_box_default.variants?.invalid?.true },
1400
+ textarea: { ...textarea_default.variants?.invalid?.true }
1401
+ }
1402
+ }
1403
+ },
1404
+ defaultVariants: {
1405
+ size: "lg",
1406
+ invalid: false
1407
+ }
1408
+ });
1409
+ var input_text_default = inputText;
1410
+
1411
+ // src/recipes/legend.ts
1412
+ import { defineRecipe as defineRecipe11 } from "@pandacss/dev";
1413
+ var legend_default = defineRecipe11({
1414
+ className: "legend",
1415
+ base: {
1416
+ /**
1417
+ * flex w-fit items-center gap-2 text-solid-gray-800
1418
+ */
1419
+ display: "flex",
1420
+ width: "fit-content",
1421
+ alignItems: "center",
1422
+ gap: 2,
1423
+ color: "solid-gray.800"
1424
+ },
1425
+ variants: {
1426
+ size: {
1427
+ sm: {
1428
+ /**
1429
+ * data-[size=sm]:text-std-16B-170
1430
+ */
1431
+ textStyle: "std-16B-170"
1432
+ },
1433
+ md: {
1434
+ /**
1435
+ * data-[size=md]:text-std-17B-170
1436
+ */
1437
+ textStyle: "std-17B-170"
1438
+ },
1439
+ lg: {
1440
+ /**
1441
+ * data-[size=lg]:text-std-18B-160
1442
+ */
1443
+ textStyle: "std-18B-160"
1444
+ }
1445
+ }
1446
+ },
1447
+ defaultVariants: {
1448
+ size: "md"
1449
+ }
1450
+ });
1451
+
1452
+ // src/recipes/list.ts
1453
+ import { defineRecipe as defineRecipe12 } from "@pandacss/dev";
1454
+ var list_default = defineRecipe12({
1455
+ className: "list",
1456
+ base: {
1457
+ /**
1458
+ * py-1
1459
+ */
1460
+ py: 1
1461
+ }
1462
+ });
1463
+
1464
+ // src/recipes/menu.ts
1465
+ import { defineSlotRecipe as defineSlotRecipe7 } from "@pandacss/dev";
1466
+ import { anatomy as menuAnatomy } from "@ark-ui/anatomy/menu";
1467
+
1468
+ // src/recipes/menu-item.ts
1469
+ import { defineRecipe as defineRecipe13 } from "@pandacss/dev";
1470
+ var menu_item_default = defineRecipe13({
1471
+ className: "menu-item",
1472
+ base: {
1473
+ /**
1474
+ * flex relative items-center bg-white hover:bg-solid-gray-50 text-nowrap
1475
+ * text-oln-16N-100 text-solid-gray-800
1476
+ * ${isCurrent ? '!text-blue-1000 !bg-blue-100 font-bold' : ''}
1477
+ */
1478
+ display: "flex",
1479
+ position: "relative",
1480
+ alignItems: "center",
1481
+ textStyle: "dns-16N-130",
1482
+ bg: {
1483
+ base: "transparent",
1484
+ _hover: "solid-gray.50",
1485
+ _selected: {
1486
+ base: "keyColor.100",
1487
+ _hover: "keyColor.100"
1488
+ },
1489
+ _checked: {
1490
+ base: "keyColor.100",
1491
+ _hover: "keyColor.100"
1492
+ },
1493
+ _open: {
1494
+ base: "keyColor.50",
1495
+ _hover: "keyColor.50"
1496
+ }
1497
+ },
1498
+ color: {
1499
+ base: "solid-gray.800",
1500
+ _selected: "keyColor.1000",
1501
+ _checked: "keyColor.1000",
1502
+ _open: "keyColor.1000"
1503
+ },
1504
+ fontWeight: { base: "normal", _selected: "bold", _checked: "bold" },
1505
+ /**
1506
+ * hover:underline hover:underline-offset-[calc(3/16*1rem)]
1507
+ */
1508
+ _hover: {
1509
+ textDecoration: "underline",
1510
+ textUnderlineOffset: "calc(3 / 16 * 1rem)"
1511
+ },
1512
+ /**
1513
+ * py-3 pl-3 pr-6 gap-x-2
1514
+ */
1515
+ py: 3,
1516
+ pl: 3,
1517
+ pr: 6,
1518
+ columnGap: 2,
1519
+ /**
1520
+ * focus-visible:outline focus-visible:outline-4 focus-visible:outline-black
1521
+ * focus-visible:-outline-offset-4 focus-visible:bg-yellow-300
1522
+ * focus-visible:ring-[calc(6/16*1rem)] focus-visible:ring-inset
1523
+ * focus-visible:ring-yellow-300
1524
+ */
1525
+ _focusVisible: {
1526
+ // rounded: 4,
1527
+ outlineStyle: "solid",
1528
+ outlineWidth: "4px",
1529
+ outlineColor: "black",
1530
+ outlineOffset: "calc(2 / 16 * 1rem)",
1531
+ focusRing: "calc(6 / 16 * 1rem)"
1532
+ }
1533
+ },
1534
+ variants: {
1535
+ variant: {
1536
+ standard: {
1537
+ rounded: 4
1538
+ },
1539
+ boxed: {
1540
+ rounded: {
1541
+ base: 0,
1542
+ _focusVisible: 4
1543
+ }
1544
+ }
1545
+ },
1546
+ isCondensed: {
1547
+ true: {
1548
+ /**
1549
+ * ${isCondensed ? 'py-1.5 pl-1.5 pr-4 gap-x-1.5'}
1550
+ */
1551
+ py: 1.5,
1552
+ pl: 1.5,
1553
+ pr: 4,
1554
+ columnGap: 1.5
1555
+ }
1556
+ }
1557
+ },
1558
+ defaultVariants: {
1559
+ variant: "standard",
1560
+ isCondensed: false
1561
+ }
1562
+ });
1563
+
1564
+ // src/recipes/menu.ts
1565
+ var itemStyle = {
1566
+ ...menu_item_default.base
1567
+ };
1568
+ var menu_default = defineSlotRecipe7({
1569
+ className: "menu",
1570
+ slots: menuAnatomy.keys(),
1571
+ base: {
1572
+ content: {
1573
+ minWidth: "fit-content",
1574
+ width: "auto",
1575
+ maxHeight: "calc((44 * 6.5 + 16) / 16 * 1rem)",
1576
+ py: 2,
1577
+ borderWidth: "1px",
1578
+ borderColor: "solid-gray.420",
1579
+ bg: "white",
1580
+ rounded: "lg",
1581
+ boxShadow: 1
1582
+ /**
1583
+ * min-w-fit w-auto py-2 border border-solid-grey-420 bg-white shadow-1 rounded-lg
1584
+ has-[>:nth-child(7)]:rounded-r-none
1585
+ ${isCondensed ? 'max-h-[calc((32*6.5+16)/16*1rem)]' : 'max-h-[calc((44*6.5+16)/16*1rem)]'}
1586
+ */
1587
+ },
1588
+ itemGroupLabel: {
1589
+ ...itemStyle,
1590
+ fontWeight: "bold"
1591
+ },
1592
+ triggerItem: {
1593
+ ...itemStyle
1594
+ },
1595
+ item: {
1596
+ ...itemStyle,
1597
+ textDecoration: {
1598
+ base: "none",
1599
+ _hover: "underline"
1600
+ },
1601
+ textUnderlineOffset: "calc(3 / 16 * 1rem)",
1602
+ _checked: {
1603
+ bg: "keyColor.100",
1604
+ color: "keyColor.1000",
1605
+ fontWeight: "bold"
1606
+ },
1607
+ _focusVisible: {
1608
+ outlineStyle: "solid",
1609
+ outlineWidth: "4px",
1610
+ outlineColor: "black",
1611
+ outlineOffset: "calc(2 / 16 * 1rem)",
1612
+ focusRing: "calc(2 / 16 * 1rem)",
1613
+ zIndex: 1
1614
+ }
1615
+ /**
1616
+ * flex relative items-center bg-white text-nowrap text-oln-16N-1 text-solid-grey-800
1617
+ ${isCondensed ? 'py-1.5 pl-1.5 pr-4 gap-x-1.5' : 'py-3 pl-3 pr-6 gap-x-2'}
1618
+ ${isCurrent && '!text-blue-1000 !bg-blue-100 font-bold'}
1619
+ hover:underline hover:underline-offset-[calc(3/16*1rem)] hover:bg-solid-grey-50
1620
+ focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:-outline-offset-4 focus-visible:bg-yellow-300 focus-visible:ring-[calc(6/16*1rem)] focus-visible:ring-inset focus-visible:ring-yellow-300
1621
+ ${className ?? ''}
1622
+ */
1623
+ }
1624
+ },
1625
+ variants: {
1626
+ isCondensed: {
1627
+ true: {
1628
+ content: {
1629
+ maxHeight: "calc((32 * 6.5 + 16) / 16 * 1rem)"
1630
+ },
1631
+ itemGroupLabel: {
1632
+ py: 1.5,
1633
+ pl: 1.5,
1634
+ pr: 4,
1635
+ columnGap: 1.5
1636
+ },
1637
+ item: {
1638
+ py: 1.5,
1639
+ pl: 1.5,
1640
+ pr: 4,
1641
+ columnGap: 1.5
1642
+ },
1643
+ triggerItem: {
1644
+ py: 1.5,
1645
+ pl: 1.5,
1646
+ pr: 4,
1647
+ columnGap: 1.5
1648
+ }
1649
+ }
1650
+ }
1651
+ },
1652
+ defaultVariants: {
1653
+ isCondensed: false
1654
+ }
1655
+ });
1656
+
1657
+ // src/recipes/menu-list.ts
1658
+ import { defineSlotRecipe as defineSlotRecipe8 } from "@pandacss/dev";
1659
+ var menu_list_default = defineSlotRecipe8({
1660
+ className: "menu-list",
1661
+ slots: menuListAnatomy.keys(),
1662
+ base: {
1663
+ root: {},
1664
+ label: {
1665
+ py: 3,
1666
+ pl: 3,
1667
+ pr: 6,
1668
+ textStyle: "oln-17B-100",
1669
+ textWrap: "nowrap",
1670
+ display: "block",
1671
+ mb: 2
1672
+ },
1673
+ content: {},
1674
+ item: {
1675
+ ...menu_item_default.base
1676
+ },
1677
+ itemGroup: {
1678
+ my: 1
1679
+ },
1680
+ itemGroupLabel: {
1681
+ ...menu_item_default.base,
1682
+ position: "sticky",
1683
+ top: 0,
1684
+ bg: "white"
1685
+ },
1686
+ itemText: {},
1687
+ itemIndicator: {
1688
+ position: "absolute",
1689
+ top: "50%",
1690
+ right: 4,
1691
+ transform: "translateY(-50%)"
1692
+ }
1693
+ },
1694
+ variants: {
1695
+ variant: {
1696
+ standard: {
1697
+ item: {
1698
+ ...menu_item_default.variants?.variant?.standard
1699
+ },
1700
+ itemGroupLabel: {
1701
+ ...menu_item_default.variants?.variant?.standard
1702
+ }
1703
+ },
1704
+ boxed: {
1705
+ item: {
1706
+ ...menu_item_default.variants?.variant?.boxed
1707
+ },
1708
+ itemGroupLabel: {
1709
+ ...menu_item_default.variants?.variant?.boxed
1710
+ }
1711
+ }
1712
+ },
1713
+ isCondensed: {
1714
+ true: {}
1715
+ }
1716
+ },
1717
+ defaultVariants: {
1718
+ variant: "standard",
1719
+ isCondensed: false
1720
+ }
1721
+ });
1722
+
1723
+ // src/recipes/notification-banner.ts
1724
+ import { defineSlotRecipe as defineSlotRecipe9 } from "@pandacss/dev";
1725
+ var notification_banner_default = defineSlotRecipe9({
1726
+ className: "notification-banner",
1727
+ slots: notificationBannerAnatomy.keys(),
1728
+ base: {
1729
+ root: {
1730
+ /**
1731
+ * [--icon-size:calc(24/16*1rem)] desktop:[--icon-size:calc(36/16*1rem)]
1732
+ */
1733
+ "--icon-size": {
1734
+ base: "calc(24 / 16 * 1rem)",
1735
+ md: "calc(36 / 16 * 1rem)"
1736
+ },
1737
+ "--icon-scale": {
1738
+ base: 24 / 36,
1739
+ md: 1
1740
+ },
1741
+ /**
1742
+ * p-4 desktop:p-6 border-current
1743
+ */
1744
+ p: { base: 4, md: 6 },
1745
+ borderColor: "currentcolor",
1746
+ /**
1747
+ * grid grid-cols-[var(--icon-size)_1fr_minmax(0,auto)]
1748
+ * gap-x-3 desktop:gap-x-6 gap-y-4
1749
+ */
1750
+ display: "grid",
1751
+ gridTemplateColumns: "var(--icon-size) 1fr minmax(0, auto)",
1752
+ columnGap: { base: 3, md: 6 },
1753
+ rowGap: 4
1754
+ },
1755
+ header: {
1756
+ /**
1757
+ * grid grid-cols-subgrid col-start-2 -col-end-1 place-items-start
1758
+ [&>*:last-child]:-col-end-1
1759
+ */
1760
+ display: "grid",
1761
+ gridTemplateColumns: "subgrid",
1762
+ gridColumnStart: 2,
1763
+ gridColumnEnd: -1,
1764
+ placeItems: "start",
1765
+ "& > *:last-child": {
1766
+ gridColumnEnd: -1
1767
+ }
1768
+ },
1769
+ icon: {
1770
+ /**
1771
+ * mt-[calc(2/16*1rem)] desktop:mt-0
1772
+ */
1773
+ mt: { base: "calc(2 / 16 * 1rem)", md: 0 },
1774
+ /**
1775
+ * h-auto max-w-full
1776
+ */
1777
+ height: "auto",
1778
+ maxWidth: "full",
1779
+ /**
1780
+ * icon element
1781
+ * instead of icon component
1782
+ */
1783
+ _before: {
1784
+ content: '""',
1785
+ display: "block",
1786
+ bg: "currentColor",
1787
+ width: "36px",
1788
+ height: "36px",
1789
+ transformOrigin: "left center",
1790
+ transform: "scale(var(--icon-scale))"
1791
+ }
1792
+ },
1793
+ close: {
1794
+ /**
1795
+ * inline-flex items-center gap-0.5
1796
+ * -mt-2 -mr-3 desktop:mt-0 desktop:mr-0 desktop:px-2 desktop:py-0.5
1797
+ */
1798
+ display: "inline-flex",
1799
+ alignItems: "center",
1800
+ gap: 0.5,
1801
+ mt: { base: -2, md: 0 },
1802
+ mr: { base: -3, md: 0 },
1803
+ px: { base: 0, md: 2 },
1804
+ py: { base: 0, md: 0.5 },
1805
+ /**
1806
+ * text-solid-gray-900
1807
+ */
1808
+ color: "solid-gray.900",
1809
+ /**
1810
+ * border border-transparent hover:border-solid-gray-900 rounded-8 focus-visible:border-transparent
1811
+ */
1812
+ borderWidth: "1px",
1813
+ borderColor: {
1814
+ base: "transparent",
1815
+ _hover: "solid-gray.900",
1816
+ _focusVisible: "transparent"
1817
+ },
1818
+ rounded: 8,
1819
+ /**
1820
+ * focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
1821
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300 focus-visible:bg-yellow-300
1822
+ *
1823
+ */
1824
+ _focusVisible: {
1825
+ outlineStyle: "solid",
1826
+ outlineWidth: "4px",
1827
+ outlineColor: "black",
1828
+ outlineOffset: "calc(2 / 16 * 1rem)",
1829
+ focusRing: "calc(2 / 16 * 1rem)"
1830
+ }
1831
+ },
1832
+ heading: {
1833
+ /**
1834
+ * text-solid-gray-900 col-start-1 desktop:mt-0.5
1835
+ * text-std-17B-170 desktop:text-std-20B-160
1836
+ *
1837
+ * @todo
1838
+ * std-20B-160 doesn't exist and replace it to std-20B-150
1839
+ */
1840
+ textStyle: { base: "std-17B-170", md: "std-20B-150" },
1841
+ color: "solid-gray.900",
1842
+ gridColumnStart: 1,
1843
+ mt: { base: "auto", md: 0.5 }
1844
+ },
1845
+ body: {
1846
+ /**
1847
+ * col-start-1 -col-end-1 desktop:col-start-2 text-std-16N-170 text-solid-gray-800
1848
+ */
1849
+ gridColumnStart: { base: 1, md: 2 },
1850
+ gridColumnEnd: -1,
1851
+ textStyle: "std-16N-170",
1852
+ color: "solid-gray.800"
1853
+ }
1854
+ },
1855
+ variants: {
1856
+ type: {
1857
+ success: {
1858
+ root: {
1859
+ /**
1860
+ * text-success-2 [--color-chip-color:currentColor]
1861
+ */
1862
+ color: "success.2",
1863
+ "--color-chip-color": "currentColor"
1864
+ },
1865
+ icon: {
1866
+ _before: {
1867
+ clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')"
1868
+ }
1869
+ }
1870
+ },
1871
+ error: {
1872
+ root: {
1873
+ /**
1874
+ * text-error-1 [--color-chip-color:currentColor]
1875
+ */
1876
+ color: "error.1",
1877
+ "--color-chip-color": "currentColor"
1878
+ },
1879
+ icon: {
1880
+ _before: {
1881
+ clipPath: "path('M24.2525 33H11.7475L3 24.2525V11.7475L11.7475 3H24.2525L33 11.7475V24.2525L24.2525 33Z')"
1882
+ }
1883
+ }
1884
+ },
1885
+ warning: {
1886
+ root: {
1887
+ /**
1888
+ * text-warning-yellow-2 [--color-chip-color:theme(colors.yellow.400)]
1889
+ */
1890
+ color: "warning.yellow.2",
1891
+ "--color-chip-color": "{colors.yellow.400}"
1892
+ },
1893
+ icon: {
1894
+ _before: {
1895
+ clipPath: "path('M0 34.0909H36L18 3L0 34.0909ZM19.6364 29.1818H16.3636V25.9091H19.6364V29.1818ZM19.6364 22.6364H16.3636V16.0909H19.6364V22.6364Z')"
1896
+ }
1897
+ }
1898
+ },
1899
+ info1: {
1900
+ root: {
1901
+ /**
1902
+ * text-blue-900 [--color-chip-color:currentColor]
1903
+ */
1904
+ color: "blue.900",
1905
+ "--color-chip-color": "currentColor"
1906
+ },
1907
+ icon: {
1908
+ _before: {
1909
+ clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')"
1910
+ }
1911
+ }
1912
+ },
1913
+ info2: {
1914
+ root: {
1915
+ /**
1916
+ * text-solid-gray-536 [--color-chip-color:currentColor]
1917
+ */
1918
+ color: "solid-gray.536",
1919
+ "--color-chip-color": "currentColor"
1920
+ },
1921
+ icon: {
1922
+ _before: {
1923
+ clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')"
1924
+ }
1925
+ }
1926
+ }
1927
+ },
1928
+ bannerStyle: {
1929
+ standard: {
1930
+ root: {
1931
+ /**
1932
+ * border-[3px] rounded-12
1933
+ */
1934
+ borderWidth: "3px",
1935
+ rounded: 12
1936
+ }
1937
+ },
1938
+ "color-chip": {
1939
+ root: {
1940
+ /**
1941
+ * border-2 !pl-6 desktop:!pl-10
1942
+ * shadow-[inset_8px_0_0_0_var(--color-chip-color)]
1943
+ * desktop:shadow-[inset_16px_0_0_0_var(--color-chip-color)]
1944
+ */
1945
+ borderWidth: "2px",
1946
+ pl: { base: 6, md: 10 },
1947
+ shadow: "inset 16px 0 0 0 var(--color-chip-color)"
1948
+ }
1949
+ }
1950
+ }
1951
+ },
1952
+ defaultVariants: {
1953
+ type: "info1",
1954
+ bannerStyle: "standard"
1955
+ }
1956
+ });
1957
+
1958
+ // src/recipes/ordered-list.ts
1959
+ import { defineRecipe as defineRecipe14 } from "@pandacss/dev";
1960
+ var ordered_list_default = defineRecipe14({
1961
+ className: "ordered-list",
1962
+ base: {
1963
+ /**
1964
+ * pl-8 list-[revert]
1965
+ */
1966
+ pl: 8,
1967
+ listStyle: "revert",
1968
+ /**
1969
+ * [&_:where(ol,ul)]:mt-1 [&_:where(ol,ul)]:-mb-1
1970
+ */
1971
+ "&:where(ol,ul)": {
1972
+ mt: 1,
1973
+ mb: -1
1974
+ }
1975
+ }
1976
+ });
1977
+
1978
+ // src/recipes/radio.ts
1979
+ import { defineSlotRecipe as defineSlotRecipe10 } from "@pandacss/dev";
1980
+ var radio_default = defineSlotRecipe10({
1981
+ className: "radio",
1982
+ slots: ["item", "itemControl", "itemText"],
1983
+ base: {
1984
+ item: {
1985
+ /**
1986
+ * flex w-fit items-start py-2
1987
+ */
1988
+ display: "flex",
1989
+ width: "fit-content",
1990
+ alignItems: "start",
1991
+ py: 2
1992
+ },
1993
+ itemControl: {
1994
+ /**
1995
+ * flex items-center justify-center shrink-0 rounded-full
1996
+ * has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
1997
+ */
1998
+ /*
1999
+ display: "flex",
2000
+ alignItems: "center",
2001
+ justifyContent: "center",
2002
+ flexShrink: 0,
2003
+ rounded: "full",
2004
+ */
2005
+ /**
2006
+ * appearance-none size-[calc(5/6*100%)] rounded-full
2007
+ */
2008
+ appearance: "none",
2009
+ rounded: "full",
2010
+ width: "calc(var(--radio-size) * 5 / 6)",
2011
+ height: "calc(var(--radio-size) * 5 / 6)",
2012
+ m: "calc(var(--radio-size) / 12)",
2013
+ flexShrink: 0,
2014
+ /**
2015
+ * bg-white aria-disabled:!bg-solid-gray-50
2016
+ */
2017
+ bg: { base: "white", _disabled: "solid-gray.50" },
2018
+ borderColor: {
2019
+ /**
2020
+ * border-solid-gray-600
2021
+ * hover:border-black
2022
+ * checked:border-blue-900
2023
+ * checked:hover:border-blue-1100
2024
+ * forced-colors:!border-[ButtonText] forced-colors:checked:!border-[Highlight]
2025
+ */
2026
+ base: "solid-gray.600",
2027
+ _hover: "black",
2028
+ _highContrast: { base: "ButtonText" },
2029
+ _checked: {
2030
+ base: "keyColor.900",
2031
+ _hover: "keyColor.1100",
2032
+ _disabled: "solid-gray.300",
2033
+ _highContrast: "Highlight"
2034
+ },
2035
+ /**
2036
+ * data-[error]:border-error-1 data-[error]:hover:border-red-1000
2037
+ */
2038
+ _invalid: { base: "error.1", _hover: "red.1000" },
2039
+ /**
2040
+ * aria-disabled:!border-solid-gray-300
2041
+ * forced-colors:aria-disabled:!border-[GrayText]
2042
+ */
2043
+ _disabled: { base: "solid-gray.300", _highContrast: "GrayText" }
2044
+ },
2045
+ /**
2046
+ * outline on hover
2047
+ * has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
2048
+ */
2049
+ '&:is(:hover, [data-hover]):not(:focus):not([aria-disabled="true"])': {
2050
+ outlineStyle: "solid",
2051
+ outlineWidth: "calc(var(--radio-size) / 12)",
2052
+ outlineColor: "solid-gray.420"
2053
+ },
2054
+ /**
2055
+ * focus:outline focus:outline-4 focus:outline-black
2056
+ * focus:outline-offset-[calc(2/16*1rem)]
2057
+ * focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
2058
+ */
2059
+ _focus: {
2060
+ outlineStyle: "solid",
2061
+ outlineWidth: "4px",
2062
+ outlineColor: "black",
2063
+ outlineOffset: "calc(2 / 16 * 1rem)",
2064
+ focusRing: "calc(2 / 16 * 1rem)"
2065
+ },
2066
+ _before: {
2067
+ /**
2068
+ * before:hidden
2069
+ * before:size-full
2070
+ * before:[clip-path:circle(calc(5/16*100%))]
2071
+ * before:bg-white
2072
+ */
2073
+ content: '""',
2074
+ display: "none",
2075
+ width: "full",
2076
+ height: "full",
2077
+ clipPath: "circle(calc(5 / 16 * 100%))",
2078
+ bg: "white"
2079
+ },
2080
+ _checked: {
2081
+ /**
2082
+ * checked:before:block
2083
+ * checked:before:bg-blue-900 checked:hover:before:bg-blue-1100
2084
+ * data-[error]:checked:before:bg-error-1
2085
+ * data-[error]:checked:hover:before:bg-red-1000
2086
+ * aria-disabled:checked:before:!bg-solid-gray-300
2087
+ * forced-colors:checked:before:!bg-[Highlight]
2088
+ * forced-colors:aria-disabled:checked:before:!bg-[GrayText]
2089
+ */
2090
+ _before: {
2091
+ display: "block",
2092
+ bg: "keyColor.900",
2093
+ _hover: "keyColor.1100",
2094
+ _invalid: {
2095
+ base: "error.1",
2096
+ _hover: "red.1000"
2097
+ },
2098
+ _highContrast: "Highlight"
2099
+ },
2100
+ _disabled: {
2101
+ _before: {
2102
+ base: "solid-gray.300",
2103
+ _highContrast: "GrayText"
2104
+ }
2105
+ }
2106
+ }
2107
+ },
2108
+ itemText: {
2109
+ /**
2110
+ * text-solid-gray-800
2111
+ */
2112
+ color: "solid-gray.800"
2113
+ }
2114
+ },
2115
+ variants: {
2116
+ size: {
2117
+ sm: {
2118
+ item: {
2119
+ /**
2120
+ * data-[size=sm]:gap-1
2121
+ */
2122
+ gap: 1
2123
+ },
2124
+ itemControl: {
2125
+ /**
2126
+ * data-[size=sm]:size-6
2127
+ */
2128
+ "--radio-size": "{spacing.6}",
2129
+ /**
2130
+ * data-[size=sm]:border-[calc(2/16*1rem)]
2131
+ */
2132
+ borderWidth: "calc(2 / 16 * 1rem)"
2133
+ },
2134
+ itemText: {
2135
+ /**
2136
+ * data-[size=sm]:pt-px
2137
+ * data-[size=sm]:text-dns-16N-130
2138
+ */
2139
+ pt: "1px",
2140
+ textStyle: "dns-16N-130"
2141
+ }
2142
+ },
2143
+ md: {
2144
+ item: {
2145
+ /**
2146
+ * data-[size=md]:gap-2
2147
+ */
2148
+ gap: 2
2149
+ },
2150
+ itemControl: {
2151
+ /**
2152
+ * data-[size=md]:size-8
2153
+ */
2154
+ "--radio-size": "{spacing.8}",
2155
+ /**
2156
+ * data-[size=md]:border-[calc(2/16*1rem)]
2157
+ */
2158
+ borderWidth: "calc(2 / 16 * 1rem)"
2159
+ },
2160
+ itemText: {
2161
+ /**
2162
+ * data-[size=md]:pt-1
2163
+ * data-[size=md]:text-dns-16N-130
2164
+ */
2165
+ pt: 1,
2166
+ textStyle: "dns-16N-130"
2167
+ }
2168
+ },
2169
+ lg: {
2170
+ item: {
2171
+ /**
2172
+ * data-[size=lg]:gap-3
2173
+ */
2174
+ gap: 3
2175
+ },
2176
+ itemControl: {
2177
+ /**
2178
+ * data-[size=lg]:size-11
2179
+ */
2180
+ "--radio-size": "{spacing.11}",
2181
+ /**
2182
+ * data-[size=lg]:border-[calc(3/16*1rem)]
2183
+ */
2184
+ borderWidth: "calc(3 / 16 * 1rem)"
2185
+ },
2186
+ itemText: {
2187
+ /**
2188
+ * data-[size=lg]:pt-2.5
2189
+ * data-[size=lg]:text-dns-17N-130
2190
+ */
2191
+ pt: 2.5,
2192
+ textStyle: "dns-17N-130"
2193
+ }
2194
+ }
2195
+ }
2196
+ },
2197
+ defaultVariants: {
2198
+ size: "sm"
2199
+ }
2200
+ });
2201
+
2202
+ // src/recipes/radio-group.ts
2203
+ import { defineSlotRecipe as defineSlotRecipe11 } from "@pandacss/dev";
2204
+ import { anatomy as radioGroupAnatomy } from "@ark-ui/anatomy/radio-group";
2205
+ var radio_group_default = defineSlotRecipe11({
2206
+ className: "radio-group",
2207
+ slots: radioGroupAnatomy.keys(),
2208
+ base: {
2209
+ root: {
2210
+ display: "flex",
2211
+ _vertical: {
2212
+ flexDirection: "column",
2213
+ gap: 0
2214
+ },
2215
+ _horizonal: {
2216
+ flexDirection: "row",
2217
+ gap: 4
2218
+ }
2219
+ },
2220
+ item: {
2221
+ ...radio_default.base?.item
2222
+ },
2223
+ itemControl: {
2224
+ ...radio_default.base?.itemControl
2225
+ },
2226
+ itemText: {
2227
+ ...radio_default.base?.itemText
2228
+ }
2229
+ },
2230
+ variants: {
2231
+ size: {
2232
+ sm: {
2233
+ item: {
2234
+ ...radio_default.variants?.size?.sm?.item
2235
+ },
2236
+ itemControl: {
2237
+ ...radio_default.variants?.size?.sm?.itemControl
2238
+ },
2239
+ itemText: {
2240
+ ...radio_default.variants?.size?.sm?.itemText
2241
+ }
2242
+ },
2243
+ md: {
2244
+ item: {
2245
+ ...radio_default.variants?.size?.md?.item
2246
+ },
2247
+ itemControl: {
2248
+ ...radio_default.variants?.size?.md?.itemControl
2249
+ },
2250
+ itemText: {
2251
+ ...radio_default.variants?.size?.md?.itemText
2252
+ }
2253
+ },
2254
+ lg: {
2255
+ item: {
2256
+ ...radio_default.variants?.size?.lg?.item
2257
+ },
2258
+ itemControl: {
2259
+ ...radio_default.variants?.size?.lg?.itemControl
2260
+ },
2261
+ itemText: {
2262
+ ...radio_default.variants?.size?.lg?.itemText
2263
+ }
2264
+ }
2265
+ }
2266
+ },
2267
+ defaultVariants: {
2268
+ size: "sm"
2269
+ }
2270
+ });
2271
+
2272
+ // src/recipes/requirement-badge.ts
2273
+ import { defineRecipe as defineRecipe15 } from "@pandacss/dev";
2274
+ var requirement_badge_default = defineRecipe15({
2275
+ className: "requirement-badge",
2276
+ base: {
2277
+ /**
2278
+ * text-oln-16N-100 text-red-800
2279
+ */
2280
+ textStyle: "oln-16N-100",
2281
+ color: "red.800"
2282
+ },
2283
+ variants: {
2284
+ isOptional: {
2285
+ true: {
2286
+ /**
2287
+ * data-[is-optional]:text-solid-gray-800
2288
+ */
2289
+ color: "solid-gray.800"
2290
+ }
2291
+ }
2292
+ },
2293
+ defaultVariants: {
2294
+ isOptional: false
2295
+ }
2296
+ });
2297
+
2298
+ // src/recipes/resource-list.ts
2299
+ import { defineSlotRecipe as defineSlotRecipe12 } from "@pandacss/dev";
2300
+ var resource_list_default = defineSlotRecipe12({
2301
+ className: "resource-list",
2302
+ slots: resourceListAnatomy.keys(),
2303
+ base: {
2304
+ root: {
2305
+ display: "flex",
2306
+ borderColor: "solid-gray.420",
2307
+ bg: {
2308
+ "&:has(input:checked)": "keyColor.50",
2309
+ _selected: "keyColor.50"
2310
+ }
2311
+ },
2312
+ contentsContainer: {
2313
+ display: "flex",
2314
+ flexGrow: 1,
2315
+ flexDirection: "row",
2316
+ alignItems: "center",
2317
+ justifyContent: "start",
2318
+ gap: { base: 4, md: 6 },
2319
+ /**
2320
+ * p-4 md:px-6 md:py-4
2321
+ */
2322
+ py: 4,
2323
+ px: { base: 4, md: 6 },
2324
+ bg: { base: "transparent", _hover: "solid-gray.50" },
2325
+ _focusVisible: {
2326
+ outlineStyle: "solid",
2327
+ outlineWidth: "4px",
2328
+ outlineColor: "black",
2329
+ outlineOffset: "calc(2 / 16 * 1rem)",
2330
+ focusRing: "calc(2 / 16 * 1rem)"
2331
+ }
2332
+ },
2333
+ functionButton: {
2334
+ p: 4,
2335
+ display: "flex",
2336
+ alignItems: "center",
2337
+ justifyContent: "center"
2338
+ },
2339
+ frontIcon: {
2340
+ // px: 2,
2341
+ },
2342
+ content: {
2343
+ height: "full",
2344
+ flexGrow: 1,
2345
+ display: "flex",
2346
+ flexDirection: "column"
2347
+ },
2348
+ title: {
2349
+ /**
2350
+ * mb-4 text-std-20B-150 font-bold group-hover:text-blue-1000 group-hover:decoration-[calc(3/16*1rem)] md:mb-4
2351
+ */
2352
+ textStyle: "std-20B-150",
2353
+ width: "fit-content"
2354
+ },
2355
+ label: {
2356
+ zIndex: 1,
2357
+ width: "fit-content",
2358
+ textStyle: "oln-17N-100",
2359
+ color: "solid-gray.800"
2360
+ },
2361
+ supportText: {
2362
+ color: "solid-gray.800"
2363
+ },
2364
+ subLabel: {
2365
+ zIndex: 1,
2366
+ color: "solid-gray.800"
2367
+ }
2368
+ },
2369
+ variants: {
2370
+ variant: {
2371
+ list: {
2372
+ root: {
2373
+ borderBottomWidth: "1px"
2374
+ }
2375
+ },
2376
+ frame: {
2377
+ root: {
2378
+ rounded: 16,
2379
+ borderWidth: "1px"
2380
+ },
2381
+ contentsContainer: {
2382
+ borderTopLeftRadius: 16,
2383
+ borderBottomLeftRadius: 16,
2384
+ _only: {
2385
+ borderTopRightRadius: 16,
2386
+ borderBottomRightRadius: 16
2387
+ }
2388
+ },
2389
+ functionButton: {
2390
+ borderTopRightRadius: 16,
2391
+ borderBottomRightRadius: 16
2392
+ }
2393
+ }
2394
+ },
2395
+ asLink: {
2396
+ true: {
2397
+ contentsContainer: {
2398
+ position: "relative"
2399
+ },
2400
+ title: {
2401
+ _before: {
2402
+ content: '""',
2403
+ position: "absolute",
2404
+ top: 0,
2405
+ left: 0,
2406
+ width: "full",
2407
+ height: "full",
2408
+ zIndex: 0,
2409
+ cursor: "inherit"
2410
+ }
2411
+ },
2412
+ supportText: {
2413
+ textDecoration: { base: "none", _groupHover: "underline" }
2414
+ }
2415
+ }
2416
+ }
2417
+ }
2418
+ });
2419
+
2420
+ // src/recipes/select.ts
2421
+ import { defineSlotRecipe as defineSlotRecipe13 } from "@pandacss/dev";
2422
+ import { anatomy as selectAnatomy } from "@ark-ui/anatomy/select";
2423
+ var select_default = defineSlotRecipe13({
2424
+ className: "select",
2425
+ description: "\u30BB\u30EC\u30AF\u30C8\u30DC\u30C3\u30AF\u30B9\u306F\u3001\u8907\u6570\u306E\u9078\u629E\u80A2\u3092\u63D0\u4F9B\u3059\u308B\u30D5\u30A9\u30FC\u30E0\u30B3\u30F3\u30C8\u30ED\u30FC\u30EB\u3067\u3059\u3002",
2426
+ slots: selectAnatomy.keys(),
2427
+ base: {
2428
+ root: {
2429
+ display: "flex",
2430
+ flexDirection: "column",
2431
+ gap: 1.5
2432
+ },
2433
+ label: {
2434
+ ...label_default.base
2435
+ },
2436
+ control: {
2437
+ /**
2438
+ * relative min-w-80 max-w-full
2439
+ */
2440
+ position: "relative",
2441
+ minWidth: "80px",
2442
+ maxWidth: "full"
2443
+ },
2444
+ trigger: {
2445
+ ...select_box_default.base,
2446
+ /**
2447
+ * adapt to clearTrigger
2448
+ */
2449
+ pr: 20
2450
+ },
2451
+ indicator: {
2452
+ /**
2453
+ * pointer-events-none absolute right-4 top-1/2 -translate-y-1/2
2454
+ */
2455
+ pointerEvents: "none",
2456
+ position: "absolute",
2457
+ top: "50%",
2458
+ transform: "translateY(-50%)",
2459
+ right: 4,
2460
+ /**
2461
+ * ${props['aria-disabled'] ? 'text-solid-gray-420 forced-colors:text-[GrayText]' : 'text-solid-gray-900 forced-colors:text-[CanvasText]'}
2462
+ */
2463
+ color: {
2464
+ base: { base: "solid-gray.900", _highContrast: "CanvasText" },
2465
+ _disabled: { base: "solid-gray.420", _highContrast: "GrayText" }
2466
+ }
2467
+ },
2468
+ clearTrigger: {
2469
+ position: "absolute",
2470
+ top: "50%",
2471
+ right: 12,
2472
+ transform: "translateY(-50%)"
2473
+ },
2474
+ content: {
2475
+ ...menu_default.base?.content
2476
+ },
2477
+ itemGroupLabel: {
2478
+ textStyle: "oln-16N-1",
2479
+ fontWeight: "bold",
2480
+ py: 3,
2481
+ pl: 3,
2482
+ pr: 6
2483
+ },
2484
+ item: {
2485
+ ...menu_default.base?.item
2486
+ },
2487
+ itemIndicator: {
2488
+ pointerEvents: "none",
2489
+ position: "absolute",
2490
+ right: 4,
2491
+ top: "50%",
2492
+ transform: "translateY(-50%)"
2493
+ }
2494
+ },
2495
+ variants: {
2496
+ size: {
2497
+ lg: {
2498
+ trigger: {
2499
+ ...select_box_default.variants?.size?.lg
2500
+ },
2501
+ label: { ...label_default.variants?.size?.lg }
2502
+ },
2503
+ md: {
2504
+ trigger: {
2505
+ ...select_box_default.variants?.size?.md
2506
+ },
2507
+ label: { ...label_default.variants?.size?.md }
2508
+ },
2509
+ sm: {
2510
+ trigger: {
2511
+ ...select_box_default.variants?.size?.sm
2512
+ },
2513
+ label: { ...label_default.variants?.size?.sm }
2514
+ }
2515
+ },
2516
+ invalid: {
2517
+ true: {
2518
+ trigger: {
2519
+ ...select_box_default.variants?.invalid?.true
2520
+ }
2521
+ }
2522
+ }
2523
+ },
2524
+ defaultVariants: {
2525
+ size: "lg",
2526
+ invalid: false
2527
+ }
2528
+ });
2529
+
2530
+ // src/recipes/table.ts
2531
+ import { defineSlotRecipe as defineSlotRecipe14 } from "@pandacss/dev";
2532
+ var table_default = defineSlotRecipe14({
2533
+ className: "table",
2534
+ slots: [
2535
+ "root",
2536
+ "head",
2537
+ "body",
2538
+ "foot",
2539
+ "row",
2540
+ "header",
2541
+ "cell",
2542
+ "colgroup",
2543
+ "col",
2544
+ "caption"
2545
+ ],
2546
+ base: {
2547
+ root: {
2548
+ /**
2549
+ * w-full text-std-16N-170
2550
+ */
2551
+ width: "full"
2552
+ },
2553
+ head: {
2554
+ "& tr": {
2555
+ /**
2556
+ * border-black bg-solid-gray-50
2557
+ */
2558
+ borderColor: "black",
2559
+ bg: "solid-gray.50"
2560
+ }
2561
+ },
2562
+ body: {
2563
+ "& tr": {
2564
+ /**
2565
+ * border-solid-gray-420
2566
+ */
2567
+ borderColor: "solid-gray.420"
2568
+ /**
2569
+ * [&:has(input:checked)]:bg-blue-100
2570
+ */
2571
+ /*
2572
+ "&:has(input:checked)": {
2573
+ bg: "keyColor.100",
2574
+ },
2575
+ */
2576
+ }
2577
+ },
2578
+ foot: {},
2579
+ row: {
2580
+ /**
2581
+ * border-b
2582
+ */
2583
+ borderBottomWidth: "1px",
2584
+ "tbody > &:has(input:checked)": { bg: "keyColor.100" }
2585
+ },
2586
+ header: {
2587
+ /**
2588
+ * px-4 text-start align-top
2589
+ */
2590
+ px: 4,
2591
+ verticalAlign: "top",
2592
+ textAlign: "start"
2593
+ },
2594
+ cell: {
2595
+ /**
2596
+ * px-4 align-top
2597
+ */
2598
+ px: 4,
2599
+ verticalAlign: "top"
2600
+ },
2601
+ caption: {
2602
+ mb: 4,
2603
+ textStyle: "oln-17B-100"
2604
+ }
2605
+ },
2606
+ variants: {
2607
+ dense: {
2608
+ false: {
2609
+ root: {
2610
+ textStyle: "std-16N-170"
2611
+ },
2612
+ header: {
2613
+ /**
2614
+ * py-5
2615
+ */
2616
+ py: 5
2617
+ },
2618
+ cell: {
2619
+ /**
2620
+ * py-5
2621
+ */
2622
+ py: 5
2623
+ }
2624
+ },
2625
+ true: {
2626
+ root: {
2627
+ textStyle: "std-16N-120"
2628
+ },
2629
+ header: {
2630
+ /**
2631
+ * py-2.5
2632
+ */
2633
+ py: 2.5
2634
+ },
2635
+ cell: {
2636
+ /**
2637
+ * py-2.5
2638
+ */
2639
+ py: 2.5
2640
+ }
2641
+ }
2642
+ },
2643
+ striped: {
2644
+ true: {
2645
+ body: {
2646
+ "& tr": {
2647
+ _even: {
2648
+ "&:not(:has(input:checked))": { bg: "{colors.keyColor.50}/25" }
2649
+ }
2650
+ }
2651
+ }
2652
+ }
2653
+ },
2654
+ hovered: {
2655
+ true: {
2656
+ body: {
2657
+ "& tr": {
2658
+ _hover: {
2659
+ bg: "keyColor.50"
2660
+ }
2661
+ }
2662
+ }
2663
+ }
2664
+ }
2665
+ },
2666
+ defaultVariants: {
2667
+ dense: false,
2668
+ striped: false,
2669
+ hovered: false
2670
+ }
2671
+ });
2672
+
2673
+ // src/recipes/tabs.ts
2674
+ import { defineSlotRecipe as defineSlotRecipe15 } from "@pandacss/dev";
2675
+ import { anatomy as tabsAnatomy } from "@ark-ui/anatomy/tabs";
2676
+ var tabs_default = defineSlotRecipe15({
2677
+ className: "tabs",
2678
+ slots: tabsAnatomy.keys(),
2679
+ base: {
2680
+ root: {
2681
+ p: 1.5,
2682
+ mx: -1.5
2683
+ },
2684
+ list: {
2685
+ /**
2686
+ * flex w-full min-w-max items-end whitespace-nowrap
2687
+ * border-b border-solid-gray-420
2688
+ */
2689
+ display: "flex",
2690
+ width: "full",
2691
+ alignItems: "end",
2692
+ whiteSpace: "nowrap",
2693
+ borderBottomWidth: "1px",
2694
+ borderColor: "solid-gray.420",
2695
+ overflowX: "auto"
2696
+ },
2697
+ trigger: {
2698
+ /**
2699
+ * relative z-0 inline-flex gap-2 justify-center items-center
2700
+ * text-oln-14B-100 md:text-oln-16B-100
2701
+ */
2702
+ position: "relative",
2703
+ zIndex: 0,
2704
+ display: "inline-flex",
2705
+ gap: 2,
2706
+ justifyContent: "center",
2707
+ alignItems: "center",
2708
+ textStyle: { base: "oln-14B-100", md: "oln-16B-100" },
2709
+ /**
2710
+ * px-4 py-6 group md:px-8 md:py-6
2711
+ * hover:bg-solid-gray-50 focus-visible:bg-yellow-300
2712
+ * aria-[current=page]:bg-white
2713
+ */
2714
+ px: { base: 4, md: 8 },
2715
+ py: 6,
2716
+ bg: {
2717
+ base: "transparent",
2718
+ _hover: "solid-gray.50",
2719
+ _focusVisible: { base: "yellow.300", _hover: "yellow.300" },
2720
+ _selected: {
2721
+ base: "white",
2722
+ _hover: "white",
2723
+ _focusVisible: "yellow.300"
2724
+ }
2725
+ },
2726
+ /**
2727
+ * focus-visible:z-10 focus-visible:rounded-4
2728
+ * focus-visible:outline focus-visible:outline-4
2729
+ * focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:outline-black
2730
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
2731
+ */
2732
+ _focusVisible: {
2733
+ zIndex: 10,
2734
+ rounded: 4,
2735
+ outlineStyle: "solid",
2736
+ outlineWidth: "4px",
2737
+ outlineColor: "black",
2738
+ outlineOffset: "calc(2 / 16 * 1rem)",
2739
+ focusRing: "calc(2 / 16 * 1rem)"
2740
+ },
2741
+ _selected: {
2742
+ /**
2743
+ * relative text-blue-900
2744
+ * after:absolute after:bottom-0 after:left-0 after:w-full after:border-b-4
2745
+ * after:border-current
2746
+ * aria-[current=page]:cursor-default
2747
+ */
2748
+ color: "keyColor.900",
2749
+ cursor: "default",
2750
+ _after: {
2751
+ content: '""',
2752
+ position: "absolute",
2753
+ bottom: 0,
2754
+ left: 0,
2755
+ width: "full",
2756
+ borderBottomWidth: "4px",
2757
+ borderBlockColor: "currentcolor"
2758
+ }
2759
+ }
2760
+ }
2761
+ }
2762
+ });
2763
+
2764
+ // src/recipes/tree-view.ts
2765
+ import { defineSlotRecipe as defineSlotRecipe16 } from "@pandacss/dev";
2766
+ import { anatomy as treeViewAnatomy } from "@ark-ui/anatomy/tree-view";
2767
+ var tree_view_default = defineSlotRecipe16({
2768
+ className: "tree-view",
2769
+ slots: treeViewAnatomy.keys(),
2770
+ base: {
2771
+ root: {},
2772
+ label: {
2773
+ py: 3,
2774
+ pl: 3,
2775
+ pr: 6,
2776
+ textStyle: "oln-17B-100",
2777
+ textWrap: "nowrap",
2778
+ display: "block"
2779
+ },
2780
+ tree: {},
2781
+ item: {
2782
+ ...menu_item_default.base
2783
+ },
2784
+ itemIndicator: {
2785
+ transition: "transform",
2786
+ transform: { base: "rotate(0deg)", _open: "rotate(90deg)" }
2787
+ },
2788
+ itemText: {
2789
+ flexGrow: 1
2790
+ },
2791
+ branch: {},
2792
+ branchControl: { ...menu_item_default.base },
2793
+ branchTrigger: {},
2794
+ branchContent: {
2795
+ my: 1,
2796
+ pl: 8
2797
+ },
2798
+ branchIndicator: {
2799
+ position: "absolute",
2800
+ right: 4,
2801
+ transition: "transform",
2802
+ transform: { base: "rotate(0deg)", _open: "rotate(90deg)" }
2803
+ },
2804
+ branchText: {
2805
+ flexGrow: 1
2806
+ }
2807
+ },
2808
+ variants: {
2809
+ variant: {
2810
+ standard: {
2811
+ item: {
2812
+ ...menu_item_default.variants?.variant?.standard
2813
+ },
2814
+ branchControl: {
2815
+ ...menu_item_default.variants?.variant?.standard
2816
+ }
2817
+ },
2818
+ boxed: {
2819
+ item: {
2820
+ ...menu_item_default.variants?.variant?.boxed
2821
+ },
2822
+ branchControl: {
2823
+ ...menu_item_default.variants?.variant?.boxed
2824
+ }
2825
+ }
2826
+ },
2827
+ isCondensed: {
2828
+ true: {
2829
+ label: {
2830
+ py: 1.5,
2831
+ pl: 1.5,
2832
+ pr: 4
2833
+ },
2834
+ item: {
2835
+ ...menu_item_default.variants?.isCondensed?.true
2836
+ },
2837
+ branchControl: {
2838
+ ...menu_item_default.variants?.isCondensed?.true
2839
+ }
2840
+ },
2841
+ false: {
2842
+ item: {
2843
+ ...menu_item_default.variants?.isCondensed?.false
2844
+ },
2845
+ branchControl: {
2846
+ ...menu_item_default.variants?.isCondensed?.false
2847
+ }
2848
+ }
2849
+ }
2850
+ }
2851
+ });
2852
+
2853
+ // src/recipes/unordered-list.ts
2854
+ import { defineRecipe as defineRecipe16 } from "@pandacss/dev";
2855
+ var unordered_list_default = defineRecipe16({
2856
+ className: "unordered-list",
2857
+ base: {
2858
+ /**
2859
+ * pl-8 list-[revert]
2860
+ */
2861
+ pl: 8,
2862
+ listStyle: "revert",
2863
+ /**
2864
+ * [&_:where(ol,ul)]:mt-1 [&_:where(ol,ul)]:-mb-1
2865
+ */
2866
+ "&:where(ol,ul)": {
2867
+ mt: 1,
2868
+ mb: -1
2869
+ }
2870
+ }
2871
+ });
2872
+
2873
+ // src/recipes/utility-link.ts
2874
+ import { defineRecipe as defineRecipe17 } from "@pandacss/dev";
2875
+ var utility_link_default = defineRecipe17({
2876
+ className: "utility-link",
2877
+ description: "\u30E6\u30FC\u30C6\u30A3\u30EA\u30C6\u30A3\u30EA\u30F3\u30AF\u306F\u3075\u3064\u3046\u306E\u6A2A\u4E26\u3073\u30EA\u30F3\u30AF\u30EA\u30B9\u30C8\u306B\u8FD1\u3044\u304C\u3001\u305D\u308C\u3088\u308A\u3082\u30B3\u30F3\u30D1\u30AF\u30C8\u306B\u4F5C\u3089\u308C\u3066\u3044\u307E\u3059\u3002",
2878
+ base: {
2879
+ /**
2880
+ * !text-solid-gray-800 text-dns-16N-130
2881
+ * focus-visible:bg-yellow-300 focus-visible:text-blue-1000
2882
+ */
2883
+ textStyle: "dns-16N-130",
2884
+ color: {
2885
+ base: "solid-gray.800",
2886
+ _focusVisible: "keyColor.1000"
2887
+ },
2888
+ bg: { base: "transparent", _focusVisible: "yellow.300" },
2889
+ /**
2890
+ * underline underline-offset-[calc(3/16*1rem)]
2891
+ * hover:decoration-[calc(3/16*1rem)]
2892
+ */
2893
+ textDecoration: "underline",
2894
+ textDecorationThickness: {
2895
+ base: "1px",
2896
+ _hover: "calc(3 / 16 * 1rem)"
2897
+ },
2898
+ textUnderlineOffset: "calc(3 / 16 * 1rem)",
2899
+ /**
2900
+ * focus-visible:rounded-4
2901
+ * focus-visible:outline focus-visible:outline-4
2902
+ * focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
2903
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
2904
+ */
2905
+ _focusVisible: {
2906
+ rounded: 4,
2907
+ outlineStyle: "solid",
2908
+ outlineWidth: "4px",
2909
+ outlineColor: "black",
2910
+ outlineOffset: "calc(2 / 16 * 1rem)",
2911
+ focusRing: "calc(2 / 16 * 1rem)"
2912
+ },
2913
+ /**
2914
+ * with icon
2915
+ */
2916
+ display: "inline-flex",
2917
+ alignItems: "center",
2918
+ gap: 1,
2919
+ "& svg": {
2920
+ width: "1em",
2921
+ height: "1em"
2922
+ }
2923
+ }
2924
+ });
2925
+
2926
+ // src/recipes/index.ts
2927
+ var recipes = {
2928
+ accordion: accordion_default,
2929
+ breadcrumb: breadcrumb_default,
2930
+ button: button_default,
2931
+ checkbox: checkbox_default,
2932
+ drawer: drawer_default,
2933
+ disclosure: disclosure_default,
2934
+ digitalGoDivider: divider_default,
2935
+ errorText: error_text_default,
2936
+ hamburgerMenuButton: hamburger_menu_button_default,
2937
+ input: input_default,
2938
+ inputText: input_text_default,
2939
+ label: label_default,
2940
+ legend: legend_default,
2941
+ link: link_default,
2942
+ list: list_default,
2943
+ menu: menu_default,
2944
+ menuItem: menu_item_default,
2945
+ menuList: menu_list_default,
2946
+ notificationBanner: notification_banner_default,
2947
+ orderedList: ordered_list_default,
2948
+ radio: radio_default,
2949
+ radioGroup: radio_group_default,
2950
+ requirementBadge: requirement_badge_default,
2951
+ resourceList: resource_list_default,
2952
+ select: select_default,
2953
+ selectBox: select_box_default,
2954
+ supportText: support_text_default,
2955
+ table: table_default,
2956
+ tabs: tabs_default,
2957
+ textarea: textarea_default,
2958
+ treeView: tree_view_default,
2959
+ unorderedList: unordered_list_default,
2960
+ utilityLink: utility_link_default
2961
+ };
2962
+ var recipes_default = recipes;
2963
+
2964
+ // src/index.ts
2965
+ var base = {
2966
+ name: "digital-go-pandacss-preset",
2967
+ presets: [presetBase],
2968
+ theme: {
2969
+ recipes: recipes_default
2970
+ }
2971
+ };
2972
+ var index_default = definePreset(base);
2973
+ var createPreset = (keyColor) => definePreset({
2974
+ ...base,
2975
+ theme: {
2976
+ ...base.theme,
2977
+ extend: {
2978
+ semanticTokens: {
2979
+ colors: {
2980
+ keyColor: createKeyColor(keyColor ?? "blue")
2981
+ }
2982
+ }
2983
+ }
2984
+ }
2985
+ });
2986
+ export {
2987
+ createPreset,
2988
+ index_default as default
2989
+ };