@peak-ai/canvas 1.2.3-rc.30 → 1.2.3-rc.4

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 (30) hide show
  1. package/GrapesjsCanvas.d.ts +1 -4
  2. package/GrapesjsCanvas.js +3 -3
  3. package/GrapesjsCanvas.js.map +1 -1
  4. package/helpers/css.d.ts +1 -1
  5. package/helpers/css.js +1 -1
  6. package/helpers/css.js.map +1 -1
  7. package/index.d.ts +0 -1
  8. package/index.js +1 -1
  9. package/index.js.map +1 -1
  10. package/package.json +6 -4
  11. package/plugins/grapejs-plugin.d.ts +2 -2
  12. package/plugins/grapejs-plugin.js +3 -4
  13. package/plugins/grapejs-plugin.js.map +1 -1
  14. package/plugins/helpers/render-components.d.ts +7 -1
  15. package/plugins/helpers/render-components.js +3 -4
  16. package/plugins/helpers/render-components.js.map +1 -1
  17. package/shadcn/components/ui/card.js +1 -1
  18. package/shadcn/components/ui/card.js.map +1 -1
  19. package/helpers/merge-json.d.ts +0 -3
  20. package/helpers/merge-json.js +0 -2
  21. package/helpers/merge-json.js.map +0 -1
  22. package/plugins/helpers/extra.d.ts +0 -8
  23. package/plugins/helpers/extra.js +0 -2
  24. package/plugins/helpers/extra.js.map +0 -1
  25. package/shadcn/components/ui/button.d.ts +0 -10
  26. package/shadcn/components/ui/button.js +0 -2
  27. package/shadcn/components/ui/button.js.map +0 -1
  28. package/shadcn/components/ui/skeleton.d.ts +0 -9
  29. package/shadcn/components/ui/skeleton.js +0 -2
  30. package/shadcn/components/ui/skeleton.js.map +0 -1
package/helpers/css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"css.js","names":["tailwindCompiledCss"],"sources":["../../src/helpers/css.ts"],"sourcesContent":["export const tailwindCompiledCss = `/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n:root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-300: oklch(80.8% 0.114 19.571);\n --color-green-300: oklch(87.1% 0.15 154.449);\n --color-slate-100: oklch(96.8% 0.007 247.896);\n --color-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-500: oklch(55.1% 0.027 264.364);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --leading-relaxed: 1.625;\n --radius-md: calc(0.625rem - 2px);\n --radius-lg: 0.625rem;\n --animate-spin: spin 1s linear infinite;\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --aspect-video: 16 / 9;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-border: oklch(0.922 0 0);\n }\n*, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\nhtml, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: normal;\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: normal;\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\nhr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\nh1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\na {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\nb, strong {\n font-weight: bolder;\n }\ncode, kbd, samp, pre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: normal;\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: normal;\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\nsmall {\n font-size: 80%;\n }\nsub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\nsub {\n bottom: -0.25em;\n }\nsup {\n top: -0.5em;\n }\ntable {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n:-moz-focusring {\n outline: auto;\n }\nprogress {\n vertical-align: baseline;\n }\nsummary {\n display: list-item;\n }\nol, ul, menu {\n list-style: none;\n }\nimg, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\nimg, video {\n max-width: 100%;\n height: auto;\n }\nbutton, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n:where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n:where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n::file-selector-button {\n margin-inline-end: 4px;\n }\n::-moz-placeholder {\n opacity: 1;\n }\n::placeholder {\n opacity: 1;\n }\n@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::-moz-placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\ntextarea {\n resize: vertical;\n }\n::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n::-webkit-datetime-edit {\n display: inline-flex;\n }\n::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n:-moz-ui-invalid {\n box-shadow: none;\n }\nbutton, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n -webkit-appearance: button;\n -moz-appearance: button;\n appearance: button;\n }\n::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n[hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n.\\\\@container\\\\/card-header {\n container-type: inline-size;\n container-name: card-header;\n }\n.fixed {\n position: fixed;\n }\n.relative {\n position: relative;\n }\n.sticky {\n position: sticky;\n }\n.top-0 {\n top: calc(0.25rem * 0);\n top: calc(var(--spacing) * 0);\n }\n.z-50 {\n z-index: 50;\n }\n.col-start-2 {\n grid-column-start: 2;\n }\n.row-span-2 {\n grid-row: span 2 / span 2;\n }\n.row-start-1 {\n grid-row-start: 1;\n }\n.container {\n width: 100%;\n max-width: 40rem;\n max-width: 48rem;\n max-width: 64rem;\n max-width: 80rem;\n max-width: 96rem\n }\n.my-0 {\n margin-block: calc(0.25rem * 0);\n margin-block: calc(var(--spacing) * 0);\n }\n.my-0\\\\.5 {\n margin-block: calc(0.25rem * 0.5);\n margin-block: calc(var(--spacing) * 0.5);\n }\n.my-4 {\n margin-block: calc(0.25rem * 4);\n margin-block: calc(var(--spacing) * 4);\n }\n.my-6 {\n margin-block: calc(0.25rem * 6);\n margin-block: calc(var(--spacing) * 6);\n }\n.mt-1 {\n margin-top: calc(0.25rem * 1);\n margin-top: calc(var(--spacing) * 1);\n }\n.mt-2 {\n margin-top: calc(0.25rem * 2);\n margin-top: calc(var(--spacing) * 2);\n }\n.mt-4 {\n margin-top: calc(0.25rem * 4);\n margin-top: calc(var(--spacing) * 4);\n }\n.mr-1 {\n margin-right: calc(0.25rem * 1);\n margin-right: calc(var(--spacing) * 1);\n }\n.mr-2 {\n margin-right: calc(0.25rem * 2);\n margin-right: calc(var(--spacing) * 2);\n }\n.mb-1 {\n margin-bottom: calc(0.25rem * 1);\n margin-bottom: calc(var(--spacing) * 1);\n }\n.mb-2 {\n margin-bottom: calc(0.25rem * 2);\n margin-bottom: calc(var(--spacing) * 2);\n }\n.mb-4 {\n margin-bottom: calc(0.25rem * 4);\n margin-bottom: calc(var(--spacing) * 4);\n }\n.mb-8 {\n margin-bottom: calc(0.25rem * 8);\n margin-bottom: calc(var(--spacing) * 8);\n }\n.ml-2 {\n margin-left: calc(0.25rem * 2);\n margin-left: calc(var(--spacing) * 2);\n }\n.ml-2\\\\.5 {\n margin-left: calc(0.25rem * 2.5);\n margin-left: calc(var(--spacing) * 2.5);\n }\n.block {\n display: block;\n }\n.flex {\n display: flex;\n }\n.grid {\n display: grid;\n }\n.hidden {\n display: none;\n }\n.inline {\n display: inline;\n }\n.inline-flex {\n display: inline-flex;\n }\n.table {\n display: table;\n }\n.table-caption {\n display: table-caption;\n }\n.table-cell {\n display: table-cell;\n }\n.table-row {\n display: table-row;\n }\n.field-sizing-content {\n field-sizing: content;\n }\n.aspect-auto {\n aspect-ratio: auto;\n }\n.aspect-video {\n aspect-ratio: 16 / 9;\n aspect-ratio: var(--aspect-video);\n }\n.size-2 {\n width: calc(0.25rem * 2);\n width: calc(var(--spacing) * 2);\n height: calc(0.25rem * 2);\n height: calc(var(--spacing) * 2);\n }\n.size-2\\\\.5 {\n width: calc(0.25rem * 2.5);\n width: calc(var(--spacing) * 2.5);\n height: calc(0.25rem * 2.5);\n height: calc(var(--spacing) * 2.5);\n }\n.size-3 {\n width: calc(0.25rem * 3);\n width: calc(var(--spacing) * 3);\n height: calc(0.25rem * 3);\n height: calc(var(--spacing) * 3);\n }\n.size-3\\\\.5 {\n width: calc(0.25rem * 3.5);\n width: calc(var(--spacing) * 3.5);\n height: calc(0.25rem * 3.5);\n height: calc(var(--spacing) * 3.5);\n }\n.size-4 {\n width: calc(0.25rem * 4);\n width: calc(var(--spacing) * 4);\n height: calc(0.25rem * 4);\n height: calc(var(--spacing) * 4);\n }\n.size-9 {\n width: calc(0.25rem * 9);\n width: calc(var(--spacing) * 9);\n height: calc(0.25rem * 9);\n height: calc(var(--spacing) * 9);\n }\n.size-full {\n width: 100%;\n height: 100%;\n }\n.h-2 {\n height: calc(0.25rem * 2);\n height: calc(var(--spacing) * 2);\n }\n.h-2\\\\.5 {\n height: calc(0.25rem * 2.5);\n height: calc(var(--spacing) * 2.5);\n }\n.h-3 {\n height: calc(0.25rem * 3);\n height: calc(var(--spacing) * 3);\n }\n.h-5 {\n height: calc(0.25rem * 5);\n height: calc(var(--spacing) * 5);\n }\n.h-6 {\n height: calc(0.25rem * 6);\n height: calc(var(--spacing) * 6);\n }\n.h-8 {\n height: calc(0.25rem * 8);\n height: calc(var(--spacing) * 8);\n }\n.h-9 {\n height: calc(0.25rem * 9);\n height: calc(var(--spacing) * 9);\n }\n.h-10 {\n height: calc(0.25rem * 10);\n height: calc(var(--spacing) * 10);\n }\n.h-12 {\n height: calc(0.25rem * 12);\n height: calc(var(--spacing) * 12);\n }\n.h-20 {\n height: calc(0.25rem * 20);\n height: calc(var(--spacing) * 20);\n }\n.h-30 {\n height: calc(0.25rem * 30);\n height: calc(var(--spacing) * 30);\n }\n.h-35 {\n height: calc(0.25rem * 35);\n height: calc(var(--spacing) * 35);\n }\n.h-40 {\n height: calc(0.25rem * 40);\n height: calc(var(--spacing) * 40);\n }\n.h-50 {\n height: calc(0.25rem * 50);\n height: calc(var(--spacing) * 50);\n }\n.h-\\\\[250px\\\\] {\n height: 250px;\n }\n.h-full {\n height: 100%;\n }\n.min-h-16 {\n min-height: calc(0.25rem * 16);\n min-height: calc(var(--spacing) * 16);\n }\n.min-h-\\\\[180px\\\\] {\n min-height: 180px;\n }\n.w-0 {\n width: calc(0.25rem * 0);\n width: calc(var(--spacing) * 0);\n }\n.w-1 {\n width: calc(0.25rem * 1);\n width: calc(var(--spacing) * 1);\n }\n.w-1\\\\/3 {\n width: calc(1/3 * 100%);\n }\n.w-1\\\\/6 {\n width: calc(1/6 * 100%);\n }\n.w-2 {\n width: calc(0.25rem * 2);\n width: calc(var(--spacing) * 2);\n }\n.w-2\\\\.5 {\n width: calc(0.25rem * 2.5);\n width: calc(var(--spacing) * 2.5);\n }\n.w-4 {\n width: calc(0.25rem * 4);\n width: calc(var(--spacing) * 4);\n }\n.w-4\\\\/5 {\n width: calc(4/5 * 100%);\n }\n.w-64 {\n width: calc(0.25rem * 64);\n width: calc(var(--spacing) * 64);\n }\n.w-80 {\n width: calc(0.25rem * 80);\n width: calc(var(--spacing) * 80);\n }\n.w-\\\\[320px\\\\] {\n width: 320px;\n }\n.w-\\\\[640px\\\\] {\n width: 640px;\n }\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n }\n.w-full {\n width: 100%;\n }\n.max-w-\\\\[320px\\\\] {\n max-width: 320px;\n }\n.max-w-full {\n max-width: 100%;\n }\n.min-w-0 {\n min-width: calc(0.25rem * 0);\n min-width: calc(var(--spacing) * 0);\n }\n.min-w-\\\\[8rem\\\\] {\n min-width: 8rem;\n }\n.flex-1 {\n flex: 1;\n }\n.flex-shrink {\n flex-shrink: 1;\n }\n.shrink-0 {\n flex-shrink: 0;\n }\n.flex-grow {\n flex-grow: 1;\n }\n.caption-bottom {\n caption-side: bottom;\n }\n.border-collapse {\n border-collapse: collapse;\n }\n.origin-\\\\(--radix-hover-card-content-transform-origin\\\\) {\n transform-origin: var(--radix-hover-card-content-transform-origin);\n }\n.origin-\\\\(--radix-tooltip-content-transform-origin\\\\) {\n transform-origin: var(--radix-tooltip-content-transform-origin);\n }\n.translate-y-\\\\[calc\\\\(-50\\\\%_-_2px\\\\)\\\\] {\n --tw-translate-y: calc(-50% - 2px);\n translate: var(--tw-translate-x) calc(-50% - 2px);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n.rotate-45 {\n rotate: 45deg;\n }\n.transform {\n transform: ;\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n animation: var(--animate-pulse);\n }\n.animate-spin {\n animation: spin 1s linear infinite;\n animation: var(--animate-spin);\n }\n.touch-none {\n touch-action: none;\n }\n.resize {\n resize: both;\n }\n.list-disc {\n list-style-type: disc;\n }\n.auto-rows-min {\n grid-auto-rows: min-content;\n }\n.grid-rows-\\\\[auto_auto\\\\] {\n grid-template-rows: auto auto;\n }\n.flex-col {\n flex-direction: column;\n }\n.flex-row {\n flex-direction: row;\n }\n.flex-wrap {\n flex-wrap: wrap;\n }\n.items-center {\n align-items: center;\n }\n.items-end {\n align-items: flex-end;\n }\n.items-start {\n align-items: flex-start;\n }\n.items-stretch {\n align-items: stretch;\n }\n.justify-between {\n justify-content: space-between;\n }\n.justify-center {\n justify-content: center;\n }\n.gap-1 {\n gap: calc(0.25rem * 1);\n gap: calc(var(--spacing) * 1);\n }\n.gap-1\\\\.5 {\n gap: calc(0.25rem * 1.5);\n gap: calc(var(--spacing) * 1.5);\n }\n.gap-2 {\n gap: calc(0.25rem * 2);\n gap: calc(var(--spacing) * 2);\n }\n.gap-3 {\n gap: calc(0.25rem * 3);\n gap: calc(var(--spacing) * 3);\n }\n.gap-4 {\n gap: calc(0.25rem * 4);\n gap: calc(var(--spacing) * 4);\n }\n.gap-6 {\n gap: calc(0.25rem * 6);\n gap: calc(var(--spacing) * 6);\n }\n.self-end {\n align-self: flex-end;\n }\n.self-start {\n align-self: flex-start;\n }\n.justify-self-end {\n justify-self: flex-end;\n }\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n.rounded-\\\\[2px\\\\] {\n border-radius: 2px;\n }\n.rounded-\\\\[4px\\\\] {\n border-radius: 4px;\n }\n.rounded-\\\\[inherit\\\\] {\n border-radius: inherit;\n }\n.rounded-full {\n border-radius: calc(infinity * 1px);\n }\n.rounded-lg {\n border-radius: 0.625rem;\n }\n.rounded-md {\n border-radius: calc(0.625rem - 2px);\n }\n.border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n.border-\\\\[1\\\\.5px\\\\] {\n border-style: var(--tw-border-style);\n border-width: 1.5px;\n }\n.border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n.border-t-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n.border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n.border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n.border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n.border-\\\\(--color-border\\\\) {\n border-color: oklch(0.922 0 0);\n border-color: var(--color-border);\n }\n.border-border {\n border-color: oklch(0.922 0 0);\n }\n.border-border\\\\/50 {\n border-color: color-mix(in oklab, oklch(0.922 0 0) 50%, transparent);\n }\n.border-gray-300 {\n border-color: oklch(87.2% 0.01 258.338);\n border-color: var(--color-gray-300);\n }\n.border-input {\n border-color: oklch(0.922 0 0);\n }\n.border-t-transparent {\n border-top-color: transparent;\n }\n.border-l-transparent {\n border-left-color: transparent;\n }\n.bg-\\\\(--color-bg\\\\) {\n background-color: var(--color-bg);\n }\n.bg-accent {\n background-color: oklch(0.97 0 0);\n }\n.bg-background {\n background-color: oklch(1 0 0);\n }\n.bg-black {\n background-color: #000;\n background-color: var(--color-black);\n }\n.bg-black\\\\/10 {\n background-color: color-mix(in srgb, #000 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, #000 10%, transparent);\n background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n.bg-border {\n background-color: oklch(0.922 0 0);\n }\n.bg-destructive {\n background-color: oklch(0.577 0.245 27.325);\n }\n.bg-gray-300 {\n background-color: oklch(87.2% 0.01 258.338);\n background-color: var(--color-gray-300);\n }\n.bg-gray-400 {\n background-color: oklch(70.7% 0.022 261.325);\n background-color: var(--color-gray-400);\n }\n.bg-gray-500 {\n background-color: oklch(55.1% 0.027 264.364);\n background-color: var(--color-gray-500);\n }\n.bg-green-300 {\n background-color: oklch(87.1% 0.15 154.449);\n background-color: var(--color-green-300);\n }\n.bg-muted {\n background-color: oklch(0.97 0 0);\n }\n.bg-muted\\\\/50 {\n background-color: color-mix(in oklab, oklch(0.97 0 0) 50%, transparent);\n }\n.bg-popover {\n background-color: oklch(1 0 0);\n }\n.bg-primary {\n background-color: oklch(0.205 0 0);\n }\n.bg-secondary {\n background-color: oklch(0.97 0 0);\n }\n.bg-slate-100 {\n background-color: oklch(96.8% 0.007 247.896);\n background-color: var(--color-slate-100);\n }\n.bg-transparent {\n background-color: transparent;\n }\n.bg-white {\n background-color: #fff;\n background-color: var(--color-white);\n }\n.fill-primary {\n fill: oklch(0.205 0 0);\n }\n.p-0 {\n padding: calc(0.25rem * 0);\n padding: calc(var(--spacing) * 0);\n }\n.p-1 {\n padding: calc(0.25rem * 1);\n padding: calc(var(--spacing) * 1);\n }\n.p-2 {\n padding: calc(0.25rem * 2);\n padding: calc(var(--spacing) * 2);\n }\n.p-3 {\n padding: calc(0.25rem * 3);\n padding: calc(var(--spacing) * 3);\n }\n.p-4 {\n padding: calc(0.25rem * 4);\n padding: calc(var(--spacing) * 4);\n }\n.p-6 {\n padding: calc(0.25rem * 6);\n padding: calc(var(--spacing) * 6);\n }\n.p-px {\n padding: 1px;\n }\n.px-2 {\n padding-inline: calc(0.25rem * 2);\n padding-inline: calc(var(--spacing) * 2);\n }\n.px-2\\\\.5 {\n padding-inline: calc(0.25rem * 2.5);\n padding-inline: calc(var(--spacing) * 2.5);\n }\n.px-3 {\n padding-inline: calc(0.25rem * 3);\n padding-inline: calc(var(--spacing) * 3);\n }\n.px-4 {\n padding-inline: calc(0.25rem * 4);\n padding-inline: calc(var(--spacing) * 4);\n }\n.px-6 {\n padding-inline: calc(0.25rem * 6);\n padding-inline: calc(var(--spacing) * 6);\n }\n.px-\\\\[1em\\\\] {\n padding-inline: 1em;\n }\n.py-1 {\n padding-block: calc(0.25rem * 1);\n padding-block: calc(var(--spacing) * 1);\n }\n.py-1\\\\.5 {\n padding-block: calc(0.25rem * 1.5);\n padding-block: calc(var(--spacing) * 1.5);\n }\n.py-2 {\n padding-block: calc(0.25rem * 2);\n padding-block: calc(var(--spacing) * 2);\n }\n.py-3 {\n padding-block: calc(0.25rem * 3);\n padding-block: calc(var(--spacing) * 3);\n }\n.py-6 {\n padding-block: calc(0.25rem * 6);\n padding-block: calc(var(--spacing) * 6);\n }\n.pt-3 {\n padding-top: calc(0.25rem * 3);\n padding-top: calc(var(--spacing) * 3);\n }\n.pb-3 {\n padding-bottom: calc(0.25rem * 3);\n padding-bottom: calc(var(--spacing) * 3);\n }\n.text-center {\n text-align: center;\n }\n.text-left {\n text-align: left;\n }\n.align-middle {\n vertical-align: middle;\n }\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n font-family: var(--font-mono);\n }\n.text-2xl {\n font-size: 1.5rem;\n font-size: var(--text-2xl);\n line-height: calc(2 / 1.5);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n.text-3xl {\n font-size: 1.875rem;\n font-size: var(--text-3xl);\n line-height: calc(2.25 / 1.875);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n.text-4xl {\n font-size: 2.25rem;\n font-size: var(--text-4xl);\n line-height: calc(2.5 / 2.25);\n line-height: var(--tw-leading, var(--text-4xl--line-height));\n }\n.text-5xl {\n font-size: 3rem;\n font-size: var(--text-5xl);\n line-height: 1;\n line-height: var(--tw-leading, var(--text-5xl--line-height));\n }\n.text-base {\n font-size: 1rem;\n font-size: var(--text-base);\n line-height: calc(1.5 / 1);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n.text-lg {\n font-size: 1.125rem;\n font-size: var(--text-lg);\n line-height: calc(1.75 / 1.125);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n.text-sm {\n font-size: 0.875rem;\n font-size: var(--text-sm);\n line-height: calc(1.25 / 0.875);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n.text-xl {\n font-size: 1.25rem;\n font-size: var(--text-xl);\n line-height: calc(1.75 / 1.25);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n.text-xs {\n font-size: 0.75rem;\n font-size: var(--text-xs);\n line-height: calc(1 / 0.75);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n.leading-\\\\[2\\\\.5rem\\\\] {\n --tw-leading: 2.5rem;\n line-height: 2.5rem;\n }\n.leading-\\\\[2rem\\\\] {\n --tw-leading: 2rem;\n line-height: 2rem;\n }\n.leading-\\\\[3\\\\.5rem\\\\] {\n --tw-leading: 3.5rem;\n line-height: 3.5rem;\n }\n.leading-\\\\[3rem\\\\] {\n --tw-leading: 3rem;\n line-height: 3rem;\n }\n.leading-\\\\[4rem\\\\] {\n --tw-leading: 4rem;\n line-height: 4rem;\n }\n.leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n.leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: 1.625;\n line-height: var(--leading-relaxed);\n }\n.font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: 700;\n font-weight: var(--font-weight-bold);\n }\n.font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: 500;\n font-weight: var(--font-weight-medium);\n }\n.font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: 600;\n font-weight: var(--font-weight-semibold);\n }\n.text-balance {\n text-wrap: balance;\n }\n.text-wrap {\n text-wrap: wrap;\n }\n.whitespace-nowrap {\n white-space: nowrap;\n }\n.text-black {\n color: #000;\n color: var(--color-black);\n }\n.text-card-foreground {\n color: oklch(0.145 0 0);\n }\n.text-current {\n color: currentcolor;\n }\n.text-foreground {\n color: oklch(0.145 0 0);\n }\n.text-gray-500 {\n color: oklch(55.1% 0.027 264.364);\n color: var(--color-gray-500);\n }\n.text-gray-800 {\n color: oklch(27.8% 0.033 256.848);\n color: var(--color-gray-800);\n }\n.text-muted-foreground {\n color: oklch(0.556 0 0);\n }\n.text-popover-foreground {\n color: oklch(0.145 0 0);\n }\n.text-primary {\n color: oklch(0.205 0 0);\n }\n.text-primary-foreground {\n color: oklch(0.985 0 0);\n }\n.text-secondary-foreground {\n color: oklch(0.205 0 0);\n }\n.text-white {\n color: #fff;\n color: var(--color-white);\n }\n.italic {\n font-style: italic;\n }\n.tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: tabular-nums ;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n.underline {\n text-decoration-line: underline;\n }\n.underline-offset-4 {\n text-underline-offset: 4px;\n }\n.shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n.shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n.shadow-xs {\n --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n.ring-offset-background {\n --tw-ring-offset-color: oklch(1 0 0);\n }\n.outline-hidden {\n --tw-outline-style: none;\n outline-style: none;\n outline: 2px solid transparent;\n outline-offset: 2px\n }\n.outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n.filter {\n filter: ;\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n.transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: 150ms;\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n.transition-\\\\[color\\\\,box-shadow\\\\] {\n transition-property: color,box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: 150ms;\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: 150ms;\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n.transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: 150ms;\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n.transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: 150ms;\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n.transition-none {\n transition-property: none;\n }\n.outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n.group-data-\\\\[disabled\\\\=true\\\\]\\\\:pointer-events-none {\n &:is(:where(.group)[data-disabled=\"true\"] *) {\n pointer-events: none;\n }\n }\n.group-data-\\\\[disabled\\\\=true\\\\]\\\\:opacity-50 {\n &:is(:where(.group)[data-disabled=\"true\"] *) {\n opacity: 50%;\n }\n }\n.peer-disabled\\\\:cursor-not-allowed {\n &:is(:where(.peer):disabled ~ *) {\n cursor: not-allowed;\n }\n }\n.peer-disabled\\\\:opacity-50 {\n &:is(:where(.peer):disabled ~ *) {\n opacity: 50%;\n }\n }\n.selection\\\\:bg-primary {\n & *::-moz-selection {\n background-color: oklch(0.205 0 0);\n }\n & *::selection {\n background-color: oklch(0.205 0 0);\n }\n &::-moz-selection {\n background-color: oklch(0.205 0 0);\n }\n &::selection {\n background-color: oklch(0.205 0 0);\n }\n }\n.selection\\\\:text-primary-foreground {\n & *::-moz-selection {\n color: oklch(0.985 0 0);\n }\n & *::selection {\n color: oklch(0.985 0 0);\n }\n &::-moz-selection {\n color: oklch(0.985 0 0);\n }\n &::selection {\n color: oklch(0.985 0 0);\n }\n }\n.file\\\\:inline-flex {\n &::file-selector-button {\n display: inline-flex;\n }\n }\n.file\\\\:h-7 {\n &::file-selector-button {\n height: calc(0.25rem * 7);\n height: calc(var(--spacing) * 7);\n }\n }\n.file\\\\:border-0 {\n &::file-selector-button {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n }\n.file\\\\:bg-transparent {\n &::file-selector-button {\n background-color: transparent;\n }\n }\n.file\\\\:text-sm {\n &::file-selector-button {\n font-size: 0.875rem;\n font-size: var(--text-sm);\n line-height: calc(1.25 / 0.875);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n.file\\\\:font-medium {\n &::file-selector-button {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: 500;\n font-weight: var(--font-weight-medium);\n }\n }\n.file\\\\:text-foreground {\n &::file-selector-button {\n color: oklch(0.145 0 0);\n }\n }\n.placeholder\\\\:text-muted-foreground {\n &::-moz-placeholder {\n color: oklch(0.556 0 0);\n }\n &::placeholder {\n color: oklch(0.556 0 0);\n }\n }\n.hover\\\\:bg-accent {\n &:hover {\n background-color: oklch(0.97 0 0)\n }\n }\n.hover\\\\:bg-destructive\\\\/90 {\n &:hover {\n background-color: color-mix(in oklab, oklch(0.577 0.245 27.325) 90%, transparent)\n }\n }\n.hover\\\\:bg-muted\\\\/50 {\n &:hover {\n background-color: color-mix(in oklab, oklch(0.97 0 0) 50%, transparent)\n }\n }\n.hover\\\\:bg-primary\\\\/90 {\n &:hover {\n background-color: color-mix(in oklab, oklch(0.205 0 0) 90%, transparent)\n }\n }\n.hover\\\\:bg-secondary\\\\/80 {\n &:hover {\n background-color: color-mix(in oklab, oklch(0.97 0 0) 80%, transparent)\n }\n }\n.hover\\\\:text-accent-foreground {\n &:hover {\n color: oklch(0.205 0 0)\n }\n }\n.hover\\\\:underline {\n &:hover {\n text-decoration-line: underline\n }\n }\n.focus-visible\\\\:border-ring {\n &:focus-visible {\n border-color: oklch(0.708 0 0);\n }\n }\n.focus-visible\\\\:ring-2 {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n.focus-visible\\\\:ring-\\\\[3px\\\\] {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n.focus-visible\\\\:ring-destructive\\\\/20 {\n &:focus-visible {\n --tw-ring-color: color-mix(in oklab, oklch(0.577 0.245 27.325) 20%, transparent);\n }\n }\n.focus-visible\\\\:ring-ring {\n &:focus-visible {\n --tw-ring-color: oklch(0.708 0 0);\n }\n }\n.focus-visible\\\\:ring-ring\\\\/50 {\n &:focus-visible {\n --tw-ring-color: color-mix(in oklab, oklch(0.708 0 0) 50%, transparent);\n }\n }\n.focus-visible\\\\:ring-offset-2 {\n &:focus-visible {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n.focus-visible\\\\:outline-1 {\n &:focus-visible {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n }\n.focus-visible\\\\:outline-none {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n.disabled\\\\:pointer-events-none {\n &:disabled {\n pointer-events: none;\n }\n }\n.disabled\\\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n.disabled\\\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n.has-data-\\\\[slot\\\\=card-action\\\\]\\\\:grid-cols-\\\\[1fr_auto\\\\] {\n &:has(*[data-slot=\"card-action\"]) {\n grid-template-columns: 1fr auto;\n }\n }\n.has-\\\\[\\\\>svg\\\\]\\\\:px-2\\\\.5 {\n &:has(>svg) {\n padding-inline: calc(0.25rem * 2.5);\n padding-inline: calc(var(--spacing) * 2.5);\n }\n }\n.has-\\\\[\\\\>svg\\\\]\\\\:px-3 {\n &:has(>svg) {\n padding-inline: calc(0.25rem * 3);\n padding-inline: calc(var(--spacing) * 3);\n }\n }\n.has-\\\\[\\\\>svg\\\\]\\\\:px-4 {\n &:has(>svg) {\n padding-inline: calc(0.25rem * 4);\n padding-inline: calc(var(--spacing) * 4);\n }\n }\n.aria-invalid\\\\:border-destructive {\n &[aria-invalid=\"true\"] {\n border-color: oklch(0.577 0.245 27.325);\n }\n }\n.aria-invalid\\\\:ring-destructive\\\\/20 {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: color-mix(in oklab, oklch(0.577 0.245 27.325) 20%, transparent);\n }\n }\n.data-\\\\[orientation\\\\=horizontal\\\\]\\\\:h-px {\n &[data-orientation=\"horizontal\"] {\n height: 1px;\n }\n }\n.data-\\\\[orientation\\\\=horizontal\\\\]\\\\:w-full {\n &[data-orientation=\"horizontal\"] {\n width: 100%;\n }\n }\n.data-\\\\[orientation\\\\=vertical\\\\]\\\\:h-full {\n &[data-orientation=\"vertical\"] {\n height: 100%;\n }\n }\n.data-\\\\[orientation\\\\=vertical\\\\]\\\\:w-px {\n &[data-orientation=\"vertical\"] {\n width: 1px;\n }\n }\n.data-\\\\[state\\\\=active\\\\]\\\\:bg-background {\n &[data-state=\"active\"] {\n background-color: oklch(1 0 0);\n }\n }\n.data-\\\\[state\\\\=active\\\\]\\\\:text-foreground {\n &[data-state=\"active\"] {\n color: oklch(0.145 0 0);\n }\n }\n.data-\\\\[state\\\\=active\\\\]\\\\:shadow {\n &[data-state=\"active\"] {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n.data-\\\\[state\\\\=checked\\\\]\\\\:border-primary {\n &[data-state=\"checked\"] {\n border-color: oklch(0.205 0 0);\n }\n }\n.data-\\\\[state\\\\=checked\\\\]\\\\:bg-primary {\n &[data-state=\"checked\"] {\n background-color: oklch(0.205 0 0);\n }\n }\n.data-\\\\[state\\\\=checked\\\\]\\\\:text-primary-foreground {\n &[data-state=\"checked\"] {\n color: oklch(0.985 0 0);\n }\n }\n.data-\\\\[state\\\\=selected\\\\]\\\\:bg-muted {\n &[data-state=\"selected\"] {\n background-color: oklch(0.97 0 0);\n }\n }\n.md\\\\:text-sm {\n font-size: 0.875rem;\n font-size: var(--text-sm);\n line-height: calc(1.25 / 0.875);\n line-height: var(--tw-leading, var(--text-sm--line-height))\n }\n.dark\\\\:border-input {\n border-color: oklch(0.922 0 0)\n }\n.dark\\\\:bg-destructive\\\\/60 {\n background-color: color-mix(in oklab, oklch(0.577 0.245 27.325) 60%, transparent)\n }\n.dark\\\\:bg-input\\\\/30 {\n background-color: color-mix(in oklab, oklch(0.922 0 0) 30%, transparent)\n }\n.dark\\\\:hover\\\\:bg-accent\\\\/50 {\n &:hover {\n background-color: color-mix(in oklab, oklch(0.97 0 0) 50%, transparent)\n }\n }\n.dark\\\\:hover\\\\:bg-input\\\\/50 {\n &:hover {\n background-color: color-mix(in oklab, oklch(0.922 0 0) 50%, transparent)\n }\n }\n.dark\\\\:focus-visible\\\\:ring-destructive\\\\/40 {\n &:focus-visible {\n --tw-ring-color: color-mix(in oklab, oklch(0.577 0.245 27.325) 40%, transparent);\n }\n }\n.dark\\\\:aria-invalid\\\\:ring-destructive\\\\/40 {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: color-mix(in oklab, oklch(0.577 0.245 27.325) 40%, transparent);\n }\n }\n.dark\\\\:data-\\\\[state\\\\=checked\\\\]\\\\:bg-primary {\n &[data-state=\"checked\"] {\n background-color: oklch(0.205 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-cartesian-axis-tick_text\\\\]\\\\:fill-muted-foreground {\n & .recharts-cartesian-axis-tick text {\n fill: oklch(0.556 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-cartesian-grid_line\\\\[stroke\\\\=\\\\'\\\\#ccc\\\\'\\\\]\\\\]\\\\:stroke-border\\\\/50 {\n & .recharts-cartesian-grid line[stroke='#ccc'] {\n stroke: color-mix(in oklab, oklch(0.922 0 0) 50%, transparent);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-curve\\\\.recharts-tooltip-cursor\\\\]\\\\:stroke-border {\n & .recharts-curve.recharts-tooltip-cursor {\n stroke: oklch(0.922 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-dot\\\\[stroke\\\\=\\\\'\\\\#fff\\\\'\\\\]\\\\]\\\\:stroke-transparent {\n & .recharts-dot[stroke='#fff'] {\n stroke: transparent;\n }\n }\n.\\\\[\\\\&_\\\\.recharts-layer\\\\]\\\\:outline-hidden {\n & .recharts-layer {\n --tw-outline-style: none;\n outline-style: none;\n outline: 2px solid transparent;\n outline-offset: 2px\n }\n }\n.\\\\[\\\\&_\\\\.recharts-polar-grid_\\\\[stroke\\\\=\\\\'\\\\#ccc\\\\'\\\\]\\\\]\\\\:stroke-border {\n & .recharts-polar-grid [stroke='#ccc'] {\n stroke: oklch(0.922 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-radial-bar-background-sector\\\\]\\\\:fill-muted {\n & .recharts-radial-bar-background-sector {\n fill: oklch(0.97 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-rectangle\\\\.recharts-tooltip-cursor\\\\]\\\\:fill-muted {\n & .recharts-rectangle.recharts-tooltip-cursor {\n fill: oklch(0.97 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-reference-line_\\\\[stroke\\\\=\\\\'\\\\#ccc\\\\'\\\\]\\\\]\\\\:stroke-border {\n & .recharts-reference-line [stroke='#ccc'] {\n stroke: oklch(0.922 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-sector\\\\]\\\\:outline-hidden {\n & .recharts-sector {\n --tw-outline-style: none;\n outline-style: none;\n outline: 2px solid transparent;\n outline-offset: 2px\n }\n }\n.\\\\[\\\\&_\\\\.recharts-sector\\\\[stroke\\\\=\\\\'\\\\#fff\\\\'\\\\]\\\\]\\\\:stroke-transparent {\n & .recharts-sector[stroke='#fff'] {\n stroke: transparent;\n }\n }\n.\\\\[\\\\&_\\\\.recharts-surface\\\\]\\\\:outline-hidden {\n & .recharts-surface {\n --tw-outline-style: none;\n outline-style: none;\n outline: 2px solid transparent;\n outline-offset: 2px\n }\n }\n.\\\\[\\\\&_svg\\\\]\\\\:pointer-events-none {\n & svg {\n pointer-events: none;\n }\n }\n.\\\\[\\\\&_svg\\\\]\\\\:shrink-0 {\n & svg {\n flex-shrink: 0;\n }\n }\n.\\\\[\\\\&_svg\\\\:not\\\\(\\\\[class\\\\*\\\\=\\\\'size-\\\\'\\\\]\\\\)\\\\]\\\\:size-4 {\n & svg:not([class*='size-']) {\n width: calc(0.25rem * 4);\n width: calc(var(--spacing) * 4);\n height: calc(0.25rem * 4);\n height: calc(var(--spacing) * 4);\n }\n }\n.\\\\[\\\\&_tr\\\\]\\\\:border-b {\n & tr {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n }\n.\\\\[\\\\&_tr\\\\:last-child\\\\]\\\\:border-0 {\n & tr:last-child {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n }\n.\\\\[\\\\&\\\\:has\\\\(\\\\[role\\\\=checkbox\\\\]\\\\)\\\\]\\\\:pr-0 {\n &:has([role=checkbox]) {\n padding-right: calc(0.25rem * 0);\n padding-right: calc(var(--spacing) * 0);\n }\n }\n.\\\\[\\\\.border-b\\\\]\\\\:pb-6 {\n &:is(.border-b) {\n padding-bottom: calc(0.25rem * 6);\n padding-bottom: calc(var(--spacing) * 6);\n }\n }\n.\\\\[\\\\&\\\\>\\\\[role\\\\=checkbox\\\\]\\\\]\\\\:translate-y-\\\\[2px\\\\] {\n &>[role=checkbox] {\n --tw-translate-y: 2px;\n translate: var(--tw-translate-x) 2px;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n.\\\\[\\\\&\\\\>svg\\\\]\\\\:h-2\\\\.5 {\n &>svg {\n height: calc(0.25rem * 2.5);\n height: calc(var(--spacing) * 2.5);\n }\n }\n.\\\\[\\\\&\\\\>svg\\\\]\\\\:h-3 {\n &>svg {\n height: calc(0.25rem * 3);\n height: calc(var(--spacing) * 3);\n }\n }\n.\\\\[\\\\&\\\\>svg\\\\]\\\\:w-2\\\\.5 {\n &>svg {\n width: calc(0.25rem * 2.5);\n width: calc(var(--spacing) * 2.5);\n }\n }\n.\\\\[\\\\&\\\\>svg\\\\]\\\\:w-3 {\n &>svg {\n width: calc(0.25rem * 3);\n width: calc(var(--spacing) * 3);\n }\n }\n.\\\\[\\\\&\\\\>svg\\\\]\\\\:text-muted-foreground {\n &>svg {\n color: oklch(0.556 0 0);\n }\n }\n.\\\\[\\\\&\\\\>tr\\\\]\\\\:last\\\\:border-b-0 {\n &>tr {\n &:last-child {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0px;\n }\n }\n }\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ordinal {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-slashed-zero {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-figure {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-spacing {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-fraction {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-invert {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n }\n }\n`"],"mappings":"AAAA,MAAO,IAAM,CAAAA,mBAAmB,8hgDAo0D/B","ignoreList":[]}
1
+ {"version":3,"file":"css.js","names":["tailwindCompiledCss"],"sources":["../../src/helpers/css.ts"],"sourcesContent":["export const tailwindCompiledCss = `/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n:root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-300: oklch(80.8% 0.114 19.571);\n --color-green-300: oklch(87.1% 0.15 154.449);\n --color-slate-100: oklch(96.8% 0.007 247.896);\n --color-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-500: oklch(55.1% 0.027 264.364);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --radius-md: calc(0.625rem - 2px);\n --radius-lg: 0.625rem;\n --aspect-video: 16 / 9;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-border: oklch(0.922 0 0);\n }\n::-webkit-file-upload-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n*, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\nhtml, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: normal;\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: normal;\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\nhr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\nh1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\na {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\nb, strong {\n font-weight: bolder;\n }\ncode, kbd, samp, pre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: normal;\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: normal;\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\nsmall {\n font-size: 80%;\n }\nsub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\nsub {\n bottom: -0.25em;\n }\nsup {\n top: -0.5em;\n }\ntable {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n:-moz-focusring {\n outline: auto;\n }\nprogress {\n vertical-align: baseline;\n }\nsummary {\n display: list-item;\n }\nol, ul, menu {\n list-style: none;\n }\nimg, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\nimg, video {\n max-width: 100%;\n height: auto;\n }\n::-webkit-file-upload-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\nbutton, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n:where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n:where(select:is([multiple], [size])) optgroup option {\n -webkit-padding-start: 20px;\n padding-inline-start: 20px;\n }\n::-webkit-file-upload-button {\n -webkit-margin-end: 4px;\n margin-inline-end: 4px;\n }\n::file-selector-button {\n -webkit-margin-end: 4px;\n margin-inline-end: 4px;\n }\n::placeholder {\n opacity: 1;\n }\n@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\ntextarea {\n resize: vertical;\n }\n::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n::-webkit-datetime-edit {\n display: inline-flex;\n }\n::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n:-moz-ui-invalid {\n box-shadow: none;\n }\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n appearance: button;\n }\nbutton, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n -webkit-appearance: button;\n appearance: button;\n }\n::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n[hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n.\\\\@container\\\\/card-header {\n container-type: inline-size;\n container-name: card-header;\n }\n.fixed {\n position: fixed;\n }\n.relative {\n position: relative;\n }\n.sticky {\n position: -webkit-sticky;\n position: sticky;\n }\n.top-0 {\n top: calc(0.25rem * 0);\n top: calc(var(--spacing) * 0);\n }\n.z-50 {\n z-index: 50;\n }\n.col-start-2 {\n grid-column-start: 2;\n }\n.row-span-2 {\n grid-row: span 2 / span 2;\n }\n.row-start-1 {\n grid-row-start: 1;\n }\n.container {\n width: 100%;\n max-width: 40rem;\n max-width: 48rem;\n max-width: 64rem;\n max-width: 80rem;\n max-width: 96rem\n }\n.my-0 {\n margin-block: calc(0.25rem * 0);\n margin-block: calc(var(--spacing) * 0);\n }\n.my-0\\\\.5 {\n margin-block: calc(0.25rem * 0.5);\n margin-block: calc(var(--spacing) * 0.5);\n }\n.my-4 {\n margin-block: calc(0.25rem * 4);\n margin-block: calc(var(--spacing) * 4);\n }\n.my-6 {\n margin-block: calc(0.25rem * 6);\n margin-block: calc(var(--spacing) * 6);\n }\n.mt-2 {\n margin-top: calc(0.25rem * 2);\n margin-top: calc(var(--spacing) * 2);\n }\n.mt-4 {\n margin-top: calc(0.25rem * 4);\n margin-top: calc(var(--spacing) * 4);\n }\n.mb-1 {\n margin-bottom: calc(0.25rem * 1);\n margin-bottom: calc(var(--spacing) * 1);\n }\n.mb-2 {\n margin-bottom: calc(0.25rem * 2);\n margin-bottom: calc(var(--spacing) * 2);\n }\n.mb-4 {\n margin-bottom: calc(0.25rem * 4);\n margin-bottom: calc(var(--spacing) * 4);\n }\n.mb-8 {\n margin-bottom: calc(0.25rem * 8);\n margin-bottom: calc(var(--spacing) * 8);\n }\n.ml-2 {\n margin-left: calc(0.25rem * 2);\n margin-left: calc(var(--spacing) * 2);\n }\n.block {\n display: block;\n }\n.flex {\n display: flex;\n }\n.grid {\n display: grid;\n }\n.hidden {\n display: none;\n }\n.inline {\n display: inline;\n }\n.inline-flex {\n display: inline-flex;\n }\n.table {\n display: table;\n }\n.table-caption {\n display: table-caption;\n }\n.table-cell {\n display: table-cell;\n }\n.table-row {\n display: table-row;\n }\n.field-sizing-content {\n field-sizing: content;\n }\n.aspect-auto {\n aspect-ratio: auto;\n }\n.aspect-video {\n aspect-ratio: 16 / 9;\n aspect-ratio: var(--aspect-video);\n }\n.size-2 {\n width: calc(0.25rem * 2);\n width: calc(var(--spacing) * 2);\n height: calc(0.25rem * 2);\n height: calc(var(--spacing) * 2);\n }\n.size-2\\\\.5 {\n width: calc(0.25rem * 2.5);\n width: calc(var(--spacing) * 2.5);\n height: calc(0.25rem * 2.5);\n height: calc(var(--spacing) * 2.5);\n }\n.size-3 {\n width: calc(0.25rem * 3);\n width: calc(var(--spacing) * 3);\n height: calc(0.25rem * 3);\n height: calc(var(--spacing) * 3);\n }\n.size-3\\\\.5 {\n width: calc(0.25rem * 3.5);\n width: calc(var(--spacing) * 3.5);\n height: calc(0.25rem * 3.5);\n height: calc(var(--spacing) * 3.5);\n }\n.size-4 {\n width: calc(0.25rem * 4);\n width: calc(var(--spacing) * 4);\n height: calc(0.25rem * 4);\n height: calc(var(--spacing) * 4);\n }\n.size-full {\n width: 100%;\n height: 100%;\n }\n.h-2 {\n height: calc(0.25rem * 2);\n height: calc(var(--spacing) * 2);\n }\n.h-2\\\\.5 {\n height: calc(0.25rem * 2.5);\n height: calc(var(--spacing) * 2.5);\n }\n.h-9 {\n height: calc(0.25rem * 9);\n height: calc(var(--spacing) * 9);\n }\n.h-10 {\n height: calc(0.25rem * 10);\n height: calc(var(--spacing) * 10);\n }\n.h-\\\\[250px\\\\] {\n height: 250px;\n }\n.h-full {\n height: 100%;\n }\n.min-h-16 {\n min-height: calc(0.25rem * 16);\n min-height: calc(var(--spacing) * 16);\n }\n.w-0 {\n width: calc(0.25rem * 0);\n width: calc(var(--spacing) * 0);\n }\n.w-1 {\n width: calc(0.25rem * 1);\n width: calc(var(--spacing) * 1);\n }\n.w-2 {\n width: calc(0.25rem * 2);\n width: calc(var(--spacing) * 2);\n }\n.w-2\\\\.5 {\n width: calc(0.25rem * 2.5);\n width: calc(var(--spacing) * 2.5);\n }\n.w-4 {\n width: calc(0.25rem * 4);\n width: calc(var(--spacing) * 4);\n }\n.w-4\\\\/5 {\n width: calc(4/5 * 100%);\n }\n.w-64 {\n width: calc(0.25rem * 64);\n width: calc(var(--spacing) * 64);\n }\n.w-80 {\n width: calc(0.25rem * 80);\n width: calc(var(--spacing) * 80);\n }\n.w-\\\\[320px\\\\] {\n width: 320px;\n }\n.w-\\\\[640px\\\\] {\n width: 640px;\n }\n.w-fit {\n width: -webkit-fit-content;\n width: fit-content;\n }\n.w-full {\n width: 100%;\n }\n.max-w-\\\\[300px\\\\] {\n max-width: 300px;\n }\n.max-w-\\\\[320px\\\\] {\n max-width: 320px;\n }\n.min-w-0 {\n min-width: calc(0.25rem * 0);\n min-width: calc(var(--spacing) * 0);\n }\n.min-w-\\\\[8rem\\\\] {\n min-width: 8rem;\n }\n.flex-1 {\n flex: 1;\n }\n.flex-shrink {\n flex-shrink: 1;\n }\n.shrink-0 {\n flex-shrink: 0;\n }\n.flex-grow {\n flex-grow: 1;\n }\n.caption-bottom {\n caption-side: bottom;\n }\n.border-collapse {\n border-collapse: collapse;\n }\n.origin-\\\\(--radix-hover-card-content-transform-origin\\\\) {\n transform-origin: var(--radix-hover-card-content-transform-origin);\n }\n.origin-\\\\(--radix-tooltip-content-transform-origin\\\\) {\n transform-origin: var(--radix-tooltip-content-transform-origin);\n }\n.translate-y-\\\\[calc\\\\(-50\\\\%_-_2px\\\\)\\\\] {\n --tw-translate-y: calc(-50% - 2px);\n translate: var(--tw-translate-x) calc(-50% - 2px);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n.rotate-45 {\n rotate: 45deg;\n }\n.transform {\n transform: ;\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n.touch-none {\n touch-action: none;\n }\n.resize {\n resize: both;\n }\n.list-disc {\n list-style-type: disc;\n }\n.auto-rows-min {\n grid-auto-rows: -webkit-min-content;\n grid-auto-rows: min-content;\n }\n.grid-rows-\\\\[auto_auto\\\\] {\n grid-template-rows: auto auto;\n }\n.flex-col {\n flex-direction: column;\n }\n.flex-wrap {\n flex-wrap: wrap;\n }\n.items-center {\n align-items: center;\n }\n.items-end {\n align-items: flex-end;\n }\n.items-start {\n align-items: flex-start;\n }\n.items-stretch {\n align-items: stretch;\n }\n.justify-between {\n justify-content: space-between;\n }\n.justify-center {\n justify-content: center;\n }\n.gap-1 {\n gap: calc(0.25rem * 1);\n gap: calc(var(--spacing) * 1);\n }\n.gap-1\\\\.5 {\n gap: calc(0.25rem * 1.5);\n gap: calc(var(--spacing) * 1.5);\n }\n.gap-2 {\n gap: calc(0.25rem * 2);\n gap: calc(var(--spacing) * 2);\n }\n.gap-4 {\n gap: calc(0.25rem * 4);\n gap: calc(var(--spacing) * 4);\n }\n.gap-6 {\n gap: calc(0.25rem * 6);\n gap: calc(var(--spacing) * 6);\n }\n.self-start {\n align-self: flex-start;\n }\n.justify-self-end {\n justify-self: flex-end;\n }\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n.rounded-\\\\[2px\\\\] {\n border-radius: 2px;\n }\n.rounded-\\\\[4px\\\\] {\n border-radius: 4px;\n }\n.rounded-\\\\[inherit\\\\] {\n border-radius: inherit;\n }\n.rounded-full {\n border-radius: calc(infinity * 1px);\n }\n.rounded-lg {\n border-radius: 0.625rem;\n }\n.rounded-md {\n border-radius: calc(0.625rem - 2px);\n }\n.border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n.border-\\\\[1\\\\.5px\\\\] {\n border-style: var(--tw-border-style);\n border-width: 1.5px;\n }\n.border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n.border-t-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n.border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n.border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n.border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n.border-\\\\(--color-border\\\\) {\n border-color: oklch(0.922 0 0);\n border-color: var(--color-border);\n }\n.border-border {\n border-color: oklch(0.922 0 0);\n }\n.border-border\\\\/50 {\n border-color: color-mix(in oklab, oklch(0.922 0 0) 50%, transparent);\n }\n.border-gray-300 {\n border-color: oklch(87.2% 0.01 258.338);\n border-color: var(--color-gray-300);\n }\n.border-input {\n border-color: oklch(0.922 0 0);\n }\n.border-t-transparent {\n border-top-color: transparent;\n }\n.border-l-transparent {\n border-left-color: transparent;\n }\n.bg-\\\\(--color-bg\\\\) {\n background-color: var(--color-bg);\n }\n.bg-border {\n background-color: oklch(0.922 0 0);\n }\n.bg-gray-300 {\n background-color: oklch(87.2% 0.01 258.338);\n background-color: var(--color-gray-300);\n }\n.bg-gray-400 {\n background-color: oklch(70.7% 0.022 261.325);\n background-color: var(--color-gray-400);\n }\n.bg-gray-500 {\n background-color: oklch(55.1% 0.027 264.364);\n background-color: var(--color-gray-500);\n }\n.bg-green-300 {\n background-color: oklch(87.1% 0.15 154.449);\n background-color: var(--color-green-300);\n }\n.bg-muted {\n background-color: oklch(0.97 0 0);\n }\n.bg-muted\\\\/50 {\n background-color: color-mix(in oklab, oklch(0.97 0 0) 50%, transparent);\n }\n.bg-popover {\n background-color: oklch(1 0 0);\n }\n.bg-primary {\n background-color: oklch(0.205 0 0);\n }\n.bg-slate-100 {\n background-color: oklch(96.8% 0.007 247.896);\n background-color: var(--color-slate-100);\n }\n.bg-transparent {\n background-color: transparent;\n }\n.bg-white {\n background-color: #fff;\n background-color: var(--color-white);\n }\n.fill-primary {\n fill: oklch(0.205 0 0);\n }\n.p-1 {\n padding: calc(0.25rem * 1);\n padding: calc(var(--spacing) * 1);\n }\n.p-2 {\n padding: calc(0.25rem * 2);\n padding: calc(var(--spacing) * 2);\n }\n.p-4 {\n padding: calc(0.25rem * 4);\n padding: calc(var(--spacing) * 4);\n }\n.p-6 {\n padding: calc(0.25rem * 6);\n padding: calc(var(--spacing) * 6);\n }\n.p-px {\n padding: 1px;\n }\n.px-2 {\n padding-inline: calc(0.25rem * 2);\n padding-inline: calc(var(--spacing) * 2);\n }\n.px-2\\\\.5 {\n padding-inline: calc(0.25rem * 2.5);\n padding-inline: calc(var(--spacing) * 2.5);\n }\n.px-3 {\n padding-inline: calc(0.25rem * 3);\n padding-inline: calc(var(--spacing) * 3);\n }\n.px-6 {\n padding-inline: calc(0.25rem * 6);\n padding-inline: calc(var(--spacing) * 6);\n }\n.px-\\\\[1em\\\\] {\n padding-inline: 1em;\n }\n.py-1 {\n padding-block: calc(0.25rem * 1);\n padding-block: calc(var(--spacing) * 1);\n }\n.py-1\\\\.5 {\n padding-block: calc(0.25rem * 1.5);\n padding-block: calc(var(--spacing) * 1.5);\n }\n.py-2 {\n padding-block: calc(0.25rem * 2);\n padding-block: calc(var(--spacing) * 2);\n }\n.py-6 {\n padding-block: calc(0.25rem * 6);\n padding-block: calc(var(--spacing) * 6);\n }\n.pt-3 {\n padding-top: calc(0.25rem * 3);\n padding-top: calc(var(--spacing) * 3);\n }\n.pb-3 {\n padding-bottom: calc(0.25rem * 3);\n padding-bottom: calc(var(--spacing) * 3);\n }\n.text-center {\n text-align: center;\n }\n.text-left {\n text-align: left;\n }\n.align-middle {\n vertical-align: middle;\n }\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n font-family: var(--font-mono);\n }\n.text-2xl {\n font-size: 1.5rem;\n font-size: var(--text-2xl);\n line-height: calc(2 / 1.5);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n.text-3xl {\n font-size: 1.875rem;\n font-size: var(--text-3xl);\n line-height: calc(2.25 / 1.875);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n.text-4xl {\n font-size: 2.25rem;\n font-size: var(--text-4xl);\n line-height: calc(2.5 / 2.25);\n line-height: var(--tw-leading, var(--text-4xl--line-height));\n }\n.text-base {\n font-size: 1rem;\n font-size: var(--text-base);\n line-height: calc(1.5 / 1);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n.text-lg {\n font-size: 1.125rem;\n font-size: var(--text-lg);\n line-height: calc(1.75 / 1.125);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n.text-sm {\n font-size: 0.875rem;\n font-size: var(--text-sm);\n line-height: calc(1.25 / 0.875);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n.text-xl {\n font-size: 1.25rem;\n font-size: var(--text-xl);\n line-height: calc(1.75 / 1.25);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n.text-xs {\n font-size: 0.75rem;\n font-size: var(--text-xs);\n line-height: calc(1 / 0.75);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n.leading-\\\\[2\\\\.5rem\\\\] {\n --tw-leading: 2.5rem;\n line-height: 2.5rem;\n }\n.leading-\\\\[2rem\\\\] {\n --tw-leading: 2rem;\n line-height: 2rem;\n }\n.leading-\\\\[3\\\\.5rem\\\\] {\n --tw-leading: 3.5rem;\n line-height: 3.5rem;\n }\n.leading-\\\\[3rem\\\\] {\n --tw-leading: 3rem;\n line-height: 3rem;\n }\n.leading-\\\\[4rem\\\\] {\n --tw-leading: 4rem;\n line-height: 4rem;\n }\n.leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n.font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: 700;\n font-weight: var(--font-weight-bold);\n }\n.font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: 500;\n font-weight: var(--font-weight-medium);\n }\n.font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: 600;\n font-weight: var(--font-weight-semibold);\n }\n.text-balance {\n text-wrap: balance;\n }\n.text-wrap {\n text-wrap: wrap;\n }\n.whitespace-nowrap {\n white-space: nowrap;\n }\n.text-black {\n color: #000;\n color: var(--color-black);\n }\n.text-card-foreground {\n color: oklch(0.145 0 0);\n }\n.text-current {\n color: currentcolor;\n }\n.text-foreground {\n color: oklch(0.145 0 0);\n }\n.text-gray-500 {\n color: oklch(55.1% 0.027 264.364);\n color: var(--color-gray-500);\n }\n.text-gray-800 {\n color: oklch(27.8% 0.033 256.848);\n color: var(--color-gray-800);\n }\n.text-muted-foreground {\n color: oklch(0.556 0 0);\n }\n.text-popover-foreground {\n color: oklch(0.145 0 0);\n }\n.text-primary-foreground {\n color: oklch(0.985 0 0);\n }\n.italic {\n font-style: italic;\n }\n.tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: tabular-nums ;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n.underline {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n }\n.shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n.shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n.shadow-xs {\n --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 2px 0 rgb(0 0 0 / 0.05);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n.ring-offset-background {\n --tw-ring-offset-color: oklch(1 0 0);\n }\n.outline-hidden {\n --tw-outline-style: none;\n outline-style: none;\n outline: 2px solid transparent;\n outline-offset: 2px\n }\n.outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n.filter {\n filter: ;\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n.transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: 150ms;\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n.transition-\\\\[color\\\\,box-shadow\\\\] {\n transition-property: color,box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: 150ms;\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: 150ms;\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n.transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: 150ms;\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n.transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: 150ms;\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n.transition-none {\n transition-property: none;\n }\n.outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n.select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n.group-data-\\\\[disabled\\\\=true\\\\]\\\\:pointer-events-none {\n &:is(:where(.group)[data-disabled=\"true\"] *) {\n pointer-events: none;\n }\n }\n.group-data-\\\\[disabled\\\\=true\\\\]\\\\:opacity-50 {\n &:is(:where(.group)[data-disabled=\"true\"] *) {\n opacity: 50%;\n }\n }\n.peer-disabled\\\\:cursor-not-allowed {\n &:is(:where(.peer):disabled ~ *) {\n cursor: not-allowed;\n }\n }\n.peer-disabled\\\\:opacity-50 {\n &:is(:where(.peer):disabled ~ *) {\n opacity: 50%;\n }\n }\n.selection\\\\:bg-primary {\n & *::selection {\n background-color: oklch(0.205 0 0);\n }\n &::selection {\n background-color: oklch(0.205 0 0);\n }\n }\n.selection\\\\:text-primary-foreground {\n & *::selection {\n color: oklch(0.985 0 0);\n }\n &::selection {\n color: oklch(0.985 0 0);\n }\n }\n.file\\\\:inline-flex {\n &::-webkit-file-upload-button {\n display: inline-flex;\n }\n &::file-selector-button {\n display: inline-flex;\n }\n }\n.file\\\\:h-7 {\n &::-webkit-file-upload-button {\n height: calc(0.25rem * 7);\n height: calc(var(--spacing) * 7);\n }\n &::file-selector-button {\n height: calc(0.25rem * 7);\n height: calc(var(--spacing) * 7);\n }\n }\n.file\\\\:border-0 {\n &::-webkit-file-upload-button {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n &::file-selector-button {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n }\n.file\\\\:bg-transparent {\n &::-webkit-file-upload-button {\n background-color: transparent;\n }\n &::file-selector-button {\n background-color: transparent;\n }\n }\n.file\\\\:text-sm {\n &::-webkit-file-upload-button {\n font-size: 0.875rem;\n font-size: var(--text-sm);\n line-height: calc(1.25 / 0.875);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n &::file-selector-button {\n font-size: 0.875rem;\n font-size: var(--text-sm);\n line-height: calc(1.25 / 0.875);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n.file\\\\:font-medium {\n &::-webkit-file-upload-button {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: 500;\n font-weight: var(--font-weight-medium);\n }\n &::file-selector-button {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: 500;\n font-weight: var(--font-weight-medium);\n }\n }\n.file\\\\:text-foreground {\n &::-webkit-file-upload-button {\n color: oklch(0.145 0 0);\n }\n &::file-selector-button {\n color: oklch(0.145 0 0);\n }\n }\n.placeholder\\\\:text-muted-foreground {\n &::placeholder {\n color: oklch(0.556 0 0);\n }\n }\n.hover\\\\:bg-muted\\\\/50 {\n &:hover {\n background-color: color-mix(in oklab, oklch(0.97 0 0) 50%, transparent)\n }\n }\n.focus-visible\\\\:border-ring {\n &:focus-visible {\n border-color: oklch(0.708 0 0);\n }\n }\n.focus-visible\\\\:ring-2 {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n.focus-visible\\\\:ring-\\\\[3px\\\\] {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n.focus-visible\\\\:ring-ring {\n &:focus-visible {\n --tw-ring-color: oklch(0.708 0 0);\n }\n }\n.focus-visible\\\\:ring-ring\\\\/50 {\n &:focus-visible {\n --tw-ring-color: color-mix(in oklab, oklch(0.708 0 0) 50%, transparent);\n }\n }\n.focus-visible\\\\:ring-offset-2 {\n &:focus-visible {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n.focus-visible\\\\:outline-1 {\n &:focus-visible {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n }\n.focus-visible\\\\:outline-none {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n.disabled\\\\:pointer-events-none {\n &:disabled {\n pointer-events: none;\n }\n }\n.disabled\\\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n.disabled\\\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n.has-data-\\\\[slot\\\\=card-action\\\\]\\\\:grid-cols-\\\\[1fr_auto\\\\] {\n &:has(*[data-slot=\"card-action\"]) {\n grid-template-columns: 1fr auto;\n }\n }\n.aria-invalid\\\\:border-destructive {\n &[aria-invalid=\"true\"] {\n border-color: oklch(0.577 0.245 27.325);\n }\n }\n.aria-invalid\\\\:ring-destructive\\\\/20 {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: color-mix(in oklab, oklch(0.577 0.245 27.325) 20%, transparent);\n }\n }\n.data-\\\\[orientation\\\\=horizontal\\\\]\\\\:h-px {\n &[data-orientation=\"horizontal\"] {\n height: 1px;\n }\n }\n.data-\\\\[orientation\\\\=horizontal\\\\]\\\\:w-full {\n &[data-orientation=\"horizontal\"] {\n width: 100%;\n }\n }\n.data-\\\\[orientation\\\\=vertical\\\\]\\\\:h-full {\n &[data-orientation=\"vertical\"] {\n height: 100%;\n }\n }\n.data-\\\\[orientation\\\\=vertical\\\\]\\\\:w-px {\n &[data-orientation=\"vertical\"] {\n width: 1px;\n }\n }\n.data-\\\\[state\\\\=active\\\\]\\\\:bg-background {\n &[data-state=\"active\"] {\n background-color: oklch(1 0 0);\n }\n }\n.data-\\\\[state\\\\=active\\\\]\\\\:text-foreground {\n &[data-state=\"active\"] {\n color: oklch(0.145 0 0);\n }\n }\n.data-\\\\[state\\\\=active\\\\]\\\\:shadow {\n &[data-state=\"active\"] {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n.data-\\\\[state\\\\=checked\\\\]\\\\:border-primary {\n &[data-state=\"checked\"] {\n border-color: oklch(0.205 0 0);\n }\n }\n.data-\\\\[state\\\\=checked\\\\]\\\\:bg-primary {\n &[data-state=\"checked\"] {\n background-color: oklch(0.205 0 0);\n }\n }\n.data-\\\\[state\\\\=checked\\\\]\\\\:text-primary-foreground {\n &[data-state=\"checked\"] {\n color: oklch(0.985 0 0);\n }\n }\n.data-\\\\[state\\\\=selected\\\\]\\\\:bg-muted {\n &[data-state=\"selected\"] {\n background-color: oklch(0.97 0 0);\n }\n }\n.md\\\\:text-sm {\n font-size: 0.875rem;\n font-size: var(--text-sm);\n line-height: calc(1.25 / 0.875);\n line-height: var(--tw-leading, var(--text-sm--line-height))\n }\n.dark\\\\:bg-input\\\\/30 {\n background-color: color-mix(in oklab, oklch(0.922 0 0) 30%, transparent)\n }\n.dark\\\\:aria-invalid\\\\:ring-destructive\\\\/40 {\n &[aria-invalid=\"true\"] {\n --tw-ring-color: color-mix(in oklab, oklch(0.577 0.245 27.325) 40%, transparent);\n }\n }\n.dark\\\\:data-\\\\[state\\\\=checked\\\\]\\\\:bg-primary {\n &[data-state=\"checked\"] {\n background-color: oklch(0.205 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-cartesian-axis-tick_text\\\\]\\\\:fill-muted-foreground {\n & .recharts-cartesian-axis-tick text {\n fill: oklch(0.556 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-cartesian-grid_line\\\\[stroke\\\\=\\\\'\\\\#ccc\\\\'\\\\]\\\\]\\\\:stroke-border\\\\/50 {\n & .recharts-cartesian-grid line[stroke='#ccc'] {\n stroke: color-mix(in oklab, oklch(0.922 0 0) 50%, transparent);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-curve\\\\.recharts-tooltip-cursor\\\\]\\\\:stroke-border {\n & .recharts-curve.recharts-tooltip-cursor {\n stroke: oklch(0.922 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-dot\\\\[stroke\\\\=\\\\'\\\\#fff\\\\'\\\\]\\\\]\\\\:stroke-transparent {\n & .recharts-dot[stroke='#fff'] {\n stroke: transparent;\n }\n }\n.\\\\[\\\\&_\\\\.recharts-layer\\\\]\\\\:outline-hidden {\n & .recharts-layer {\n --tw-outline-style: none;\n outline-style: none;\n outline: 2px solid transparent;\n outline-offset: 2px\n }\n }\n.\\\\[\\\\&_\\\\.recharts-polar-grid_\\\\[stroke\\\\=\\\\'\\\\#ccc\\\\'\\\\]\\\\]\\\\:stroke-border {\n & .recharts-polar-grid [stroke='#ccc'] {\n stroke: oklch(0.922 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-radial-bar-background-sector\\\\]\\\\:fill-muted {\n & .recharts-radial-bar-background-sector {\n fill: oklch(0.97 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-rectangle\\\\.recharts-tooltip-cursor\\\\]\\\\:fill-muted {\n & .recharts-rectangle.recharts-tooltip-cursor {\n fill: oklch(0.97 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-reference-line_\\\\[stroke\\\\=\\\\'\\\\#ccc\\\\'\\\\]\\\\]\\\\:stroke-border {\n & .recharts-reference-line [stroke='#ccc'] {\n stroke: oklch(0.922 0 0);\n }\n }\n.\\\\[\\\\&_\\\\.recharts-sector\\\\]\\\\:outline-hidden {\n & .recharts-sector {\n --tw-outline-style: none;\n outline-style: none;\n outline: 2px solid transparent;\n outline-offset: 2px\n }\n }\n.\\\\[\\\\&_\\\\.recharts-sector\\\\[stroke\\\\=\\\\'\\\\#fff\\\\'\\\\]\\\\]\\\\:stroke-transparent {\n & .recharts-sector[stroke='#fff'] {\n stroke: transparent;\n }\n }\n.\\\\[\\\\&_\\\\.recharts-surface\\\\]\\\\:outline-hidden {\n & .recharts-surface {\n --tw-outline-style: none;\n outline-style: none;\n outline: 2px solid transparent;\n outline-offset: 2px\n }\n }\n.\\\\[\\\\&_tr\\\\]\\\\:border-b {\n & tr {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n }\n.\\\\[\\\\&_tr\\\\:last-child\\\\]\\\\:border-0 {\n & tr:last-child {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n }\n.\\\\[\\\\&\\\\:has\\\\(\\\\[role\\\\=checkbox\\\\]\\\\)\\\\]\\\\:pr-0 {\n &:has([role=checkbox]) {\n padding-right: calc(0.25rem * 0);\n padding-right: calc(var(--spacing) * 0);\n }\n }\n.\\\\[\\\\.border-b\\\\]\\\\:pb-6 {\n &:is(.border-b) {\n padding-bottom: calc(0.25rem * 6);\n padding-bottom: calc(var(--spacing) * 6);\n }\n }\n.\\\\[\\\\.border-t\\\\]\\\\:pt-6 {\n &:is(.border-t) {\n padding-top: calc(0.25rem * 6);\n padding-top: calc(var(--spacing) * 6);\n }\n }\n.\\\\[\\\\&\\\\>\\\\[role\\\\=checkbox\\\\]\\\\]\\\\:translate-y-\\\\[2px\\\\] {\n &>[role=checkbox] {\n --tw-translate-y: 2px;\n translate: var(--tw-translate-x) 2px;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n }\n.\\\\[\\\\&\\\\>svg\\\\]\\\\:h-2\\\\.5 {\n &>svg {\n height: calc(0.25rem * 2.5);\n height: calc(var(--spacing) * 2.5);\n }\n }\n.\\\\[\\\\&\\\\>svg\\\\]\\\\:h-3 {\n &>svg {\n height: calc(0.25rem * 3);\n height: calc(var(--spacing) * 3);\n }\n }\n.\\\\[\\\\&\\\\>svg\\\\]\\\\:w-2\\\\.5 {\n &>svg {\n width: calc(0.25rem * 2.5);\n width: calc(var(--spacing) * 2.5);\n }\n }\n.\\\\[\\\\&\\\\>svg\\\\]\\\\:w-3 {\n &>svg {\n width: calc(0.25rem * 3);\n width: calc(var(--spacing) * 3);\n }\n }\n.\\\\[\\\\&\\\\>svg\\\\]\\\\:text-muted-foreground {\n &>svg {\n color: oklch(0.556 0 0);\n }\n }\n.\\\\[\\\\&\\\\>tr\\\\]\\\\:last\\\\:border-b-0 {\n &>tr {\n &:last-child {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0px;\n }\n }\n }\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-leading {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ordinal {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-slashed-zero {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-figure {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-spacing {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-numeric-fraction {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-invert {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false;\n}\n@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n }\n }\n`;"],"mappings":"AAAA,MAAO,IAAM,CAAAA,mBAAmB,s/1CAomD/B","ignoreList":[]}
package/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  export { default as GrapejsCanvas } from './GrapesjsCanvas';
2
2
  export * from './index.styles';
3
- export { getUpdatedUiJson } from './helpers/merge-json';
package/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export{default as GrapejsCanvas}from"./GrapesjsCanvas";export*from"./index.styles";export{getUpdatedUiJson}from"./helpers/merge-json";
1
+ export{default as GrapejsCanvas}from"./GrapesjsCanvas";export*from"./index.styles";
2
2
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["default","GrapejsCanvas","getUpdatedUiJson"],"sources":["../src/index.ts"],"sourcesContent":["export { default as GrapejsCanvas } from './GrapesjsCanvas';\nexport * from './index.styles';\nexport { getUpdatedUiJson } from './helpers/merge-json';\n"],"mappings":"AAAA,OAASA,OAAO,GAAI,CAAAC,aAAa,KAAQ,kBAAkB,CAC3D,WAAc,gBAAgB,CAC9B,OAASC,gBAAgB,KAAQ,sBAAsB","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["default","GrapejsCanvas"],"sources":["../src/index.ts"],"sourcesContent":["export { default as GrapejsCanvas } from './GrapesjsCanvas';\nexport * from './index.styles';\n"],"mappings":"AAAA,OAASA,OAAO,GAAI,CAAAC,aAAa,KAAQ,kBAAkB,CAC3D,WAAc,gBAAgB","ignoreList":[]}
package/package.json CHANGED
@@ -2,8 +2,11 @@
2
2
  "name": "@peak-ai/canvas",
3
3
  "author": "squad-builder-experience",
4
4
  "license": "UNLICENSED",
5
- "version": "1.2.3-rc.30",
5
+ "version": "1.2.3-rc.4",
6
6
  "description": "",
7
+ "workspaces": [
8
+ "packages/*"
9
+ ],
7
10
  "dependencies": {
8
11
  "@peak-ai/ais-components": "6.41.0",
9
12
  "@radix-ui/react-checkbox": "^1.1.5",
@@ -17,13 +20,12 @@
17
20
  "@tailwindcss/cli": "^4.1.3",
18
21
  "@types/chroma-js": "^3.1.1",
19
22
  "chroma-js": "^3.1.2",
20
- "class-variance-authority": "^0.7.1",
21
23
  "clsx": "^2.1.1",
22
24
  "grapesjs": "0.22.6",
23
- "grapesjs-tailwind": "1.0.7",
24
- "lucide-react": "^0.487.0",
25
25
  "markdown": "^0.5.0",
26
26
  "markdown-to-jsx": "7.4.1",
27
+ "grapesjs-tailwind": "1.0.7",
28
+ "lucide-react": "^0.487.0",
27
29
  "plotly.js": "2.34.0",
28
30
  "react": "^17.0.2",
29
31
  "react-dom": "^17.0.2",
package/plugins/grapejs-plugin.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { Editor, Component } from 'grapesjs';
2
- export declare function createGrapesjsShadcnGenericPlugin(mode: 'editor' | 'preview', performInteraction: (payload: Object) => void, renderedComponents?: Record<string, Component>): (editor: Editor) => void;
1
+ import { Editor } from 'grapesjs';
2
+ export declare function createGrapesjsShadcnGenericPlugin(mode: 'editor' | 'preview'): (editor: Editor) => void;
package/plugins/grapejs-plugin.js CHANGED
@@ -1,5 +1,4 @@
1
- import _extends from"@babel/runtime/helpers/extends";/* eslint-disable func-names *//* eslint-disable @typescript-eslint/no-explicit-any */import ReactDOM from"react-dom";import{getRenderers}from"./helpers/render-components";import{jsx as _jsx}from"react/jsx-runtime";export function createGrapesjsShadcnGenericPlugin(mode,performInteraction,renderedComponents){if(renderedComponents===void 0){renderedComponents={}}return function grapesjsShadcnGenericPlugin(editor){editor.DomComponents.addType("shadcn-generic",{model:{defaults:{tagName:"div",droppable:false,componentName:"Card",componentProps:{},traits:[]}},view:{events:{"input [data-slot]":"handleSlotInput"},handleSlotInput:function handleSlotInput(e){var target=e.target;var slot=target.dataset.slot;var text=target.innerText;var props=this.model.get("componentProps")||{};if(!slot){return}if(slot.startsWith("table-header-")){var _props$data;var idx=parseInt(slot.split("-")[2],10);var dataKeys=Object.keys(((_props$data=props.data)==null?void 0:_props$data[0])||{});if(!props.headerMapper){props.headerMapper={}}var key=dataKeys[idx];if(key){props.headerMapper[key]=text}}else{props[slot]=text}this.model.set("componentProps",_extends({},props))},render:function render(){var _this=this;var compName=this.model.get("componentName");var compProps=this.model.get("componentProps");if(typeof compProps==="string"){try{compProps=JSON.parse(compProps)}catch(err){// eslint-disable-next-line no-console
2
- console.error("Invalid JSON in componentProps",err);compProps={}}}compProps.isEditable=mode==="editor";compProps.performInteraction=performInteraction;compProps.onChange=function(data){_this.model.set("componentProps",_extends({},_this.model.get("componentProps"),data))};var renderers=getRenderers();var Renderer=renderers[compName];if(Renderer){if(compName==="Tabs"){ReactDOM.render(/*#__PURE__*/_jsx(Renderer,_extends({},compProps,{gjsModel:this.model})),this.el);var children=this.model.components();var tabsContent=this.el.querySelectorAll(".tabs-content");children.each(function(childModel,i){var childView=_this.createView(childModel);if(childView){childView.render();tabsContent[i].appendChild(childView.el)}})}else{ReactDOM.render(/*#__PURE__*/_jsx(Renderer,_extends({},compProps,{gjsModel:this.model})),this.el)}}else{this.el.innerHTML="<div>Unsupported component: "+compName+"</div>"}renderedComponents[this.model.get("id")]=this.model;return this},createView:function createView(model){var _this$em$get$getType;var ComponentView=(_this$em$get$getType=this.em.get("DomComponents").getType(model.get("type")))==null?void 0:_this$em$get$getType.view;if(!ComponentView){// eslint-disable-next-line no-console
3
- console.warn("No view found for component type:",model.get("type"));return null}var view=new ComponentView({model:model,config:this.config,componentTypes:this.componentTypes});return view},remove:function remove(){// eslint-disable-next-line import/no-named-as-default-member
4
- ReactDOM.unmountComponentAtNode(this.el);return this}}})}}
1
+ import _extends from"@babel/runtime/helpers/extends";/* eslint-disable func-names *//* eslint-disable @typescript-eslint/no-explicit-any */import ReactDOM from"react-dom";import{getRenderers}from"./helpers/render-components";export function createGrapesjsShadcnGenericPlugin(mode){return function grapesjsShadcnGenericPlugin(editor){editor.DomComponents.addType("shadcn-generic",{model:{defaults:{tagName:"div",droppable:false,componentName:"Card",componentProps:{},traits:[]}},view:{events:{"input [data-slot]":"handleSlotInput"},handleSlotInput:function handleSlotInput(e){var _ref;var target=e.target;var slot=target.dataset.slot;var text=target.innerText;this.model.set("componentProps",_extends({},this.model.get("componentProps"),slot?(_ref={},_ref[slot]=text,_ref):{}))},render:function render(){var _this=this;var compName=this.model.get("componentName");var compProps=this.model.get("componentProps");if(typeof compProps==="string"){try{compProps=JSON.parse(compProps)}catch(err){// eslint-disable-next-line no-console
2
+ console.error("Invalid JSON in componentProps",err);compProps={}}}compProps.isEditable=mode==="editor";compProps.onChange=function(data){_this.model.set("componentProps",_extends({},_this.model.get("componentProps"),data))};var renderers=getRenderers();var renderer=renderers[compName];if(renderer){if(compName==="Tabs"){ReactDOM.render(renderer(compProps),this.el);var children=this.model.components();var tabsContent=this.el.querySelectorAll(".tabs-content");children.each(function(childModel,i){var childView=_this.createView(childModel);if(childView){childView.render();tabsContent[i].appendChild(childView.el)}})}else{ReactDOM.render(renderer(compProps),this.el)}}else{this.el.innerHTML="<div>Unsupported component: "+compName+"</div>"}return this},createView:function createView(model){var _this$em$get$getType;var ComponentView=(_this$em$get$getType=this.em.get("DomComponents").getType(model.get("type")))==null?void 0:_this$em$get$getType.view;if(!ComponentView){// eslint-disable-next-line no-console
3
+ console.warn("No view found for component type:",model.get("type"));return null}var view=new ComponentView({model:model,config:this.config,componentTypes:this.componentTypes});return view},remove:function remove(){ReactDOM.unmountComponentAtNode(this.el);return this}}})}}
5
4
  //# sourceMappingURL=grapejs-plugin.js.map
package/plugins/grapejs-plugin.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grapejs-plugin.js","names":["ReactDOM","getRenderers","jsx","_jsx","createGrapesjsShadcnGenericPlugin","mode","performInteraction","renderedComponents","grapesjsShadcnGenericPlugin","editor","DomComponents","addType","model","defaults","tagName","droppable","componentName","componentProps","traits","view","events","handleSlotInput","e","target","slot","dataset","text","innerText","props","get","startsWith","_props$data","idx","parseInt","split","dataKeys","Object","keys","data","headerMapper","key","set","_extends","render","_this","compName","compProps","JSON","parse","err","console","error","isEditable","onChange","renderers","Renderer","gjsModel","el","children","components","tabsContent","querySelectorAll","each","childModel","i","childView","createView","appendChild","innerHTML","_this$em$get$getType","ComponentView","em","getType","warn","config","componentTypes","remove","unmountComponentAtNode"],"sources":["../../src/plugins/grapejs-plugin.tsx"],"sourcesContent":["/* eslint-disable func-names */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport ReactDOM from 'react-dom';\nimport { Editor, Component } from 'grapesjs';\nimport { getRenderers } from './helpers/render-components';\n\nexport function createGrapesjsShadcnGenericPlugin(\n mode: 'editor' | 'preview',\n performInteraction: (payload: Object) => void,\n renderedComponents: Record<string, Component> = {},\n) {\n return function grapesjsShadcnGenericPlugin(editor: Editor): void {\n editor.DomComponents.addType('shadcn-generic', {\n model: {\n defaults: {\n tagName: 'div',\n droppable: false,\n componentName: 'Card',\n componentProps: {},\n traits: [],\n },\n },\n view: {\n events: {\n 'input [data-slot]': 'handleSlotInput',\n } as any,\n handleSlotInput(e: Event) {\n const target = e.target as HTMLElement;\n const slot = target.dataset.slot;\n const text = target.innerText;\n\n const props = this.model.get('componentProps') || {};\n\n if (!slot) {\n return;\n }\n\n if (slot.startsWith('table-header-')) {\n const idx = parseInt(slot.split('-')[2], 10);\n const dataKeys = Object.keys(props.data?.[0] || {});\n\n if (!props.headerMapper) {\n props.headerMapper = {};\n }\n\n const key = dataKeys[idx];\n\n if (key) {\n props.headerMapper[key] = text;\n }\n } else {\n props[slot] = text;\n }\n\n this.model.set('componentProps', {\n ...props,\n });\n },\n render: function () {\n const compName: string = this.model.get('componentName');\n let compProps: any = this.model.get('componentProps');\n\n if (typeof compProps === 'string') {\n try {\n compProps = JSON.parse(compProps);\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error('Invalid JSON in componentProps', err);\n compProps = {};\n }\n }\n\n compProps.isEditable = mode === 'editor';\n compProps.performInteraction = performInteraction;\n\n compProps.onChange = (data: Record<string, string>) => {\n this.model.set('componentProps', {\n ...this.model.get('componentProps'),\n ...data,\n });\n };\n\n const renderers = getRenderers();\n const Renderer = renderers[compName];\n\n if (Renderer) {\n if (compName === 'Tabs') {\n ReactDOM.render(<Renderer {...compProps} gjsModel={this.model} />, this.el);\n\n const children = this.model.components();\n const tabsContent = this.el.querySelectorAll('.tabs-content');\n children.each((childModel, i) => {\n const childView = this.createView(childModel);\n\n if (childView) {\n childView.render();\n tabsContent[i].appendChild(childView.el);\n }\n });\n } else {\n ReactDOM.render(<Renderer {...compProps} gjsModel={this.model} />, this.el);\n }\n } else {\n this.el.innerHTML = `<div>Unsupported component: ${compName}</div>`;\n }\n\n renderedComponents[this.model.get('id')] = this.model;\n return this;\n },\n createView(model: any) {\n const ComponentView = this.em.get('DomComponents').getType(model.get('type'))?.view;\n\n if (!ComponentView) {\n // eslint-disable-next-line no-console\n console.warn('No view found for component type:', model.get('type'));\n\n return null;\n }\n\n const view = new ComponentView({\n model,\n config: this.config,\n componentTypes: this.componentTypes,\n });\n\n return view;\n },\n remove: function () {\n // eslint-disable-next-line import/no-named-as-default-member\n ReactDOM.unmountComponentAtNode(this.el);\n\n return this;\n },\n },\n });\n };\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"grapejs-plugin.js","names":["ReactDOM","getRenderers","createGrapesjsShadcnGenericPlugin","mode","grapesjsShadcnGenericPlugin","editor","DomComponents","addType","model","defaults","tagName","droppable","componentName","componentProps","traits","view","events","handleSlotInput","e","_ref","target","slot","dataset","text","innerText","set","_extends","get","render","_this","compName","compProps","JSON","parse","err","console","error","isEditable","onChange","data","renderers","renderer","el","children","components","tabsContent","querySelectorAll","each","childModel","i","childView","createView","appendChild","innerHTML","_this$em$get$getType","ComponentView","em","getType","warn","config","componentTypes","remove","unmountComponentAtNode"],"sources":["../../src/plugins/grapejs-plugin.tsx"],"sourcesContent":["/* eslint-disable func-names */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport ReactDOM from 'react-dom';\nimport { Editor } from 'grapesjs';\nimport { getRenderers } from './helpers/render-components';\n\nexport function createGrapesjsShadcnGenericPlugin(mode: 'editor' | 'preview') {\n return function grapesjsShadcnGenericPlugin(editor: Editor): void {\n editor.DomComponents.addType('shadcn-generic', {\n model: {\n defaults: {\n tagName: 'div',\n droppable: false,\n componentName: 'Card',\n componentProps: {},\n traits: [],\n },\n },\n view: {\n events: {\n 'input [data-slot]': 'handleSlotInput',\n } as any,\n handleSlotInput(e: Event) {\n const target = e.target as HTMLElement;\n const slot = target.dataset.slot;\n const text = target.innerText;\n this.model.set('componentProps', {\n ...this.model.get('componentProps'),\n ...(slot ? { [slot]: text } : {}),\n });\n },\n render: function () {\n const compName: string = this.model.get('componentName');\n let compProps: any = this.model.get('componentProps');\n\n if (typeof compProps === 'string') {\n try {\n compProps = JSON.parse(compProps);\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error('Invalid JSON in componentProps', err);\n compProps = {};\n }\n }\n\n compProps.isEditable = mode === 'editor';\n\n compProps.onChange = (data: Record<string, string>) => {\n this.model.set('componentProps', {\n ...this.model.get('componentProps'),\n ...data,\n });\n };\n\n const renderers = getRenderers();\n const renderer = renderers[compName];\n\n if (renderer) {\n if (compName === 'Tabs') {\n ReactDOM.render(renderer(compProps), this.el);\n\n const children = this.model.components();\n const tabsContent = this.el.querySelectorAll('.tabs-content');\n children.each((childModel, i) => {\n const childView = this.createView(childModel);\n\n if (childView) {\n childView.render();\n tabsContent[i].appendChild(childView.el);\n }\n });\n } else {\n ReactDOM.render(renderer(compProps), this.el);\n }\n } else {\n this.el.innerHTML = `<div>Unsupported component: ${compName}</div>`;\n }\n\n return this;\n },\n createView(model: any) {\n const ComponentView = this.em.get('DomComponents').getType(model.get('type'))?.view;\n\n if (!ComponentView) {\n // eslint-disable-next-line no-console\n console.warn('No view found for component type:', model.get('type'));\n\n return null;\n }\n\n const view = new ComponentView({\n model,\n config: this.config,\n componentTypes: this.componentTypes,\n });\n\n return view;\n },\n remove: function () {\n ReactDOM.unmountComponentAtNode(this.el);\n\n return this;\n },\n },\n });\n };\n}"],"mappings":"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","ignoreList":[]}
package/plugins/helpers/render-components.d.ts CHANGED
@@ -3,7 +3,13 @@ export declare function renderActionCard(props: any): JSX.Element;
3
3
  export declare function renderCard(props: any): JSX.Element;
4
4
  export declare function renderChart(props: any): JSX.Element;
5
5
  export declare function renderTable(props: any): JSX.Element;
6
+ export declare function renderCheckbox(props: any): JSX.Element;
7
+ export declare function renderHoverCard(props: any): JSX.Element;
8
+ export declare function renderInput(props: any): JSX.Element;
9
+ export declare function renderLabel(props: any): JSX.Element;
10
+ export declare function renderSeparator(props: any): JSX.Element;
11
+ export declare function renderTextarea(props: any): JSX.Element;
12
+ export declare function renderTooltip(props: any): JSX.Element;
6
13
  export declare function renderTab(props: any): JSX.Element;
7
14
  export declare function renderMarkdown(props: any): JSX.Element;
8
- export declare function renderButton(props: any): JSX.Element;
9
15
  export declare function getRenderers(): Record<string, (props: any) => JSX.Element>;
package/plugins/helpers/render-components.js CHANGED
@@ -1,5 +1,4 @@
1
- import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _extends from"@babel/runtime/helpers/extends";import _objectWithoutPropertiesLoose from"@babel/runtime/helpers/objectWithoutPropertiesLoose";var _excluded=["gjsModel"],_excluded2=["isEditable","gjsModel"],_excluded3=["isEditable","gjsModel","performInteraction"],_excluded4=["gjsModel","performInteraction"],_excluded5=["gjsModel"];import _regeneratorRuntime from"@babel/runtime/regenerator";function _createForOfIteratorHelperLoose(r,e){var t="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(t)return(t=t.call(r)).next.bind(t);if(Array.isArray(r)||(t=_unsupportedIterableToArray(r))||e&&r&&"number"==typeof r.length){t&&(r=t);var o=0;return function(){return o>=r.length?{done:!0}:{done:!1,value:r[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}/* eslint-disable func-names *//* eslint-disable @typescript-eslint/no-explicit-any */import chroma from"chroma-js";import React,{useEffect,useState,useRef}from"react";import{theme}from"@peak-ai/ais-components/theme";import Markdown from"markdown-to-jsx";import{Loader2Icon}from"lucide-react";import{Card,CardHeader,CardTitle,CardDescription,CardContent,CardFooter}from"../../shadcn/components/ui/card";import{ChartContainer,ChartTooltip,ChartTooltipContent}from"../../shadcn/components/ui/chart";import{PieChart,Pie,BarChart,Bar,LineChart,Line,XAxis,YAxis,ResponsiveContainer,CartesianGrid,Legend}from"recharts";import{Table,TableHeader,TableRow,TableHead,TableBody,TableCell}from"../../shadcn/components/ui/table";import{cn}from"../../shadcn/utils";import{ScrollArea,ScrollBar}from"../../shadcn/components/ui/scroll-area";import{Tabs,TabsList,TabsTrigger,TabsContent}from"../../shadcn/components/ui/tabs";import{TableLoader,ChartLoader,CardLoader}from"../../shadcn/components/ui/skeleton";import{Button}from"../../shadcn/components/ui/button";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var baseColors=[[theme.colors.Blue_100,theme.colors.Blue_30],[theme.colors.Purpley_100,theme.colors.Purpley_30],[theme.colors.Light_Bluish_Green,"#06601b"],[theme.colors.Wild_Strawberry,"#4d001c"]];function getAffectedComponentsWithLoader(affectedComponents,showLoader){if(showLoader===void 0){showLoader=true}return affectedComponents.map(function(component){return{componentId:component,showLoader:showLoader}})}function getNColors(n){var colors=[];for(var _iterator=_createForOfIteratorHelperLoose(baseColors),_step;!(_step=_iterator()).done;){var baseColor=_step.value;// eslint-disable-next-line import/no-named-as-default-member
2
- colors.push(chroma.scale(baseColor).mode("lab").colors(n))}function getOneColor(existing){var color=null;do{var base=colors[Math.floor(Math.random()*colors.length)];var selectedColorIndex=Math.floor(Math.random()*base.length);color=base[selectedColorIndex]}while(existing.includes(color));return color}var selectedColors=[];for(var i=0;i<n;i++){selectedColors.push(getOneColor(selectedColors))}return selectedColors}/* TODO: Loader remains */export function renderActionCard(props){var gjsModel=props.gjsModel,rest=_objectWithoutPropertiesLoose(props,_excluded);var _useState=useState(_extends({},props)),allData=_useState[0],setAllData=_useState[1];var _allData$headerConten=allData.headerContent,headerContent=_allData$headerConten===void 0?"Default Action Card Title":_allData$headerConten,icon=allData.icon,_allData$bodyContent=allData.bodyContent,bodyContent=_allData$bodyContent===void 0?"Default body content. Click to edit.":_allData$bodyContent;var _useState2=useState({interactionApiInProgress:false}),attributes=_useState2[0],setAttributes=_useState2[1];useEffect(function(){gjsModel.on("change:componentProps",function(){setAllData(_extends({},gjsModel.get("componentProps")))})},[]);useEffect(function(){gjsModel.on("change:attributes",function(){setAttributes(_extends({},gjsModel.get("attributes")))})},[]);var defaultClasses="bg-white text-black p-4 rounded-lg shadow border flex flex-col h-full";return/*#__PURE__*/_jsx(Card,_extends({className:defaultClasses,isEditable:false,contentEditable:false},rest,{children:/*#__PURE__*/_jsx(CardContent,{className:"p-0",isEditable:false,contentEditable:false,children:/*#__PURE__*/_jsx("div",{className:"px-4 py-3",children:/*#__PURE__*/_jsxs("div",{className:"flex items-start",children:[/*#__PURE__*/_jsx("span",{className:"text-5xl mr-2","aria-hidden":"true",children:icon}),/*#__PURE__*/_jsxs("div",{className:"flex-1",children:[/*#__PURE__*/_jsx("div",{className:"text-xl font-semibold",children:headerContent}),/*#__PURE__*/_jsx("div",{className:"text-base leading-relaxed mt-1",children:bodyContent})]})]})})})}))}export function renderCard(props){var _props$isEditable=props.isEditable,isEditable=_props$isEditable===void 0?false:_props$isEditable,gjsModel=props.gjsModel,rest=_objectWithoutPropertiesLoose(props,_excluded2);var _useState3=useState(_extends({},props)),allData=_useState3[0],setAllData=_useState3[1];var headerContent=allData.headerContent,headerDescription=allData.headerDescription,bodyContent=allData.bodyContent,footerContent=allData.footerContent,footerClass=allData.footerClass,footerIcon=allData.footerIcon,contentMetadata=allData.contentMetadata,contentMetadataClass=allData.contentMetadataClass,className=allData.className;var _useState4=useState({interactionApiInProgress:false}),attributes=_useState4[0],setAttributes=_useState4[1];useEffect(function(){gjsModel.on("change:componentProps",function(){setAllData(_extends({},gjsModel.get("componentProps")))})},[]);useEffect(function(){gjsModel.on("change:attributes",function(){setAttributes(_extends({},gjsModel.get("attributes")))})},[]);var defaultClasses="bg-white text-black p-4 rounded-lg shadow border flex flex-col h-full";var defaultFooterClasses="text-sm";var defaultContentMetadataClasses="text-xs";var mergedCardClassName=className?cn(defaultClasses,className):defaultClasses;var mergedFooterClassName=footerClass?cn(defaultFooterClasses,footerClass):defaultFooterClasses;var mergedContentMetadataClassName=contentMetadataClass?cn(defaultContentMetadataClasses,contentMetadataClass):defaultContentMetadataClasses;function getCardContent(){if(attributes.interactionApiInProgress){return/*#__PURE__*/_jsx(CardContent,{children:/*#__PURE__*/_jsx(CardLoader,{})})}return/*#__PURE__*/_jsxs(React.Fragment,{children:[/*#__PURE__*/_jsxs(CardHeader,{children:[/*#__PURE__*/_jsx(CardTitle,{"data-slot":"headerContent",contentEditable:isEditable,className:"text-lg",children:headerContent}),/*#__PURE__*/_jsx(CardDescription,{"data-slot":"headerDescription",contentEditable:isEditable,className:"text-sm",children:headerDescription})]}),/*#__PURE__*/_jsxs(CardContent,{"data-slot":"bodyContent",contentEditable:false,className:"flex-grow",children:[/*#__PURE__*/_jsx("div",{className:"text-3xl font-semibold truncate",children:bodyContent}),contentMetadata&&/*#__PURE__*/_jsx("div",{className:mergedContentMetadataClassName,style:{color:"#2A44D4"},children:contentMetadata})]}),/*#__PURE__*/_jsxs(CardFooter,{"data-slot":"footerContent",contentEditable:isEditable,className:cn(mergedFooterClassName),children:[footerIcon&&/*#__PURE__*/_jsx("span",{className:"mr-2","aria-hidden":"true",children:footerIcon}),footerContent]})]})}return/*#__PURE__*/_jsx(Card,_extends({},rest,{className:mergedCardClassName,children:getCardContent()}))}function renderChartComponent(chartType,data,config){switch(chartType){case"pie":return/*#__PURE__*/_jsxs(PieChart,{children:[data.length>=20&&/*#__PURE__*/_jsx(ChartTooltip,{cursor:false,content:/*#__PURE__*/_jsx(ChartTooltipContent,{hideLabel:true})}),/*#__PURE__*/_jsx(Pie,{data:data,dataKey:config.dataKey,nameKey:config.nameKey,innerRadius:60,strokeWidth:10,label:data.length<20?function(_ref){var name=_ref.name,percent=_ref.percent;return name+": "+(percent*100).toFixed(0)+"%"}:undefined,labelLine:false})]});case"bar":config.dataKeys=config.dataKeys||[];return/*#__PURE__*/_jsxs(BarChart,_extends({data:data},config.chartUi,{children:[/*#__PURE__*/_jsx(CartesianGrid,{vertical:false}),/*#__PURE__*/_jsx(XAxis,{dataKey:config.xAxis}),/*#__PURE__*/_jsx(YAxis,{}),/*#__PURE__*/_jsx(Legend,{align:"left",wrapperStyle:{marginLeft:20}}),config.dataKeys.map(function(_ref2){var key=_ref2.key,name=_ref2.name,color=_ref2.color;return/*#__PURE__*/_jsx(Bar,{dataKey:key,fill:color!=null?color:"#4caf50",name:name,radius:2},key)}),/*#__PURE__*/_jsx(ChartTooltip,{cursor:false,content:/*#__PURE__*/_jsx(ChartTooltipContent,{indicator:"dashed"})})]}));case"line":config.dataKeys=config.dataKeys||[];return/*#__PURE__*/_jsxs(LineChart,{data:data,children:[/*#__PURE__*/_jsx(CartesianGrid,{vertical:false}),/*#__PURE__*/_jsx(XAxis,{dataKey:config.xAxis}),/*#__PURE__*/_jsx(YAxis,{}),/*#__PURE__*/_jsx(ChartTooltip,{cursor:false,content:/*#__PURE__*/_jsx(ChartTooltipContent,{indicator:"dashed"})}),config.dataKeys.map(function(_ref3){var key=_ref3.key,name=_ref3.name,color=_ref3.color;return/*#__PURE__*/_jsx(Line,{type:"monotone",dataKey:key,stroke:color!=null?color:"#4caf50",name:name},key)}),/*#__PURE__*/_jsx(Legend,{align:"left"})]});default:return/*#__PURE__*/_jsxs(PieChart,{children:[data.length>=20&&/*#__PURE__*/_jsx(ChartTooltip,{cursor:false,content:/*#__PURE__*/_jsx(ChartTooltipContent,{hideLabel:true})}),/*#__PURE__*/_jsx(Pie,{data:data,dataKey:config.dataKey,nameKey:config.nameKey,innerRadius:60,strokeWidth:10,label:data.length<20?function(_ref4){var name=_ref4.name,percent=_ref4.percent;return name+": "+(percent*100).toFixed(0)+"%"}:undefined,labelLine:false})]})}}export function renderChart(props){var _props$isEditable2=props.isEditable,isEditable=_props$isEditable2===void 0?false:_props$isEditable2,gjsModel=props.gjsModel,_props$performInterac=props.performInteraction,performInteraction=_props$performInterac===void 0?function(){}:_props$performInterac,rest=_objectWithoutPropertiesLoose(props,_excluded3);var _useState5=useState(_extends({},props)),allData=_useState5[0],setAllData=_useState5[1];var _useState6=useState({interactionApiInProgress:false}),attributes=_useState6[0],setAttributes=_useState6[1];useEffect(function(){gjsModel.on("change:componentProps",function(){setAllData(_extends({},gjsModel.get("componentProps")))})},[]);useEffect(function(){gjsModel.on("change:attributes",function(){setAttributes(_extends({},gjsModel.get("attributes")))})},[]);var _allData$config=allData.config,config=_allData$config===void 0?{}:_allData$config,_allData$chartType=allData.chartType,chartType=_allData$chartType===void 0?"pie":_allData$chartType,_allData$chartData=allData.chartData,chartData=_allData$chartData===void 0?[]:_allData$chartData,className=allData.className,_allData$title=allData.title,title=_allData$title===void 0?"Title":_allData$title,_allData$subTitle=allData.subTitle,subTitle=_allData$subTitle===void 0?"Subtitle":_allData$subTitle;var defaultClasses="aspect-auto h-[250px] w-full";var mergedClasses=className?cn(defaultClasses,className):defaultClasses;if(chartType==="pie"){var colors=getNColors(chartData.length);for(var i=0;i<chartData.length;i++){var data=chartData[i];if(!data.fill){data.fill=colors[i]}}}else if(!config.color){config.color=baseColors[Math.floor(Math.random()*baseColors.length)]}var width=undefined;if(chartType==="bar"){var totalDataPoints=chartData.length*config.dataKeys.length;config.chartUi={};if(totalDataPoints>15){width=totalDataPoints*15+config.dataKeys.length*3*chartData.length+chartData.length*10;config.chartUi={barSize:15,barGap:3,barCategoryGap:0.5,width:width}}}function interact(){var id=gjsModel.get("id");performInteraction({id:id,chartData:chartData,affectedComponents:getAffectedComponentsWithLoader([id],true),type:"chart"})}var chartUi=attributes.interactionApiInProgress?/*#__PURE__*/_jsx(ChartLoader,{}):/*#__PURE__*/_jsx(React.Fragment,{children:chartType==="bar"&&config.chartUi?/*#__PURE__*/_jsx(ResponsiveContainer,{width:"95%",height:250,children:/*#__PURE__*/_jsxs(ScrollArea,{children:[/*#__PURE__*/_jsx("div",{className:width?"min-w-["+width+"px] w-full":"w-full",children:/*#__PURE__*/_jsx(ChartContainer,_extends({},rest,{config:config,className:mergedClasses,children:renderChartComponent(chartType,chartData,config)}))}),/*#__PURE__*/_jsx(ScrollBar,{orientation:"horizontal"})]})}):/*#__PURE__*/_jsx(ResponsiveContainer,{width:"95%",height:250,children:/*#__PURE__*/_jsx(ChartContainer,_extends({},rest,{config:config,className:mergedClasses,children:renderChartComponent(chartType,chartData,config)}))})});return/*#__PURE__*/_jsxs(Card,{className:"shadow border mt-2 mb-2",children:[/*#__PURE__*/_jsxs(CardHeader,{children:[/*#__PURE__*/_jsx(CardTitle,{"data-slot":"title",contentEditable:isEditable,className:"text-2xl",children:title}),/*#__PURE__*/_jsx(CardDescription,{"data-slot":"subTitle",contentEditable:isEditable,className:"text-sm",children:subTitle})]}),/*#__PURE__*/_jsx(CardContent,{"data-slot":"bodyContent",contentEditable:false,className:"px-6",children:chartUi})]})}// Creating this separate component to manage loading state easily!
3
- function TableButton(props){var _useState7=useState(false),loading=_useState7[0],setLoading=_useState7[1];function onClick(){return _onClick.apply(this,arguments)}function _onClick(){_onClick=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:setLoading(true);_context.next=3;return props.onClick();case 3:setLoading(false);case 4:case"end":return _context.stop()}},_callee)}));return _onClick.apply(this,arguments)}var defaultClasses="mr-2";var mergedClasses=props.className?cn(defaultClasses,props.className):defaultClasses;return/*#__PURE__*/_jsx(Button,{className:mergedClasses,onClick:!props.isEditable?onClick:function(){},disabled:props.isDisabled||loading,variant:props.variant,size:"sm",children:loading?/*#__PURE__*/_jsx(Loader2Icon,{className:"animate-spin"}):props.text})}export function renderTable(props){var gjsModel=props.gjsModel,_props$performInterac2=props.performInteraction,performInteraction=_props$performInterac2===void 0?function(){}:_props$performInterac2,rest=_objectWithoutPropertiesLoose(props,_excluded4);var _useState8=useState(_extends({},props)),allData=_useState8[0],setAllData=_useState8[1];var _allData$data=allData.data,data=_allData$data===void 0?[]:_allData$data,_allData$headerMapper=allData.headerMapper,headerMapper=_allData$headerMapper===void 0?{}:_allData$headerMapper,className=allData.className,_allData$isEditable=allData.isEditable,isEditable=_allData$isEditable===void 0?false:_allData$isEditable,_allData$title2=allData.title,title=_allData$title2===void 0?"Title":_allData$title2,_allData$subTitle2=allData.subTitle,subTitle=_allData$subTitle2===void 0?"Subtitle":_allData$subTitle2,_allData$actions=allData.actions,actions=_allData$actions===void 0?[]:_allData$actions;var _useState9=useState({interactionApiInProgress:false}),attributes=_useState9[0],setAttributes=_useState9[1];useEffect(function(){gjsModel.on("change:componentProps",function(){setAllData(_extends({},gjsModel.get("componentProps")))})},[]);useEffect(function(){gjsModel.on("change:attributes",function(){setAttributes(_extends({},gjsModel.get("attributes")))})},[]);var parsedData=data.map(function(datum){var newData=_extends({},datum);delete newData.id;return newData});function takeRowAction(_x,_x2){return _takeRowAction.apply(this,arguments)}function _takeRowAction(){_takeRowAction=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(rowIndex,actionId){var id;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:id=gjsModel.get("id");_context2.next=3;return performInteraction({id:actionId,payload:{row:data[rowIndex],tableId:id},affectedComponents:[]});case 3:case"end":return _context2.stop()}},_callee2)}));return _takeRowAction.apply(this,arguments)}var headers=Object.keys(parsedData[0]||{}).map(function(header){return headerMapper[header]||header});if(actions.length>0){headers.push("")}var rows=parsedData.map(function(datum){return Object.values(datum)});var defaultClasses="aspect-auto h-[250px] w-full";var mergedClasses=className?cn(defaultClasses,className):defaultClasses;var renderActions=function renderActions(rowIndex,rowActions){if(!actions.length){return null}return/*#__PURE__*/_jsx(TableCell,{children:rowActions.map(function(action){return/*#__PURE__*/_jsx(TableButton,{className:action.className,isEditable:isEditable,onClick:function onClick(){return takeRowAction(rowIndex,action.id)},variant:action.variant,text:action.text},action.id)})})};var renderTable=attributes.interactionApiInProgress?/*#__PURE__*/_jsx(TableLoader,{}):/*#__PURE__*/_jsxs(Table,_extends({},rest,{className:"caption-bottom text-sm "+mergedClasses,"data-slot":"table",children:[/*#__PURE__*/_jsx(TableHeader,{"data-slot":"table-header",className:"sticky top-0",children:/*#__PURE__*/_jsx(TableRow,{children:headers.map(function(head,idx){return/*#__PURE__*/_jsx(TableHead,{"data-slot":"table-header-"+idx,contentEditable:isEditable,children:head},idx)})})}),/*#__PURE__*/_jsx(TableBody,{"data-slot":"table-body",children:rows.map(function(row,rIdx){return/*#__PURE__*/_jsxs(TableRow,{"data-slot":"row-"+rIdx,className:"hover:bg-muted/50 border-b transition-colors",children:[row.map(function(cell,cIdx){return/*#__PURE__*/_jsx(TableCell,{"data-slot":"cell-"+rIdx+"-"+cIdx,className:"p-2 align-middle whitespace-nowrap",contentEditable:false,children:cell},cIdx)}),renderActions(rIdx,actions)]},rIdx)})})]}));var tableData=/*#__PURE__*/_jsxs(ScrollArea,{"data-slot":"table-container",className:mergedClasses,children:[renderTable,/*#__PURE__*/_jsx(ScrollBar,{orientation:"horizontal"})]});return/*#__PURE__*/_jsxs(Card,{className:"shadow border",children:[/*#__PURE__*/_jsxs(CardHeader,{children:[/*#__PURE__*/_jsx(CardTitle,{"data-slot":"title",contentEditable:isEditable,className:"text-2xl",children:title}),/*#__PURE__*/_jsx(CardDescription,{"data-slot":"subTitle",contentEditable:isEditable,className:"text-sm",children:subTitle})]}),/*#__PURE__*/_jsx(CardContent,{"data-slot":"bodyContent",contentEditable:false,children:tableData})]})}export function renderTab(props){var tabsWidth=200;if(props.tabs.length>4){tabsWidth=150}return/*#__PURE__*/_jsxs(Tabs,{defaultValue:props.defaultValue,children:[/*#__PURE__*/_jsx("div",{className:"text-center mb-4",children:/*#__PURE__*/_jsx(TabsList,{className:"bg-gray-300",children:props.tabs.map(function(tab){return/*#__PURE__*/_jsx(TabsTrigger,{value:tab,className:"text-md w-["+tabsWidth+"px]",children:tab},tab)})})}),props.tabs.map(function(tab){return/*#__PURE__*/_jsx(TabsContent,{value:tab,className:"tabs-content"},tab)})]})}export function renderMarkdown(props){var gjsModel=props.gjsModel,rest=_objectWithoutPropertiesLoose(props,_excluded5);var _useState10=useState(_extends({},props)),allData=_useState10[0],setAllData=_useState10[1];var _useState11=useState({interactionApiInProgress:false}),attributes=_useState11[0],setAttributes=_useState11[1];useEffect(function(){gjsModel.on("change:componentProps",function(){setAllData(_extends({},gjsModel.get("componentProps")))})},[]);useEffect(function(){gjsModel.on("change:attributes",function(){setAttributes(_extends({},gjsModel.get("attributes")))})},[]);var _useState12=useState(false),isEditing=_useState12[0],setIsEditing=_useState12[1];var editRef=useRef(null);var startEditing=function startEditing(){setIsEditing(true);setTimeout(function(){setupEditor()},0)};var setupEditor=function setupEditor(){if(!editRef.current)return;var editor=editRef.current;editor.innerHTML="";editor.textContent=allData.summaryText;editor.focus()};// Save changes and exit editing mode
4
- var saveChanges=function saveChanges(){if(!editRef.current)return;var content=editRef.current.innerText||"";setAllData(function(prev){return _extends({},prev,{summaryText:content})});setIsEditing(false);editRef.current.innerHTML=""};var markdownStyles={ul:{props:{className:"list-disc"}},h1:{props:{className:"text-4xl font-bold leading-[4rem]"}},h2:{props:{className:"text-3xl font-bold leading-[3rem]"}},h3:{props:{className:"text-2xl font-bold leading-[2rem]"}},h4:{props:{className:"text-xl font-bold leading-[2.5rem]"}},h5:{props:{className:"text-lg font-bold leading-[2.5rem]"}},h6:{props:{className:"text-base font-bold leading-[2rem]"}}};if(!allData.isEditable){return/*#__PURE__*/_jsx("div",_extends({className:"px-[1em]"},rest,{children:/*#__PURE__*/_jsx("div",{"data-slot":"summaryText",children:/*#__PURE__*/_jsx(Markdown,{options:{overrides:markdownStyles},children:allData.summaryText})})}))}return/*#__PURE__*/_jsx("div",_extends({className:"p-[1em]"},rest,{children:isEditing?/*#__PURE__*/_jsx("div",{ref:editRef,contentEditable:true,onBlur:saveChanges,"data-slot":"summaryText",className:"p-2 min-h-[100px] whitespace-pre-wrap",suppressContentEditableWarning:true,style:{whiteSpace:"pre-wrap",wordWrap:"break-word"}}):/*#__PURE__*/_jsx("div",{onClick:startEditing,"data-slot":"summaryText",style:{whiteSpace:"pre-wrap",wordWrap:"break-word"},children:/*#__PURE__*/_jsx(Markdown,{options:{overrides:markdownStyles},children:allData.summaryText})})}))}export function renderButton(props){var _props$isEditable3=props.isEditable,isEditable=_props$isEditable3===void 0?false:_props$isEditable3,gjsModel=props.gjsModel,_props$performInterac3=props.performInteraction,performInteraction=_props$performInterac3===void 0?function(){}:_props$performInterac3;var _useState13=useState(_extends({},props)),allData=_useState13[0],setAllData=_useState13[1];var _useState14=useState({interactionApiInProgress:false}),attributes=_useState14[0],setAttributes=_useState14[1];useEffect(function(){gjsModel.on("change:componentProps",function(){setAllData(_extends({},gjsModel.get("componentProps")))})},[]);useEffect(function(){gjsModel.on("change:attributes",function(){setAttributes(_extends({},gjsModel.get("attributes")))})},[]);var text=allData.text,icon=allData.icon,className=allData.className,payload=allData.payload,_allData$variant=allData.variant,variant=_allData$variant===void 0?"default":_allData$variant,_allData$size=allData.size,size=_allData$size===void 0?"sm":_allData$size,affectedComponents=allData.affectedComponents;function interact(){var id=gjsModel.get("id");performInteraction({id:id,affectedComponents:getAffectedComponentsWithLoader([id].concat(affectedComponents),true),payload:payload})}return/*#__PURE__*/_jsx(Button,{className:className,onClick:!isEditable?interact:function(){},disabled:attributes.interactionApiInProgress,variant:variant,size:size,contentEditable:isEditable,children:attributes.interactionApiInProgress?/*#__PURE__*/_jsx(Loader2Icon,{className:"animate-spin"}):text})}export function getRenderers(){return{ActionCard:renderActionCard,Card:renderCard,Chart:renderChart,Markdown:renderMarkdown,Table:renderTable,Tabs:renderTab,Button:renderButton}}
1
+ import _extends from"@babel/runtime/helpers/extends";import _objectWithoutPropertiesLoose from"@babel/runtime/helpers/objectWithoutPropertiesLoose";var _excluded=["headerContent","icon","bodyContent"],_excluded2=["headerContent","headerDescription","bodyContent","footerContent","contentMetadata","className","isEditable"],_excluded3=["config","chartType","chartData","className","isEditable","title","subTitle"],_excluded4=["data","headerMapper","className","isEditable","title","subTitle"],_excluded5=["label","defaultChecked","className","isEditable"],_excluded6=["triggerContent","cardContent","className","isEditable"],_excluded7=["label","placeholder","value","className","isEditable"],_excluded8=["text","className","isEditable"],_excluded9=["className"],_excluded10=["label","placeholder","value","className","isEditable"],_excluded11=["triggerContent","tooltipContent","className","isEditable"];function _createForOfIteratorHelperLoose(r,e){var t="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(t)return(t=t.call(r)).next.bind(t);if(Array.isArray(r)||(t=_unsupportedIterableToArray(r))||e&&r&&"number"==typeof r.length){t&&(r=t);var o=0;return function(){return o>=r.length?{done:!0}:{done:!1,value:r[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}/* eslint-disable react/no-array-index-key *//* eslint-disable func-names *//* eslint-disable @typescript-eslint/no-explicit-any */import chroma from"chroma-js";import{theme}from"@peak-ai/ais-components/theme";import Markdown from"markdown-to-jsx";import{Card,CardHeader,CardTitle,CardDescription,CardContent,CardFooter}from"../../shadcn/components/ui/card";import{ChartContainer,ChartTooltip,ChartTooltipContent}from"../../shadcn/components/ui/chart";import{Checkbox}from"../../shadcn/components/ui/checkbox";import{HoverCard,HoverCardTrigger,HoverCardContent}from"../../shadcn/components/ui/hover-card";import{Input}from"../../shadcn/components/ui/input";import{Label}from"../../shadcn/components/ui/label";import{Separator}from"../../shadcn/components/ui/separator";import{Textarea}from"../../shadcn/components/ui/textarea";import{Tooltip,TooltipTrigger,TooltipContent}from"../../shadcn/components/ui/tooltip";import{PieChart,Pie,BarChart,Bar,LineChart,Line,XAxis,YAxis,ResponsiveContainer,CartesianGrid,Legend}from"recharts";import{Table,TableHeader,TableRow,TableHead,TableBody,TableCell}from"../../shadcn/components/ui/table";import{cn}from"../../shadcn/utils";import{ScrollArea,ScrollBar}from"../../shadcn/components/ui/scroll-area";import{Tabs,TabsList,TabsTrigger,TabsContent}from"../../shadcn/components/ui/tabs";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";var baseColors=[[theme.colors.Blue_100,theme.colors.Blue_30],[theme.colors.Purpley_100,theme.colors.Purpley_30],[theme.colors.Light_Bluish_Green,"#06601b"],[theme.colors.Wild_Strawberry,"#4d001c"]];function getNColors(n){var colors=[];// const pallette = pallettes[Math.floor(Math.random() * pallettes.length)];
2
+ for(var _iterator=_createForOfIteratorHelperLoose(baseColors),_step;!(_step=_iterator()).done;){var baseColor=_step.value;// eslint-disable-next-line import/no-named-as-default-member
3
+ colors.push(chroma.scale(baseColor).mode("lab").colors(n))}function getOneColor(existing){var color=null;do{var base=colors[Math.floor(Math.random()*colors.length)];var selectedColorIndex=Math.floor(Math.random()*base.length);color=base[selectedColorIndex]}while(existing.includes(color));return color}var selectedColors=[];for(var i=0;i<n;i++){selectedColors.push(getOneColor(selectedColors))}return selectedColors}export function renderActionCard(props){var _props$headerContent=props.headerContent,headerContent=_props$headerContent===void 0?"Default Action Card Title":_props$headerContent,icon=props.icon,_props$bodyContent=props.bodyContent,bodyContent=_props$bodyContent===void 0?"Default body content. Click to edit.":_props$bodyContent,rest=_objectWithoutPropertiesLoose(props,_excluded);var defaultClasses="bg-white text-black p-4 rounded-lg shadow border w-full max-w-full min-h-[180px]";return/*#__PURE__*/_jsx(Card,_extends({className:defaultClasses,isEditable:false,contentEditable:false},rest,{children:/*#__PURE__*/_jsx(CardContent,{className:"p-0",isEditable:false,contentEditable:false,children:/*#__PURE__*/_jsx("div",{className:"px-4 py-3",children:/*#__PURE__*/_jsxs("div",{className:"flex items-start",children:[/*#__PURE__*/_jsx("span",{className:"text-5xl mr-2","aria-hidden":"true",children:icon}),/*#__PURE__*/_jsxs("div",{className:"flex-1",children:[/*#__PURE__*/_jsx("div",{className:"text-xl font-semibold",children:headerContent}),/*#__PURE__*/_jsx("div",{className:"text-base leading-relaxed mt-1",children:bodyContent})]})]})})})}))}export function renderCard(props){var _props$headerContent2=props.headerContent,headerContent=_props$headerContent2===void 0?"Default Card Title":_props$headerContent2,_props$headerDescript=props.headerDescription,headerDescription=_props$headerDescript===void 0?"Default header description":_props$headerDescript,_props$bodyContent2=props.bodyContent,bodyContent=_props$bodyContent2===void 0?"Default body content. Click to edit.":_props$bodyContent2,_props$footerContent=props.footerContent,footerContent=_props$footerContent===void 0?"":_props$footerContent,_props$contentMetadat=props.contentMetadata,contentMetadata=_props$contentMetadat===void 0?"":_props$contentMetadat,className=props.className,_props$isEditable=props.isEditable,isEditable=_props$isEditable===void 0?false:_props$isEditable,rest=_objectWithoutPropertiesLoose(props,_excluded2);var defaultClasses="bg-white text-black p-4 rounded-lg shadow border";var mergedCardClassName=className?cn(defaultClasses,className):defaultClasses;return/*#__PURE__*/_jsxs(Card,_extends({},rest,{className:mergedCardClassName,children:[/*#__PURE__*/_jsxs(CardHeader,{children:[/*#__PURE__*/_jsx(CardTitle,{"data-slot":"headerContent",contentEditable:isEditable,className:"text-lg",children:headerContent}),/*#__PURE__*/_jsx(CardDescription,{"data-slot":"headerDescription",contentEditable:isEditable,className:"text-sm",children:headerDescription})]}),/*#__PURE__*/_jsxs(CardContent,{"data-slot":"bodyContent",contentEditable:false,children:[/*#__PURE__*/_jsx("div",{className:"text-4xl font-semibold truncate",children:bodyContent}),contentMetadata&&/*#__PURE__*/_jsx("div",{className:"text-xs",style:{color:"#2A44D4"},children:contentMetadata})]}),/*#__PURE__*/_jsx(CardFooter,{"data-slot":"footerContent",contentEditable:isEditable,className:"text-sm",children:footerContent})]}))}function renderChartComponent(chartType,data,config){switch(chartType){case"pie":return/*#__PURE__*/_jsxs(PieChart,{children:[data.length>=20&&/*#__PURE__*/_jsx(ChartTooltip,{cursor:false,content:/*#__PURE__*/_jsx(ChartTooltipContent,{hideLabel:true})}),/*#__PURE__*/_jsx(Pie,{data:data,dataKey:config.dataKey,nameKey:config.nameKey,innerRadius:60,strokeWidth:10,label:data.length<20?function(_ref){var name=_ref.name,percent=_ref.percent;return name+": "+(percent*100).toFixed(0)+"%"}:undefined,labelLine:false})]});case"bar":config.dataKeys=config.dataKeys||[];return/*#__PURE__*/_jsxs(BarChart,_extends({data:data},config.chartUi,{children:[/*#__PURE__*/_jsx(CartesianGrid,{vertical:false}),/*#__PURE__*/_jsx(XAxis,{dataKey:config.xAxis}),/*#__PURE__*/_jsx(YAxis,{}),/*#__PURE__*/_jsx(Legend,{align:"left",wrapperStyle:{marginLeft:20}}),config.dataKeys.map(function(_ref2){var key=_ref2.key,name=_ref2.name,color=_ref2.color;return/*#__PURE__*/_jsx(Bar,{dataKey:key,fill:color!=null?color:"#4caf50",name:name,radius:2},key)}),/*#__PURE__*/_jsx(ChartTooltip,{cursor:false,content:/*#__PURE__*/_jsx(ChartTooltipContent,{indicator:"dashed"})})]}));case"line":config.dataKeys=config.dataKeys||[];return/*#__PURE__*/_jsxs(LineChart,{data:data,children:[/*#__PURE__*/_jsx(CartesianGrid,{vertical:false}),/*#__PURE__*/_jsx(XAxis,{dataKey:config.xAxis}),/*#__PURE__*/_jsx(YAxis,{}),/*#__PURE__*/_jsx(ChartTooltip,{cursor:false,content:/*#__PURE__*/_jsx(ChartTooltipContent,{indicator:"dashed"})}),config.dataKeys.map(function(_ref3){var key=_ref3.key,name=_ref3.name,color=_ref3.color;return/*#__PURE__*/_jsx(Line,{type:"monotone",dataKey:key,stroke:color!=null?color:"#4caf50",name:name},key)}),/*#__PURE__*/_jsx(Legend,{align:"left"})]});default:return/*#__PURE__*/_jsxs(PieChart,{children:[data.length>=20&&/*#__PURE__*/_jsx(ChartTooltip,{cursor:false,content:/*#__PURE__*/_jsx(ChartTooltipContent,{hideLabel:true})}),/*#__PURE__*/_jsx(Pie,{data:data,dataKey:config.dataKey,nameKey:config.nameKey,innerRadius:60,strokeWidth:10,label:data.length<20?function(_ref4){var name=_ref4.name,percent=_ref4.percent;return name+": "+(percent*100).toFixed(0)+"%"}:undefined,labelLine:false})]})}}export function renderChart(props){var _props$config=props.config,config=_props$config===void 0?{}:_props$config,_props$chartType=props.chartType,chartType=_props$chartType===void 0?"pie":_props$chartType,_props$chartData=props.chartData,chartData=_props$chartData===void 0?[]:_props$chartData,className=props.className,_props$isEditable2=props.isEditable,isEditable=_props$isEditable2===void 0?false:_props$isEditable2,_props$title=props.title,title=_props$title===void 0?"Title":_props$title,_props$subTitle=props.subTitle,subTitle=_props$subTitle===void 0?"Subtitle":_props$subTitle,rest=_objectWithoutPropertiesLoose(props,_excluded3);var defaultClasses="aspect-auto h-[250px] w-full";var mergedClasses=className?cn(defaultClasses,className):defaultClasses;if(chartType==="pie"){var colors=getNColors(chartData.length);for(var i=0;i<chartData.length;i++){var data=chartData[i];if(!data.fill){data.fill=colors[i]}}}else if(!config.color){config.color=baseColors[Math.floor(Math.random()*baseColors.length)]}var width=undefined;if(chartType==="bar"){var totalDataPoints=chartData.length*config.dataKeys.length;config.chartUi={};if(totalDataPoints>15){width=totalDataPoints*15+config.dataKeys.length*3*chartData.length+chartData.length*10;config.chartUi={barSize:15,barGap:3,barCategoryGap:0.5,width:width}}}return/*#__PURE__*/_jsxs(Card,{className:"shadow border mt-2 mb-2",children:[/*#__PURE__*/_jsxs(CardHeader,{children:[/*#__PURE__*/_jsx(CardTitle,{"data-slot":"title",contentEditable:isEditable,className:"text-3xl",children:title}),/*#__PURE__*/_jsx(CardDescription,{"data-slot":"subTitle",contentEditable:isEditable,className:"text-sm",children:subTitle})]}),/*#__PURE__*/_jsx(CardContent,{"data-slot":"bodyContent",contentEditable:false,className:"px-6",children:chartType==="bar"&&config.chartUi?/*#__PURE__*/_jsx(ResponsiveContainer,{width:"95%",height:250,children:/*#__PURE__*/_jsxs(ScrollArea,{children:[/*#__PURE__*/_jsx("div",{className:width?"min-w-["+width+"px] w-full":"w-full",children:/*#__PURE__*/_jsx(ChartContainer,_extends({},rest,{config:config,className:mergedClasses,children:renderChartComponent(chartType,chartData,config)}))}),/*#__PURE__*/_jsx(ScrollBar,{orientation:"horizontal"})]})}):/*#__PURE__*/_jsx(ResponsiveContainer,{width:"95%",height:250,children:/*#__PURE__*/_jsx(ChartContainer,_extends({},rest,{config:config,className:mergedClasses,children:renderChartComponent(chartType,chartData,config)}))})})]})}export function renderTable(props){var _props$data=props.data,data=_props$data===void 0?[]:_props$data,_props$headerMapper=props.headerMapper,headerMapper=_props$headerMapper===void 0?{}:_props$headerMapper,className=props.className,_props$isEditable3=props.isEditable,isEditable=_props$isEditable3===void 0?false:_props$isEditable3,_props$title2=props.title,title=_props$title2===void 0?"Title":_props$title2,_props$subTitle2=props.subTitle,subTitle=_props$subTitle2===void 0?"Subtitle":_props$subTitle2,rest=_objectWithoutPropertiesLoose(props,_excluded4);var parsedData=data.map(function(datum){var newData=_extends({},datum);delete newData.id;return newData});var headers=Object.keys(parsedData[0]||{}).map(function(header){return headerMapper[header]||header});var rows=parsedData.map(function(datum){return Object.values(datum)});var defaultClasses="aspect-auto h-[250px] w-full";var mergedClasses=className?cn(defaultClasses,className):defaultClasses;var tableData=/*#__PURE__*/_jsxs(ScrollArea,{"data-slot":"table-container",className:mergedClasses,children:[/*#__PURE__*/_jsxs(Table,_extends({},rest,{className:"caption-bottom text-sm "+mergedClasses,"data-slot":"table",children:[/*#__PURE__*/_jsx(TableHeader,{"data-slot":"table-header",className:"sticky top-0",children:/*#__PURE__*/_jsx(TableRow,{children:headers.map(function(head,idx){return/*#__PURE__*/_jsx(TableHead,{"data-slot":"header-"+idx,contentEditable:false,children:head},idx)})})}),/*#__PURE__*/_jsx(TableBody,{"data-slot":"table-body",children:rows.map(function(row,rIdx){return/*#__PURE__*/_jsx(TableRow,{"data-slot":"row-"+rIdx,className:"hover:bg-muted/50 border-b transition-colors",children:row.map(function(cell,cIdx){return/*#__PURE__*/_jsx(TableCell,{"data-slot":"cell-"+rIdx+"-"+cIdx,className:"p-2 align-middle whitespace-nowrap",contentEditable:false,children:cell},cIdx)})},rIdx)})})]})),/*#__PURE__*/_jsx(ScrollBar,{orientation:"horizontal"})]});return/*#__PURE__*/_jsxs(Card,{className:"shadow border",children:[/*#__PURE__*/_jsxs(CardHeader,{children:[/*#__PURE__*/_jsx(CardTitle,{"data-slot":"title",contentEditable:isEditable,className:"text-3xl",children:title}),/*#__PURE__*/_jsx(CardDescription,{"data-slot":"subTitle",contentEditable:isEditable,className:"text-sm",children:subTitle})]}),/*#__PURE__*/_jsx(CardContent,{"data-slot":"bodyContent",contentEditable:isEditable,children:tableData})]})}export function renderCheckbox(props){var _props$label=props.label,label=_props$label===void 0?"":_props$label,_props$defaultChecked=props.defaultChecked,defaultChecked=_props$defaultChecked===void 0?false:_props$defaultChecked,className=props.className,_props$isEditable4=props.isEditable,isEditable=_props$isEditable4===void 0?false:_props$isEditable4,rest=_objectWithoutPropertiesLoose(props,_excluded5);var defaultClasses="flex items-center";var merged=className?cn(defaultClasses,className):defaultClasses;return/*#__PURE__*/_jsxs("div",_extends({className:merged},rest,{children:[/*#__PURE__*/_jsx(Checkbox,{defaultChecked:defaultChecked}),label&&/*#__PURE__*/_jsx(Label,{"data-slot":"label",contentEditable:isEditable,className:"ml-2",children:label})]}))}export function renderHoverCard(props){var _props$triggerContent=props.triggerContent,triggerContent=_props$triggerContent===void 0?"Hover over me":_props$triggerContent,_props$cardContent=props.cardContent,cardContent=_props$cardContent===void 0?"Additional information":_props$cardContent,className=props.className,_props$isEditable5=props.isEditable,isEditable=_props$isEditable5===void 0?false:_props$isEditable5,rest=_objectWithoutPropertiesLoose(props,_excluded6);var defaultClasses="w-[320px] max-w-[320px] shadow rounded-lg";var merged=className?cn(defaultClasses,className):defaultClasses;return/*#__PURE__*/_jsxs(HoverCard,_extends({className:merged},rest,{children:[/*#__PURE__*/_jsx(HoverCardTrigger,{asChild:true,children:/*#__PURE__*/_jsx("span",{"data-slot":"triggerContent",contentEditable:isEditable,children:triggerContent})}),/*#__PURE__*/_jsx(HoverCardContent,{children:/*#__PURE__*/_jsx("div",{"data-slot":"cardContent",contentEditable:isEditable,children:cardContent})})]}))}export function renderInput(props){var _props$label2=props.label,label=_props$label2===void 0?"":_props$label2,_props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?"":_props$placeholder,_props$value=props.value,value=_props$value===void 0?"":_props$value,className=props.className,_props$isEditable6=props.isEditable,isEditable=_props$isEditable6===void 0?false:_props$isEditable6,rest=_objectWithoutPropertiesLoose(props,_excluded7);var defaultClasses="w-[320px] p-2 border border-gray-300 rounded-md";var merged=className?cn(defaultClasses,className):defaultClasses;return/*#__PURE__*/_jsxs("div",_extends({className:"flex flex-col "+merged},rest,{children:[label&&/*#__PURE__*/_jsx(Label,{"data-slot":"label",contentEditable:isEditable,className:"mb-1",children:label}),/*#__PURE__*/_jsx(Input,{placeholder:placeholder,value:value})]}))}export function renderLabel(props){var _props$text=props.text,text=_props$text===void 0?"Label":_props$text,className=props.className,_props$isEditable7=props.isEditable,isEditable=_props$isEditable7===void 0?false:_props$isEditable7,rest=_objectWithoutPropertiesLoose(props,_excluded8);var defaultClasses="text-base font-semibold mb-2";var merged=className?cn(defaultClasses,className):defaultClasses;return/*#__PURE__*/_jsx(Label,_extends({"data-slot":"text",contentEditable:isEditable,className:merged},rest,{children:text}))}export function renderSeparator(props){var className=props.className,rest=_objectWithoutPropertiesLoose(props,_excluded9);var defaultClasses="my-4 border-t-2";var merged=className?cn(defaultClasses,className):defaultClasses;return/*#__PURE__*/_jsx(Separator,_extends({className:merged},rest))}export function renderTextarea(props){var _props$label3=props.label,label=_props$label3===void 0?"":_props$label3,_props$placeholder2=props.placeholder,placeholder=_props$placeholder2===void 0?"":_props$placeholder2,_props$value2=props.value,value=_props$value2===void 0?"":_props$value2,className=props.className,_props$isEditable8=props.isEditable,isEditable=_props$isEditable8===void 0?false:_props$isEditable8,rest=_objectWithoutPropertiesLoose(props,_excluded10);var defaultClasses="w-[320px] p-2 border border-gray-300 rounded-md";var merged=className?cn(defaultClasses,className):defaultClasses;return/*#__PURE__*/_jsxs("div",_extends({className:"flex flex-col "+merged},rest,{children:[label&&/*#__PURE__*/_jsx(Label,{"data-slot":"label",contentEditable:isEditable,className:"mb-1",children:label}),/*#__PURE__*/_jsx(Textarea,{placeholder:placeholder,value:value})]}))}export function renderTooltip(props){var _props$triggerContent2=props.triggerContent,triggerContent=_props$triggerContent2===void 0?"Hover here":_props$triggerContent2,_props$tooltipContent=props.tooltipContent,tooltipContent=_props$tooltipContent===void 0?"Tooltip information":_props$tooltipContent,className=props.className,_props$isEditable9=props.isEditable,isEditable=_props$isEditable9===void 0?false:_props$isEditable9,rest=_objectWithoutPropertiesLoose(props,_excluded11);var merged=className||"";return/*#__PURE__*/_jsxs(Tooltip,_extends({className:merged},rest,{children:[/*#__PURE__*/_jsx(TooltipTrigger,{asChild:true,children:/*#__PURE__*/_jsx("span",{"data-slot":"triggerContent",contentEditable:isEditable,children:triggerContent})}),/*#__PURE__*/_jsx(TooltipContent,{"data-slot":"tooltipContent",contentEditable:isEditable,children:tooltipContent})]}))}export function renderTab(props){var tabsWidth=200;if(props.tabs.length>4){tabsWidth=150}return/*#__PURE__*/_jsxs(Tabs,{defaultValue:props.defaultValue,children:[/*#__PURE__*/_jsx("div",{className:"text-center mb-4",children:/*#__PURE__*/_jsx(TabsList,{className:"bg-gray-300",children:props.tabs.map(function(tab){return/*#__PURE__*/_jsx(TabsTrigger,{value:tab,className:"text-md w-["+tabsWidth+"px]",children:tab},tab)})})}),props.tabs.map(function(tab){return/*#__PURE__*/_jsx(TabsContent,{value:tab,className:"tabs-content"},tab)})]})}export function renderMarkdown(props){var _props$summaryText=props.summaryText,summaryText=_props$summaryText===void 0?"":_props$summaryText;return/*#__PURE__*/_jsx("div",{className:"px-[1em]",children:/*#__PURE__*/_jsx(Markdown,{options:{overrides:{ul:{props:{className:"list-disc"}},h1:{props:{className:"text-4xl font-bold leading-[4rem]"}},h2:{props:{className:"text-3xl font-bold leading-[3.5rem]"}},h3:{props:{className:"text-2xl font-bold leading-[3rem]"}},h4:{props:{className:"text-xl font-bold leading-[2.5rem]"}},h5:{props:{className:"text-lg font-bold leading-[2.5rem]"}},h6:{props:{className:"text-base font-bold leading-[2rem]"}}}},children:summaryText})})}export function getRenderers(){return{ActionCard:renderActionCard,Card:renderCard,Chart:renderChart,Checkbox:renderCheckbox,HoverCard:renderHoverCard,Input:renderInput,Label:renderLabel,Markdown:renderMarkdown,Separator:renderSeparator,Table:renderTable,Tabs:renderTab,Textarea:renderTextarea,Tooltip:renderTooltip}}
5
4
  //# sourceMappingURL=render-components.js.map