@adhese/sdk-devtools 0.12.1 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @adhese/sdk-devtools
 
+## 1.0.0
+
+### Major Changes
+
+- ff93b63: 🎉🎉🎉 – Release 1.0.0 – 🎉🎉🎉
+
+  This release marks the first stable release of the Adhese SDK packages. From here on out we will follow semantic
+  versioning, meaning that all patch and minor updates will be backwards compatible. Major updates will introduce
+  breaking changes.
+
+### Patch Changes
+
+- a5e39f1: Fix badges not being removed when debug mode is disabled
+- e05a09c: Make sure that DALE slots also have useful data visible in the devtools
+- Updated dependencies [ff93b63]
+- Updated dependencies [21aad18]
+  - @adhese/sdk@1.0.0
+  - @adhese/sdk-shared@1.0.0
+
+## 0.13.0
+
+### Minor Changes
+
+- 3ba6fd6: Show badges with important info about a slot when in debug mode
+
 ## 0.12.1
 
 ### Patch Changes

package/dist/Devtools.js

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("/*\n! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n\n    --radius: 0.5rem;\n  }\n  .adhese-devtools, .adhese-devtools * {\n  border-color: hsl(var(--border));\n}\n\n  .adhese-devtools {\n  background-color: hsl(var(--background));\n  color: hsl(var(--foreground));\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-x-0 {\n  left: 0px;\n  right: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 1rem;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.right-4 {\n  right: 1rem;\n}\n.top-0 {\n  top: 0px;\n}\n.top-4 {\n  top: 1rem;\n}\n.z-50 {\n  z-index: 50;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.mt-10 {\n  margin-top: 2.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-9 {\n  height: 2.25rem;\n}\n.h-full {\n  height: 100%;\n}\n.max-h-96 {\n  max-height: 24rem;\n}\n.w-3\\/4 {\n  width: 75%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-9 {\n  width: 2.25rem;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-60 {\n  max-width: 15rem;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.caption-bottom {\n  caption-side: bottom;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-col-reverse {\n  flex-direction: column-reverse;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: var(--radius);\n}\n.rounded-md {\n  border-radius: calc(var(--radius) - 2px);\n}\n.rounded-sm {\n  border-radius: calc(var(--radius) - 4px);\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-b-2 {\n  border-bottom-width: 2px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-r {\n  border-right-width: 1px;\n}\n.border-t {\n  border-top-width: 1px;\n}\n.border-t-2 {\n  border-top-width: 2px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-accent {\n  border-color: hsl(var(--accent));\n}\n.border-destructive {\n  border-color: hsl(var(--destructive));\n}\n.border-input {\n  border-color: hsl(var(--input));\n}\n.border-transparent {\n  border-color: transparent;\n}\n.border-t-accent {\n  border-top-color: hsl(var(--accent));\n}\n.bg-amber-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 243 199 / var(--tw-bg-opacity));\n}\n.bg-amber-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 191 36 / var(--tw-bg-opacity));\n}\n.bg-amber-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 158 11 / var(--tw-bg-opacity));\n}\n.bg-background {\n  background-color: hsl(var(--background));\n}\n.bg-black\\/80 {\n  background-color: rgb(0 0 0 / 0.8);\n}\n.bg-blue-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n.bg-cyan-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(6 182 212 / var(--tw-bg-opacity));\n}\n.bg-destructive {\n  background-color: hsl(var(--destructive));\n}\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity));\n}\n.bg-green-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.bg-muted {\n  background-color: hsl(var(--muted));\n}\n.bg-muted\\/50 {\n  background-color: hsl(var(--muted) / 0.5);\n}\n.bg-pink-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 72 153 / var(--tw-bg-opacity));\n}\n.bg-primary {\n  background-color: hsl(var(--primary));\n}\n.bg-purple-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.bg-red-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 226 226 / var(--tw-bg-opacity));\n}\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.bg-secondary {\n  background-color: hsl(var(--secondary));\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.py-0 {\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n.py-0\\.5 {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-\\[0\\.8rem\\] {\n  font-size: 0.8rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.italic {\n  font-style: italic;\n}\n.leading-none {\n  line-height: 1;\n}\n.text-amber-900 {\n  --tw-text-opacity: 1;\n  color: rgb(120 53 15 / var(--tw-text-opacity));\n}\n.text-amber-950 {\n  --tw-text-opacity: 1;\n  color: rgb(69 26 3 / var(--tw-text-opacity));\n}\n.text-destructive {\n  color: hsl(var(--destructive));\n}\n.text-destructive-foreground {\n  color: hsl(var(--destructive-foreground));\n}\n.text-foreground {\n  color: hsl(var(--foreground));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.text-green-700 {\n  --tw-text-opacity: 1;\n  color: rgb(21 128 61 / var(--tw-text-opacity));\n}\n.text-green-900 {\n  --tw-text-opacity: 1;\n  color: rgb(20 83 45 / var(--tw-text-opacity));\n}\n.text-muted-foreground {\n  color: hsl(var(--muted-foreground));\n}\n.text-primary {\n  color: hsl(var(--primary));\n}\n.text-primary-foreground {\n  color: hsl(var(--primary-foreground));\n}\n.text-red-300 {\n  --tw-text-opacity: 1;\n  color: rgb(252 165 165 / var(--tw-text-opacity));\n}\n.text-red-50 {\n  --tw-text-opacity: 1;\n  color: rgb(254 242 242 / var(--tw-text-opacity));\n}\n.text-red-900 {\n  --tw-text-opacity: 1;\n  color: rgb(127 29 29 / var(--tw-text-opacity));\n}\n.text-secondary-foreground {\n  color: hsl(var(--secondary-foreground));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.no-underline {\n  text-decoration-line: none;\n}\n.underline-offset-4 {\n  text-underline-offset: 4px;\n}\n.opacity-70 {\n  opacity: 0.7;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.ring-0 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-offset-background {\n  --tw-ring-offset-color: hsl(var(--background));\n}\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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n@keyframes enter {\n\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n.ease-in-out {\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.file\\:border-0::file-selector-button {\n  border-width: 0px;\n}\n.file\\:bg-transparent::file-selector-button {\n  background-color: transparent;\n}\n.file\\:text-sm::file-selector-button {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.file\\:font-medium::file-selector-button {\n  font-weight: 500;\n}\n.placeholder\\:text-muted-foreground::-moz-placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.placeholder\\:text-muted-foreground::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.last\\:mb-0:last-child {\n  margin-bottom: 0px;\n}\n.last\\:border-0:last-child {\n  border-width: 0px;\n}\n.last\\:pb-0:last-child {\n  padding-bottom: 0px;\n}\n.hover\\:bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:bg-amber-400:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 191 36 / var(--tw-bg-opacity));\n}\n.hover\\:bg-amber-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 158 11 / var(--tw-bg-opacity));\n}\n.hover\\:bg-blue-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n.hover\\:bg-cyan-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(6 182 212 / var(--tw-bg-opacity));\n}\n.hover\\:bg-destructive\\/80:hover {\n  background-color: hsl(var(--destructive) / 0.8);\n}\n.hover\\:bg-destructive\\/90:hover {\n  background-color: hsl(var(--destructive) / 0.9);\n}\n.hover\\:bg-green-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity));\n}\n.hover\\:bg-green-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.hover\\:bg-muted\\/50:hover {\n  background-color: hsl(var(--muted) / 0.5);\n}\n.hover\\:bg-pink-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 72 153 / var(--tw-bg-opacity));\n}\n.hover\\:bg-primary\\/80:hover {\n  background-color: hsl(var(--primary) / 0.8);\n}\n.hover\\:bg-primary\\/90:hover {\n  background-color: hsl(var(--primary) / 0.9);\n}\n.hover\\:bg-purple-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.hover\\:bg-red-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.hover\\:bg-secondary\\/80:hover {\n  background-color: hsl(var(--secondary) / 0.8);\n}\n.hover\\:text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:underline:hover {\n  text-decoration-line: underline;\n}\n.hover\\:opacity-100:hover {\n  opacity: 1;\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-ring:focus {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:outline-none:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus-visible\\:ring-1:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-2:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-ring:focus-visible {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus-visible\\:ring-offset-2:focus-visible {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:ring-offset-background:focus-visible {\n  --tw-ring-offset-color: hsl(var(--background));\n}\n.disabled\\:pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n.peer:disabled ~ .peer-disabled\\:cursor-not-allowed {\n  cursor: not-allowed;\n}\n.peer:disabled ~ .peer-disabled\\:opacity-70 {\n  opacity: 0.7;\n}\n.data-\\[state\\=checked\\]\\:translate-x-4[data-state=checked] {\n  --tw-translate-x: 1rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked] {\n  --tw-translate-x: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=active\\]\\:bg-background[data-state=active] {\n  background-color: hsl(var(--background));\n}\n.data-\\[state\\=checked\\]\\:bg-primary[data-state=checked] {\n  background-color: hsl(var(--primary));\n}\n.data-\\[state\\=open\\]\\:bg-secondary[data-state=open] {\n  background-color: hsl(var(--secondary));\n}\n.data-\\[state\\=selected\\]\\:bg-muted[data-state=selected] {\n  background-color: hsl(var(--muted));\n}\n.data-\\[state\\=unchecked\\]\\:bg-input[data-state=unchecked] {\n  background-color: hsl(var(--input));\n}\n.data-\\[state\\=active\\]\\:text-foreground[data-state=active] {\n  color: hsl(var(--foreground));\n}\n.data-\\[state\\=active\\]\\:shadow[data-state=active] {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.data-\\[state\\=closed\\]\\:duration-300[data-state=closed] {\n  transition-duration: 300ms;\n}\n.data-\\[state\\=open\\]\\:duration-500[data-state=open] {\n  transition-duration: 500ms;\n}\n.data-\\[state\\=open\\]\\:animate-in[data-state=open] {\n  animation-name: enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:animate-out[data-state=closed] {\n  animation-name: exit;\n  animation-duration: 150ms;\n  --tw-exit-opacity: initial;\n  --tw-exit-scale: initial;\n  --tw-exit-rotate: initial;\n  --tw-exit-translate-x: initial;\n  --tw-exit-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:fade-out-0[data-state=closed] {\n  --tw-exit-opacity: 0;\n}\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=open] {\n  --tw-enter-opacity: 0;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-bottom[data-state=closed] {\n  --tw-exit-translate-y: 100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-left[data-state=closed] {\n  --tw-exit-translate-x: -100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-right[data-state=closed] {\n  --tw-exit-translate-x: 100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-top[data-state=closed] {\n  --tw-exit-translate-y: -100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-bottom[data-state=open] {\n  --tw-enter-translate-y: 100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-left[data-state=open] {\n  --tw-enter-translate-x: -100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-right[data-state=open] {\n  --tw-enter-translate-x: 100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-top[data-state=open] {\n  --tw-enter-translate-y: -100%;\n}\n.data-\\[state\\=closed\\]\\:duration-300[data-state=closed] {\n  animation-duration: 300ms;\n}\n.data-\\[state\\=open\\]\\:duration-500[data-state=open] {\n  animation-duration: 500ms;\n}\n@media (min-width: 640px) {\n\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:flex-row {\n    flex-direction: row;\n  }\n\n  .sm\\:justify-end {\n    justify-content: flex-end;\n  }\n\n  .sm\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:text-left {\n    text-align: left;\n  }\n}\n.\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role=checkbox]) {\n  padding-right: 0px;\n}\n.\\[\\&\\>\\[role\\=checkbox\\]\\]\\:translate-y-\\[2px\\]>[role=checkbox] {\n  --tw-translate-y: 2px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.\\[\\&\\>tr\\]\\:last\\:border-b-0:last-child>tr {\n  border-bottom-width: 0px;\n}\n.\\[\\&_tr\\:last-child\\]\\:border-0 tr:last-child {\n  border-width: 0px;\n}\n.\\[\\&_tr\\]\\:border-b tr {\n  border-bottom-width: 1px;\n}"));
+      elementStyle.appendChild(document.createTextNode("/*\n! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n\n    --radius: 0.5rem;\n  }\n  .adhese-devtools, .adhese-devtools * {\n  border-color: hsl(var(--border));\n}\n\n  .adhese-devtools {\n  background-color: hsl(var(--background));\n  color: hsl(var(--foreground));\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-x-0 {\n  left: 0px;\n  right: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 1rem;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.right-4 {\n  right: 1rem;\n}\n.top-0 {\n  top: 0px;\n}\n.top-4 {\n  top: 1rem;\n}\n.z-50 {\n  z-index: 50;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.mt-10 {\n  margin-top: 2.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-9 {\n  height: 2.25rem;\n}\n.h-full {\n  height: 100%;\n}\n.max-h-96 {\n  max-height: 24rem;\n}\n.w-3\\/4 {\n  width: 75%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-9 {\n  width: 2.25rem;\n}\n.w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-60 {\n  max-width: 15rem;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.caption-bottom {\n  caption-side: bottom;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-col-reverse {\n  flex-direction: column-reverse;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: var(--radius);\n}\n.rounded-md {\n  border-radius: calc(var(--radius) - 2px);\n}\n.rounded-sm {\n  border-radius: calc(var(--radius) - 4px);\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-b-2 {\n  border-bottom-width: 2px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-r {\n  border-right-width: 1px;\n}\n.border-t {\n  border-top-width: 1px;\n}\n.border-t-2 {\n  border-top-width: 2px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-accent {\n  border-color: hsl(var(--accent));\n}\n.border-destructive {\n  border-color: hsl(var(--destructive));\n}\n.border-input {\n  border-color: hsl(var(--input));\n}\n.border-transparent {\n  border-color: transparent;\n}\n.border-t-accent {\n  border-top-color: hsl(var(--accent));\n}\n.bg-amber-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 243 199 / var(--tw-bg-opacity));\n}\n.bg-amber-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 191 36 / var(--tw-bg-opacity));\n}\n.bg-amber-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 158 11 / var(--tw-bg-opacity));\n}\n.bg-background {\n  background-color: hsl(var(--background));\n}\n.bg-black\\/80 {\n  background-color: rgb(0 0 0 / 0.8);\n}\n.bg-blue-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n.bg-cyan-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(6 182 212 / var(--tw-bg-opacity));\n}\n.bg-destructive {\n  background-color: hsl(var(--destructive));\n}\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity));\n}\n.bg-green-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.bg-muted {\n  background-color: hsl(var(--muted));\n}\n.bg-muted\\/50 {\n  background-color: hsl(var(--muted) / 0.5);\n}\n.bg-pink-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 72 153 / var(--tw-bg-opacity));\n}\n.bg-primary {\n  background-color: hsl(var(--primary));\n}\n.bg-purple-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.bg-red-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 226 226 / var(--tw-bg-opacity));\n}\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.bg-secondary {\n  background-color: hsl(var(--secondary));\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.py-0 {\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n.py-0\\.5 {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-\\[0\\.8rem\\] {\n  font-size: 0.8rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.italic {\n  font-style: italic;\n}\n.leading-none {\n  line-height: 1;\n}\n.text-amber-900 {\n  --tw-text-opacity: 1;\n  color: rgb(120 53 15 / var(--tw-text-opacity));\n}\n.text-amber-950 {\n  --tw-text-opacity: 1;\n  color: rgb(69 26 3 / var(--tw-text-opacity));\n}\n.text-destructive {\n  color: hsl(var(--destructive));\n}\n.text-destructive-foreground {\n  color: hsl(var(--destructive-foreground));\n}\n.text-foreground {\n  color: hsl(var(--foreground));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.text-green-700 {\n  --tw-text-opacity: 1;\n  color: rgb(21 128 61 / var(--tw-text-opacity));\n}\n.text-green-900 {\n  --tw-text-opacity: 1;\n  color: rgb(20 83 45 / var(--tw-text-opacity));\n}\n.text-muted-foreground {\n  color: hsl(var(--muted-foreground));\n}\n.text-primary {\n  color: hsl(var(--primary));\n}\n.text-primary-foreground {\n  color: hsl(var(--primary-foreground));\n}\n.text-red-300 {\n  --tw-text-opacity: 1;\n  color: rgb(252 165 165 / var(--tw-text-opacity));\n}\n.text-red-50 {\n  --tw-text-opacity: 1;\n  color: rgb(254 242 242 / var(--tw-text-opacity));\n}\n.text-red-900 {\n  --tw-text-opacity: 1;\n  color: rgb(127 29 29 / var(--tw-text-opacity));\n}\n.text-secondary-foreground {\n  color: hsl(var(--secondary-foreground));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.no-underline {\n  text-decoration-line: none;\n}\n.underline-offset-4 {\n  text-underline-offset: 4px;\n}\n.opacity-70 {\n  opacity: 0.7;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.ring-0 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-offset-background {\n  --tw-ring-offset-color: hsl(var(--background));\n}\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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n@keyframes enter {\n\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n.ease-in-out {\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.file\\:border-0::file-selector-button {\n  border-width: 0px;\n}\n.file\\:bg-transparent::file-selector-button {\n  background-color: transparent;\n}\n.file\\:text-sm::file-selector-button {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.file\\:font-medium::file-selector-button {\n  font-weight: 500;\n}\n.placeholder\\:text-muted-foreground::-moz-placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.placeholder\\:text-muted-foreground::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.last\\:mb-0:last-child {\n  margin-bottom: 0px;\n}\n.last\\:border-0:last-child {\n  border-width: 0px;\n}\n.last\\:pb-0:last-child {\n  padding-bottom: 0px;\n}\n.hover\\:bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:bg-amber-400:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 191 36 / var(--tw-bg-opacity));\n}\n.hover\\:bg-amber-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 158 11 / var(--tw-bg-opacity));\n}\n.hover\\:bg-blue-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n.hover\\:bg-cyan-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(6 182 212 / var(--tw-bg-opacity));\n}\n.hover\\:bg-destructive\\/80:hover {\n  background-color: hsl(var(--destructive) / 0.8);\n}\n.hover\\:bg-destructive\\/90:hover {\n  background-color: hsl(var(--destructive) / 0.9);\n}\n.hover\\:bg-green-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity));\n}\n.hover\\:bg-green-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.hover\\:bg-muted\\/50:hover {\n  background-color: hsl(var(--muted) / 0.5);\n}\n.hover\\:bg-pink-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 72 153 / var(--tw-bg-opacity));\n}\n.hover\\:bg-primary\\/80:hover {\n  background-color: hsl(var(--primary) / 0.8);\n}\n.hover\\:bg-primary\\/90:hover {\n  background-color: hsl(var(--primary) / 0.9);\n}\n.hover\\:bg-purple-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.hover\\:bg-red-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.hover\\:bg-secondary\\/80:hover {\n  background-color: hsl(var(--secondary) / 0.8);\n}\n.hover\\:text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:underline:hover {\n  text-decoration-line: underline;\n}\n.hover\\:opacity-100:hover {\n  opacity: 1;\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-ring:focus {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:outline-none:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus-visible\\:ring-1:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-2:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-ring:focus-visible {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus-visible\\:ring-offset-2:focus-visible {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:ring-offset-background:focus-visible {\n  --tw-ring-offset-color: hsl(var(--background));\n}\n.disabled\\:pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n.peer:disabled ~ .peer-disabled\\:cursor-not-allowed {\n  cursor: not-allowed;\n}\n.peer:disabled ~ .peer-disabled\\:opacity-70 {\n  opacity: 0.7;\n}\n.data-\\[state\\=checked\\]\\:translate-x-4[data-state=checked] {\n  --tw-translate-x: 1rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked] {\n  --tw-translate-x: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=active\\]\\:bg-background[data-state=active] {\n  background-color: hsl(var(--background));\n}\n.data-\\[state\\=checked\\]\\:bg-primary[data-state=checked] {\n  background-color: hsl(var(--primary));\n}\n.data-\\[state\\=open\\]\\:bg-secondary[data-state=open] {\n  background-color: hsl(var(--secondary));\n}\n.data-\\[state\\=selected\\]\\:bg-muted[data-state=selected] {\n  background-color: hsl(var(--muted));\n}\n.data-\\[state\\=unchecked\\]\\:bg-input[data-state=unchecked] {\n  background-color: hsl(var(--input));\n}\n.data-\\[state\\=active\\]\\:text-foreground[data-state=active] {\n  color: hsl(var(--foreground));\n}\n.data-\\[state\\=active\\]\\:shadow[data-state=active] {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.data-\\[state\\=closed\\]\\:duration-300[data-state=closed] {\n  transition-duration: 300ms;\n}\n.data-\\[state\\=open\\]\\:duration-500[data-state=open] {\n  transition-duration: 500ms;\n}\n.data-\\[state\\=open\\]\\:animate-in[data-state=open] {\n  animation-name: enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:animate-out[data-state=closed] {\n  animation-name: exit;\n  animation-duration: 150ms;\n  --tw-exit-opacity: initial;\n  --tw-exit-scale: initial;\n  --tw-exit-rotate: initial;\n  --tw-exit-translate-x: initial;\n  --tw-exit-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:fade-out-0[data-state=closed] {\n  --tw-exit-opacity: 0;\n}\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=open] {\n  --tw-enter-opacity: 0;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-bottom[data-state=closed] {\n  --tw-exit-translate-y: 100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-left[data-state=closed] {\n  --tw-exit-translate-x: -100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-right[data-state=closed] {\n  --tw-exit-translate-x: 100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-top[data-state=closed] {\n  --tw-exit-translate-y: -100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-bottom[data-state=open] {\n  --tw-enter-translate-y: 100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-left[data-state=open] {\n  --tw-enter-translate-x: -100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-right[data-state=open] {\n  --tw-enter-translate-x: 100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-top[data-state=open] {\n  --tw-enter-translate-y: -100%;\n}\n.data-\\[state\\=closed\\]\\:duration-300[data-state=closed] {\n  animation-duration: 300ms;\n}\n.data-\\[state\\=open\\]\\:duration-500[data-state=open] {\n  animation-duration: 500ms;\n}\n@media (min-width: 640px) {\n\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:flex-row {\n    flex-direction: row;\n  }\n\n  .sm\\:justify-end {\n    justify-content: flex-end;\n  }\n\n  .sm\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:text-left {\n    text-align: left;\n  }\n}\n.\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role=checkbox]) {\n  padding-right: 0px;\n}\n.\\[\\&\\>\\[role\\=checkbox\\]\\]\\:translate-y-\\[2px\\]>[role=checkbox] {\n  --tw-translate-y: 2px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.\\[\\&\\>tr\\]\\:last\\:border-b-0:last-child>tr {\n  border-bottom-width: 0px;\n}\n.\\[\\&_tr\\:last-child\\]\\:border-0 tr:last-child {\n  border-width: 0px;\n}\n.\\[\\&_tr\\]\\:border-b tr {\n  border-bottom-width: 1px;\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {

package/dist/cjs/Devtools.cjs

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("/*\n! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n\n    --radius: 0.5rem;\n  }\n  .adhese-devtools, .adhese-devtools * {\n  border-color: hsl(var(--border));\n}\n\n  .adhese-devtools {\n  background-color: hsl(var(--background));\n  color: hsl(var(--foreground));\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-x-0 {\n  left: 0px;\n  right: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 1rem;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.right-4 {\n  right: 1rem;\n}\n.top-0 {\n  top: 0px;\n}\n.top-4 {\n  top: 1rem;\n}\n.z-50 {\n  z-index: 50;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.mt-10 {\n  margin-top: 2.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-9 {\n  height: 2.25rem;\n}\n.h-full {\n  height: 100%;\n}\n.max-h-96 {\n  max-height: 24rem;\n}\n.w-3\\/4 {\n  width: 75%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-9 {\n  width: 2.25rem;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-60 {\n  max-width: 15rem;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.caption-bottom {\n  caption-side: bottom;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-col-reverse {\n  flex-direction: column-reverse;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: var(--radius);\n}\n.rounded-md {\n  border-radius: calc(var(--radius) - 2px);\n}\n.rounded-sm {\n  border-radius: calc(var(--radius) - 4px);\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-b-2 {\n  border-bottom-width: 2px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-r {\n  border-right-width: 1px;\n}\n.border-t {\n  border-top-width: 1px;\n}\n.border-t-2 {\n  border-top-width: 2px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-accent {\n  border-color: hsl(var(--accent));\n}\n.border-destructive {\n  border-color: hsl(var(--destructive));\n}\n.border-input {\n  border-color: hsl(var(--input));\n}\n.border-transparent {\n  border-color: transparent;\n}\n.border-t-accent {\n  border-top-color: hsl(var(--accent));\n}\n.bg-amber-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 243 199 / var(--tw-bg-opacity));\n}\n.bg-amber-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 191 36 / var(--tw-bg-opacity));\n}\n.bg-amber-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 158 11 / var(--tw-bg-opacity));\n}\n.bg-background {\n  background-color: hsl(var(--background));\n}\n.bg-black\\/80 {\n  background-color: rgb(0 0 0 / 0.8);\n}\n.bg-blue-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n.bg-cyan-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(6 182 212 / var(--tw-bg-opacity));\n}\n.bg-destructive {\n  background-color: hsl(var(--destructive));\n}\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity));\n}\n.bg-green-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.bg-muted {\n  background-color: hsl(var(--muted));\n}\n.bg-muted\\/50 {\n  background-color: hsl(var(--muted) / 0.5);\n}\n.bg-pink-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 72 153 / var(--tw-bg-opacity));\n}\n.bg-primary {\n  background-color: hsl(var(--primary));\n}\n.bg-purple-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.bg-red-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 226 226 / var(--tw-bg-opacity));\n}\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.bg-secondary {\n  background-color: hsl(var(--secondary));\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.py-0 {\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n.py-0\\.5 {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-\\[0\\.8rem\\] {\n  font-size: 0.8rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.italic {\n  font-style: italic;\n}\n.leading-none {\n  line-height: 1;\n}\n.text-amber-900 {\n  --tw-text-opacity: 1;\n  color: rgb(120 53 15 / var(--tw-text-opacity));\n}\n.text-amber-950 {\n  --tw-text-opacity: 1;\n  color: rgb(69 26 3 / var(--tw-text-opacity));\n}\n.text-destructive {\n  color: hsl(var(--destructive));\n}\n.text-destructive-foreground {\n  color: hsl(var(--destructive-foreground));\n}\n.text-foreground {\n  color: hsl(var(--foreground));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.text-green-700 {\n  --tw-text-opacity: 1;\n  color: rgb(21 128 61 / var(--tw-text-opacity));\n}\n.text-green-900 {\n  --tw-text-opacity: 1;\n  color: rgb(20 83 45 / var(--tw-text-opacity));\n}\n.text-muted-foreground {\n  color: hsl(var(--muted-foreground));\n}\n.text-primary {\n  color: hsl(var(--primary));\n}\n.text-primary-foreground {\n  color: hsl(var(--primary-foreground));\n}\n.text-red-300 {\n  --tw-text-opacity: 1;\n  color: rgb(252 165 165 / var(--tw-text-opacity));\n}\n.text-red-50 {\n  --tw-text-opacity: 1;\n  color: rgb(254 242 242 / var(--tw-text-opacity));\n}\n.text-red-900 {\n  --tw-text-opacity: 1;\n  color: rgb(127 29 29 / var(--tw-text-opacity));\n}\n.text-secondary-foreground {\n  color: hsl(var(--secondary-foreground));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.no-underline {\n  text-decoration-line: none;\n}\n.underline-offset-4 {\n  text-underline-offset: 4px;\n}\n.opacity-70 {\n  opacity: 0.7;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.ring-0 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-offset-background {\n  --tw-ring-offset-color: hsl(var(--background));\n}\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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n@keyframes enter {\n\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n.ease-in-out {\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.file\\:border-0::file-selector-button {\n  border-width: 0px;\n}\n.file\\:bg-transparent::file-selector-button {\n  background-color: transparent;\n}\n.file\\:text-sm::file-selector-button {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.file\\:font-medium::file-selector-button {\n  font-weight: 500;\n}\n.placeholder\\:text-muted-foreground::-moz-placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.placeholder\\:text-muted-foreground::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.last\\:mb-0:last-child {\n  margin-bottom: 0px;\n}\n.last\\:border-0:last-child {\n  border-width: 0px;\n}\n.last\\:pb-0:last-child {\n  padding-bottom: 0px;\n}\n.hover\\:bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:bg-amber-400:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 191 36 / var(--tw-bg-opacity));\n}\n.hover\\:bg-amber-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 158 11 / var(--tw-bg-opacity));\n}\n.hover\\:bg-blue-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n.hover\\:bg-cyan-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(6 182 212 / var(--tw-bg-opacity));\n}\n.hover\\:bg-destructive\\/80:hover {\n  background-color: hsl(var(--destructive) / 0.8);\n}\n.hover\\:bg-destructive\\/90:hover {\n  background-color: hsl(var(--destructive) / 0.9);\n}\n.hover\\:bg-green-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity));\n}\n.hover\\:bg-green-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.hover\\:bg-muted\\/50:hover {\n  background-color: hsl(var(--muted) / 0.5);\n}\n.hover\\:bg-pink-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 72 153 / var(--tw-bg-opacity));\n}\n.hover\\:bg-primary\\/80:hover {\n  background-color: hsl(var(--primary) / 0.8);\n}\n.hover\\:bg-primary\\/90:hover {\n  background-color: hsl(var(--primary) / 0.9);\n}\n.hover\\:bg-purple-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.hover\\:bg-red-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.hover\\:bg-secondary\\/80:hover {\n  background-color: hsl(var(--secondary) / 0.8);\n}\n.hover\\:text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:underline:hover {\n  text-decoration-line: underline;\n}\n.hover\\:opacity-100:hover {\n  opacity: 1;\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-ring:focus {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:outline-none:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus-visible\\:ring-1:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-2:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-ring:focus-visible {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus-visible\\:ring-offset-2:focus-visible {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:ring-offset-background:focus-visible {\n  --tw-ring-offset-color: hsl(var(--background));\n}\n.disabled\\:pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n.peer:disabled ~ .peer-disabled\\:cursor-not-allowed {\n  cursor: not-allowed;\n}\n.peer:disabled ~ .peer-disabled\\:opacity-70 {\n  opacity: 0.7;\n}\n.data-\\[state\\=checked\\]\\:translate-x-4[data-state=checked] {\n  --tw-translate-x: 1rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked] {\n  --tw-translate-x: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=active\\]\\:bg-background[data-state=active] {\n  background-color: hsl(var(--background));\n}\n.data-\\[state\\=checked\\]\\:bg-primary[data-state=checked] {\n  background-color: hsl(var(--primary));\n}\n.data-\\[state\\=open\\]\\:bg-secondary[data-state=open] {\n  background-color: hsl(var(--secondary));\n}\n.data-\\[state\\=selected\\]\\:bg-muted[data-state=selected] {\n  background-color: hsl(var(--muted));\n}\n.data-\\[state\\=unchecked\\]\\:bg-input[data-state=unchecked] {\n  background-color: hsl(var(--input));\n}\n.data-\\[state\\=active\\]\\:text-foreground[data-state=active] {\n  color: hsl(var(--foreground));\n}\n.data-\\[state\\=active\\]\\:shadow[data-state=active] {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.data-\\[state\\=closed\\]\\:duration-300[data-state=closed] {\n  transition-duration: 300ms;\n}\n.data-\\[state\\=open\\]\\:duration-500[data-state=open] {\n  transition-duration: 500ms;\n}\n.data-\\[state\\=open\\]\\:animate-in[data-state=open] {\n  animation-name: enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:animate-out[data-state=closed] {\n  animation-name: exit;\n  animation-duration: 150ms;\n  --tw-exit-opacity: initial;\n  --tw-exit-scale: initial;\n  --tw-exit-rotate: initial;\n  --tw-exit-translate-x: initial;\n  --tw-exit-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:fade-out-0[data-state=closed] {\n  --tw-exit-opacity: 0;\n}\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=open] {\n  --tw-enter-opacity: 0;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-bottom[data-state=closed] {\n  --tw-exit-translate-y: 100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-left[data-state=closed] {\n  --tw-exit-translate-x: -100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-right[data-state=closed] {\n  --tw-exit-translate-x: 100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-top[data-state=closed] {\n  --tw-exit-translate-y: -100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-bottom[data-state=open] {\n  --tw-enter-translate-y: 100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-left[data-state=open] {\n  --tw-enter-translate-x: -100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-right[data-state=open] {\n  --tw-enter-translate-x: 100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-top[data-state=open] {\n  --tw-enter-translate-y: -100%;\n}\n.data-\\[state\\=closed\\]\\:duration-300[data-state=closed] {\n  animation-duration: 300ms;\n}\n.data-\\[state\\=open\\]\\:duration-500[data-state=open] {\n  animation-duration: 500ms;\n}\n@media (min-width: 640px) {\n\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:flex-row {\n    flex-direction: row;\n  }\n\n  .sm\\:justify-end {\n    justify-content: flex-end;\n  }\n\n  .sm\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:text-left {\n    text-align: left;\n  }\n}\n.\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role=checkbox]) {\n  padding-right: 0px;\n}\n.\\[\\&\\>\\[role\\=checkbox\\]\\]\\:translate-y-\\[2px\\]>[role=checkbox] {\n  --tw-translate-y: 2px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.\\[\\&\\>tr\\]\\:last\\:border-b-0:last-child>tr {\n  border-bottom-width: 0px;\n}\n.\\[\\&_tr\\:last-child\\]\\:border-0 tr:last-child {\n  border-width: 0px;\n}\n.\\[\\&_tr\\]\\:border-b tr {\n  border-bottom-width: 1px;\n}"));
+      elementStyle.appendChild(document.createTextNode("/*\n! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n\n    --radius: 0.5rem;\n  }\n  .adhese-devtools, .adhese-devtools * {\n  border-color: hsl(var(--border));\n}\n\n  .adhese-devtools {\n  background-color: hsl(var(--background));\n  color: hsl(var(--foreground));\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-0 {\n  inset: 0px;\n}\n.inset-x-0 {\n  left: 0px;\n  right: 0px;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-4 {\n  bottom: 1rem;\n}\n.left-0 {\n  left: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.right-4 {\n  right: 1rem;\n}\n.top-0 {\n  top: 0px;\n}\n.top-4 {\n  top: 1rem;\n}\n.z-50 {\n  z-index: 50;\n}\n.mb-3 {\n  margin-bottom: 0.75rem;\n}\n.mb-8 {\n  margin-bottom: 2rem;\n}\n.mt-10 {\n  margin-top: 2.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.block {\n  display: block;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.h-10 {\n  height: 2.5rem;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-9 {\n  height: 2.25rem;\n}\n.h-full {\n  height: 100%;\n}\n.max-h-96 {\n  max-height: 24rem;\n}\n.w-3\\/4 {\n  width: 75%;\n}\n.w-4 {\n  width: 1rem;\n}\n.w-9 {\n  width: 2.25rem;\n}\n.w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-60 {\n  max-width: 15rem;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.caption-bottom {\n  caption-side: bottom;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-col-reverse {\n  flex-direction: column-reverse;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-1 {\n  gap: 0.25rem;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-6 {\n  gap: 1.5rem;\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.overflow-auto {\n  overflow: auto;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-lg {\n  border-radius: var(--radius);\n}\n.rounded-md {\n  border-radius: calc(var(--radius) - 2px);\n}\n.rounded-sm {\n  border-radius: calc(var(--radius) - 4px);\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.border-b {\n  border-bottom-width: 1px;\n}\n.border-b-2 {\n  border-bottom-width: 2px;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-r {\n  border-right-width: 1px;\n}\n.border-t {\n  border-top-width: 1px;\n}\n.border-t-2 {\n  border-top-width: 2px;\n}\n.border-solid {\n  border-style: solid;\n}\n.border-accent {\n  border-color: hsl(var(--accent));\n}\n.border-destructive {\n  border-color: hsl(var(--destructive));\n}\n.border-input {\n  border-color: hsl(var(--input));\n}\n.border-transparent {\n  border-color: transparent;\n}\n.border-t-accent {\n  border-top-color: hsl(var(--accent));\n}\n.bg-amber-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 243 199 / var(--tw-bg-opacity));\n}\n.bg-amber-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 191 36 / var(--tw-bg-opacity));\n}\n.bg-amber-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 158 11 / var(--tw-bg-opacity));\n}\n.bg-background {\n  background-color: hsl(var(--background));\n}\n.bg-black\\/80 {\n  background-color: rgb(0 0 0 / 0.8);\n}\n.bg-blue-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n.bg-cyan-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(6 182 212 / var(--tw-bg-opacity));\n}\n.bg-destructive {\n  background-color: hsl(var(--destructive));\n}\n.bg-green-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity));\n}\n.bg-green-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.bg-muted {\n  background-color: hsl(var(--muted));\n}\n.bg-muted\\/50 {\n  background-color: hsl(var(--muted) / 0.5);\n}\n.bg-pink-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 72 153 / var(--tw-bg-opacity));\n}\n.bg-primary {\n  background-color: hsl(var(--primary));\n}\n.bg-purple-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.bg-red-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 226 226 / var(--tw-bg-opacity));\n}\n.bg-red-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.bg-secondary {\n  background-color: hsl(var(--secondary));\n}\n.bg-transparent {\n  background-color: transparent;\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-6 {\n  padding: 1.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.py-0 {\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n.py-0\\.5 {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.pb-8 {\n  padding-bottom: 2rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.text-\\[0\\.8rem\\] {\n  font-size: 0.8rem;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-normal {\n  font-weight: 400;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.italic {\n  font-style: italic;\n}\n.leading-none {\n  line-height: 1;\n}\n.text-amber-900 {\n  --tw-text-opacity: 1;\n  color: rgb(120 53 15 / var(--tw-text-opacity));\n}\n.text-amber-950 {\n  --tw-text-opacity: 1;\n  color: rgb(69 26 3 / var(--tw-text-opacity));\n}\n.text-destructive {\n  color: hsl(var(--destructive));\n}\n.text-destructive-foreground {\n  color: hsl(var(--destructive-foreground));\n}\n.text-foreground {\n  color: hsl(var(--foreground));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.text-green-700 {\n  --tw-text-opacity: 1;\n  color: rgb(21 128 61 / var(--tw-text-opacity));\n}\n.text-green-900 {\n  --tw-text-opacity: 1;\n  color: rgb(20 83 45 / var(--tw-text-opacity));\n}\n.text-muted-foreground {\n  color: hsl(var(--muted-foreground));\n}\n.text-primary {\n  color: hsl(var(--primary));\n}\n.text-primary-foreground {\n  color: hsl(var(--primary-foreground));\n}\n.text-red-300 {\n  --tw-text-opacity: 1;\n  color: rgb(252 165 165 / var(--tw-text-opacity));\n}\n.text-red-50 {\n  --tw-text-opacity: 1;\n  color: rgb(254 242 242 / var(--tw-text-opacity));\n}\n.text-red-900 {\n  --tw-text-opacity: 1;\n  color: rgb(127 29 29 / var(--tw-text-opacity));\n}\n.text-secondary-foreground {\n  color: hsl(var(--secondary-foreground));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.no-underline {\n  text-decoration-line: none;\n}\n.underline-offset-4 {\n  text-underline-offset: 4px;\n}\n.opacity-70 {\n  opacity: 0.7;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.ring-0 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-offset-background {\n  --tw-ring-offset-color: hsl(var(--background));\n}\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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n@keyframes enter {\n\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n.ease-in-out {\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.file\\:border-0::file-selector-button {\n  border-width: 0px;\n}\n.file\\:bg-transparent::file-selector-button {\n  background-color: transparent;\n}\n.file\\:text-sm::file-selector-button {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.file\\:font-medium::file-selector-button {\n  font-weight: 500;\n}\n.placeholder\\:text-muted-foreground::-moz-placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.placeholder\\:text-muted-foreground::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n.last\\:mb-0:last-child {\n  margin-bottom: 0px;\n}\n.last\\:border-0:last-child {\n  border-width: 0px;\n}\n.last\\:pb-0:last-child {\n  padding-bottom: 0px;\n}\n.hover\\:bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:bg-amber-400:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251 191 36 / var(--tw-bg-opacity));\n}\n.hover\\:bg-amber-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(245 158 11 / var(--tw-bg-opacity));\n}\n.hover\\:bg-blue-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(59 130 246 / var(--tw-bg-opacity));\n}\n.hover\\:bg-cyan-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(6 182 212 / var(--tw-bg-opacity));\n}\n.hover\\:bg-destructive\\/80:hover {\n  background-color: hsl(var(--destructive) / 0.8);\n}\n.hover\\:bg-destructive\\/90:hover {\n  background-color: hsl(var(--destructive) / 0.9);\n}\n.hover\\:bg-green-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 252 231 / var(--tw-bg-opacity));\n}\n.hover\\:bg-green-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(34 197 94 / var(--tw-bg-opacity));\n}\n.hover\\:bg-muted\\/50:hover {\n  background-color: hsl(var(--muted) / 0.5);\n}\n.hover\\:bg-pink-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(236 72 153 / var(--tw-bg-opacity));\n}\n.hover\\:bg-primary\\/80:hover {\n  background-color: hsl(var(--primary) / 0.8);\n}\n.hover\\:bg-primary\\/90:hover {\n  background-color: hsl(var(--primary) / 0.9);\n}\n.hover\\:bg-purple-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.hover\\:bg-red-500:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 68 68 / var(--tw-bg-opacity));\n}\n.hover\\:bg-secondary\\/80:hover {\n  background-color: hsl(var(--secondary) / 0.8);\n}\n.hover\\:text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:underline:hover {\n  text-decoration-line: underline;\n}\n.hover\\:opacity-100:hover {\n  opacity: 1;\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-ring:focus {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus\\:ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:outline-none:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus-visible\\:ring-1:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-2:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-ring:focus-visible {\n  --tw-ring-color: hsl(var(--ring));\n}\n.focus-visible\\:ring-offset-2:focus-visible {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:ring-offset-background:focus-visible {\n  --tw-ring-offset-color: hsl(var(--background));\n}\n.disabled\\:pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n.disabled\\:opacity-50:disabled {\n  opacity: 0.5;\n}\n.peer:disabled ~ .peer-disabled\\:cursor-not-allowed {\n  cursor: not-allowed;\n}\n.peer:disabled ~ .peer-disabled\\:opacity-70 {\n  opacity: 0.7;\n}\n.data-\\[state\\=checked\\]\\:translate-x-4[data-state=checked] {\n  --tw-translate-x: 1rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=unchecked\\]\\:translate-x-0[data-state=unchecked] {\n  --tw-translate-x: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.data-\\[state\\=active\\]\\:bg-background[data-state=active] {\n  background-color: hsl(var(--background));\n}\n.data-\\[state\\=checked\\]\\:bg-primary[data-state=checked] {\n  background-color: hsl(var(--primary));\n}\n.data-\\[state\\=open\\]\\:bg-secondary[data-state=open] {\n  background-color: hsl(var(--secondary));\n}\n.data-\\[state\\=selected\\]\\:bg-muted[data-state=selected] {\n  background-color: hsl(var(--muted));\n}\n.data-\\[state\\=unchecked\\]\\:bg-input[data-state=unchecked] {\n  background-color: hsl(var(--input));\n}\n.data-\\[state\\=active\\]\\:text-foreground[data-state=active] {\n  color: hsl(var(--foreground));\n}\n.data-\\[state\\=active\\]\\:shadow[data-state=active] {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.data-\\[state\\=closed\\]\\:duration-300[data-state=closed] {\n  transition-duration: 300ms;\n}\n.data-\\[state\\=open\\]\\:duration-500[data-state=open] {\n  transition-duration: 500ms;\n}\n.data-\\[state\\=open\\]\\:animate-in[data-state=open] {\n  animation-name: enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:animate-out[data-state=closed] {\n  animation-name: exit;\n  animation-duration: 150ms;\n  --tw-exit-opacity: initial;\n  --tw-exit-scale: initial;\n  --tw-exit-rotate: initial;\n  --tw-exit-translate-x: initial;\n  --tw-exit-translate-y: initial;\n}\n.data-\\[state\\=closed\\]\\:fade-out-0[data-state=closed] {\n  --tw-exit-opacity: 0;\n}\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=open] {\n  --tw-enter-opacity: 0;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-bottom[data-state=closed] {\n  --tw-exit-translate-y: 100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-left[data-state=closed] {\n  --tw-exit-translate-x: -100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-right[data-state=closed] {\n  --tw-exit-translate-x: 100%;\n}\n.data-\\[state\\=closed\\]\\:slide-out-to-top[data-state=closed] {\n  --tw-exit-translate-y: -100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-bottom[data-state=open] {\n  --tw-enter-translate-y: 100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-left[data-state=open] {\n  --tw-enter-translate-x: -100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-right[data-state=open] {\n  --tw-enter-translate-x: 100%;\n}\n.data-\\[state\\=open\\]\\:slide-in-from-top[data-state=open] {\n  --tw-enter-translate-y: -100%;\n}\n.data-\\[state\\=closed\\]\\:duration-300[data-state=closed] {\n  animation-duration: 300ms;\n}\n.data-\\[state\\=open\\]\\:duration-500[data-state=open] {\n  animation-duration: 500ms;\n}\n@media (min-width: 640px) {\n\n  .sm\\:max-w-sm {\n    max-width: 24rem;\n  }\n\n  .sm\\:flex-row {\n    flex-direction: row;\n  }\n\n  .sm\\:justify-end {\n    justify-content: flex-end;\n  }\n\n  .sm\\:space-x-2 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .sm\\:text-left {\n    text-align: left;\n  }\n}\n.\\[\\&\\:has\\(\\[role\\=checkbox\\]\\)\\]\\:pr-0:has([role=checkbox]) {\n  padding-right: 0px;\n}\n.\\[\\&\\>\\[role\\=checkbox\\]\\]\\:translate-y-\\[2px\\]>[role=checkbox] {\n  --tw-translate-y: 2px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.\\[\\&\\>tr\\]\\:last\\:border-b-0:last-child>tr {\n  border-bottom-width: 0px;\n}\n.\\[\\&_tr\\:last-child\\]\\:border-0 tr:last-child {\n  border-width: 0px;\n}\n.\\[\\&_tr\\]\\:border-b tr {\n  border-bottom-width: 1px;\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {

package/dist/cjs/components/slotsTable.cjs

@@ -49,11 +49,22 @@ function SlotsTable() {
     var _a, _b;
     return !((_b = (_a = slot.pluginOptions) == null ? void 0 : _a.devtools) == null ? void 0 : _b.hijackedSlot);
   }).map((slot) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);
     const hijackedSlot = adheseContext && hijackedSlotOptions && ((_a = adheseContext.get) == null ? void 0 : _a.call(adheseContext, sdkShared.generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot)));
+    let interimSlot = hijackedSlot ?? slot;
+    if (((_b = interimSlot.data) == null ? void 0 : _b.origin) === "DALE") {
+      const nestedAdheseData = (_g = (_f = (_e = (_d = (_c = interimSlot.data) == null ? void 0 : _c.originData) == null ? void 0 : _d.seatbid[0]) == null ? void 0 : _e.bid[0]) == null ? void 0 : _f.ext) == null ? void 0 : _g.adhese;
+      interimSlot = {
+        ...interimSlot,
+        data: {
+          ...interimSlot.data,
+          ...nestedAdheseData
+        }
+      };
+    }
     return {
-      ...hijackedSlot ?? slot,
+      ...interimSlot,
       parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),
       hijackedSlot,
       originalSlot: slot
@@ -227,4 +238,5 @@ function SlotsTable() {
   ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No slots available" });
 }
 exports.SlotsTable = SlotsTable;
+exports.slotIndexBadgeClasses = slotIndexBadgeClasses;
 //# sourceMappingURL=slotsTable.cjs.map

package/dist/cjs/components/slotsTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slotsTable.cjs","sources":["../../../src/components/slotsTable.tsx"],"sourcesContent":["import { Fragment, type ReactElement, useEffect, useMemo, useState } from 'react';\nimport type { AdheseSlot } from '@adhese/sdk';\nimport { type UnwrapRef, generateName, watch } from '@adhese/sdk-shared';\nimport { ResetIcon } from '@radix-ui/react-icons';\nimport { cn } from '../utils';\nimport { useAdheseContext } from '../AdheseContext';\nimport { useModifiedSlots } from '../modifiedSlots.store';\nimport type { DevtoolsSlotPluginOptions } from '../devtools.composables';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\nimport { Badge } from './badge';\nimport { Button, buttonVariants } from './button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from './sheet';\nimport { EditSlot } from './editSlot';\n\nconst slotIndexBadgeClasses = [\n  'bg-blue-500 hover:bg-blue-500',\n  'bg-amber-500 hover:bg-amber-500',\n  'bg-green-500 hover:bg-green-500',\n  'bg-red-500 hover:bg-red-500',\n  'bg-purple-500 hover:bg-purple-500',\n  'bg-cyan-500 hover:bg-cyan-500',\n  'bg-pink-500 hover:bg-pink-500',\n] as const;\n\nconst renderStatusMap = {\n  initializing: 'Initializing',\n  initialized: 'Initialized',\n  loading: 'Loading',\n  loaded: 'Loaded',\n  rendering: 'Rendering',\n  rendered: 'Rendered',\n  empty: 'Empty',\n  error: 'Error',\n} as const satisfies Record<UnwrapRef<AdheseSlot['status']>, string>;\n\n// eslint-disable-next-line ts/naming-convention\nexport function SlotsTable(): ReactElement {\n  const [slots, setSlots] = useState<ReadonlyArray<AdheseSlot>>([]);\n\n  const adheseContext = useAdheseContext();\n\n  useEffect(() => {\n    if (!adheseContext)\n      return;\n\n    const disposeWatcher = watch(() => adheseContext.slots, (newSlots) => {\n      setSlots(Array.from(newSlots.values()));\n    }, { immediate: true, deep: true });\n\n    return (): void => {\n      disposeWatcher();\n    };\n  }, [adheseContext]);\n  const modifiedSlots = useModifiedSlots();\n\n  const formattedSlots = useMemo(() => slots\n    .filter(slot => !(slot.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot).map((slot) => {\n      const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);\n      const hijackedSlot = (adheseContext && hijackedSlotOptions) && adheseContext.get?.(generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot));\n\n      return ({\n        ...(hijackedSlot ?? slot),\n        parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),\n        hijackedSlot,\n        originalSlot: slot,\n      });\n    })\n    .toSorted((a, b) => {\n      const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n      const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n      return offsetA - offsetB;\n    }), [slots]);\n\n  const slotParametersExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.parameters.length > 0), [formattedSlots]);\n  const previewExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.data?.preview), [formattedSlots]);\n  const slotCodeExists = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.slot), [formattedSlots]);\n\n  const origins: ReadonlyArray<string> = useMemo(() => {\n    const set = new Set<string>();\n\n    for (const slot of formattedSlots) {\n      const { data } = slot;\n\n      if (data)\n        set.add(data.origin);\n    }\n\n    return Array.from(set);\n  }, [formattedSlots]);\n\n  return (\n    adheseContext && (formattedSlots.length > 0)\n      ? (\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead>Location</TableHead>\n              {slotCodeExists && <TableHead>Slot</TableHead>}\n              <TableHead>Format</TableHead>\n              {origins.length > 1 && <TableHead>Origin</TableHead>}\n              <TableHead>Render Status</TableHead>\n              <TableHead>Campaign ID</TableHead>\n              <TableHead>Booking ID</TableHead>\n              <TableHead>Creative ID</TableHead>\n              <TableHead>Traffic ID</TableHead>\n              <TableHead>Creative type</TableHead>\n              <TableHead>Impression tracked</TableHead>\n              <TableHead>Viewability tracked</TableHead>\n              {\n                slotParametersExist && <TableHead>Parameters</TableHead>\n              }\n              {\n                previewExist && <TableHead>Preview</TableHead>\n              }\n              <TableHead>Controls</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {formattedSlots.map(({\n              data,\n              name,\n              format,\n              location,\n              status,\n              isViewabilityTracked,\n              isImpressionTracked,\n              element,\n              parameters,\n              slot,\n              hijackedSlot,\n              originalSlot,\n            }, index) => (\n              <Fragment key={originalSlot.id}>\n                <TableRow id={name}>\n                  <TableCell className=\"font-medium\">\n                    <button\n                      onClick={() => {\n                        if (element) {\n                          element.scrollIntoView();\n                          element.style.outline = 'solid 5px red';\n\n                          setTimeout(() => {\n                            element.style.outline = '';\n                          }, 1000);\n                        }\n                      }}\n                      className=\"flex flex-col gap-1\"\n                    >\n                      <Badge className={cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], 'text-white')}>\n                        {name}\n                      </Badge>\n                      {hijackedSlot && <del className=\"text-xs text-muted-foreground\">{originalSlot.name}</del>}\n                    </button>\n                  </TableCell>\n                  <TableCell>{location}</TableCell>\n                  {slotCodeExists && <TableCell>{slot ?? ''}</TableCell>}\n                  <TableCell>\n                    {!data?.adFormat || data?.adFormat === format\n                      ? format\n                      : (\n                        <>\n                          <del className=\"text-red-300 italic\">{format}</del>\n                          <ins className=\"no-underline text-green-700\">{data?.adFormat}</ins>\n                        </>\n                        )}\n                  </TableCell>\n                  {origins.length > 1 && (\n                    <TableCell>\n                      {data?.origin && <Badge className={cn(slotIndexBadgeClasses[origins.indexOf(data.origin) % slotIndexBadgeClasses.length], 'text-white')}>{data.origin.toLowerCase()}</Badge>}\n                    </TableCell>\n                  )}\n                  <TableCell>\n                    <Badge variant=\"outline\" className={cn(status === 'error' ? 'bg-red-500 text-red-50' : '')}>\n                      {renderStatusMap[status]}\n                    </Badge>\n                  </TableCell>\n                  <TableCell>\n                    {data?.orderId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/editCampaign/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.orderId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.adspaceId && data?.adspaceId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/bookingDetail/${data.adspaceId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.adspaceId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.libId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/creativeDetail/${data.libId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.libId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>{data?.id ?? '-'}</TableCell>\n                  <TableCell>{data?.ext ? <Badge variant=\"outline\">{data.ext}</Badge> : '-'}</TableCell>\n                  <TableCell>\n                    {isImpressionTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  <TableCell>\n                    {isViewabilityTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  {\n                    slotParametersExist && (\n                      <TableCell>\n                        {\n                        parameters.length > 0 && (\n                          <Sheet>\n                            <SheetTrigger className={buttonVariants({\n                              variant: 'secondary',\n                              size: 'sm',\n                            })}\n                            >\n                              Show\n                            </SheetTrigger>\n                            <SheetContent className=\"bg-white flex flex-col gap-4\">\n                              <SheetHeader>\n                                <SheetTitle>\n                                  Parameters\n                                </SheetTitle>\n                              </SheetHeader>\n                              <Table>\n                                <TableHeader>\n                                  <TableRow>\n                                    <TableHead>Key</TableHead>\n                                    <TableHead>Value</TableHead>\n                                  </TableRow>\n                                </TableHeader>\n                                <TableBody>\n                                  {parameters.map(([parameterName, value]) => (\n                                    <TableRow key={parameterName}>\n                                      <TableCell>\n                                        <Badge variant=\"outline\">{parameterName}</Badge>\n                                      </TableCell>\n                                      <TableCell>\n                                        {\n                                          Array.isArray(value)\n                                            ? (\n                                              <ul className=\"flex gap-1\">\n                                                {value.map((item, paramIndex) => (\n                                                  <li key={paramIndex}>\n                                                    <Badge variant=\"outline\">{item}</Badge>\n                                                  </li>\n                                                ))}\n                                              </ul>\n                                              )\n                                            : <Badge variant=\"outline\">{value}</Badge>\n                                        }\n                                      </TableCell>\n                                    </TableRow>\n                                  ))}\n                                </TableBody>\n                              </Table>\n                            </SheetContent>\n                          </Sheet>\n                        )\n                      }\n                      </TableCell>\n                    )\n                  }\n                  {previewExist && (\n                    <TableCell>\n                      {data?.preview\n                      && (\n                        <Badge className=\"bg-amber-400 text-amber-950 hover:bg-amber-400\">\n                          PREVIEW\n                        </Badge>\n                      )}\n                    </TableCell>\n                  )}\n                  <TableCell className=\"flex gap-1\">\n                    <EditSlot id={originalSlot.id} />\n                    {modifiedSlots.slots.has(originalSlot.name) && (\n                      <Button\n                        onClick={\n                      () => {\n                        modifiedSlots.remove(originalSlot.name);\n                      }\n                    }\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        title=\"Reset\"\n                      >\n                        <ResetIcon />\n                      </Button>\n                    )}\n                  </TableCell>\n                </TableRow>\n              </Fragment>\n            ))}\n          </TableBody>\n        </Table>\n        )\n      : <p>No slots available</p>\n  );\n}\n"],"names":["useState","useAdheseContext","useEffect","watch","useModifiedSlots","useMemo","generateName","Table","jsx","TableHeader","TableRow","TableHead","TableBody","Fragment","jsxs","TableCell","Badge","cn","buttonVariants","Sheet","SheetTrigger","SheetContent","SheetHeader","SheetTitle","EditSlot","Button","ResetIcon"],"mappings":"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"}
+{"version":3,"file":"slotsTable.cjs","sources":["../../../src/components/slotsTable.tsx"],"sourcesContent":["import { Fragment, type ReactElement, useEffect, useMemo, useState } from 'react';\nimport type { AdheseAd, AdheseSlot } from '@adhese/sdk';\nimport { type UnwrapRef, generateName, watch } from '@adhese/sdk-shared';\nimport { ResetIcon } from '@radix-ui/react-icons';\nimport { cn } from '../utils';\nimport { useAdheseContext } from '../AdheseContext';\nimport { useModifiedSlots } from '../modifiedSlots.store';\nimport type { DevtoolsSlotPluginOptions } from '../devtools.composables';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\nimport { Badge } from './badge';\nimport { Button, buttonVariants } from './button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from './sheet';\nimport { EditSlot } from './editSlot';\n\nexport const slotIndexBadgeClasses = [\n  'bg-blue-500 hover:bg-blue-500',\n  'bg-amber-500 hover:bg-amber-500',\n  'bg-green-500 hover:bg-green-500',\n  'bg-red-500 hover:bg-red-500',\n  'bg-purple-500 hover:bg-purple-500',\n  'bg-cyan-500 hover:bg-cyan-500',\n  'bg-pink-500 hover:bg-pink-500',\n] as const;\n\nconst renderStatusMap = {\n  initializing: 'Initializing',\n  initialized: 'Initialized',\n  loading: 'Loading',\n  loaded: 'Loaded',\n  rendering: 'Rendering',\n  rendered: 'Rendered',\n  empty: 'Empty',\n  error: 'Error',\n} as const satisfies Record<UnwrapRef<AdheseSlot['status']>, string>;\n\n// eslint-disable-next-line ts/naming-convention\nexport function SlotsTable(): ReactElement {\n  const [slots, setSlots] = useState<ReadonlyArray<AdheseSlot>>([]);\n\n  const adheseContext = useAdheseContext();\n\n  useEffect(() => {\n    if (!adheseContext)\n      return;\n\n    const disposeWatcher = watch(() => adheseContext.slots, (newSlots) => {\n      setSlots(Array.from(newSlots.values()));\n    }, { immediate: true, deep: true });\n\n    return (): void => {\n      disposeWatcher();\n    };\n  }, [adheseContext]);\n  const modifiedSlots = useModifiedSlots();\n\n  const formattedSlots = useMemo(() => slots\n    .filter(slot => !(slot.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot)\n    .map((slot) => {\n      const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);\n      const hijackedSlot = (adheseContext && hijackedSlotOptions) && adheseContext.get?.(generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot));\n\n      let interimSlot = hijackedSlot ?? slot;\n\n      if (interimSlot.data?.origin === 'DALE') {\n        // @ts-expect-error - Data structure is not typed and very messy to type\n        // eslint-disable-next-line ts/no-unsafe-member-access\n        const nestedAdheseData = interimSlot.data?.originData?.seatbid[0]?.bid[0]?.ext?.adhese as AdheseAd;\n\n        interimSlot = {\n          ...interimSlot,\n          data: {\n            ...interimSlot.data,\n            ...nestedAdheseData,\n          },\n        };\n      }\n\n      return ({\n        ...interimSlot,\n        parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),\n        hijackedSlot,\n        originalSlot: slot,\n      });\n    })\n    .toSorted((a, b) => {\n      const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n      const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n      return offsetA - offsetB;\n    }), [slots]);\n\n  const slotParametersExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.parameters.length > 0), [formattedSlots]);\n  const previewExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.data?.preview), [formattedSlots]);\n  const slotCodeExists = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.slot), [formattedSlots]);\n\n  const origins: ReadonlyArray<string> = useMemo(() => {\n    const set = new Set<string>();\n\n    for (const slot of formattedSlots) {\n      const { data } = slot;\n\n      if (data)\n        set.add(data.origin);\n    }\n\n    return Array.from(set);\n  }, [formattedSlots]);\n\n  return (\n    adheseContext && (formattedSlots.length > 0)\n      ? (\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead>Location</TableHead>\n              {slotCodeExists && <TableHead>Slot</TableHead>}\n              <TableHead>Format</TableHead>\n              {origins.length > 1 && <TableHead>Origin</TableHead>}\n              <TableHead>Render Status</TableHead>\n              <TableHead>Campaign ID</TableHead>\n              <TableHead>Booking ID</TableHead>\n              <TableHead>Creative ID</TableHead>\n              <TableHead>Traffic ID</TableHead>\n              <TableHead>Creative type</TableHead>\n              <TableHead>Impression tracked</TableHead>\n              <TableHead>Viewability tracked</TableHead>\n              {\n                slotParametersExist && <TableHead>Parameters</TableHead>\n              }\n              {\n                previewExist && <TableHead>Preview</TableHead>\n              }\n              <TableHead>Controls</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {formattedSlots.map(({\n              data,\n              name,\n              format,\n              location,\n              status,\n              isViewabilityTracked,\n              isImpressionTracked,\n              element,\n              parameters,\n              slot,\n              hijackedSlot,\n              originalSlot,\n            }, index) => (\n              <Fragment key={originalSlot.id}>\n                <TableRow id={name}>\n                  <TableCell className=\"font-medium\">\n                    <button\n                      onClick={() => {\n                        if (element) {\n                          element.scrollIntoView();\n                          element.style.outline = 'solid 5px red';\n\n                          setTimeout(() => {\n                            element.style.outline = '';\n                          }, 1000);\n                        }\n                      }}\n                      className=\"flex flex-col gap-1\"\n                    >\n                      <Badge className={cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], 'text-white')}>\n                        {name}\n                      </Badge>\n                      {hijackedSlot && <del className=\"text-xs text-muted-foreground\">{originalSlot.name}</del>}\n                    </button>\n                  </TableCell>\n                  <TableCell>{location}</TableCell>\n                  {slotCodeExists && <TableCell>{slot ?? ''}</TableCell>}\n                  <TableCell>\n                    {!data?.adFormat || data?.adFormat === format\n                      ? format\n                      : (\n                        <>\n                          <del className=\"text-red-300 italic\">{format}</del>\n                          <ins className=\"no-underline text-green-700\">{data?.adFormat}</ins>\n                        </>\n                        )}\n                  </TableCell>\n                  {origins.length > 1 && (\n                    <TableCell>\n                      {data?.origin && <Badge className={cn(slotIndexBadgeClasses[origins.indexOf(data.origin) % slotIndexBadgeClasses.length], 'text-white')}>{data.origin.toLowerCase()}</Badge>}\n                    </TableCell>\n                  )}\n                  <TableCell>\n                    <Badge variant=\"outline\" className={cn(status === 'error' ? 'bg-red-500 text-red-50' : '')}>\n                      {renderStatusMap[status]}\n                    </Badge>\n                  </TableCell>\n                  <TableCell>\n                    {data?.orderId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/editCampaign/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.orderId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.adspaceId && data?.adspaceId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/bookingDetail/${data.adspaceId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.adspaceId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.libId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/creativeDetail/${data.libId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.libId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>{data?.id ?? '-'}</TableCell>\n                  <TableCell>{data?.ext ? <Badge variant=\"outline\">{data.ext}</Badge> : '-'}</TableCell>\n                  <TableCell>\n                    {isImpressionTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  <TableCell>\n                    {isViewabilityTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  {\n                    slotParametersExist && (\n                      <TableCell>\n                        {\n                        parameters.length > 0 && (\n                          <Sheet>\n                            <SheetTrigger className={buttonVariants({\n                              variant: 'secondary',\n                              size: 'sm',\n                            })}\n                            >\n                              Show\n                            </SheetTrigger>\n                            <SheetContent className=\"bg-white flex flex-col gap-4\">\n                              <SheetHeader>\n                                <SheetTitle>\n                                  Parameters\n                                </SheetTitle>\n                              </SheetHeader>\n                              <Table>\n                                <TableHeader>\n                                  <TableRow>\n                                    <TableHead>Key</TableHead>\n                                    <TableHead>Value</TableHead>\n                                  </TableRow>\n                                </TableHeader>\n                                <TableBody>\n                                  {parameters.map(([parameterName, value]) => (\n                                    <TableRow key={parameterName}>\n                                      <TableCell>\n                                        <Badge variant=\"outline\">{parameterName}</Badge>\n                                      </TableCell>\n                                      <TableCell>\n                                        {\n                                          Array.isArray(value)\n                                            ? (\n                                              <ul className=\"flex gap-1\">\n                                                {value.map((item, paramIndex) => (\n                                                  <li key={paramIndex}>\n                                                    <Badge variant=\"outline\">{item}</Badge>\n                                                  </li>\n                                                ))}\n                                              </ul>\n                                              )\n                                            : <Badge variant=\"outline\">{value}</Badge>\n                                        }\n                                      </TableCell>\n                                    </TableRow>\n                                  ))}\n                                </TableBody>\n                              </Table>\n                            </SheetContent>\n                          </Sheet>\n                        )\n                      }\n                      </TableCell>\n                    )\n                  }\n                  {previewExist && (\n                    <TableCell>\n                      {data?.preview\n                      && (\n                        <Badge className=\"bg-amber-400 text-amber-950 hover:bg-amber-400\">\n                          PREVIEW\n                        </Badge>\n                      )}\n                    </TableCell>\n                  )}\n                  <TableCell className=\"flex gap-1\">\n                    <EditSlot id={originalSlot.id} />\n                    {modifiedSlots.slots.has(originalSlot.name) && (\n                      <Button\n                        onClick={\n                      () => {\n                        modifiedSlots.remove(originalSlot.name);\n                      }\n                    }\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        title=\"Reset\"\n                      >\n                        <ResetIcon />\n                      </Button>\n                    )}\n                  </TableCell>\n                </TableRow>\n              </Fragment>\n            ))}\n          </TableBody>\n        </Table>\n        )\n      : <p>No slots available</p>\n  );\n}\n"],"names":["useState","useAdheseContext","useEffect","watch","useModifiedSlots","useMemo","generateName","Table","jsx","TableHeader","TableRow","TableHead","TableBody","Fragment","jsxs","TableCell","Badge","cn","buttonVariants","Sheet","SheetTrigger","SheetContent","SheetHeader","SheetTitle","EditSlot","Button","ResetIcon"],"mappings":"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"}

package/dist/cjs/devtools.composables.cjs

@@ -1,5 +1,28 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const sdkShared = require("@adhese/sdk-shared");
 function useDevtoolsUi(context, { onInit, onDispose }) {
   const wrapperElement = document.createElement("div");
@@ -111,6 +134,104 @@ function useModifiedSlotsHijack(context, { onSlotCreate }, logger) {
     })
   );
 }
+function useSlotBadge(context, hooks) {
+  const modifiedSlots = useModifiedSlots(context, hooks);
+  const sortedSlots = sdkShared.computed(() => Array.from(context.slots.values()).toSorted((a, b) => {
+    var _a, _b;
+    const offsetA = ((_a = a.element) == null ? void 0 : _a.getBoundingClientRect().top) ?? 0;
+    const offsetB = ((_b = b.element) == null ? void 0 : _b.getBoundingClientRect().top) ?? 0;
+    return offsetA - offsetB;
+  }));
+  hooks.onSlotCreate((slot) => ({
+    ...slot,
+    setup(slotContext, slotHooks) {
+      var _a;
+      (_a = slot.setup) == null ? void 0 : _a.call(slot, slotContext, slotHooks);
+      const element = sdkShared.ref(null);
+      async function renderBadges() {
+        var _a2, _b, _c, _d, _e, _f;
+        if (!slotContext.value || slotContext.value.renderMode === "none" || !context.debug || !slotContext.value.isVisible)
+          return;
+        const [
+          { renderToStaticMarkup },
+          // eslint-disable-next-line ts/naming-convention
+          { Badge },
+          { slotIndexBadgeClasses },
+          { cn }
+        ] = await Promise.all([
+          import("react-dom/server"),
+          Promise.resolve().then(() => require("./components/badge.cjs")),
+          Promise.resolve().then(() => require("./components/slotsTable.cjs")),
+          Promise.resolve().then(() => require("./utils.cjs"))
+        ]);
+        const slotIndex = sortedSlots.value.filter(({ name }) => {
+          var _a3;
+          return !((_a3 = modifiedSlots.value) == null ? void 0 : _a3.slots.has(name));
+        }).findIndex(
+          ({ name }) => {
+            var _a3;
+            return name === ((_a3 = slotContext.value) == null ? void 0 : _a3.name);
+          }
+        );
+        const template = renderToStaticMarkup(
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex gap-1 flex-col pointer-events-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Badge,
+              {
+                className: cn("w-fit", slotIndexBadgeClasses[slotIndex % slotIndexBadgeClasses.length]),
+                children: (_a2 = slotContext.value) == null ? void 0 : _a2.name
+              }
+            ),
+            ((_d = modifiedSlots.value) == null ? void 0 : _d.slots.has(((_c = (_b = slotContext.value.pluginOptions) == null ? void 0 : _b.devtools) == null ? void 0 : _c.hijackedSlot) ?? "")) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "bg-red-500 w-fit", children: "EDITED IN DEVTOOLS" })
+          ] })
+        );
+        (_e = element.value) == null ? void 0 : _e.remove();
+        element.value = document.createElement("div");
+        (_f = slotContext.value.element) == null ? void 0 : _f.appendChild(element.value);
+        element.value.innerHTML = template;
+      }
+      slotHooks.onRender(async () => {
+        await renderBadges();
+      });
+      sdkShared.watch(() => context.slots, async () => {
+        await renderBadges();
+      }, { immediate: false, deep: true });
+      sdkShared.watch(() => context.debug, async (debug) => {
+        var _a2;
+        if (debug) {
+          await renderBadges();
+        } else {
+          (_a2 = element.value) == null ? void 0 : _a2.remove();
+        }
+      }, { immediate: true });
+    }
+  }));
+}
+function useModifiedSlots(context, { onInit, onDispose }) {
+  let disposeSub;
+  const state = sdkShared.ref(null);
+  async function initStore() {
+    const { modifiedSlotsStore: store } = await Promise.resolve().then(() => require("./modifiedSlots.store.cjs"));
+    disposeSub = store.subscribe((newState) => {
+      state.value = newState;
+    });
+    state.value = store.getState();
+    return store;
+  }
+  onInit(async () => {
+    await initStore();
+  });
+  sdkShared.watch(() => context.debug, async (debug) => {
+    if (debug) {
+      await initStore();
+    }
+  }, { immediate: true });
+  onDispose(() => {
+    disposeSub == null ? void 0 : disposeSub();
+  });
+  return state;
+}
 exports.useDevtoolsUi = useDevtoolsUi;
 exports.useModifiedSlotsHijack = useModifiedSlotsHijack;
+exports.useSlotBadge = useSlotBadge;
 //# sourceMappingURL=devtools.composables.cjs.map

package/dist/cjs/devtools.composables.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.composables.cjs","sources":["../../src/devtools.composables.ts"],"sourcesContent":["import type { AdheseContext, AdhesePlugin, AdheseSlot } from '@adhese/sdk';\nimport { computed, omit, ref, type useLogger, watch } from '@adhese/sdk-shared';\nimport type { ModifiedSlotsStore, modifiedSlotsStore } from './modifiedSlots.store';\n\nexport type DevtoolsSlotPluginOptions = {\n  hijackedSlot?: string;\n};\n\nexport function useDevtoolsUi(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): void {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(() => {\n    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n      if (debug && !isDisposed) {\n        await initDevtools();\n\n        if (context.isDisposed)\n          dispose();\n      }\n      else {\n        dispose();\n      }\n    }, {\n      immediate: true,\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n}\n\nexport function useModifiedSlotsHijack(\n  context: AdheseContext,\n  { onSlotCreate }: Parameters<AdhesePlugin>[1]['hooks'],\n  logger: ReturnType<typeof useLogger>,\n): void {\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    return store;\n  }\n\n  onSlotCreate(slot =>\n    ({\n      ...slot,\n      setup(slotContext, slotHooks): void {\n        slot.setup?.(slotContext, slotHooks);\n\n        let store: typeof modifiedSlotsStore | undefined;\n        const state = ref<ModifiedSlotsStore | null>(null);\n        const hijackSlot = ref<AdheseSlot | null>(null);\n\n        const hijackSlotOptions = computed(() => (state.value ?? store?.getState())?.slots.get(slotContext.value?.name ?? ''));\n\n        let disposeSub: (() => void) | undefined;\n\n        async function createHijack(): Promise<void> {\n          if (context.debug && slotContext.value && slotContext.value.element) {\n            hijackSlot.value?.dispose();\n\n            if (hijackSlotOptions.value) {\n              slotContext.value.renderMode = 'none';\n\n              hijackSlot.value = context.addSlot?.({\n                ...omit(slotContext.value.options, ['setup']),\n                ...hijackSlotOptions.value,\n                containingElement: slotContext.value.element,\n                lazyLoading: false,\n                lazyLoadingOptions: undefined,\n                pluginOptions: {\n                  devtools: {\n                    hijackedSlot: slotContext.value.name,\n                  } satisfies DevtoolsSlotPluginOptions,\n                },\n              }) ?? null;\n\n              logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${hijackSlot.value?.name}`);\n\n              await hijackSlot.value?.render();\n            }\n            else {\n              slotContext.value.renderMode = slotContext.value.options.renderMode ?? 'iframe';\n\n              hijackSlot.value?.dispose();\n              hijackSlot.value = null;\n\n              await slotContext.value.render();\n            }\n          }\n        }\n\n        slotHooks.onInit(async () => {\n          if (context.debug && slotContext.value) {\n            store = await initStore();\n\n            disposeSub = store.subscribe((newState) => {\n              state.value = newState;\n            });\n\n            state.value = store.getState();\n\n            await createHijack();\n          }\n        });\n\n        slotHooks.onRender(async () => {\n          if (hijackSlot.value) {\n            await hijackSlot.value.render();\n          }\n        });\n\n        watch(state, async () => {\n          await createHijack();\n        }, { immediate: true });\n\n        watch(() => context.debug, async (debug) => {\n          if (!debug)\n            hijackSlot.value?.dispose();\n        });\n\n        slotHooks.onDispose(() => {\n          disposeSub?.();\n          hijackSlot.value?.dispose();\n        });\n      },\n    }),\n  );\n}\n"],"names":["watch","ref","computed","_a","omit"],"mappings":"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"}
+{"version":3,"file":"devtools.composables.cjs","sources":["../../src/devtools.composables.tsx"],"sourcesContent":["import type { AdheseContext, AdhesePlugin, AdheseSlot } from '@adhese/sdk';\nimport { type Ref, computed, omit, ref, type useLogger, watch } from '@adhese/sdk-shared';\nimport type { ModifiedSlotsStore, modifiedSlotsStore } from './modifiedSlots.store';\n\nexport type DevtoolsSlotPluginOptions = {\n  hijackedSlot?: string;\n};\n\nexport function useDevtoolsUi(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): void {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(() => {\n    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n      if (debug && !isDisposed) {\n        await initDevtools();\n\n        if (context.isDisposed)\n          dispose();\n      }\n      else {\n        dispose();\n      }\n    }, {\n      immediate: true,\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n}\n\nexport function useModifiedSlotsHijack(\n  context: AdheseContext,\n  { onSlotCreate }: Parameters<AdhesePlugin>[1]['hooks'],\n  logger: ReturnType<typeof useLogger>,\n): void {\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    return store;\n  }\n\n  onSlotCreate(slot =>\n    ({\n      ...slot,\n      setup(slotContext, slotHooks): void {\n        slot.setup?.(slotContext, slotHooks);\n\n        let store: typeof modifiedSlotsStore | undefined;\n        const state = ref<ModifiedSlotsStore | null>(null);\n        const hijackSlot = ref<AdheseSlot | null>(null);\n\n        const hijackSlotOptions = computed(() => (state.value ?? store?.getState())?.slots.get(slotContext.value?.name ?? ''));\n\n        let disposeSub: (() => void) | undefined;\n\n        async function createHijack(): Promise<void> {\n          if (context.debug && slotContext.value && slotContext.value.element) {\n            hijackSlot.value?.dispose();\n\n            if (hijackSlotOptions.value) {\n              slotContext.value.renderMode = 'none';\n\n              hijackSlot.value = context.addSlot?.({\n                ...omit(slotContext.value.options, ['setup']),\n                ...hijackSlotOptions.value,\n                containingElement: slotContext.value.element,\n                lazyLoading: false,\n                lazyLoadingOptions: undefined,\n                pluginOptions: {\n                  devtools: {\n                    hijackedSlot: slotContext.value.name,\n                  } satisfies DevtoolsSlotPluginOptions,\n                },\n              }) ?? null;\n\n              logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${hijackSlot.value?.name}`);\n\n              await hijackSlot.value?.render();\n            }\n            else {\n              slotContext.value.renderMode = slotContext.value.options.renderMode ?? 'iframe';\n\n              hijackSlot.value?.dispose();\n              hijackSlot.value = null;\n\n              await slotContext.value.render();\n            }\n          }\n        }\n\n        slotHooks.onInit(async () => {\n          if (context.debug && slotContext.value) {\n            store = await initStore();\n\n            disposeSub = store.subscribe((newState) => {\n              state.value = newState;\n            });\n\n            state.value = store.getState();\n\n            await createHijack();\n          }\n        });\n\n        slotHooks.onRender(async () => {\n          if (hijackSlot.value) {\n            await hijackSlot.value.render();\n          }\n        });\n\n        watch(state, async () => {\n          await createHijack();\n        }, { immediate: true });\n\n        watch(() => context.debug, async (debug) => {\n          if (!debug)\n            hijackSlot.value?.dispose();\n        });\n\n        slotHooks.onDispose(() => {\n          disposeSub?.();\n          hijackSlot.value?.dispose();\n        });\n      },\n    }),\n  );\n}\n\nexport function useSlotBadge(\n  context: AdheseContext,\n  hooks: Parameters<AdhesePlugin>[1]['hooks'],\n): void {\n  const modifiedSlots = useModifiedSlots(context, hooks);\n\n  const sortedSlots = computed(() => Array.from(context.slots.values()).toSorted((a, b) => {\n    const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n    const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n    return offsetA - offsetB;\n  }));\n\n  hooks.onSlotCreate(slot => ({\n    ...slot,\n    setup(slotContext, slotHooks): void {\n      slot.setup?.(slotContext, slotHooks);\n\n      const element = ref<HTMLElement | null>(null);\n\n      async function renderBadges(): Promise<void> {\n        if (!slotContext.value || slotContext.value.renderMode === 'none' || !context.debug || !slotContext.value.isVisible)\n          return;\n\n        const [\n          { renderToStaticMarkup },\n          // eslint-disable-next-line ts/naming-convention\n          { Badge },\n          { slotIndexBadgeClasses },\n          { cn },\n        ] = await Promise.all([\n          import('react-dom/server'),\n          import('./components/badge'),\n          import('./components/slotsTable'),\n          import('./utils'),\n        ]);\n\n        const slotIndex = sortedSlots.value\n          .filter(({ name }) => !modifiedSlots.value?.slots.has(name))\n          .findIndex(({ name }) => name === slotContext.value?.name,\n          );\n\n        const template = renderToStaticMarkup(\n          <div className=\"absolute top-0 flex gap-1 flex-col pointer-events-none\">\n            <Badge\n              className={cn('w-fit', slotIndexBadgeClasses[slotIndex % slotIndexBadgeClasses.length])}\n            >\n              {slotContext.value?.name}\n            </Badge>\n            {modifiedSlots.value?.slots.has((slotContext.value.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot ?? '') && <Badge className=\"bg-red-500 w-fit\">EDITED IN DEVTOOLS</Badge>}\n          </div>,\n        );\n\n        element.value?.remove();\n        element.value = document.createElement('div');\n        slotContext.value.element?.appendChild(element.value);\n\n        element.value.innerHTML = template;\n      }\n\n      slotHooks.onRender(async () => {\n        await renderBadges();\n      });\n\n      watch(() => context.slots, async () => {\n        await renderBadges();\n      }, { immediate: false, deep: true });\n\n      watch(() => context.debug, async (debug) => {\n        if (debug) {\n          await renderBadges();\n        }\n        else {\n          element.value?.remove();\n        }\n      }, { immediate: true });\n    },\n  }));\n}\n\nfunction useModifiedSlots(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): Ref<ModifiedSlotsStore | null> {\n  let disposeSub: (() => void) | undefined;\n  const state = ref<ModifiedSlotsStore | null>(null);\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    disposeSub = store.subscribe((newState) => {\n      state.value = newState;\n    });\n\n    state.value = store.getState();\n\n    return store;\n  }\n\n  onInit(async () => {\n    await initStore();\n  });\n\n  watch(() => context.debug, async (debug) => {\n    if (debug) {\n      await initStore();\n    }\n  }, { immediate: true });\n\n  onDispose(() => {\n    disposeSub?.();\n  });\n\n  return state;\n}\n"],"names":["watch","ref","computed","_a","omit","jsxs","jsx"],"mappings":"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"}

package/dist/cjs/package.json.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const name = "@adhese/sdk-devtools";
-const version = "0.12.1";
+const version = "1.0.0";
 exports.name = name;
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.map

package/dist/cjs/sdkDevtools.cjs

@@ -9,6 +9,7 @@ const devtoolsPlugin = (context, plugin) => {
   }, { context, plugin });
   devtools_composables.useDevtoolsUi(context, plugin.hooks);
   devtools_composables.useModifiedSlotsHijack(context, plugin.hooks, logger);
+  devtools_composables.useSlotBadge(context, plugin.hooks);
   return {
     name: "devtools"
   };

package/dist/cjs/sdkDevtools.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sdkDevtools.cjs","sources":["../../src/sdkDevtools.ts"],"sourcesContent":["import type { AdhesePlugin } from '@adhese/sdk';\nimport { useLogger } from '@adhese/sdk-shared';\nimport { name, version } from '../package.json';\nimport { useDevtoolsUi, useModifiedSlotsHijack } from './devtools.composables';\n\nexport type { DevtoolsSlotPluginOptions } from './devtools.composables';\n\nexport const devtoolsPlugin: AdhesePlugin<{\n  name: 'devtools';\n}> = (context, plugin) => {\n  const logger = useLogger({\n    scope: `${name}@${version}`,\n  }, { context, plugin });\n\n  useDevtoolsUi(context, plugin.hooks);\n\n  useModifiedSlotsHijack(context, plugin.hooks, logger);\n\n  return {\n    name: 'devtools',\n  };\n};\n"],"names":["useLogger","name","version","useDevtoolsUi","useModifiedSlotsHijack"],"mappings":";;;;;AAOa,MAAA,iBAER,CAAC,SAAS,WAAW;AACxB,QAAM,SAASA,UAAAA,UAAU;AAAA,IACvB,OAAO,GAAGC,SAAAA,IAAI,IAAIC,SAAO,OAAA;AAAA,EAAA,GACxB,EAAE,SAAS,OAAA,CAAQ;AAERC,uBAAAA,cAAA,SAAS,OAAO,KAAK;AAEZC,uBAAAA,uBAAA,SAAS,OAAO,OAAO,MAAM;AAE7C,SAAA;AAAA,IACL,MAAM;AAAA,EAAA;AAEV;;"}
+{"version":3,"file":"sdkDevtools.cjs","sources":["../../src/sdkDevtools.ts"],"sourcesContent":["import type { AdhesePlugin } from '@adhese/sdk';\nimport { useLogger } from '@adhese/sdk-shared';\nimport { name, version } from '../package.json';\nimport { useDevtoolsUi, useModifiedSlotsHijack, useSlotBadge } from './devtools.composables';\n\nexport type { DevtoolsSlotPluginOptions } from './devtools.composables';\n\nexport const devtoolsPlugin: AdhesePlugin<{\n  name: 'devtools';\n}> = (context, plugin) => {\n  const logger = useLogger({\n    scope: `${name}@${version}`,\n  }, { context, plugin });\n\n  useDevtoolsUi(context, plugin.hooks);\n\n  useModifiedSlotsHijack(context, plugin.hooks, logger);\n\n  useSlotBadge(context, plugin.hooks);\n\n  return {\n    name: 'devtools',\n  };\n};\n"],"names":["useLogger","name","version","useDevtoolsUi","useModifiedSlotsHijack","useSlotBadge"],"mappings":";;;;;AAOa,MAAA,iBAER,CAAC,SAAS,WAAW;AACxB,QAAM,SAASA,UAAAA,UAAU;AAAA,IACvB,OAAO,GAAGC,SAAAA,IAAI,IAAIC,SAAO,OAAA;AAAA,EAAA,GACxB,EAAE,SAAS,OAAA,CAAQ;AAERC,uBAAAA,cAAA,SAAS,OAAO,KAAK;AAEZC,uBAAAA,uBAAA,SAAS,OAAO,OAAO,MAAM;AAEvCC,uBAAAA,aAAA,SAAS,OAAO,KAAK;AAE3B,SAAA;AAAA,IACL,MAAM;AAAA,EAAA;AAEV;;"}

package/dist/components/slotsTable.js

@@ -47,11 +47,22 @@ function SlotsTable() {
     var _a, _b;
     return !((_b = (_a = slot.pluginOptions) == null ? void 0 : _a.devtools) == null ? void 0 : _b.hijackedSlot);
   }).map((slot) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f, _g;
     const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);
     const hijackedSlot = adheseContext && hijackedSlotOptions && ((_a = adheseContext.get) == null ? void 0 : _a.call(adheseContext, generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot)));
+    let interimSlot = hijackedSlot ?? slot;
+    if (((_b = interimSlot.data) == null ? void 0 : _b.origin) === "DALE") {
+      const nestedAdheseData = (_g = (_f = (_e = (_d = (_c = interimSlot.data) == null ? void 0 : _c.originData) == null ? void 0 : _d.seatbid[0]) == null ? void 0 : _e.bid[0]) == null ? void 0 : _f.ext) == null ? void 0 : _g.adhese;
+      interimSlot = {
+        ...interimSlot,
+        data: {
+          ...interimSlot.data,
+          ...nestedAdheseData
+        }
+      };
+    }
     return {
-      ...hijackedSlot ?? slot,
+      ...interimSlot,
       parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),
       hijackedSlot,
       originalSlot: slot
@@ -225,6 +236,7 @@ function SlotsTable() {
   ] }) : /* @__PURE__ */ jsx("p", { children: "No slots available" });
 }
 export {
-  SlotsTable
+  SlotsTable,
+  slotIndexBadgeClasses
 };
 //# sourceMappingURL=slotsTable.js.map

package/dist/components/slotsTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"slotsTable.js","sources":["../../src/components/slotsTable.tsx"],"sourcesContent":["import { Fragment, type ReactElement, useEffect, useMemo, useState } from 'react';\nimport type { AdheseSlot } from '@adhese/sdk';\nimport { type UnwrapRef, generateName, watch } from '@adhese/sdk-shared';\nimport { ResetIcon } from '@radix-ui/react-icons';\nimport { cn } from '../utils';\nimport { useAdheseContext } from '../AdheseContext';\nimport { useModifiedSlots } from '../modifiedSlots.store';\nimport type { DevtoolsSlotPluginOptions } from '../devtools.composables';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\nimport { Badge } from './badge';\nimport { Button, buttonVariants } from './button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from './sheet';\nimport { EditSlot } from './editSlot';\n\nconst slotIndexBadgeClasses = [\n  'bg-blue-500 hover:bg-blue-500',\n  'bg-amber-500 hover:bg-amber-500',\n  'bg-green-500 hover:bg-green-500',\n  'bg-red-500 hover:bg-red-500',\n  'bg-purple-500 hover:bg-purple-500',\n  'bg-cyan-500 hover:bg-cyan-500',\n  'bg-pink-500 hover:bg-pink-500',\n] as const;\n\nconst renderStatusMap = {\n  initializing: 'Initializing',\n  initialized: 'Initialized',\n  loading: 'Loading',\n  loaded: 'Loaded',\n  rendering: 'Rendering',\n  rendered: 'Rendered',\n  empty: 'Empty',\n  error: 'Error',\n} as const satisfies Record<UnwrapRef<AdheseSlot['status']>, string>;\n\n// eslint-disable-next-line ts/naming-convention\nexport function SlotsTable(): ReactElement {\n  const [slots, setSlots] = useState<ReadonlyArray<AdheseSlot>>([]);\n\n  const adheseContext = useAdheseContext();\n\n  useEffect(() => {\n    if (!adheseContext)\n      return;\n\n    const disposeWatcher = watch(() => adheseContext.slots, (newSlots) => {\n      setSlots(Array.from(newSlots.values()));\n    }, { immediate: true, deep: true });\n\n    return (): void => {\n      disposeWatcher();\n    };\n  }, [adheseContext]);\n  const modifiedSlots = useModifiedSlots();\n\n  const formattedSlots = useMemo(() => slots\n    .filter(slot => !(slot.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot).map((slot) => {\n      const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);\n      const hijackedSlot = (adheseContext && hijackedSlotOptions) && adheseContext.get?.(generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot));\n\n      return ({\n        ...(hijackedSlot ?? slot),\n        parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),\n        hijackedSlot,\n        originalSlot: slot,\n      });\n    })\n    .toSorted((a, b) => {\n      const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n      const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n      return offsetA - offsetB;\n    }), [slots]);\n\n  const slotParametersExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.parameters.length > 0), [formattedSlots]);\n  const previewExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.data?.preview), [formattedSlots]);\n  const slotCodeExists = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.slot), [formattedSlots]);\n\n  const origins: ReadonlyArray<string> = useMemo(() => {\n    const set = new Set<string>();\n\n    for (const slot of formattedSlots) {\n      const { data } = slot;\n\n      if (data)\n        set.add(data.origin);\n    }\n\n    return Array.from(set);\n  }, [formattedSlots]);\n\n  return (\n    adheseContext && (formattedSlots.length > 0)\n      ? (\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead>Location</TableHead>\n              {slotCodeExists && <TableHead>Slot</TableHead>}\n              <TableHead>Format</TableHead>\n              {origins.length > 1 && <TableHead>Origin</TableHead>}\n              <TableHead>Render Status</TableHead>\n              <TableHead>Campaign ID</TableHead>\n              <TableHead>Booking ID</TableHead>\n              <TableHead>Creative ID</TableHead>\n              <TableHead>Traffic ID</TableHead>\n              <TableHead>Creative type</TableHead>\n              <TableHead>Impression tracked</TableHead>\n              <TableHead>Viewability tracked</TableHead>\n              {\n                slotParametersExist && <TableHead>Parameters</TableHead>\n              }\n              {\n                previewExist && <TableHead>Preview</TableHead>\n              }\n              <TableHead>Controls</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {formattedSlots.map(({\n              data,\n              name,\n              format,\n              location,\n              status,\n              isViewabilityTracked,\n              isImpressionTracked,\n              element,\n              parameters,\n              slot,\n              hijackedSlot,\n              originalSlot,\n            }, index) => (\n              <Fragment key={originalSlot.id}>\n                <TableRow id={name}>\n                  <TableCell className=\"font-medium\">\n                    <button\n                      onClick={() => {\n                        if (element) {\n                          element.scrollIntoView();\n                          element.style.outline = 'solid 5px red';\n\n                          setTimeout(() => {\n                            element.style.outline = '';\n                          }, 1000);\n                        }\n                      }}\n                      className=\"flex flex-col gap-1\"\n                    >\n                      <Badge className={cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], 'text-white')}>\n                        {name}\n                      </Badge>\n                      {hijackedSlot && <del className=\"text-xs text-muted-foreground\">{originalSlot.name}</del>}\n                    </button>\n                  </TableCell>\n                  <TableCell>{location}</TableCell>\n                  {slotCodeExists && <TableCell>{slot ?? ''}</TableCell>}\n                  <TableCell>\n                    {!data?.adFormat || data?.adFormat === format\n                      ? format\n                      : (\n                        <>\n                          <del className=\"text-red-300 italic\">{format}</del>\n                          <ins className=\"no-underline text-green-700\">{data?.adFormat}</ins>\n                        </>\n                        )}\n                  </TableCell>\n                  {origins.length > 1 && (\n                    <TableCell>\n                      {data?.origin && <Badge className={cn(slotIndexBadgeClasses[origins.indexOf(data.origin) % slotIndexBadgeClasses.length], 'text-white')}>{data.origin.toLowerCase()}</Badge>}\n                    </TableCell>\n                  )}\n                  <TableCell>\n                    <Badge variant=\"outline\" className={cn(status === 'error' ? 'bg-red-500 text-red-50' : '')}>\n                      {renderStatusMap[status]}\n                    </Badge>\n                  </TableCell>\n                  <TableCell>\n                    {data?.orderId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/editCampaign/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.orderId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.adspaceId && data?.adspaceId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/bookingDetail/${data.adspaceId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.adspaceId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.libId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/creativeDetail/${data.libId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.libId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>{data?.id ?? '-'}</TableCell>\n                  <TableCell>{data?.ext ? <Badge variant=\"outline\">{data.ext}</Badge> : '-'}</TableCell>\n                  <TableCell>\n                    {isImpressionTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  <TableCell>\n                    {isViewabilityTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  {\n                    slotParametersExist && (\n                      <TableCell>\n                        {\n                        parameters.length > 0 && (\n                          <Sheet>\n                            <SheetTrigger className={buttonVariants({\n                              variant: 'secondary',\n                              size: 'sm',\n                            })}\n                            >\n                              Show\n                            </SheetTrigger>\n                            <SheetContent className=\"bg-white flex flex-col gap-4\">\n                              <SheetHeader>\n                                <SheetTitle>\n                                  Parameters\n                                </SheetTitle>\n                              </SheetHeader>\n                              <Table>\n                                <TableHeader>\n                                  <TableRow>\n                                    <TableHead>Key</TableHead>\n                                    <TableHead>Value</TableHead>\n                                  </TableRow>\n                                </TableHeader>\n                                <TableBody>\n                                  {parameters.map(([parameterName, value]) => (\n                                    <TableRow key={parameterName}>\n                                      <TableCell>\n                                        <Badge variant=\"outline\">{parameterName}</Badge>\n                                      </TableCell>\n                                      <TableCell>\n                                        {\n                                          Array.isArray(value)\n                                            ? (\n                                              <ul className=\"flex gap-1\">\n                                                {value.map((item, paramIndex) => (\n                                                  <li key={paramIndex}>\n                                                    <Badge variant=\"outline\">{item}</Badge>\n                                                  </li>\n                                                ))}\n                                              </ul>\n                                              )\n                                            : <Badge variant=\"outline\">{value}</Badge>\n                                        }\n                                      </TableCell>\n                                    </TableRow>\n                                  ))}\n                                </TableBody>\n                              </Table>\n                            </SheetContent>\n                          </Sheet>\n                        )\n                      }\n                      </TableCell>\n                    )\n                  }\n                  {previewExist && (\n                    <TableCell>\n                      {data?.preview\n                      && (\n                        <Badge className=\"bg-amber-400 text-amber-950 hover:bg-amber-400\">\n                          PREVIEW\n                        </Badge>\n                      )}\n                    </TableCell>\n                  )}\n                  <TableCell className=\"flex gap-1\">\n                    <EditSlot id={originalSlot.id} />\n                    {modifiedSlots.slots.has(originalSlot.name) && (\n                      <Button\n                        onClick={\n                      () => {\n                        modifiedSlots.remove(originalSlot.name);\n                      }\n                    }\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        title=\"Reset\"\n                      >\n                        <ResetIcon />\n                      </Button>\n                    )}\n                  </TableCell>\n                </TableRow>\n              </Fragment>\n            ))}\n          </TableBody>\n        </Table>\n        )\n      : <p>No slots available</p>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}
+{"version":3,"file":"slotsTable.js","sources":["../../src/components/slotsTable.tsx"],"sourcesContent":["import { Fragment, type ReactElement, useEffect, useMemo, useState } from 'react';\nimport type { AdheseAd, AdheseSlot } from '@adhese/sdk';\nimport { type UnwrapRef, generateName, watch } from '@adhese/sdk-shared';\nimport { ResetIcon } from '@radix-ui/react-icons';\nimport { cn } from '../utils';\nimport { useAdheseContext } from '../AdheseContext';\nimport { useModifiedSlots } from '../modifiedSlots.store';\nimport type { DevtoolsSlotPluginOptions } from '../devtools.composables';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';\nimport { Badge } from './badge';\nimport { Button, buttonVariants } from './button';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from './sheet';\nimport { EditSlot } from './editSlot';\n\nexport const slotIndexBadgeClasses = [\n  'bg-blue-500 hover:bg-blue-500',\n  'bg-amber-500 hover:bg-amber-500',\n  'bg-green-500 hover:bg-green-500',\n  'bg-red-500 hover:bg-red-500',\n  'bg-purple-500 hover:bg-purple-500',\n  'bg-cyan-500 hover:bg-cyan-500',\n  'bg-pink-500 hover:bg-pink-500',\n] as const;\n\nconst renderStatusMap = {\n  initializing: 'Initializing',\n  initialized: 'Initialized',\n  loading: 'Loading',\n  loaded: 'Loaded',\n  rendering: 'Rendering',\n  rendered: 'Rendered',\n  empty: 'Empty',\n  error: 'Error',\n} as const satisfies Record<UnwrapRef<AdheseSlot['status']>, string>;\n\n// eslint-disable-next-line ts/naming-convention\nexport function SlotsTable(): ReactElement {\n  const [slots, setSlots] = useState<ReadonlyArray<AdheseSlot>>([]);\n\n  const adheseContext = useAdheseContext();\n\n  useEffect(() => {\n    if (!adheseContext)\n      return;\n\n    const disposeWatcher = watch(() => adheseContext.slots, (newSlots) => {\n      setSlots(Array.from(newSlots.values()));\n    }, { immediate: true, deep: true });\n\n    return (): void => {\n      disposeWatcher();\n    };\n  }, [adheseContext]);\n  const modifiedSlots = useModifiedSlots();\n\n  const formattedSlots = useMemo(() => slots\n    .filter(slot => !(slot.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot)\n    .map((slot) => {\n      const hijackedSlotOptions = modifiedSlots.slots.get(slot.name);\n      const hijackedSlot = (adheseContext && hijackedSlotOptions) && adheseContext.get?.(generateName(adheseContext.location, hijackedSlotOptions.format, hijackedSlotOptions.slot));\n\n      let interimSlot = hijackedSlot ?? slot;\n\n      if (interimSlot.data?.origin === 'DALE') {\n        // @ts-expect-error - Data structure is not typed and very messy to type\n        // eslint-disable-next-line ts/no-unsafe-member-access\n        const nestedAdheseData = interimSlot.data?.originData?.seatbid[0]?.bid[0]?.ext?.adhese as AdheseAd;\n\n        interimSlot = {\n          ...interimSlot,\n          data: {\n            ...interimSlot.data,\n            ...nestedAdheseData,\n          },\n        };\n      }\n\n      return ({\n        ...interimSlot,\n        parameters: Array.from((hijackedSlot ?? slot).parameters.entries()),\n        hijackedSlot,\n        originalSlot: slot,\n      });\n    })\n    .toSorted((a, b) => {\n      const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n      const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n      return offsetA - offsetB;\n    }), [slots]);\n\n  const slotParametersExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.parameters.length > 0), [formattedSlots]);\n  const previewExist = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.data?.preview), [formattedSlots]);\n  const slotCodeExists = useMemo(() => formattedSlots.some(formattedSlot => formattedSlot.slot), [formattedSlots]);\n\n  const origins: ReadonlyArray<string> = useMemo(() => {\n    const set = new Set<string>();\n\n    for (const slot of formattedSlots) {\n      const { data } = slot;\n\n      if (data)\n        set.add(data.origin);\n    }\n\n    return Array.from(set);\n  }, [formattedSlots]);\n\n  return (\n    adheseContext && (formattedSlots.length > 0)\n      ? (\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead>Location</TableHead>\n              {slotCodeExists && <TableHead>Slot</TableHead>}\n              <TableHead>Format</TableHead>\n              {origins.length > 1 && <TableHead>Origin</TableHead>}\n              <TableHead>Render Status</TableHead>\n              <TableHead>Campaign ID</TableHead>\n              <TableHead>Booking ID</TableHead>\n              <TableHead>Creative ID</TableHead>\n              <TableHead>Traffic ID</TableHead>\n              <TableHead>Creative type</TableHead>\n              <TableHead>Impression tracked</TableHead>\n              <TableHead>Viewability tracked</TableHead>\n              {\n                slotParametersExist && <TableHead>Parameters</TableHead>\n              }\n              {\n                previewExist && <TableHead>Preview</TableHead>\n              }\n              <TableHead>Controls</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {formattedSlots.map(({\n              data,\n              name,\n              format,\n              location,\n              status,\n              isViewabilityTracked,\n              isImpressionTracked,\n              element,\n              parameters,\n              slot,\n              hijackedSlot,\n              originalSlot,\n            }, index) => (\n              <Fragment key={originalSlot.id}>\n                <TableRow id={name}>\n                  <TableCell className=\"font-medium\">\n                    <button\n                      onClick={() => {\n                        if (element) {\n                          element.scrollIntoView();\n                          element.style.outline = 'solid 5px red';\n\n                          setTimeout(() => {\n                            element.style.outline = '';\n                          }, 1000);\n                        }\n                      }}\n                      className=\"flex flex-col gap-1\"\n                    >\n                      <Badge className={cn(slotIndexBadgeClasses[index % slotIndexBadgeClasses.length], 'text-white')}>\n                        {name}\n                      </Badge>\n                      {hijackedSlot && <del className=\"text-xs text-muted-foreground\">{originalSlot.name}</del>}\n                    </button>\n                  </TableCell>\n                  <TableCell>{location}</TableCell>\n                  {slotCodeExists && <TableCell>{slot ?? ''}</TableCell>}\n                  <TableCell>\n                    {!data?.adFormat || data?.adFormat === format\n                      ? format\n                      : (\n                        <>\n                          <del className=\"text-red-300 italic\">{format}</del>\n                          <ins className=\"no-underline text-green-700\">{data?.adFormat}</ins>\n                        </>\n                        )}\n                  </TableCell>\n                  {origins.length > 1 && (\n                    <TableCell>\n                      {data?.origin && <Badge className={cn(slotIndexBadgeClasses[origins.indexOf(data.origin) % slotIndexBadgeClasses.length], 'text-white')}>{data.origin.toLowerCase()}</Badge>}\n                    </TableCell>\n                  )}\n                  <TableCell>\n                    <Badge variant=\"outline\" className={cn(status === 'error' ? 'bg-red-500 text-red-50' : '')}>\n                      {renderStatusMap[status]}\n                    </Badge>\n                  </TableCell>\n                  <TableCell>\n                    {data?.orderId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/editCampaign/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.orderId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.adspaceId && data?.adspaceId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/bookingDetail/${data.adspaceId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.adspaceId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>\n                    {data?.libId && data?.orderId !== '0'\n                      ? (\n                        <a\n                          href={`https://${adheseContext.options.account}.adhese.org/campaigns.html#campaignDetail/creativeDetail/${data.libId}/${data.orderId}`}\n                          target=\"_blank\"\n                          referrerPolicy=\"no-referrer\"\n                          className={cn(buttonVariants({\n                            variant: 'ghost',\n                            size: 'sm',\n                          }))}\n                        >\n                          {data.libId}\n                        </a>\n                        )\n                      : '-'}\n                  </TableCell>\n                  <TableCell>{data?.id ?? '-'}</TableCell>\n                  <TableCell>{data?.ext ? <Badge variant=\"outline\">{data.ext}</Badge> : '-'}</TableCell>\n                  <TableCell>\n                    {isImpressionTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  <TableCell>\n                    {isViewabilityTracked\n                      ? <Badge className=\"bg-green-100 text-green-900 hover:bg-green-100\">Yes</Badge>\n                      : <Badge variant=\"secondary\">No</Badge>}\n                  </TableCell>\n                  {\n                    slotParametersExist && (\n                      <TableCell>\n                        {\n                        parameters.length > 0 && (\n                          <Sheet>\n                            <SheetTrigger className={buttonVariants({\n                              variant: 'secondary',\n                              size: 'sm',\n                            })}\n                            >\n                              Show\n                            </SheetTrigger>\n                            <SheetContent className=\"bg-white flex flex-col gap-4\">\n                              <SheetHeader>\n                                <SheetTitle>\n                                  Parameters\n                                </SheetTitle>\n                              </SheetHeader>\n                              <Table>\n                                <TableHeader>\n                                  <TableRow>\n                                    <TableHead>Key</TableHead>\n                                    <TableHead>Value</TableHead>\n                                  </TableRow>\n                                </TableHeader>\n                                <TableBody>\n                                  {parameters.map(([parameterName, value]) => (\n                                    <TableRow key={parameterName}>\n                                      <TableCell>\n                                        <Badge variant=\"outline\">{parameterName}</Badge>\n                                      </TableCell>\n                                      <TableCell>\n                                        {\n                                          Array.isArray(value)\n                                            ? (\n                                              <ul className=\"flex gap-1\">\n                                                {value.map((item, paramIndex) => (\n                                                  <li key={paramIndex}>\n                                                    <Badge variant=\"outline\">{item}</Badge>\n                                                  </li>\n                                                ))}\n                                              </ul>\n                                              )\n                                            : <Badge variant=\"outline\">{value}</Badge>\n                                        }\n                                      </TableCell>\n                                    </TableRow>\n                                  ))}\n                                </TableBody>\n                              </Table>\n                            </SheetContent>\n                          </Sheet>\n                        )\n                      }\n                      </TableCell>\n                    )\n                  }\n                  {previewExist && (\n                    <TableCell>\n                      {data?.preview\n                      && (\n                        <Badge className=\"bg-amber-400 text-amber-950 hover:bg-amber-400\">\n                          PREVIEW\n                        </Badge>\n                      )}\n                    </TableCell>\n                  )}\n                  <TableCell className=\"flex gap-1\">\n                    <EditSlot id={originalSlot.id} />\n                    {modifiedSlots.slots.has(originalSlot.name) && (\n                      <Button\n                        onClick={\n                      () => {\n                        modifiedSlots.remove(originalSlot.name);\n                      }\n                    }\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        title=\"Reset\"\n                      >\n                        <ResetIcon />\n                      </Button>\n                    )}\n                  </TableCell>\n                </TableRow>\n              </Fragment>\n            ))}\n          </TableBody>\n        </Table>\n        )\n      : <p>No slots available</p>\n  );\n}\n"],"names":["Fragment"],"mappings":"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"}

package/dist/devtools.composables.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from "react/jsx-runtime";
 import { watch, ref, computed, omit } from "@adhese/sdk-shared";
 function useDevtoolsUi(context, { onInit, onDispose }) {
   const wrapperElement = document.createElement("div");
@@ -109,8 +110,106 @@ function useModifiedSlotsHijack(context, { onSlotCreate }, logger) {
     })
   );
 }
+function useSlotBadge(context, hooks) {
+  const modifiedSlots = useModifiedSlots(context, hooks);
+  const sortedSlots = computed(() => Array.from(context.slots.values()).toSorted((a, b) => {
+    var _a, _b;
+    const offsetA = ((_a = a.element) == null ? void 0 : _a.getBoundingClientRect().top) ?? 0;
+    const offsetB = ((_b = b.element) == null ? void 0 : _b.getBoundingClientRect().top) ?? 0;
+    return offsetA - offsetB;
+  }));
+  hooks.onSlotCreate((slot) => ({
+    ...slot,
+    setup(slotContext, slotHooks) {
+      var _a;
+      (_a = slot.setup) == null ? void 0 : _a.call(slot, slotContext, slotHooks);
+      const element = ref(null);
+      async function renderBadges() {
+        var _a2, _b, _c, _d, _e, _f;
+        if (!slotContext.value || slotContext.value.renderMode === "none" || !context.debug || !slotContext.value.isVisible)
+          return;
+        const [
+          { renderToStaticMarkup },
+          // eslint-disable-next-line ts/naming-convention
+          { Badge },
+          { slotIndexBadgeClasses },
+          { cn }
+        ] = await Promise.all([
+          import("react-dom/server"),
+          import("./components/badge.js"),
+          import("./components/slotsTable.js"),
+          import("./utils.js")
+        ]);
+        const slotIndex = sortedSlots.value.filter(({ name }) => {
+          var _a3;
+          return !((_a3 = modifiedSlots.value) == null ? void 0 : _a3.slots.has(name));
+        }).findIndex(
+          ({ name }) => {
+            var _a3;
+            return name === ((_a3 = slotContext.value) == null ? void 0 : _a3.name);
+          }
+        );
+        const template = renderToStaticMarkup(
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex gap-1 flex-col pointer-events-none", children: [
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                className: cn("w-fit", slotIndexBadgeClasses[slotIndex % slotIndexBadgeClasses.length]),
+                children: (_a2 = slotContext.value) == null ? void 0 : _a2.name
+              }
+            ),
+            ((_d = modifiedSlots.value) == null ? void 0 : _d.slots.has(((_c = (_b = slotContext.value.pluginOptions) == null ? void 0 : _b.devtools) == null ? void 0 : _c.hijackedSlot) ?? "")) && /* @__PURE__ */ jsx(Badge, { className: "bg-red-500 w-fit", children: "EDITED IN DEVTOOLS" })
+          ] })
+        );
+        (_e = element.value) == null ? void 0 : _e.remove();
+        element.value = document.createElement("div");
+        (_f = slotContext.value.element) == null ? void 0 : _f.appendChild(element.value);
+        element.value.innerHTML = template;
+      }
+      slotHooks.onRender(async () => {
+        await renderBadges();
+      });
+      watch(() => context.slots, async () => {
+        await renderBadges();
+      }, { immediate: false, deep: true });
+      watch(() => context.debug, async (debug) => {
+        var _a2;
+        if (debug) {
+          await renderBadges();
+        } else {
+          (_a2 = element.value) == null ? void 0 : _a2.remove();
+        }
+      }, { immediate: true });
+    }
+  }));
+}
+function useModifiedSlots(context, { onInit, onDispose }) {
+  let disposeSub;
+  const state = ref(null);
+  async function initStore() {
+    const { modifiedSlotsStore: store } = await import("./modifiedSlots.store.js");
+    disposeSub = store.subscribe((newState) => {
+      state.value = newState;
+    });
+    state.value = store.getState();
+    return store;
+  }
+  onInit(async () => {
+    await initStore();
+  });
+  watch(() => context.debug, async (debug) => {
+    if (debug) {
+      await initStore();
+    }
+  }, { immediate: true });
+  onDispose(() => {
+    disposeSub == null ? void 0 : disposeSub();
+  });
+  return state;
+}
 export {
   useDevtoolsUi,
-  useModifiedSlotsHijack
+  useModifiedSlotsHijack,
+  useSlotBadge
 };
 //# sourceMappingURL=devtools.composables.js.map

package/dist/devtools.composables.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.composables.js","sources":["../src/devtools.composables.ts"],"sourcesContent":["import type { AdheseContext, AdhesePlugin, AdheseSlot } from '@adhese/sdk';\nimport { computed, omit, ref, type useLogger, watch } from '@adhese/sdk-shared';\nimport type { ModifiedSlotsStore, modifiedSlotsStore } from './modifiedSlots.store';\n\nexport type DevtoolsSlotPluginOptions = {\n  hijackedSlot?: string;\n};\n\nexport function useDevtoolsUi(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): void {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(() => {\n    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n      if (debug && !isDisposed) {\n        await initDevtools();\n\n        if (context.isDisposed)\n          dispose();\n      }\n      else {\n        dispose();\n      }\n    }, {\n      immediate: true,\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n}\n\nexport function useModifiedSlotsHijack(\n  context: AdheseContext,\n  { onSlotCreate }: Parameters<AdhesePlugin>[1]['hooks'],\n  logger: ReturnType<typeof useLogger>,\n): void {\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    return store;\n  }\n\n  onSlotCreate(slot =>\n    ({\n      ...slot,\n      setup(slotContext, slotHooks): void {\n        slot.setup?.(slotContext, slotHooks);\n\n        let store: typeof modifiedSlotsStore | undefined;\n        const state = ref<ModifiedSlotsStore | null>(null);\n        const hijackSlot = ref<AdheseSlot | null>(null);\n\n        const hijackSlotOptions = computed(() => (state.value ?? store?.getState())?.slots.get(slotContext.value?.name ?? ''));\n\n        let disposeSub: (() => void) | undefined;\n\n        async function createHijack(): Promise<void> {\n          if (context.debug && slotContext.value && slotContext.value.element) {\n            hijackSlot.value?.dispose();\n\n            if (hijackSlotOptions.value) {\n              slotContext.value.renderMode = 'none';\n\n              hijackSlot.value = context.addSlot?.({\n                ...omit(slotContext.value.options, ['setup']),\n                ...hijackSlotOptions.value,\n                containingElement: slotContext.value.element,\n                lazyLoading: false,\n                lazyLoadingOptions: undefined,\n                pluginOptions: {\n                  devtools: {\n                    hijackedSlot: slotContext.value.name,\n                  } satisfies DevtoolsSlotPluginOptions,\n                },\n              }) ?? null;\n\n              logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${hijackSlot.value?.name}`);\n\n              await hijackSlot.value?.render();\n            }\n            else {\n              slotContext.value.renderMode = slotContext.value.options.renderMode ?? 'iframe';\n\n              hijackSlot.value?.dispose();\n              hijackSlot.value = null;\n\n              await slotContext.value.render();\n            }\n          }\n        }\n\n        slotHooks.onInit(async () => {\n          if (context.debug && slotContext.value) {\n            store = await initStore();\n\n            disposeSub = store.subscribe((newState) => {\n              state.value = newState;\n            });\n\n            state.value = store.getState();\n\n            await createHijack();\n          }\n        });\n\n        slotHooks.onRender(async () => {\n          if (hijackSlot.value) {\n            await hijackSlot.value.render();\n          }\n        });\n\n        watch(state, async () => {\n          await createHijack();\n        }, { immediate: true });\n\n        watch(() => context.debug, async (debug) => {\n          if (!debug)\n            hijackSlot.value?.dispose();\n        });\n\n        slotHooks.onDispose(() => {\n          disposeSub?.();\n          hijackSlot.value?.dispose();\n        });\n      },\n    }),\n  );\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"devtools.composables.js","sources":["../src/devtools.composables.tsx"],"sourcesContent":["import type { AdheseContext, AdhesePlugin, AdheseSlot } from '@adhese/sdk';\nimport { type Ref, computed, omit, ref, type useLogger, watch } from '@adhese/sdk-shared';\nimport type { ModifiedSlotsStore, modifiedSlotsStore } from './modifiedSlots.store';\n\nexport type DevtoolsSlotPluginOptions = {\n  hijackedSlot?: string;\n};\n\nexport function useDevtoolsUi(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): void {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(() => {\n    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n      if (debug && !isDisposed) {\n        await initDevtools();\n\n        if (context.isDisposed)\n          dispose();\n      }\n      else {\n        dispose();\n      }\n    }, {\n      immediate: true,\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n}\n\nexport function useModifiedSlotsHijack(\n  context: AdheseContext,\n  { onSlotCreate }: Parameters<AdhesePlugin>[1]['hooks'],\n  logger: ReturnType<typeof useLogger>,\n): void {\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    return store;\n  }\n\n  onSlotCreate(slot =>\n    ({\n      ...slot,\n      setup(slotContext, slotHooks): void {\n        slot.setup?.(slotContext, slotHooks);\n\n        let store: typeof modifiedSlotsStore | undefined;\n        const state = ref<ModifiedSlotsStore | null>(null);\n        const hijackSlot = ref<AdheseSlot | null>(null);\n\n        const hijackSlotOptions = computed(() => (state.value ?? store?.getState())?.slots.get(slotContext.value?.name ?? ''));\n\n        let disposeSub: (() => void) | undefined;\n\n        async function createHijack(): Promise<void> {\n          if (context.debug && slotContext.value && slotContext.value.element) {\n            hijackSlot.value?.dispose();\n\n            if (hijackSlotOptions.value) {\n              slotContext.value.renderMode = 'none';\n\n              hijackSlot.value = context.addSlot?.({\n                ...omit(slotContext.value.options, ['setup']),\n                ...hijackSlotOptions.value,\n                containingElement: slotContext.value.element,\n                lazyLoading: false,\n                lazyLoadingOptions: undefined,\n                pluginOptions: {\n                  devtools: {\n                    hijackedSlot: slotContext.value.name,\n                  } satisfies DevtoolsSlotPluginOptions,\n                },\n              }) ?? null;\n\n              logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${hijackSlot.value?.name}`);\n\n              await hijackSlot.value?.render();\n            }\n            else {\n              slotContext.value.renderMode = slotContext.value.options.renderMode ?? 'iframe';\n\n              hijackSlot.value?.dispose();\n              hijackSlot.value = null;\n\n              await slotContext.value.render();\n            }\n          }\n        }\n\n        slotHooks.onInit(async () => {\n          if (context.debug && slotContext.value) {\n            store = await initStore();\n\n            disposeSub = store.subscribe((newState) => {\n              state.value = newState;\n            });\n\n            state.value = store.getState();\n\n            await createHijack();\n          }\n        });\n\n        slotHooks.onRender(async () => {\n          if (hijackSlot.value) {\n            await hijackSlot.value.render();\n          }\n        });\n\n        watch(state, async () => {\n          await createHijack();\n        }, { immediate: true });\n\n        watch(() => context.debug, async (debug) => {\n          if (!debug)\n            hijackSlot.value?.dispose();\n        });\n\n        slotHooks.onDispose(() => {\n          disposeSub?.();\n          hijackSlot.value?.dispose();\n        });\n      },\n    }),\n  );\n}\n\nexport function useSlotBadge(\n  context: AdheseContext,\n  hooks: Parameters<AdhesePlugin>[1]['hooks'],\n): void {\n  const modifiedSlots = useModifiedSlots(context, hooks);\n\n  const sortedSlots = computed(() => Array.from(context.slots.values()).toSorted((a, b) => {\n    const offsetA = a.element?.getBoundingClientRect().top ?? 0;\n    const offsetB = b.element?.getBoundingClientRect().top ?? 0;\n\n    return offsetA - offsetB;\n  }));\n\n  hooks.onSlotCreate(slot => ({\n    ...slot,\n    setup(slotContext, slotHooks): void {\n      slot.setup?.(slotContext, slotHooks);\n\n      const element = ref<HTMLElement | null>(null);\n\n      async function renderBadges(): Promise<void> {\n        if (!slotContext.value || slotContext.value.renderMode === 'none' || !context.debug || !slotContext.value.isVisible)\n          return;\n\n        const [\n          { renderToStaticMarkup },\n          // eslint-disable-next-line ts/naming-convention\n          { Badge },\n          { slotIndexBadgeClasses },\n          { cn },\n        ] = await Promise.all([\n          import('react-dom/server'),\n          import('./components/badge'),\n          import('./components/slotsTable'),\n          import('./utils'),\n        ]);\n\n        const slotIndex = sortedSlots.value\n          .filter(({ name }) => !modifiedSlots.value?.slots.has(name))\n          .findIndex(({ name }) => name === slotContext.value?.name,\n          );\n\n        const template = renderToStaticMarkup(\n          <div className=\"absolute top-0 flex gap-1 flex-col pointer-events-none\">\n            <Badge\n              className={cn('w-fit', slotIndexBadgeClasses[slotIndex % slotIndexBadgeClasses.length])}\n            >\n              {slotContext.value?.name}\n            </Badge>\n            {modifiedSlots.value?.slots.has((slotContext.value.pluginOptions?.devtools as DevtoolsSlotPluginOptions)?.hijackedSlot ?? '') && <Badge className=\"bg-red-500 w-fit\">EDITED IN DEVTOOLS</Badge>}\n          </div>,\n        );\n\n        element.value?.remove();\n        element.value = document.createElement('div');\n        slotContext.value.element?.appendChild(element.value);\n\n        element.value.innerHTML = template;\n      }\n\n      slotHooks.onRender(async () => {\n        await renderBadges();\n      });\n\n      watch(() => context.slots, async () => {\n        await renderBadges();\n      }, { immediate: false, deep: true });\n\n      watch(() => context.debug, async (debug) => {\n        if (debug) {\n          await renderBadges();\n        }\n        else {\n          element.value?.remove();\n        }\n      }, { immediate: true });\n    },\n  }));\n}\n\nfunction useModifiedSlots(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): Ref<ModifiedSlotsStore | null> {\n  let disposeSub: (() => void) | undefined;\n  const state = ref<ModifiedSlotsStore | null>(null);\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    disposeSub = store.subscribe((newState) => {\n      state.value = newState;\n    });\n\n    state.value = store.getState();\n\n    return store;\n  }\n\n  onInit(async () => {\n    await initStore();\n  });\n\n  watch(() => context.debug, async (debug) => {\n    if (debug) {\n      await initStore();\n    }\n  }, { immediate: true });\n\n  onDispose(() => {\n    disposeSub?.();\n  });\n\n  return state;\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/package.json.js

@@ -1,5 +1,5 @@
 const name = "@adhese/sdk-devtools";
-const version = "0.12.1";
+const version = "1.0.0";
 export {
   name,
   version

package/dist/sdkDevtools.js

@@ -1,12 +1,13 @@
 import { useLogger } from "@adhese/sdk-shared";
 import { name, version } from "./package.json.js";
-import { useDevtoolsUi, useModifiedSlotsHijack } from "./devtools.composables.js";
+import { useDevtoolsUi, useModifiedSlotsHijack, useSlotBadge } from "./devtools.composables.js";
 const devtoolsPlugin = (context, plugin) => {
   const logger = useLogger({
     scope: `${name}@${version}`
   }, { context, plugin });
   useDevtoolsUi(context, plugin.hooks);
   useModifiedSlotsHijack(context, plugin.hooks, logger);
+  useSlotBadge(context, plugin.hooks);
   return {
     name: "devtools"
   };

package/dist/sdkDevtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdkDevtools.js","sources":["../src/sdkDevtools.ts"],"sourcesContent":["import type { AdhesePlugin } from '@adhese/sdk';\nimport { useLogger } from '@adhese/sdk-shared';\nimport { name, version } from '../package.json';\nimport { useDevtoolsUi, useModifiedSlotsHijack } from './devtools.composables';\n\nexport type { DevtoolsSlotPluginOptions } from './devtools.composables';\n\nexport const devtoolsPlugin: AdhesePlugin<{\n  name: 'devtools';\n}> = (context, plugin) => {\n  const logger = useLogger({\n    scope: `${name}@${version}`,\n  }, { context, plugin });\n\n  useDevtoolsUi(context, plugin.hooks);\n\n  useModifiedSlotsHijack(context, plugin.hooks, logger);\n\n  return {\n    name: 'devtools',\n  };\n};\n"],"names":[],"mappings":";;;AAOa,MAAA,iBAER,CAAC,SAAS,WAAW;AACxB,QAAM,SAAS,UAAU;AAAA,IACvB,OAAO,GAAG,IAAI,IAAI,OAAO;AAAA,EAAA,GACxB,EAAE,SAAS,OAAA,CAAQ;AAER,gBAAA,SAAS,OAAO,KAAK;AAEZ,yBAAA,SAAS,OAAO,OAAO,MAAM;AAE7C,SAAA;AAAA,IACL,MAAM;AAAA,EAAA;AAEV;"}
+{"version":3,"file":"sdkDevtools.js","sources":["../src/sdkDevtools.ts"],"sourcesContent":["import type { AdhesePlugin } from '@adhese/sdk';\nimport { useLogger } from '@adhese/sdk-shared';\nimport { name, version } from '../package.json';\nimport { useDevtoolsUi, useModifiedSlotsHijack, useSlotBadge } from './devtools.composables';\n\nexport type { DevtoolsSlotPluginOptions } from './devtools.composables';\n\nexport const devtoolsPlugin: AdhesePlugin<{\n  name: 'devtools';\n}> = (context, plugin) => {\n  const logger = useLogger({\n    scope: `${name}@${version}`,\n  }, { context, plugin });\n\n  useDevtoolsUi(context, plugin.hooks);\n\n  useModifiedSlotsHijack(context, plugin.hooks, logger);\n\n  useSlotBadge(context, plugin.hooks);\n\n  return {\n    name: 'devtools',\n  };\n};\n"],"names":[],"mappings":";;;AAOa,MAAA,iBAER,CAAC,SAAS,WAAW;AACxB,QAAM,SAAS,UAAU;AAAA,IACvB,OAAO,GAAG,IAAI,IAAI,OAAO;AAAA,EAAA,GACxB,EAAE,SAAS,OAAA,CAAQ;AAER,gBAAA,SAAS,OAAO,KAAK;AAEZ,yBAAA,SAAS,OAAO,OAAO,MAAM;AAEvC,eAAA,SAAS,OAAO,KAAK;AAE3B,SAAA;AAAA,IACL,MAAM;AAAA,EAAA;AAEV;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adhese/sdk-devtools",
   "type": "module",
-  "version": "0.12.1",
+  "version": "1.0.0",
   "description": "Adhese SDK Devtools",
   "license": "GPL-3.0",
   "repository": {
@@ -26,13 +26,13 @@
     "prepareRelease": "npm run build"
   },
   "peerDependencies": {
-    "@adhese/sdk": ">= 0.19 < 1",
+    "@adhese/sdk": ">=1.0.0",
     "react": ">=16.13",
     "react-dom": ">=16.13"
   },
   "dependencies": {
-    "@adhese/sdk-shared": "^0.10.0",
-    "@hookform/resolvers": "^3.4.2",
+    "@adhese/sdk-shared": "^1.0.0",
+    "@hookform/resolvers": "^3.5.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",